【学習準備】プログラミング入門【環境構築】

学習の必要な準備や基本的なツールの使い方、基礎文法などを説明します。

プログラミング世界の基本

何かしらのプログラミング言語を学んだ人は知っているでしょうが、知らない人のために基本的な説明をしておきます。

うまくいかなくても自分の責任だと思わなくていい

自分の能力不足だと思うとモチベーションが下がり、うまくいくまでストレスがたまります。当然、やめたくなるので、自分のせいだとは考えないほうがいいです。

そんなときは「何か気付いていないか、単に知らないことがあるだけだ」と思って、保留しておけばいいです。

経験を積んでいけばいろいろな解決策が思いつくようになりますが、初心者が思いつけないのは仕方のないことです。

解決策は次の項目で説明するので、うまくいかないときは何度も読み直して試してください。

自分で解決しようとすることも大切ですが、そのときの自分にできる対処法をすべて試し終わったなら、それ以上取り組んでも解決できる可能性は低いです。

いったん保留しておて、後で冷静に問題を切り分けて解決できればいいと思っておくくらいでちょうどいいです。

取り組む目安は15分です。それ以上は時間の無駄なので他のやるべきことをやりましょう。

仕事の場合は仕方ないので、同僚や先輩、リーダーなどに相談してみましょう。まれにできないことを要求されていることもあります。相談や確認は大切です。

仕事では何時間も悩んで作業が止まってしまうことのほうが大きな問題なので、うまくいかないときは早めに相談することが大切です。

うまくいかないときの解決策

上から優先順で上げているので上から試してみてください。ポイントはChatGPTやPerplexityなどのチャットAIの活用にあります。

現状確認、AI対策案の提示、対策の正しさの確認、代案の提示などにAIが使えます。うまく使えば関数やクラスなどを作らせることもできます。

最初は自分が思った通りのことをAIに質問するので問題ありません。

「この言語で次のコードを実行したらこのエラーメッセージが出たがどうしたらいいか？」くらいの質問でも答えてくれるので何でも聞いてみましょう。

AIの回答で分からない言葉が出てきたら、自己学習のチャンスです。それをまたAIに質問したり、説明記事を読んで理解しスキルアップしていきましょう。

AIの落とし穴は、ハルシネーションといって間違った回答をすることがあることです。AI自体を疑う目を持つことが大切です。

環境構築は経験者でもつまずくと時間がかかる

公式サイトの説明を見ながらやってもうまくいかないこともあるでしょう。他の説明記事を見てやってもバージョンが違うなどの理由でうまくいかないことがあります。

初心者がうまくいかなくなったときは、アンインストールして全部最初からやり直すのがおすすめです。

実は経験者でも最初からやり直すことはそれなりにあります。インストールすると元の環境を上書きしてしまうので、他に元に戻す方法がなくなることがあるからです。

経験者なら原因を特定できるでしょうが、特定できなくても怪しいときは最初から全部やり直したほうが早いこともあります。

環境構築がうまくいかず、エラーになったり、正常に動作しないときは、最悪、最初からやり直せばいいと覚えておいてください。

知識の獲得やスキルアップは喜び

学習は、知的好奇心や小さな達成感を満たし、学習者に喜びや知的快感を与えるものだと考えると良いです。

学習ではよく分からずつまずくことが多くなるでしょう。それでも、学習自体が喜びだと考えられるようになれば、学習効率が上がり、続けやすくなります。

初心者は入門書レベルで十分

初心者から新人エンジニアレベルでは、知識の量よりも、解決速度が速いことのほうが重要です。そのほうが人材としての評価も高くなります。

言語を完全にマスターしようとすると膨大な時間がかかるうえに、すべての技術をまんべんなく使う機会はまずありません。

また案件の要件や言語の流行りすたりがあるので、同じ言語を使い続けられるとも限りません。

初心者なら入門書レベルを理解したらあとは必要に応じて調べたり学習したりすれば十分です。

もちろん深い知識が必要な場合は公式ドキュメントや中上級レベルの書籍などを調べたり学ぶ必要があります。

そのときは目的が達成できるまでしっかり学んでください。

標準的なルール

