プログラミングスクールでJavaScriptを学ぶための環境作りをチェック！
プログラミングスクールのカリキュラムとして人気の高いものの1つにJavaScriptがあります。
ブラウザ上で実行されるこの言語はウェブサイトに動的な効果を加えることができ、かつメモ帳さえあれば書くことができるのです。
といっても本格的に開発環境をそろえようとするとまた話は別。
今回はJavaScriptの開発環境について色々とみていきましょう。
次第に欲しくなる開発環境
冒頭でも述べたように、JavaScriptはメモ帳とそこに書かれたコードを実行するブラウザさえあれば開発環境はそろってしまいます。
ではそれで十分なのでは、と思われるかもしれませんがコード量が多くなればなるほどそうも言っていられません。
いちいちdocument.getElementById（"hoge"）なんて長ったらしい式を書くのも面倒です。
こうした長い式というのはスペルミスの問題が起こりやすいのですが、それは実行するまで分かりません。
またJavaScriptは他の言語と比べても仕様の緩い言語なのでどこで何が間違っているのか分からないといった事態にも遭遇するでしょう。
例えばコードの中に「var temp;」という記述が複数あるだけでも破綻してしまうはずです。
メモ帳は確かに動作が軽く扱いやすいのですが、あくまでもテキストに特化しているのであってプログラミングには適していません。
では何を使えば良いのかというと、エディタや統合開発環境となります。
エディタと統合開発環境の違い
プログラミングをする際に使う道具としてエディタや統合開発環境があります。
エディタというのはテキストエディタを拡張したようなもので、動作が軽く自分でカスタマイズして使うことが推奨されるソフトウェアです。
対して統合開発環境は起動が重い代わりにほとんどの必要なものが最初から用意されているという便利なもの。
どちらを選べば良いのか迷うところですが「JavaScript 開発環境」といったワードで検索すると相当な量のエディタ推しのサイトが見つかります。
確かにエディタは軽いですし、なんだかスマートなイメージもあるのでオシャレともいえるかもしれません。
統合開発環境は重いし誰でも扱えるためプロっぽくないといえるでしょう。
というわけで、エディタで開発環境を作ろうとすると、初学者はぼきぼきに心を折られるはずです。
予備知識が豊富に必要なエディタ
JavaScriptの開発環境をエディタで作ろうとするのは正直なところプロ向けの作業です。
とにかく設定を揃えるまでに必要な予備知識が膨大に必要で、決して簡単ではありません。
開発環境を整えるだけで1日かかるどころかそのまま折れてしまっても何も不思議ではないほど。
例えばVisual Studio Codeというエディタで開発環境を揃えてみる場合を考えてみましょう。
早速調べてみると謎の用語群に惑わされることになるはずです。
いわくnpm・eslint・json・Node.js・Gitなどなど。
そしてこれらをインストールしたり記述したり使うわけですが、初学者にはハードルが高すぎます。
ただ単にベースとなる開発環境をそろえたい場合、その必要最低限の環境を整える情報というのは見つけ難い状況です。
あくまでエンジニア目線の情報が多いといえるでしょう。
またそうした情報と同じように開発環境を作ろうとしても予期せぬエラーに悩まされたりして時間がどんどん過ぎるはずです。
もしこうしたエディタを使いたいなら複雑な機能には手を出さないと割り切って使うことをおすすめします。
下手をすれば何が何やら分からない泥沼に足を踏み入れることになるからです。
それでもエディタが使いたい場合
エディタは統合開発環境と違い、軽いという点だけでも魅力のあるもの。
難しいと分かりつつもどうしてもエディタが使いたいなら使うしかありません。
Visual Studio Codeの場合、JavaScriptのファイルを編集する際にデフォルトで補完してくれます。
ですが変数の重複のチェックなどはしてくれません。
そのため、とりあえずですがデフォルトの状態でも使えるとはいえるでしょう。
静的にコードを解析したいときにはESLintという拡張機能を使うことをおすすめします。
これはエラー箇所を検知するとリアルタイムで知らせてくれるという、正に開発環境らしい機能なので入れておきたいところ。
ただそのためには少し面倒な作業が必要になります。
まず様々なプログラムのパッケージ管理ツールであるnpmをインストールする必要があります。
npmをインストールするにはnode.jsを予めインストールしておかなければなりません。
npmのインストールが終わったら今度はnpmを通してESLintをインストールしましょう。
これはコンソールで「npm install eslint –global」とすればできます。
次にESLintを使うため、エディタのコンソール上で「npm init」を実行し必要なファイルを生成。
さらにESLintの初期化を「eslint –init」で行い、「Answer questions about your style」で質問形式で設定を完了。
最後にESLintの拡張機能である「ESLint」をエディタ上でインストールし再読み込みすれば終わりです。
コードに「let a;let a;」などと書けば重複エラーを検出してくれるでしょう。
確かにこうした手順を踏めばエディタは開発環境として十分に使えるようになります。
ですがnpmやリンターについての知識や質問形式で聞かれていること、また「npm init」で行っていることなどが分からなければもやっとするはずです。
そしてそれらを理解するには多くの知識が必要となるため、調べている内に気付けばJavaScriptを記述するという目的を見失っているかもしれません。
ESLintを使う設定が難しいならあえて使わないという方法もあります。
静的解析がなくてもVisual Studio Codeはメモ帳よりも便利なツールであることは確かです。
おすすめはVisual Studio 2017 Community
ダウンロードもインストールも簡単に済ませることができるのがVisual Studio 2017 Communityです。
無料で使えますし機能も豊富なので初学者におすすめ。
エディタの設定に悪戦苦闘するよりも素直にJavaScriptを書けるようになるでしょう。
ただなかなか重いソフトウェアなので、作業し辛いと感じたらエディタを検討するのも良いかもしれません。
どちらを使うかは一長一短
エディタは軽い代わりに扱いが難しく、統合開発環境は扱いやすい代わりに動作及び起動が重いといった特徴をもっています。
どちらを使うにしてもメリットとデメリットがあるので注意しておきましょう。
といっても統合開発環境の便利さは初学者にとって非常に助かるものであり、エディタの軽さをくつがえすほど大きなメリットといえます。
原点に戻るのもアリ
どのエディタや統合開発環境を使えば良いのか、という問題は考えれば考えるほど悩むもの。
そんなときは故郷のメモ帳に立ち返るのも1つの方法です。
さっとJavaScriptを書けてブラウザで実行すればさくさく開発を進めることができます。
むしろ小さいコードやテストコードならメモ帳はベストな選択といえるかもしれません。
時には原点に戻るのも良いでしょう。
自分に合った開発環境を探ろう
インターネット上には情報が氾濫しています。
そのため自分にとっては不要なノイズも多く、本来の目的を見失うこともあるものです。
自分のやりたいことを常に軸にすえて、自分に相応しい開発環境を探っていきましょう。
プログラミングスクールのスタッフに開発環境についてたずねてみると参考になるかもしれません。
まとめ
JavaScriptの開発環境についてみてきました。
エディタに関する情報が大量に存在しますが、初学者には強く統合開発環境をおすすめします。
設定だけで折れてしまっては何の意味もないからです。
プログラミングスクールではスクールごとに異なる開発環境で講義を行う事になります。
本格的に勉強をする前にまずは自習のための開発環境を整えてみて下さい。