超初心者がフロントエンド言語を学習するときにはどのエディタがいいのだろうか

この夏、フロントエンド言語を一通り勉強したいと考えている。いや、一番やりたいのはJavaScriptの勉強なのだけど、VBAとは違い、どうやらJavaScriptだけ学べば何とかなるといった類のものではないと知り、渋々HTMLとCSSもリストに加えたというのが本当のところ。

本題のエディタについての考察に入る前に、きっかけと、ここ数週間取り組んでみて気がついた私のような初心者が注意すべき点についても合わせて残しておきたい。

どうしてJavaScriptなのか

特に仕事に必要なわけでもないし、「ウェブサイトを作ってXXしたい」というような思いを持っているわけでもない。単に言語を知ってみたい、というざっくりした理由だけ。すぐに脱落しやすそうな危うい理由である。

今年に入ってJavaScriptに似ているというGoogle Apps Script(GAS)を使ってみたのがきっかけとも言えなくもない。GASはVBAのような手軽さ(開発環境が用意されている)から、とっかかりとしては良かった。

 

{}でブロックを括ったり、を付けたりというVBAにはない面倒臭さはある一方で、変数の宣言がラク、配列の使い方がわかりやすい、などという部分が気に入った。

ウェブ上に多数存在するGASに関する情報から、GASの人気っぷりが伺え、GASの勉強をしよう、とも思わないでもなかったが、もう少し汎用的な言語を学んでみたいという思いから背伸びをしてJavaScriptをはじめてみることにした。

そもそもがこのような入り方なので、全く知らなかったのだけど、JavaScriptって想像以上にいろんなことが出来る優秀なヤツらしい。

JavaScriptを学びたいのにたどり着けない:HTMLとCSS

私のざっくりした理解なので、間違っている可能性は非常に高いが、VBAやGASでのシートなどに当たるものがHTMLやCSSで作り込まれたウェブページで、例えば、VBAやGASでセルを指定して値を取得する、というフローは、HTML(やCSS)に代わるようだ。

「てことは、HTMLやCSSを知る必要があるんじゃ?」と気付き、勉強を始めたのだが、多い。

簡易ブログサイト(デザインだけの動かないヤツ)やフォトギャラリー・出会い系サイトのランディングページなどの課題をスキップせずにこなしつつだったので、仕事の後にちまちまペースだと2週間くらいかかった1

超初心者は「最新の」教材を使うべき

とりあえずHTMLとCSSの概要は終えたものの、当初の計画からは遅れている。私の理解力の問題などいくつか理由があるが、その中で避けることが出来た原因がある。それは、古い教材の使用。本当に、ダメ絶対。

今後は最新の情報の載った教材を使おうと固く心に誓った。

私の使っていた教材は「Bootstrap 3」の頃のもの。インストラクションどおりに進めても同じにならなかった。「なんで?」「なんで?」と何時間も立ち止まって、やっと「Bootstrap 4」に変わっていることを知り、更に時間をかけて教材と同じような見た目にするための方法を調べる、ということをしなければいけなかった。

それはそれで、いい勉強になったとも言えなくもないが、初心者にとってはこういうちょっとしたつまづきが、投げ出すきっかけになるものだ。

プログラミング言語をひとつも学んだことがなく、レファレンスの読み方もわからない状態であれば、教材の評価(★)だけでなく、いつ発行されたものなのかも要確認。

これはJavaScriptもあてはまり、ES6についての記述のあるものを入手する用にしていった方が良さそう。ただ、ES5を学んでからES6へ移るというのを推奨しているウェブページなども見かけたのでそれほど神経質になる必要はないのかもしれない。

HTMLのタグに拒絶反応があったらなおさら飛ばさない

大抵のテキストは、HTMLとCSS、JavaScriptで分かれているが、前者を全く知らないなら「基本の」とか「はじめての」とかといったJavaScriptのテキストに手を出す前に、HTMLとCSSについてざっと見ておいた方がいいと思う2

私はHTMLのテンプレートやらタグが全くわからず、「何でこんな面倒いことを」「マークダウンで済めばいいのに」とHTMLにネガティブな感情たっぷりだったのだが、基礎をひととおり確認していたおかげで、JavaScriptに移ってからの苦労が少なくて済んでいる。多分、JavaScriptだけで進めていたら、DOMに入った途端脱落してた。

【本題】フロントエンド言語初心者にオススメなエディタはどれだ

ここでやっと本題!

タスク管理について調べていた際に、エディタをいくつか調べたのはすでに書いたとおり。

 

PCで使える、操作が簡単で、軽い、という条件を満たしたNotepad ++を選択。この選択には満足しており、今のところ変える予定はない。

今回は完全プライベートなので、条件は、Macで使える、プログラミングに適したエディタに変更して探す必要があった。

ウェブでよく見かけるのは、【Atom】、【Sublime】で、最近の記事は【Atom】についてのものが多いような印象だが、数週間エディタ難民となってみて、個人的には、フロントエンド言語初心者には【Brackets】がいいという結論に到達した。(だからといって【Atom】をアンインストールしてない。)

エディタ難民の軌跡

時系列は以下のとおり。

Sublime → Atom → Sublime → Brackets

Sublime 3:この恋には階級の壁