• 加減乗除はそれぞれ +, -, *, / で表す
• べき乗は[数値**数値]で表す、例：2**3は2の3乗
• %は剰余算の意味で A％B なら A を B で割った余りを返す
• i=i+1 を i+=1 と書いても同じ処理になる(-,*./,%などでもほぼ使える)
• ゼロオリジン：データの開始はゼロになるルール、配列ゼロ番目が常識的な1番目になる(例:文字列を入れた変数strならstr[0]が最初の1番目のデータを表す)
• bool型(ブーリアン)：true(1,真) or false(0,偽) の真偽値を表す変数の型
• 変数名＋[数字]でデータのまとまった配列(アレイ,リスト)データを表す
• カレントディレトリにファイルを置けばパスを通さなくても認識される

標準的な略語や英名

• array：配列、リスト
• def[define]：定義
• idx[index]：インデックス
• list：リスト、配列
• str[strings]：文字列
• num[number]：数値
• var[variable]：変数

エスケープシーケンス

改行やタブなどを文字列で扱うときに使う制御コードのことです。Windowsでは「\」、Macやリナックスではバックスラッシュとアルファベットや数字を合わせて表現します。

エスケープ文字とも呼びます。

自然発生的なルール

プログラミングの世界には、守らなくてもエラーにはならないが、よく使われる習慣的なルールがあります。

・最初の出力テストは「Hello World」という文字列を使う
B言語の説明で使われ、その後、書籍『C言語プログラミング』でも使われ定着したと言われる定番ルール。もちろん他の文字列でも問題はない。

・FizzBussという文字列
海外でダミー文字列としてよく使われる。日本では hogehoge に当たる(と思う)。

コーディング/開発の基本

基礎知識を学んで、あるいは学びつつ動作するプログラムを作るときは、最低限の動作確認ができる小さな処理から作ると作りやすいです。

いろいろな処理をたくさん作った後に、一気につなげて完成させるのではなく、動作確認できる最小機能を作り、そこに処理を追加していったほうが、安全確実なプロダクト開発ができます。

何かの機能を持つプログラムを作成することは、プログラミング学習で大事な第2ステップですので、基礎を学習した後は、ぜひ取り組んでください。

文字や画面が見にくい場合

フォントサイズを変更したり、エディター画面を分割するなど、見やすくする方法があるので探してください。

タッチタイピング/ブラインドタッチ

キーボードを見ないで入力できるデスクワークの必須スキルです。

キー入力での首や手が疲れにくくなるので早めにできるようにしておいたほうがいいです。

左右の人差し指をF/Jキーに置くホームポジションを起点に指とキーの位置関係からキーの位置を覚えます。

タイピングソフトで毎日練習すれば2～3週間で身に着くでしょう。ポイントは打ち間違えてもキーを見ないで入力を続けることです。

見ないで打っていれば、タイピングソフトで練習しなくても自然に身に着くでしょう。

オブジェクト指向でプログラミングすべきか

オブジェクト指向の言語ならそうしたほうが、VSCode などの開発ツールでアウトラインが見やすくなるなどのメリットがあります。

オブジェクト指向プログラミングのメリットは再利用性や保守性が上がることです。

同じ処理を何度も使ったり、オブジェクト内のスコープで安全に変数にアクセスできたりします。

初めから意識する必要はあませんが、基礎が学べたら自分の目的に合わせて挑戦していってください。

仕事でオブジェクト指向の言語を使う場合は、プロダクトがオブジェクト指向で実装されているはずです。

処理や変数の大部分をオブジェクトに実装するオブジェクト指向の開発手法も使いこなしていきましょう。

Python

プログラミング入門や環境構築法を次の記事にまとめてあります。

HTML/CSS/JavaScript

プログラミング入門としては、Webページがhtmlで書かれた言語であり、CCSがhtmlのデザインを装飾する言語くらいまで理解しておけばいいでしょう。

JavaScriptの理解はWebフロントエンジニアを目指すなら必須になりますが、それ以外の人は必要に応じて調べて理解していくくらいでいいでしょう。

エンジニアの技術は大量かつ多岐に渡るので全部理解するのは無理です。必要な技術を最低限の理解で進めていくショートカット思考が大切です。

言語やフレームワークの変化は早く、細かい技術知識はすぐに使えなくなる恐れがあるので、本質的な技術概念を理解しておけば十分です。

JavaScriptでは、古い歴史を持つJQueryやReact、Vue.js、Angularなどのフレームワークが人気です。

基礎学習には無料でコードの動作確認ができる次のサイトが便利です。

参考：CodePen – Online Code Editor and Front End Web Developer Community
URL：https://codepen.io/

JavaScript

