Tech Racho エンジニアの「?」を「!」に。
  • Ruby / Rails以外の開発一般

2019年前半の「JavaScriptをちゃんとやるための地図」(追記あり)

こんにちは、hachi8833です。BPS社内勉強会の発表を元に、社内JavaScript勢の皆さまのお力を得て記事を書きました。

目的

JavaScriptをたまにしか使わない私ですが、それもあってなおさら書くときに迷いに迷います。

  • ネットの情報多すぎ、動き激しすぎ、選り分けるにしても指針が欲しい
  • 古いコードや毒入りコードを拾って食あたりや、泥舟に乗って沈没するのを少しでも避けたい
  • 最初の一歩をどこから踏み出すかの手がかりが欲しい

そういったわけで、2019年前半と区切って、一度JavaScript世界について門外漢ならではの「大きな絵」が欲しかったのでした。ここに書いたことの中には来年には古くなっているものあるかもしれません。

ただ、社内のJS勢の話を総合すると、JavaScript世界は数年前に比べるとかなり落ち着きつつあるとのことです。この機会にということで、主に自分のために現在のJavaScript世界で遭難しないための地図を作りました。そのうえで、こういうもっとごつい本↓あたりに進んでみようと思っています。

対象

本記事は以下の読者を念頭に置いています。プログラミング自体が初めての方orそれに近い方は対象に含めていません🙇。

  • 他の言語をある程度やってるがES2015以降は初めての人
  • ES2015以前にJavaScriptをやってたが再入門したい人
  • 最近のJavaScriptの動向を大づかみしたい人

最初に押さえておきたいもの

2019年6月現在、最初に読むのにふさわしいと思える良質なオンライン記事/ドキュメント/書籍を以下に絞り込みました。今後何をするにしても、これらを読んでからにしたいと思います。

1. JavaScript界隈を大づかみする地図


同記事より

mizchiさんがTypeScriptを始めるうえでの心得について書いた記事です。網羅的ではありませんが、要点を的確に押さえていて、急いでいる方が最初に読むのにとてもよいと思います。


こちらの書籍は勉強会の後に知りました。本記事でまとめようとしていたJavaScriptの概要や歴史や動向、開発の要点などを遥かに上のレベルで見事に網羅していて脱帽しました。特定のトランスパイラやフレームワークに偏らないようなるべく中立に書かれているように見える点にも好感を持ちました。何より文章の質がとても高いと思います❤️。Ruby on Railsにも言及しています。

JavaScriptの文法入門書ではありませんが、最初に読んでおくと自分の中に「大きな地図」を作るうえでとても役立つと思います。少なくとも今の自分には助かりました。

初版は2017/08/11ですが、私が買ったKindle版は2019/04/05にVer.1.1になっており、現時点の最新の動向も反映されています。

2. オンライン入門書


jsprimer.netより

js-primerは、azuさんを中心に今も書き直されている、ES2015以降を対象としてJavaScriptというプログラミングを1から学べる再入門書です。同書が何を目的とし、何を目的としていないかについてははじめににも書かれていますので、そちらをご覧ください。

追記(2020/04/14)

JS Primerが4/27に書籍として発売されるそうです🎉。

追記(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ドキュメントを一次情報として裏付けを取りながら、ググるなり本を買うなりするとよいと思います。

後、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. =====の使い分け

最後に

実際の勉強会ではReactやNode.jsなどもっと手広く扱ったのですが、上述の『最新JavaScript開発』のまとめがあまりにも良すぎるので、本記事では割愛いたしました。

関連記事

JavaScript: 5分でわかるPromiseの基礎(翻訳)

JavaScriptスタイルガイド 1〜8: 型、参照、オブジェクト、配列、関数ほか (翻訳)


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。