プログラミングスクールでJavaScriptを学ぶときに悩むエディタ選び！一押しはBrackets！
プログラムを書く上で必要な道具といえばエディタや統合開発環境（IDE）です。
ですがその種類は豊富で、Visual Studio Code、Sublime Text、Atom、Visual Studio Communityなど色々なものがあります。
このエディタ選びで開発効率は180度異なるのですが、プログラミングスクールに通う初学者にとっては何が良いのか分からないもの。
今回はそのあたりをじっくりと考えていきましょう。
検索に引っかかるものがベストではない
JavaScriptの開発環境を調べると、Visual Studio CodeやSublime Textを推奨する情報が数多く見つかります。
ですがこれらはエンジニア向けの開発環境であって決して初学者向けのものではありません。
かなり面倒な設定をして始めて開発環境として成立するものなのです。
確かにデフォルトの状態でもある程度使えはするのですが、そこから一歩踏み込もうとすると面倒なトラブルに巻き込まれるでしょう。
そしてそのトラブルを解決するために奮闘することになり、肝心のプログラムを書く前に時間を消費してしまいます。
それでは元の木阿弥としか言いようがありません。
またエディタの設定についての勉強は初学者に向いていないほど高いコストを支払うことになります。
静的解析（エラーを即座に検出してくれる機能）を実現するリンターというものを導入しようとすると、広範な知識が要求されるのです。
具体的にはnode.js、npm、ESLintというものをインストールしなければいけませんし、さらにはnpmの初期化とESLintの初期化もしなければいけません。
それから初期化の項目についても知る必要があります。
リンターは確かに便利で強力な機能なので初学者にも適しているといえるかもしれません。
ですが導入することができても今度はリンターに悩まされることになるでしょう。
厳格すぎるエラー検出
ESLintというリンターを導入してコードを書こうとすると頻繁にエラーが検出されるようになるはずです。
まずJavaScriptファイルとHTMLファイルを切り離し、HTMLファイルからJavaScriptファイル内の関数を呼ぶ処理を書くとします。
するとESLintは「（関数名） is defined but never used」というエラーを返すでしょう。
これは「（関数名）の関数が定義されているけど一回も呼んでないよ」という意味になります。
HTML側で呼ばれているということが検知されず、JavaScriptファイルだけを解釈しているためこんなエラーが出てしまうのでしょう。
これを解決するにはその関数が書かれている行数の末尾に「// eslint-disable-line」と言うコメントを書けばエラーは消えます。
内容は「この行のESLintのエラー検出機能を解除するよ」というものです。
なかなか冗長な対処方法であり、スマートとは決していえません。
また、インデントについてもうるさかったりします。
例えばインデントをタブ指定している場合、何らかの原因により「Expected indentation of 4 space characters but found 0」などのエラーが出るのです。
これは「インデントに4スペースを期待しているのに0個しかないよ」というもので、わざわざ手動でタブに書き換えるより他ありません。
このインデントに関する定義は「.exlintrc.js」というファイルに書かれているので、煩わしい場合は「rules」内の「indent」の部分を消せば収まります。
正直なところ、こうした問題に直面して簡単に解決することができれば良いのですが初学者ではそうはいかないはず。
またVisual Studio Codeでは自動補完機能も少し微妙で、対応していないものがあったりします。
chromeを使ってみることもできる
JavaScriptが最終的にエラーを検出するのはブラウザです。
そしてブラウザの中でもchromeにはデベロッパーツールというプログラミングに便利なツールが備わっており、エディタも搭載していたりします。
ということはブラウザで開発したら話が速そうです。
chromeで開発をするにはF12でデベロッパーツールを開き、Filesystemタブの「Add folder to workspace」でローカルのフォルダを指定します。
するとそこがワークスペースとなり、フォルダ内のファイルを読み書きできるようになるのです。
フォルダ内にHTMLファイルやJavaScriptファイルを作り、chrome上でHTMLファイルを開けば開発環境は整います。
プログラムを書いて保存し、ブラウザを更新すれば直ぐに結果が分かります。
またconsoleタブを開けばエラーも目に見えて分かるのです。
この開発環境は1つの答えといえるかもしれません。
様々な機能が充実している
chromeのエディタにはシンプルながら自動補完機能もついています。
単なる付属機能ではなく、きちんとエディタとして使えるので試す価値は十二分にあるといえるでしょう。
デバッグ機能も搭載していたり、実行時のメモリ消費もモニタリングできたりするので至れり尽くせりです。
ただ自動補完機能なのですが、中には対応していない関数などもあったりして完璧というわけではありません。
そのため呼び出したい関数によっては手打ちすることになるので不便さを感じる可能性があります。
それ以外は十分すぎるほど充実しているのでおすすめのエディタの1つです。
新進気鋭のBrackets
では何が一番おすすめできるエディタなのかというと、それは2014年に生まれた「Brackets」というエディタです。
これはオープンソースのエディタであり、HTML・CSS・JavaScriptに特化した性能を備えています。
まず何と言っても軽く、インストールするだけで直ぐに使える形です。
自動補完機能がとにかく強力で、望んだ関数を直ぐに呼び出せるというのはもうこれだけで使う価値があるほど。
またJavaScriptに欠かせないHTMLやCSSの編集能力も高いのでweb系の勉強をしたい方にもぴったり。
プログラミングスクールでBracketが使われていなかったら直ぐにでも知らせたいほど便利なのです。
即ブラウザと連携
Bracketの素晴らしい機能の1つがブラウザの連携が即座にできる点。
メニューバーのファイル内にある「ライブプレビュー」という項目を選択すると直ぐにブラウザが立ち上がります。
何の設定もいらず、すぐさま開発環境ができあがるのです。
使い方としてはESLintなどを導入せずにブラウザ上でエラー検出をすることをおすすめします。
煩わしいことを一切感じることなくコーディングに集中できるはずです。
コードを書くのが目的
インターネット上には様々なエディタ候補やエディタの設定方法についての情報が存在しています。
ですがそれは目的ではなく手段であり、初学者が進むべき道ではありません。
さくっとBracketsを導入することを強くおすすめします。
chromeも上手く使っていこう
Bracketsと連携できるブラウザchromeの機能も豊富です。
時にはchromeだけで作業を済ますのも良いかもしれません。
1つのエディタに固執するのではなく、その時に便利だと思った方法でコードを書いていきましょう。
まとめ
様々なエディタについてみてきました。
プログラミングスクールではエディタが指定されるものですが、JavaScriptを自習する際のエディタにはBracketsがおすすめです。
次点にchromeのデベロッパーツールも推奨します。
設定が要らず、デフォルトの時点で便利なエディタというのはなかなか見つかるものではありません。
とても快適なのでエディタ選びに悩んでいる方は是非Bracketsを試してみてください。