前回の、Webの概念について – プログラミング学習 準備 その3 では、Webの概念について学習しました。
プログラミングで作成したファイルを 公開されたサーバー(Webサーバー)に保存する ことでインターネットで見ることができるようになります。

今回は、ファイルを作成するための環境をパソコンの中に作っていきます。

といっても、ソフトをダウンロードして使えるようにするだけです。

プログラミングを学習したいけど、そもそもプログラミングって何?というところを簡単に説明します。

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

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

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

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

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

コーディング

前述の通り、ファイルにコードを記述していく必要があります。

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

しかし、言語ごとにコードの書き方は異なり、コンピュータは誤字脱字や文法ミスなどに対して全く容赦がありません

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

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

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

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

このようなミスを発見、補正し、作成したソースコードを実際にコンピュータが実行できるように変換するなど、開発のためのツールが一つにまとまったものを IDE(統合開発環境)といいます。

この IDE を使うことで、テキストエディタでコーディングするよりも 速く正確に 開発することができます。

IDE(統合開発環境)

Integrated Development Environment

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

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

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

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

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

Visual Studio Codeをダウンロード

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

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

拡張機能(Extensions)

Visual Studio Code には 拡張機能(Extensions) というものがあり、追加で多くの機能をインストールして使用することができます。

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

Extensions for Visual Studio family of products | Visual Studio Marketplace

日本語化

英語はストレスだと感じる方は、VS Code 内の表示を 日本語に変更しましょう。

英語に慣れていきたい方も、IDE の使用や プログラミング の学習に余裕を持てるようになったら英語に戻して使えばいいと思います。

Japanese Language Pack for Visual Studio Code

括弧に色を付ける

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

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

この拡張機能は括弧に色を付けて教えてくれるため、コードが読みやすくなります。

Bracket Pair Colorizer 2

HTMLコードの静的解析ツール

コードの不備をチェックしてくれます。

書き方に慣れない頃は、どこが間違っているのか自分では気付かないことも多くあります。

そんなとき、わかりやすく教えてくれるものが Linter と呼ばれるツールになります。この Linter を使用すればリアルタイムで誤りに気付いてくれるので、一つのミスで悩む時間が少なくなります。

この拡張機能をインストールすれば、HTMLコードの誤りをチェックしてくれます。

HTMLHint

全角スペースを強調

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

全角スペースは、人間の目で見ても分からなければ、もちろんコンピュータも分からず上手く処理してくれません。

一番単純な解決方法は、⌘(Ctrl) + F で 全角スペース を検索してみることですが、それより単純に全角スペースを強調してくれる拡張機能があります。

EvilInspector

ショートカットキー

前回の学習でも覚えたショートカットキーについてです。

ここでは VS Code 特有のショートカットキーを覚えてください。

カッコ内の 左: Mac、右: Windows

VS Codeのショートカットキー

  • コードの自動フォーマット(Option + Shift + F、Shift + Alt + F)
  • 行をコメントにする / または解除(⌘ + /、Ctrl + /)
実際には覚えきれないほどのショートカットキーがあります。
全てを覚える必要はなく、自分の作業に必要なものを少しずつ覚えていけばいいと思います。

課題

VS Code をダウンロードして開いてみましょう。

拡張機能をインストールしてみましょう。

  • 日本語化
    – Japanese Language Pack(必要な方のみ)
  • 括弧に色を付ける
    – Bracket Pair Colorizer 2
  • HTMLコードの静的解析ツール​
    – HTMLHint
  • 全角スペースを強調
    – EvilInspector​