【ラボメン活動レポート】「03.道具を用意しよう」（投稿者：午後のゴート）

投稿者: imukat Lab. Memberプログラミング、ラボメン活動レポート

こんにちは。
仙台市青葉区にある就労継続支援B型事業所imukat Lab.(イムカラボ)でITのお仕事をしているラボメンの「午後のゴート」です。

これまでの記事

「01.はじめよう、プログラミング」
「02.Javascriptを学ぶ前に」
今回はJavascriptをWebブラウザで実行する為の準備についてお話したいと思います！

準備はしなくてもいい、だけど準備はした方がいい

Javascriptは非常に少ない準備で始められるプログラミング言語です。
買ったばかりのインターネット未接続のパソコンであろうとも、開発が可能な位です。
しかし、快適な環境の為に準備を整える事を強くオススメします。

良い開発環境は何をもたらすのか？

快適な環境は何がどう快適なのか、それは以下の3点です。
・書いているプログラム上のミスを発見しやすい
・他の人の意見や手段を参考にしやすい
・高度な追加機能が利用できる

この3点について深掘りしてお話しましょう。

書いているプログラム上のミスを発見しやすい

プログラム開発用のテキストエディタは、書いているコードから特定のキーワードを色分けする機能があります。
例えば、「function」なら色が変わりますが「funktion」では色が変わりません。
また、プログラミング初心者が陥りがちな問題として、半角スペースと全角スペースの間違えがあります。
通常のエディタで一目見ただけでは、半角スペース2つと全角スペース1つを区別する事はできません。
しかし、高度な開発用エディタであれば半角スペースと全角スペースの表示が変わります。(もしくは設定で変える事ができます。)

同じ環境を使う人が多い事で他の人の意見や手段を参考にしやすい

仮に、あなたが道具を使っていて何かの問題に直面したとしましょう。
同じ道具で同じ問題を解決した他の人がいれば、その人のやり方をそのまま取り入れる事ができます。
しかし、他の人が違う道具を使っていたならば、解決方法を応用して再現する能力が必要になります。
人々に広く使われている道具を使う事で問題解決のハードルが下がり、より効率的な学習に繋げる事ができます。

高度な機能を利用できる

テキストエディターやWebブラウザーはプログラムによって作られています。
故にプログラミングができれば、エディタやブラウザを自分で作ったり、追加機能の開発をする事ができます。
エディタ等をイチから自作する必要に迫られる事は稀ですが、追加機能の開発は比較的カジュアルに行われています。
そして、開発された追加機能の多くは、無料で公開・共有されています。
ただでさえ高性能なソフトを、更に自分の好みに合わせてカスタムできるのです。

何を準備すればいいのか？

プログラミングをする上で必要なのは、以下の2点です。
・プログラムを書く為の環境
・プログラムを実行する環境
Javascriptの場合は以下のようになります。
・プログラムを書く為の環境 → テキストエディタ
・プログラムを実行する環境 → Webブラウザ
一般論として初学者が何を使うか考えた場合は以下のようになります。
・プログラムを書く為の環境 → テキストエディタ → VS Code
・プログラムを実行する環境 → Webブラウザ → GoogleChrome
VS Codeを使ってコードを書いて、GoogleChromeで実行しましょう。

VS Codeについて

Windows付属のメモ帳でもJavascriptを書く事はできますが、それではあまりにも機能が物足りません。

そこで使うべきはVisual Studio Codeです。(略称：VS Code)
インストール方法は多くのサイトで解説されていますので、
[こちらのGoogle検索結果]を参考にインストールをお願いします。

VS Codeの日本語化

VS Codeは標準の状態では英語表示になっています。
日本語表示に変更する場合は、[こちらの検索結果]を参考に設定してください。

GoogleChrome

現在のWindowsでは標準でEdgeというブラウザが入っています。
それを用いても構わないのですが、これからは最もメジャーなブラウザであるGoogleChromeを前提にしたいと思います。
もしGoogleChromeのインストールが済んでいなければ、[こちらのURL]からインストールを進めてください。

おわりに

次回以降はVS CodeとGoogleChromeを前提にしてお話を進めていきたいと思います！