JavaScriptはプログラミング言語の仕様や、これを元に実装されたJavaScriptエンジンのことを指します。

そのエンジン上で動作するのが、Node.jsなどのJavaScriptの仕様を満たした実行環境(ランタイム)です。

簡単な実行確認には code pen を使うと楽ですが、エンジニアとして開発を続けていくならVSCodeなどのツールから実行しておいたほうが便利でしょう。

文法や構文はこちらで説明しています。

あわせて読みたい

【JavaScript入門】ザックリ知っておきたい基本 どこまで学べばいいか分からないという JavaScript 初心者に向けて、だいたいこれくらい知っておけばいいだろうという、ほどよいレベルの解説を心がけて書いたのがこの...

Node.jsのインストール

・本体のダウンロード⇒公式インストーラー
LTS(安定板)推奨
node -v でバージョンが表示されればインストール成功

・バージョン管理ツールのダウンロード⇒nvm-windows
他のツールもあるが2024年現在ではnvm推奨
nvm version でバージョンが表示されればインストール成功

Node.jsはChromeやFirefoxなどのブラウザやサーバーサイドで動作するメジャーな実行環境なので、JavaScriptの入門にはうってつけです。

環境構築はOSにNode.jsをインストールして、VSCodeから実行できるようにすればいいでしょう。

VSCode(Visual Studio Code)

主要プログラミング言語に対応したコード編集と処理実行ができる統合開発ツールです。目的(プロジェクト)ごとにワークスペースを作って開発します。VSCやVSCode(ブイエスコード)と略します。

ワークスペースの作り方

メインの作業場所となるワークスペースはファイルメニューから直接作ることができません。

まず、ファイルメニューから「フォルダーを開く」を選択し、フォルダーを選んだ後に、ファイルメニューから「名前を付けてワークスペースを保存」を選ぶと作成されたものが保存されます。

作業再開は「ファイルでワークスペースを開く」から code-workspace ファイルを開きます。

ブラウザ版 Visual Studio Code

Web上で使えるバージョンが公開されています。試してみたいときやPCにインストールしたくないときには使ってみてください。

PCへの負荷が軽いはずなので、PCが処理過剰(リソース不足)で遅くなっているときにもいいかもしれません。

参考：ブラウザ版 Visual Studio Code
URL：https://vscode.dev/

便利な拡張機能

VSCodeは言語や開発に必要な拡張機能をインストールして使うのが基本です。

日本語化：Japanese Language Pack
初心者はとりあえず入れておきましょう。意識高い系の人なら英語のままにして、英語に慣れておくという手もあります。

アイコンのデザイン変更：vscode-icons
ファイルアイコンなどを見やすいデザインに変えてくれます。

スペルチェッカー：Code Spell Checker
スペルミスを視覚的に知らせてくれます。他の保管機能でもエラーなどを警告してくれるので邪魔になってきたら無効化してもいいです。

行末のスペースチェッカー：Trailing Spaces
行末にスペースがあることを知らせてくれます。言語によっては動作がおかしくなる恐れがあるので入れておいてもいいです。

HTMLタグの補完：Aute Rename
タグを書くと同時に閉じタグを保管してくれます。HTMLを編集する機会が多いWebエンジニアやデザイナーにおすすめ。

HTMLの表示確認：Live Server
編集中のHTMLをブラウザで表示するリンクが表示され、ブラウザを更新しなくても編集内容を反映してくれます。

拡張機能の注意

インストール後にVSCodeを再起動しないと動作しないものも多いです。動作していないようなら再起動しましょう。

これはアンインストール後も同じなので、動作がおかしいときは再起動しましょう。日本語化したのに英語表示に戻ったりすることがあります。

拡張機能の中には他の拡張機能と相性の悪いものや、不具合が出るものがあります。

インストールしてVSCodeの動作がおかしくなったときは、次に説明するキャッシュのクリアを試し、うまくいかないならアンインストールも考えてみてください。

VSCodeは無料ツールですし、拡張機能が誰でも作れる分、動作に不安定なところがあります。

VSCodeがおかしいときはキャッシュをクリア

VSCodeの起動が遅いときや、表示や動作がおかしいときはキャッシュをクリアすると解決することがあります。

拡張機能が正しく動かないときに試してみてください。

VSCodeの設定

いろいろあるので必要に応じて調べてみてください。

私が使っているバージョン1.83でのおすすめ設定は次です。この他はデフォルトにしています。

