エンターテイメント!!

遊戯王好きのJavaエンジニアのブログ。バーニングソウルを会得する特訓中。

【書評】最新JavaScript開発〜ES2017対応モダンプログラミング

まとメモ

JavaScript解説

ECMAScript

JavaScriptから言語仕様を抽出した規格。
ブラウザ操作のAPIであるDOM等を除いたものが定義されている。

Node.js

Node.jsの登場でJavaScriptCLIとして動くようになった。

JavaScriptの使われ方とその問題

複雑化に対応するために高速に進化した反面、クロスドメインで使われることが多くなった。
他言語エンジニアが片手間で書いたコードは、メンテが難しく進化に対応できていないことが多い。

APIサーバーとJSの分離による解決

APIサーバーとウェブクライアントが分離されることで、言語が入り混じることが少なくなった。
しかし、まだドメイン知識が重複してしまっているところがある。

今は、Node.jsの登場で、APIサーバーも構築できるようになっている。

JavaScriptの始め方

Node.jsのインストール

windows:Nodist
mac:anyenv+ndenv

トランスパイラ

コンパイラのようなもの。
JavaScriptを吐き出すのが仕事。

  • babel
  • webpack loader

バンドラ

複数ファイルを1ファイルにする。
モジュール開発しつつ、Webブラウザ上でうごくものを開発できる。

  • browserify
  • webpack
  • rollup

クセがどれも強い。

型の恩恵を受ける

Flow

静的な型チェックを行う。
プロジェクトの一部分に導入できることもできる。

型の概念は、TypeScriptに似ている。
mixed・合成型って型があるのが特徴的。

ユニットテストをしよう

  • AVA
    • テストの並列実行可能
    • 並列で処理するため高速

TDD

  • チケット駆動開発
  • 設計・開発のための技法
  • 雑な作りから、より洗練されたコードを作って行くのに向いている。

黄金サイクル

Red→Green→RefactorのサイクルがTDDの基本。

Red:テストだけ書く Green:テストを通る最小限のコードを書く Refactor:リファクタリングしてコードを洗練させる。

最初は、コンパイルエラーが出ず、テストに失敗する状態を作る。
テストも偶然通るような実装にはしないほうがいい。正しい実装に変化したことがわかりづらくなるため。
テストが通るようになったら、リファクタリングを行う。
この際に、挙動を変えないように注意する。
挙動が変わったかどうかは、テストの実行で確認する。

十分に仕様を設計・実装できていると確信できるものに対しては、サイクルを回す意味は薄い。

ウェブブラウザ向けの開発におけるテスト

E2Eテストは、書かなくて済むのなら、書かないほうがいい。
やる場合、テスト実行時間が長いこと、非効率であることに留意する必要がある。

E2Eテストの選択肢

  • Selenium WebDriver
  • Pantom.js
  • SlimerJS
  • Nightmare

Appendix JavaScriptの歩き方

できる限り公式ドキュメントを読む

日本語の情報は、古くなってる可能性が高い。
JavaScriptは開発が活発であるため、翻訳が追いつかないことが多い。

英語が苦手な人は、Google翻訳でOK

公式以外

  • stack overflow
  • Qiita
  • jser.info

技術選定には注意する

JavaScriptは、新陳代謝が早い。
今主流でも、2・3年後には、非主流になっていることもある。
スタープログラマでも、技術選定でミスをする。
JavaScriptでうまくやっていくには、技術に対するアンテナ感度を上げておくことが必要。
基礎*1をしっかり作ることが大切。
マルチパラダイム言語であるため、他言語の知見を知っておくことは、技術選定ミスを犯しにくくさせる。

  • Google検索する場合は、1年以内のデータに絞る。
  • Githubのスター数

エンジニアが身につけるべき基礎力

名前をつける力

  • 名前を正しくつけることは、責務の抽象化能力
  • 名前から責務の範囲を考える
  • 名前にお約束を設ける

ウェブ

  • HTML5.1の仕様
  • CSSの仕様
  • React + Redux
    • シンプル
    • パワフル
    • 学習コストが高くない

感想

読んでて、俺は基礎ができているのか?って不安になる。
不安になるってことはできてないんだろうな。

HTML5/CSSの仕様は、読んだことがない。
利用するときに探すだけってことが多い。
一回くらいは、目を通したほうがいいかも知れない。

*1:個別の細かいやり方ではなく、汎用的な手法や本質的な知識