こんにちは、hachi8833です。BPS社内勉強会の発表を元に、社内JavaScript勢の皆さまのお力を得て記事を書きました。
目的
JavaScriptをたまにしか使わない私ですが、それもあってなおさら書くときに迷いに迷います。
- ネットの情報多すぎ、動き激しすぎ、選り分けるにしても指針が欲しい
- 古いコードや毒入りコードを拾って食あたりや、泥舟に乗って沈没するのを少しでも避けたい
- 最初の一歩をどこから踏み出すかの手がかりが欲しい
そういったわけで、2019年前半と区切って、一度JavaScript世界について門外漢ならではの「大きな絵」が欲しかったのでした。ここに書いたことの中には来年には古くなっているものあるかもしれません。
ただ、社内のJS勢の話を総合すると、JavaScript世界は数年前に比べるとかなり落ち着きつつあるとのことです。この機会にということで、主に自分のために現在のJavaScript世界で遭難しないための地図を作りました。そのうえで、こういうもっとごつい本↓あたりに進んでみようと思っています。
対象
本記事は以下の読者を念頭に置いています。プログラミング自体が初めての方orそれに近い方は対象に含めていません🙇。
- 他の言語をある程度やってるがES2015以降は初めての人
- ES2015以前にJavaScriptをやってたが再入門したい人
- 最近のJavaScriptの動向を大づかみしたい人
最初に押さえておきたいもの
2019年6月現在、最初に読むのにふさわしいと思える良質なオンライン記事/ドキュメント/書籍を以下に絞り込みました。今後何をするにしても、これらを読んでからにしたいと思います。
1. JavaScript界隈を大づかみする地図
同記事より
mizchiさんがTypeScriptを始めるうえでの心得について書いた記事です。網羅的ではありませんが、要点を的確に押さえていて、急いでいる方が最初に読むのにとてもよいと思います。
- 書籍: 最新JavaScript開発～ES2017対応モダンプログラミング (技術の泉シリーズ（NextPublishing）) | 佐々木 俊介 | 工学 | Kindleストア | Amazon -- Kindle版は1080円
こちらの書籍は勉強会の後に知りました。本記事でまとめようとしていたJavaScriptの概要や歴史や動向、開発の要点などを遥かに上のレベルで見事に網羅していて脱帽しました。特定のトランスパイラやフレームワークに偏らないようなるべく中立に書かれているように見える点にも好感を持ちました。何より文章の質がとても高いと思います❤️。Ruby on Railsにも言及しています。
JavaScriptの文法入門書ではありませんが、最初に読んでおくと自分の中に「大きな地図」を作るうえでとても役立つと思います。少なくとも今の自分には助かりました。
初版は2017/08/11ですが、私が買ったKindle版は2019/04/05にVer.1.1になっており、現時点の最新の動向も反映されています。
2. オンライン入門書
- オンラインドキュメント: JavaScriptの入門書 #jsprimer -- ES2015以降にフォーカスしている
- リポジトリ: asciidwango/js-primer: JavaScriptの入門書
- 著者が愛用するリファレンスなど: JavaScriptの本を書くときに参考にしてるもの
jsprimer.netより
js-primerは、azuさんを中心に今も書き直されている、ES2015以降を対象としてJavaScriptというプログラミングを1から学べる再入門書です。同書が何を目的とし、何を目的としていないかについてははじめににも書かれていますので、そちらをご覧ください。
追記（2020/04/14）
JS Primerが4/27に書籍として発売されるそうです🎉。
最初のコミットから4年経ちますが、 https://t.co/jz2VoxJkk4 の書籍版が発売されます！是非予約してください！
電子版も後日公開予定です。
内容はウェブ版と同じですが、レイアウトは書籍用に一から作り直しています"JavaScript Primerの書籍版が4月27日に発売予定です！"https://t.co/2Mzkh0AVOO pic.twitter.com/4v71mnbgtl
— azu (@azu_re) April 14, 2020
追記（2020/09/08）
JS Primerが2.0にアップグレードされ、ECMAScript 2020に対応しました🎉。
参考: JavaScript Primer 2.0 - ECMAScript 2020に対応した入門書を公開しました | Web Scratch
3. Webpack入門
knowledge.sakura.ad.jpより
週刊Railsウォッチでもご紹介しましたが、「Webpackとは何か」を含めて詳細に解説した、さくらインターネットの中の人の力作Webpack入門です。
4. リファレンス
上を読んだら、MozillaのJavaScriptドキュメントを一次情報として裏付けを取りながら、ググるなり本を買うなりするとよいと思います。
- リファレンス: JavaScript | MDN -- 宝の山！
後、caniuse.comとECMAScript 6 compatibility tableは定番のリファレンスですね。
JavaScriptを書くときに最小限押さえておきたい点
きりがありませんので相当絞り込んであります。
1. 'use strict';を冒頭に必ず書く
コードの冒頭に'use strict';と書くことで、ES2015より前の非推奨の書き方をエラーにするなどの制約がかかり、よくない書き方を避けられます。
参考: Strict モード - JavaScript | MDN
なお少々細かくなりますが、JavaScriptのモジュールでは、以下のように必ずstrictモードになるので書かなくても大丈夫だそうです。
- モジュール対応インタプリタはstrictモードで動く
- モジュールバンドラを使う場合は適宜
'use strict';が挿入される
2. varは使わないこと
基本はconstで変更できなくしておきます。変更が必要な場合はletを使います。
varは一切使わなくてもコードは書けますし、varには望ましくない挙動があるので使うべきではありません。
ネットで検索するときにも、varを使っているサンプルコードはそれだけで古いと判断できますので、選別の手がかりにできます。
3. 早いうちに非同期処理をPromiseとasync/awaitで書けるようにする
Promiseとasync/awaitはわかりにくいのですが、非同期処理は重要な概念でもありますし、いずれ多用することになりますので、早いうちに身体を慣れさせておくのがよいと思います。
4. ==と===の使い分け
JS で使っていい == は == null だけです。それ以外は全部 === を使え
— SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED (@mizchi) December 11, 2019
最後に
実際の勉強会ではReactやNode.jsなどもっと手広く扱ったのですが、上述の『最新JavaScript開発』のまとめがあまりにも良すぎるので、本記事では割愛いたしました。