【学習準備】統合開発環境(VS Code)をダウンロードしよう

プログラミングを学習したいけど「プログラミングって具体的に何するの?」と疑問に思っている方も多いと思います。

プログラミングで作成するのはコンピュータへの命令文です。
この命令文をファイルに記述し、コンピュータに実行させることで、記述したとおりにコンピュータが動作します。

命令文(ソースコード)をファイルに記述することを コーディング といいます。

この 命令文 はコンピュータが理解できる書き方でなければなりません
命令文の書き方は多くあり、これを プログラミング言語 といいます。

言語には、HTML、JavaScript、Java、Ruby、Python、PHP、C、SQLなど多くの種類があり、それぞれコーディングの仕方(構文、記法)が異なります。

これらの言語を用いて ファイルにコーディング し、コンピュータを意図したとおりに動かすこと をプログラミングといいます。

普通のテキストエディタでもコーディングはできる

前述の通り、プログラミングはファイルにコーディングする必要があります。

このコーディングは、どのパソコンにも標準で搭載されているテキストエディタを使って行うことができます。

しかし、コンピュータは誤字脱字文法ミスなどに対して全く容赦がありません

こちらの命令が正しい文法であれば記述したとおりに実行してくれますが、少しでもミスがあれば間違った結果を出したり、止まってしまうこともあります

ぱっとみてこの違いがわかりますでしょうか?

正)<h1 class=”title”>Hello World!</h1>
誤)<h1 class=”title’>Hello World!</h1>

正しくは"title"ですが、"title'となってしまっています。
ダブルクォート(")で囲む必要があるところを、シングルクォート(')で閉じてしまっているわけです。

記述するのは人間なのでこのようなミスは常にあります。
かといってミス探しに時間を割いていては開発も進みません。

そこで、開発者は開発専用のエディタを使用します。

IDE(統合開発環境)を使おう

開発者が使用する特別なエディタのことをIDE(Integrated Development Environment: 統合開発環境)と言います。

統合と言うだけあってこのIDEには、コーディングのミスを発見、補正し、作成したソースコードを実際にコンピュータが実行できるように変換するなど開発のためのツールが一つにまとまっておりテキストエディタでコーディングするよりも 速く正確に 開発することができます

つまりIDEは、プログラミングには必須のアプリと言えます。
言い換えれば、開発者はこのIDEの使い方を覚える必要があるということです。

IDEの種類

IDE にもいくつか種類があります。

開発する言語によっても変わりますし、会社やプロジェクトによって変わるかもしれません。

代表的な IDE には Intellij IDEAVisual Studio CodeAtomなどがあります。

どれを使って開発してもいいですが、PROGRABIの学習では Visual Studio Code を使用します

また本格的に コーディング を行っていく場合は、Intellij IDEA を検討してみるといいかもしれません。

Visual Studio Codeをダウンロード

Visual Studio Code(ビジュアル・スタジオ・コード: [略]VS Code)はMicrosoftが開発しているIDEで、無料で使用することができます

Visual Studio Code – コード エディター | Microsoft Azure ページからVS Code を パソコンにダウンロードしましょう。

ダウンロードができたら、ショートカットアイコンを分かりやすい位置に設定しましょう。

VS Codeをダウンロードしよう

  • Visual Studio Codeをダウンロードしよう!
  • ダウンロードができたらショートカットアイコンを分かりやすい位置に設定しよう!

拡張機能(Extensions)を使おう

VS Code には 拡張機能(Extensions) というものがあり、様々な機能をインストールして使用することができます

拡張機能は以下のリンクから探すことができます。

Extensions for Visual Studio family of products | Visual Studio Marketplace

また、VS Code内からも検索や追加(インストール)・削除(アンインストール)を行うことができます。
ここでは、推奨するいくつかの拡張機能をインストールしてみましょう

日本語化

VS Codeのボタンやメッセージなどはすべて英語で記載されています。
プログラミングは英語に慣れた方が後々得なのですが、英語という壁が余計なストレスに感じることもあると思います。

そこで、VS Codeを日本語化する拡張機能をインストールしてみましょう。
もちろん後でアンインストールすることも可能です。

次のリンクにここでインストールする日本語化の拡張機能の詳細があります。

Japanese Language Pack for Visual Studio Code

このページからインストールしてVS Codeに取り込むことも可能ですが、VS Code内で検索してインストールする方法を試してみましょう。

VS Codeの拡張機能インストール手順
  1. VS Codeを開いて左側の拡張機能のマークをクリックしてください。
  2. 検索ボックスにインストールする拡張機能の名前を入力します。今回は「Japanese Language Pack」と入力すると検索が自動で行われます。
  3. 検索ボックス直下に検索結果が表示されますので、インストールしたい拡張機能を探してクリックします。
  4. 「Install」ボタンをクリックしてインストールします。

拡張機能によってはインストール後にVS Codeの再起動を求められる場合があります。

日本語化の場合は再起動する必要がありますのでVS Codeを再起動してください。

そして、起動すると日本語で表示されていると思います。

括弧に色を付ける

括弧に色を付ける拡張機能のデモ画像
括弧に色を付ける拡張機能のデモ画像

コーディングには様々な括弧が必要になります。

括弧の使い方に慣れない頃は、閉じ括弧の記述を忘れるような場合も多くあります。

この拡張機能を使用すると括弧がカラフルになり、コードが読みやすくなるためオススメです。

Bracket Pair Colorizer 2

全角スペースを強調

EvilInspectorの画像

コンピュータは基本的に日本語を得意としていません。

この日本語の中でも特に厄介なのが全角空白(スペース)です。

全角スペース「 」(←これ)は、人間の目で見ても分からなければ、コンピュータにも理解できず上手く処理してくれません。

「なぜだか分からないけど上手く動かない…」そんなときは全角スペースが原因である可能性があります。

一番単純な全角スペースの探し方は、ワード検索*1で全角スペースを検索してみることですが、それより単純に全角スペースを強調してくれる拡張機能があります。

それがこの EvilInspector です。

この拡張機能を利用すると全角スペースが以下のように強調されて表示されます。

EvilInspectorのデモ画像

*1ワード検索のショートカットキー

Mac: ⌘ + F 
Win: Ctrl + F

IntelliJ IDEA Keybindings

IntelliJ IDEA Keybindings

IntelliJ IDEA Keybindings

VS Codeにはコーディングを補助する多くの機能と、それをら使用できるショートカットキーがあります。

ただし、このVS Codeのショートカットキーは他の統合開発環境で使用することが難しいです。そのため他の統合開発環境を使用する際に一からショートカットキーに慣れていく必要があり、煩わしく感じます。

そのためここでは、多くの言語の開発に使用されているIntellij IDEAのショートカットキーをVS Codeのショートカットキーに変換する拡張機能をインストールします。

インストール後はIntelliJ IDEAのショートカットキーを使用できます。(一部の機能はVS Codeでは利用できない場合があります)

拡張機能をインストールしよう

  • VS Codeを日本語化しよう!
  • 括弧に色を付ける拡張機能をインストールしよう!
  • 全角スペースを強調「EvilInspector」をインストールしよう!

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。