2019年前半の「JavaScriptをちゃんとやるための地図」

こんにちは、hachi8833です。BPS社内勉強会の発表を元に、社内JavaScript勢の皆さまのお力を得て記事を書きました。 目的 JavaScriptをたまにしか使わない私ですが、それもあってなおさら書くときに迷いに迷います。 ネットの情報多すぎ、動き激しすぎ、選り分けるにしても指針が欲しい 古いコードや毒入りコードを拾って食あたりや、泥舟に乗って沈没するのを少しでも避けたい 最初の一歩をどこから踏み出すかの手がかりが欲しい そういったわけで、2019年前半と区切って、一度JavaScript世界について門外漢ならではの「大きな絵」が欲しかったのでした。ここに書いたことの中には来年には古くなっているものあるかもしれません。 ただ、社内のJS勢の話を総合すると、JavaScript世界は数年前に比べるとかなり落ち着きつつあるとのことです。この機会にということで、主に自分のために現在のJavaScript世界で遭難しないための地図を作りました。そのうえで、こういうもっとごつい本↓あたりに進んでみようと思っています。 対象 本記事は以下の読者を念頭に置いています。プログラミング自体が初めての方orそれに近い方は対象に含めていません🙇。 他の言語をある程度やってるがES2015以降は初めての人 ES2015以前にJavaScriptをやってたが再入門したい人 最近のJavaScriptの動向を大づかみしたい人 最初に押さえておきたいもの 2019年6月現在、最初に読むのにふさわしいと思える良質なオンライン記事/ドキュメント/書籍を以下に絞り込みました。今後何をするにしても、これらを読んでからにしたいと思います。 1. JavaScript界隈を大づかみする地図 記事: TypeScript入門以前ガイド - mizchi’s blog 同記事より 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から学べる再入門書です。同書が何を目的とし、何を目的としていないかについてははじめににも書かれていますので、そちらをご覧ください。 3. Webpack入門 面倒なJavaScriptコードのとりまとめがこれ1つで可能に、「webpack」入門 | さくらのナレッジ knowledge.sakura.ad.jpより 週刊Railsウォッチでもご紹介しましたが、「Webpackとは何か」を含めて詳細に解説した、さくらインターネットの中の人の力作Webpack入門です。 4. リファレンス 上を読んだら、MozillaのJavaScriptドキュメントを一次情報として裏付けを取りながら、ググるなり本を買うなりするとよいと思います。 リファレンス: JavaScript | MDN — 宝の山! 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はわかりにくいのですが、非同期処理は重要な概念でもありますし、いずれ多用することになりますので、早いうちに身体を慣れさせておくのがよいと思います。 非同期表現: Promise と async/await — TypeScript入門以前ガイド - mizchi’s blog 最後に 実際の勉強会ではReactやNode.jsなどもっと手広く扱ったのですが、上述の『最新JavaScript開発』のまとめがあまりにも良すぎるので、本記事では割愛いたしました。 関連記事 JavaScript: 5分でわかるPromiseの基礎(翻訳) JavaScriptスタイルガイド 1〜8: 型、参照、オブジェクト、配列、関数ほか (翻訳)