まず最初に選んだのは、「軽い」と評判の【Sublime】。「恋に落ちるエディタ」というなんとも素敵なキャッチフレーズが付いていて、「私もひとつ恋に落ちてみるか」と早速ダウンロード。

が、【Sublime】と恋に落ちていいのは、スキルのある特権階級だけだった模様。初っ端のプラグインの導入でつまずきギブアップ。身分違いの恋にいいことはない。

Atom:不動の人気者

高嶺の花より、身の丈にあった人気者エディタ【Atom】を使い始める。

「エディタ」とググれば、今では【Atom】関連が一番多いんじゃないだろうかと思えるほどに人気のエディタ。プラグインの管理も簡単で、且つ利用者の多さに比例するかのような種類の豊富さ。

しばらくは、このエディタを使っていたのだけど、毎回感じていた立ち上がりの遅さに我慢が出来なくなり、エディタ探しを再開。

Sublime 3:高嶺の花に再アタック

【Sublime】についての情報を読み漁り、プラグインの不具合を修正(素人には訳のわからなさすぎる設定)。立ち上がりの速さは評判通りで満足だったものの、プラグインの管理が素人には難しく、再び放浪。身分違いの恋は相当な覚悟がないと飛び込んじゃいけない。

Brackets:優先順位を見直して出会った優良物件

【Atom】や【Sublime】ほどではなかったが、よく見かけた【Brackets】の使用を開始。立ち上がりは【Atom】くらい遅いし、プラグインも【Atom】の方が豊富な印象。しかし、プレビュー(後述)が便利すぎて乗り換え決定。

確かに、立ち上がりの遅さは気になるけど、一旦立ち上げちゃえば、それでおしまいだし、と気持ちを切り替えれば何とかなる。

実際に使ったエディタの比較

それでは星取表を作成してみよう。

Atom Sublime Brackets
値段 無料 有料 無料
起動スピード
プラグイン管理の容易さ
プラグインの多さと更新頻度
デザイン
プレビュー機能

Sublimeは初心者にとってプラグイン管理の壁が高い。そのため、あまり使わす、プラグインの調査も出来ていない。デザインについては完全に個人的な趣味による順位付け。

この星取表からは、【Atom】に軍配が上がっているはずなのに、【Brackets】に乗り換えたのは、最後の項目「プレビュー機能」が圧倒的に優秀だったから。

【Brackets】のプレビュー機能は初心者の強い味方

プレビュー機能は、もちろん【Atom】のプラグインでもたくさん見つけることができる。しかし、【Brackets】のプレビューの方が優秀。

Bracketsの主な機能とプラグインのまとめ

HTML・CSSに苦手意識のあった私から苦手意識を取り除いてくれた

HTML・CSSの経験がある人にはあまり関係ないかもしれないが、私のような初心者にとっては、ページを見て、コードを見て、クラスやIDを特定して、JavaScriptのコードを書く、って結構時間がかかる作業。

ブラウザのInspectorで確認して、コードに戻ればいいだけじゃないか、という話だと理解はしているけど、私にとっては十分面倒くさい。そして面倒くさい作業が続くと、やめたくなる。

【Brackets】のプレビュー機能は、この面倒くさい地獄から私を救ってくれた救世主。クラス名の特定なんてあっという間だし、勘違いということもない。

【Atom】のプレビュー機能との違い

【Atom】のプレビュー機能は、コード→ウェブページ表示の一方通行。HTMLやCSSがどのように反映されるかを確認するときには十分だったが、JavaScriptのDOM操作となると【Brackets】のような双方向のプレビューの機能が圧倒的に便利。

プレビュー機能以外の便利プラグインはどのエディタにもある

【Brackets】ほどのプレビュー機能プラグインはないものの、それ以外の便利プラグインはどのエディタにもある。

モノグサさん必須のプラグイン

  • Emmet
  • Brackets Snippets (by edc)

Emmetで爆速コーディングを体験すると、JavaScriptでも同様のことを求めてしまう。人間の速さへの慣れって恐ろしい。そこで、Brackets Snippetsを使う。

ただし、デフォルトの設定はEmmetと同じ【Tab】キー。私は、このデフォルト設定の変更がうまく行かず、Emmetの設定を【Tab】キーから【Shift Enter】へ変更した。

結論:超初心者がフロントエンド言語を学ぶなら、相棒は【Bracekts】

超初心者がフロントエンド言語を学ぶときに使うベストなエディタは【Brackets】。

ベストなエディタが【Brackets】ではなく、

  • 超初心者が
  • フロント言語を学ぶ場合

という条件での結論である。

小難しいプログラミング言語は勉強したことないけど、ブログをずっとしていてHTMLやCSSの知識バッチリ、などという人は、別に【Brackets】でなくてもいいかもしれない。

最終的に使わなかったけれど、エディタ散策中に見かけた【Visual Studio Code】というエディタも少し気になっていて、今後使うことがあれば比較をしてみたい。


  1. 私の場合、本を読むだけだとわかった気になってしまうので、一旦本を閉じて、自分で作ってみるというステップは絶対省略しない。出来ない。 ↩︎
  2. 個人的にはBootstrapを見ておいて良かったと思っているが、JavaScriptをメインに据えるのであれば、全体把握の段階でBootstrapまでは必要ないかもしれない。 ↩︎
Advertisements

This site uses Akismet to reduce spam. Learn how your comment data is processed.