JavaScriptの書き方についての考察 / How to codeing JavaScript

JavaScriptの書き方についての考察

【第2回】React （JSフレームワーク他）x ビアバッシュ 初心者勉強会 in秋葉原
https://sakeganaito.connpass.com/event/88932/

での発表スライドです。

Transcript

1. JavaScriptの書き方 に関する考察 【第2回】React （JSフレームワーク他）x ビアバッシュ 初 心者勉強会 in秋葉原 @konosumi このすみ
2. このすみについて •ベンチャー企業で、サーバサイド/iOS/フロントエンドJSの開発をしています。 •「このすみろぐ」というブログを書くのが趣味です。 宣伝： https://www.konosumi.net/ (最近、ブログをSSL化しました！) •技術同人サークル「このすみ堂」を立ち上げました。 技術書典4で「React + Firebase」の本を出しました！
3. JSの考察1 何で書くのか？ •方法１：素のJavaScriptで書く ただのアラートダイアログや、ブラウザ上の細かい処理 は普通にJSで書く 例：<input type=”button” onclick=”if (confirm(“よろしいですか?”)) { 〜省略〜 }”> •方法２： jQueryを使って書く CSS感覚でDOMの特定がやりすく、歴史があり旧ブラウザへの対応力の高さ が良い 例：$(“#loginButton”).click(〜省略〜) また、BootStrapなどのCSSフレームワークがjQueryを要求するケースも多い •方法３：フロントエンド JSを使って書く(React, Angular, Vue, Riot...) 素のJSやjQueryで書くにはつらい時に書く。
4. JSの考察2 AltJSを採用するかどうか •方法１：素のJavaScriptで書く ボタンのonclickレベルであれば、AltJSは不要で、普通に書けばそれで良い。 例： <input type=”button” onclick=”if (confirm(“よろしいですか?”)) { 〜省略〜}”> •方法２：最新の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に秩序をもたらします。
5. 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/
6. 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を軽くするという選択肢もありです。
7. JSの考察5 完成品のJSまで気を配るか問題 ビルドされた結果の完成品のJSにまで気を配っている人 は、思いの他少ないと推測する。 •webpackのmodeで学ぶ、本番用と開発用の JavaScriptの違い やり方：module.exports = { mode: 'production' } とします。 本番設定では、最小化 & 最適化 & 簡易な難読化がされます。ここをサボると、 JSのサイズが無駄に大きくなっ たり、簡単にロジックを覗き見れるフロントエンド JSになってしまうのです。 参考(兼、自分のブログの宣伝 )：https://www.konosumi.net/entry/2018/06/23/024057
8. JSの考察 まとめ JavaScriptを本気で使おうとすると、意外と考える事が多いのです。 •考察1：どのJSを使うのかのスケール「素 => jQuery => フロントエンドJS」 •考察2：AltJsの書き方のスケール「素 => ES◦◦ => Flow/TypeScript」 •考察3：コーディング規約は重要である •考察4：各ブラウザでの動作確認は抜かりなくやりましょう •考察5：作る過程のみならず、出来上がった完成品JSにも気を配る必要あり