フロントエンドをやるなら一度はJavaScriptと向き合おう〜JJSのススメ〜

なぜこの記事を書くのか

フロントエンドの開発をする上で、最近はReact、Vueなどのフロントエンドのフレームワーク（UIライブライ）が使われるのが当たり前になり、より良い開発体験をするためにTypeScriptがデファクトになり（つつ）、肥大化したフロントエンドのコードを素早くブラウザに配信するため、Webpackなどのバンドルツールが導入され、開発者としては覚えることや身につけることが多すぎて、技術に追いつくだけでも辛い、そして初学者からすると何から勉強したら良いのかわからない、というような現状があるように感じます。

Udemyなどの動画コンテンツが大量に溢れ、動画を見てわかったような気がするが、実際にコードを書き出すと手が動かない。書いたコードが思うように動かない。
動かない原因がわからず、ググる。記事の他人のコードをコピペする。
結局のところ何が原因かわからない。

でもやっぱりちゃんとコードが読めると楽しいし、ちゃんとコードが書けるのは楽しいと思います。
楽しくコードが書けると、仕事は楽しくなるし、仕事が楽しくなると、毎日が楽しくなります。
毎日が楽しいと思っている人と仕事をすると周りも楽しいし、そういう人と一緒に仕事がしたいなと思います。
私自身もそういう人になりたいなと常々思っております。（自戒）

話が脱線してしまいましたが、フロントエンドは結局のところJavaScriptのコードです。
JavaScriptをしっかりと理解する人がReactやVueなどのフロンエンドライブラリを制すると思っています。

JJS(Just JavaScript)

https://justjavascript.com/

私がJavaScriptをより自信を持って書けるようになったのはこのサイトのおかげです。
著者はReactやRedux、Create React Appなどを開発しているDan Abramovさんです。
Danさん自身がJSの勉強をするときに、知りたかったことを詰め込んだ内容となっており、
JSにおけるコア部分の理解に終始しているところがとても良いところだと思います。

全編英語となっているため少し読みにくいかもしれませんが、google翻訳を駆使すればそんなに苦ではないはずです。
そして料金は42ドルで、日本円にすると少し高くなりますが、それ以上に得たものは大きいと感じています。

主な学習内容

内容としては主に以下でとても基礎的な内容となっています。
・プリミティブ値について
・変数について
・オブジェクトについて
・関数について
・プロパティについて
・プロトタイプについて
１つずつをとても丁寧に図を使い解説してくれます。そしてたくさんの図を書きます。
各章ごとに理解を深めるためにたくさんの問題が用意されています。

サイトの中では「メンタルモデルを再構築する」というテーマが掲げられています。
メンタルモデルとは「ここがこうなっているのであれば、あそこではこうなるはず」など
経験に基づき、イメージをできることを指すようです。（厳密には違うかもしれませんが）
コードを読む時に仕様や憶測、実際の挙動ではなく、コードをしっかりと理解するということをとても意識させられます。

以下のコードをざっと読んでみてください。

function duplicateSpreadsheet(original) {
  if (original.hasPendingChanges) {
    throw new Error('You need to save the file before you can duplicate it.');
  }
  let copy = {
    created: Date.now(),
    author: original.author,
    cells: original.cells,
    metadata: original.metadata,
  };
  copy.metadata.title = 'Copy of ' + original.metadata.title;
  return copy;
}

スプレッドシートをコピーするんだな、というのはなんとなくわかると思います。
しかしこのコードにはバグがあります。見つけられるでしょうか？

正解はoriginalのタイトルも'Copy of'がついてしまいます。
なぜかがすぐわかった方はJJSをを読む必要はないかもしれません。
ですが、少しでも迷ったり、答えがわからなかった方は改めてJavaScriptと向き合う時間を作ってみると良いかもしれません。

追記

DanさんがTweetしていましたが、JJSの価格がセールで半額の21ドルとなっているようです！
興味がある方は今のうちに購入しておくと良いかもしれません。