自動保存はコード実行とタイミングがかぶったりすると邪魔なのでOFにします。

行の折り返しは、使っているモニターの大きさにもよりますが、ウィンドウを分割したときに行末が隠れてしまうので入れておくと便利です。

Pythonなどのインデントに厳しい言語ならOFFのほうがやりやすいかもしれません。

フォントは全角半角の表示サイズが決まっている固定フォントで人気のRictyにしています。コードの長さでも数が見分けられるコーディングの定番です。

便利なショートカットキー

初心者はVSCに慣れたころに、またこれらのショートカットキーを確認すれば便利なことが分かるはずです。

基本的なコピペなどは他のアプリと同じで、Shiftで逆になるものがあることも同じです。

WindowsのCtrl/Altキーで表記しているので、MacではComand(⌘)/Option(⌥)キーと読み替えてください。

また、こちらもVSCバージョン1.83の仕様です。

便利な編集機能

検索と置換
単語などを選択してCtrl＋Fで検索タブ開くことで、そこから検索と置換が行えます。
検索ウィンドウの「Aa」は大文字小文字の区別、「ab」は完全一致が部分一致か選ぶ選択肢になっています。一番右の「.*」は正規表現を使うかどうか選ぶ設定です。正規表現を理解していない人はさしあたり使わなくても問題ありません。
「? of 数字」はファイル内全体でのヒット数です。
置換はタブの左側の「＞」記号押下で可能になり、「AB」はアルファベットで置換したときに大文字小文字を合わせる設定です。
その右にある「Replace」が選択部分のみ、さらに右の「Replace All」がファイル内全体の全置換をする設定です。
置換文字列を空にすれば、検索単語を削除することもできます。

マルチカーソル
Ctrl＋Alt＋↑↓で複数行にカーソルをセットすることができ、入力や削除などを複数行に対して同時に行えます。

複数行のインデント増減
複数行を選択しTabを押すと複数行へのタブの追加、Shift＋Tabでタブの削除ができます。

VSCodeのカスタマイズ

小さいモニターではエディターの表示領域が狭く不便です。そこでコードの右に表示されるミニマップを非表示にすると表示が増えて使いやすくなります。

他にも非表示にしたり、エディターの表示範囲を広くする方法はあるので気になる人は探してみてください。

ミニマップを消す

エディターの右側に表示されているのがミニマップです。コードの外観が表示されるので、スライダーで移動するときには便利そうです。

ですが、別に表示されなくても問題ないですし、エディターを分割したときに画面が狭くなるので邪魔なことが多いでしょう。

次の手順で非表示にできます。

設定 ⇒ editor.minimap.enabledで検索 ⇒ チェックを外す

Git/GitHub

このツールは初心者がプログラミングを学ぶだけなら、使わなくても大丈夫です。

使うべきケースは、長期的にソースコードを管理したり、会社の業務効率化用のプログラムを管理するなどの場合です。

職業エンジニアを目指す人や、プログラミング副業にはほぼ必須になります。

言語を理解して自分でテストプロダクトを作成するくらいのタイミングで、実際に使って使いかたを学んでおいたほうがいいです。

GitHubは業界標準のソースコード(プログラミングを書いたファイル)などをバージョン管理(世代管理)できるWebサービスです。

リポジトリというWeb上のデータスペース(データ置き場)にデータのバックアップを置いたり、他の人とファイル共有することができます。

バージョン管理は過去の状態を保存しておき、元に戻したり、差分を確認するための機能です。

Git自体は、ローカルPCにGitをインストールして、Web上のGitHubのリポジトリと連携して使います。

Web上に正式なデータやバックアップを置いて、開発はローカルPCで行うという開発スタイルになります。

操作は基本的にコンソール(プロンプト/シェル)から行いますが、VSCode からも主な操作を行うことができます。

VSCodeからGitHubを使う

VSCode(VSC) にはGitHubと連携できる拡張機能があり、VSCode からGitHubへアクセスしファイルのアップロードなどを実行することができます。

細かい操作は行えませんが、主な操作はおおむね行うことができます。

VSCodeで使うための環境構築

手順

これら1～4までは説明記事があるので検索し、最新の内容をチェックするのがおすすめです。

参考：Gitのインストール方法(Windows版) #Git – Qiita
URL：https://qiita.com/T-H9703EnAc/items/4fbe6593d42f9a844b1c

初回は「git config」コマンドでユーザーIDとメールアドレスを登録したり、sshキーを作ったりする必要があるので、お忘れなく。

