Slide 1
Slide 1 text
JavaScriptの書き方
に関する考察
【第2回】React （JSフレームワーク他）x ビアバッシュ 初
心者勉強会 in秋葉原
@konosumi このすみ
Slide 2
Slide 2 text
このすみについて
●ベンチャー企業で、サーバサイド/iOS/フロントエンドJSの開発をしています。
●「このすみろぐ」というブログを書くのが趣味です。
宣伝： https://www.konosumi.net/
(最近、ブログをSSL化しました！)
●技術同人サークル「このすみ堂」を立ち上げました。
技術書典4で「React + Firebase」の本を出しました！
Slide 3
Slide 3 text
JSの考察1 何で書くのか？
●方法１：素のJavaScriptで書く
ただのアラートダイアログや、ブラウザ上の細かい処理 は普通にJSで書く
例：
●方法２： jQueryを使って書く
CSS感覚でDOMの特定がやりすく、歴史があり旧ブラウザへの対応力の高さ が良い
例：$(“#loginButton”).click(〜省略〜)
また、BootStrapなどのCSSフレームワークがjQueryを要求するケースも多い
●方法３：フロントエンド JSを使って書く(React, Angular, Vue, Riot...)
素のJSやjQueryで書くにはつらい時に書く。
Slide 4
Slide 4 text
JSの考察2 AltJSを採用するかどうか
●方法１：素のJavaScriptで書く
ボタンのonclickレベルであれば、AltJSは不要で、普通に書けばそれで良い。
例：
●方法２：最新のJSで書く。ES2015, ES2016, ES2017...などのシンタックスを使う
小規模のフロントエンド JS向けという印象。ちなみに、安易に Typescriptを使わない理由は、 TS用の型定義設
定がないnpmのOSSモジュールの場合に使うのが大変だからです。
●方法３：Flowで書く
主にReact & React Native向け。ReactNativeには、Flow用の設定があらかじめ用意されている 。
３分で分かるReactNativeへのFlow導入： https://qiita.com/loverails/items/bf41bc7eca4335803abf
●方法４：TypeScriptで書く
安心と安全の型宣言により、 JavaScriptに秩序をもたらします。
Slide 5
Slide 5 text
JSの考察3 this問題で学ぶJSの多様性
最新のJSは、進化によって多様性が生まれているので、規約で縛らないと書き方がバラバラ になる。
●対策１：コンストラクタで予め bindしておく
例： this.onChangeName = this.onChangeName.bind(this);
●対策２：使う時に適宜 bindする
例：onChange = {this.onChangeName.bind(this)}
●対策3：ES2015のアロー関数を使う
例：onChange = {(e) => this.onChangeName(e)}
●対策4：ES7 Function Bind Syntaxを使う
例：onChange = {::this.onChangeName}
参考： https://blog.jeremyfairbank.com/javascript/javascript-es7-function-bind-syntax/
Slide 6
Slide 6 text
JSの考察4 ブラウザの互換性問題
●どの関数を使って書くのか？
例：Object.values()はIEでは動かない。
参考： https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/values
●webpack で互換性を解決するには？
babel-polyfillで解決することができる
参考： https://babeljs.io/docs/en/babel-polyfill.html
例： module.exports = { entry: ["babel-polyfill", "./app/js"] };
但し、ポリフィルすると、互換性の代償に出来上がった JSのサイズが大きくなります。 古いブラウザを切ることこ
とで、JSを軽くするという選択肢もありです。
Slide 7
Slide 7 text
JSの考察5 完成品のJSまで気を配るか問題
ビルドされた結果の完成品のJSにまで気を配っている人 は、思いの他少ないと推測する。
●webpackのmodeで学ぶ、本番用と開発用の JavaScriptの違い
やり方：module.exports = { mode: 'production' } とします。
本番設定では、最小化 & 最適化 & 簡易な難読化がされます。ここをサボると、 JSのサイズが無駄に大きくなっ
たり、簡単にロジックを覗き見れるフロントエンド JSになってしまうのです。
参考(兼、自分のブログの宣伝 )：https://www.konosumi.net/entry/2018/06/23/024057
Slide 8
Slide 8 text
JSの考察 まとめ
JavaScriptを本気で使おうとすると、意外と考える事が多いのです。
●考察1：どのJSを使うのかのスケール「素 => jQuery => フロントエンドJS」
●考察2：AltJsの書き方のスケール「素 => ES○○ => Flow/TypeScript」
●考察3：コーディング規約は重要である
●考察4：各ブラウザでの動作確認は抜かりなくやりましょう
●考察5：作る過程のみならず、出来上がった完成品JSにも気を配る必要あり