これでネット経由でリモートリポジトリとローカルPC間のデータやり取りができるようになります。

注意

Gitインストーラーは多くはデフォルト設定で問題ありません。ですが、変えてもいいところを説明しておきます。

これはチェックアウト/コミット時に改行を自動変換するかどうかという設定です。

自動変換すると意図しない動作をする恐れがあります。一番下の「Checkout as-is, commit as-is(変換しない)」を設定しておいたほうが無難です。

これはまだテストが不十分な状態にある機能(Configuring experimental options)の選択肢です。

便利そうですが、不具合があったときに、初心者では対応が難しいので、デフォルトのままどちらもチェックしないでおくのがおすすめです。

「Install」ボタンを押すとインストールが開始します。

終了したら、PowerShellやBashなどのコンソールで「git –version」を実行し、バージョンが表示されればインストール成功です。

基本説明

簡単に説明しておくと、GitHubはリポジトリというデータの本体をWeb上において、それをローカルPCにコピーしてコード編集などの作業を行う仕組みになっています。

コーディングのきりのいいところで、Web上のリポジトリにアップロードして保存していく流れになります。

アップロードしたときのコードが保存され、その状態を復元したり、比較したりできます。

個人開発で使うと、ただのバックアップツールのようですが、GitHubが真価を発揮するのはチーム開発や他人とソースコードの共有などにあります。

VSCodeとGitHubの連携方法

1のVSCodeの拡張機能は、次のものを入れておけばいいでしょう。

3のGitHubへのログインは、VSCode の左サイドバーのアカウントアイコンからGitHubへのサインインを選んで行います。

クリックするとブラウザでGitHubの確認ページが表示されるので操作して VSCode を開きます。

設定などで同期が必要なときにはアイコンの上に数字で通知されるので、クリックしてサインインします。

6のステージングはVSCodeの左メニューアイコンにある「ソース管理」でタブを切り替え、変更したファイルを右クリックし「変更をステージ」を選択します。

この「変更をステージ」とは変更されたファイルすべてをひとつのセットにして一度に同期する仕組みです。これをステージングといいます。

（ステージングをしなくてもコミットできるので必須ではありません。）

そうするとコミット対象にリストアップされるので、変更内容を上のメッセージボックスに記入します。そして、その下の「コミット」ボタンを押すとローカルのGitでの変更が完了します。

その後、「変更の同期」を押すと変更内容がリモートリポジトリに反映されます。最初は念のためGitHubサイトでも変更されているか確認しておきましょう。

ファイルの追加と削除

GitHubサイト、VSCode、コンソールからできます。どこからやっても結果は同じですが、ファイルの削除はGitHubサイトから行った方が分かりやすいでしょう。

GitHubサイトから削除する方法は、リポジトリのCodeタブからファイルを選択し、「…」アイコンから「Delete File」を選択します。

リポジトリで管理する必要はなくても、開発に必要になるファイルやフォルダも出てくることがあります。

そんなときは後述の「GitHubで管理しないファイルの指定」の項目で説明している「.gitignore」ファイルに指定することで、変更を管理しないことをGitHub系拡張機能に認識させておきましょう。

別のアカウントに変える方法

VSCodeでGitHubアカウントを切り替える方法を説明します。

3の資格情報の削除は、今はやらなくてもよくなっているかもしれません。

左メニュー「アカウント」で「UserName(GitHub)」が変わっていれば変更完了です。

別アカウントに変えても元のアカウントでコミットされる場合

アカウント認証関連のキャッシュが残っているとアカウントを切り替えても元のアカウントでコミットされることがあります。

これは次で説明しているキャッシュのクリアで解決できます。

GitHubで管理しないファイルの指定

「.gitignore」というファイルにファイルやフォルダのパスを指定することで、管理しないファイルを指定できます。

リポジトリに「.gitignore」がないときは新しいファイルを作成し「.gitignore」と名付ければ使えるようになります。

書き方は1行ずつ相対パスで記述し、フォルダは「/」で囲みます。また正規表現の「*」を使えばフォルダ配下のファイルすべてを1行で指定することができます。

あわせて読みたい

【まとめ】開発や学習に使えるこのブログの技術情報 Python、PowerShell のサンプルコードや環境設定、入門用の考え方などを説明しています。 【生成AIを使いこなそう】 エンジニアのマストツールとなる生成AIの使い方を説...