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

17e5519c8ad1504243c5f46430893232?s=47 konosumi
June 23, 2018
470

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

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

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

での発表スライドです。

17e5519c8ad1504243c5f46430893232?s=128

konosumi

June 23, 2018
Tweet

Transcript

  1. JavaScriptの書き方 に関する考察 【第2回】React (JSフレームワーク他)x ビアバッシュ 初 心者勉強会 in秋葉原 @konosumi このすみ

  2. このすみについて •ベンチャー企業で、サーバサイド/iOS/フロントエンドJSの開発をしています。 •「このすみろぐ」というブログを書くのが趣味です。 宣伝: https://www.konosumi.net/ (最近、ブログをSSL化しました!) •技術同人サークル「このすみ堂」を立ち上げました。 技術書典4で「React + Firebase」の本を出しました!

  3. JSの考察1 何で書くのか? •方法1:素のJavaScriptで書く ただのアラートダイアログや、ブラウザ上の細かい処理 は普通にJSで書く 例:<input type=”button” onclick=”if (confirm(“よろしいですか?”)) {

    〜省略〜 }”> •方法2: jQueryを使って書く CSS感覚でDOMの特定がやりすく、歴史があり旧ブラウザへの対応力の高さ が良い 例:$(“#loginButton”).click(〜省略〜) また、BootStrapなどのCSSフレームワークがjQueryを要求するケースも多い •方法3:フロントエンド JSを使って書く(React, Angular, Vue, Riot...) 素のJSやjQueryで書くにはつらい時に書く。
  4. JSの考察2 AltJSを採用するかどうか •方法1:素のJavaScriptで書く ボタンのonclickレベルであれば、AltJSは不要で、普通に書けばそれで良い。 例: <input type=”button” onclick=”if (confirm(“よろしいですか?”)) {

    〜省略〜}”> •方法2:最新のJSで書く。ES2015, ES2016, ES2017...などのシンタックスを使う 小規模のフロントエンド JS向けという印象。ちなみに、安易に Typescriptを使わない理由は、 TS用の型定義設 定がないnpmのOSSモジュールの場合に使うのが大変だからです。 •方法3:Flowで書く 主にReact & React Native向け。ReactNativeには、Flow用の設定があらかじめ用意されている 。 3分で分かるReactNativeへのFlow導入: https://qiita.com/loverails/items/bf41bc7eca4335803abf •方法4:TypeScriptで書く 安心と安全の型宣言により、 JavaScriptに秩序をもたらします。
  5. JSの考察3 this問題で学ぶJSの多様性 最新のJSは、進化によって多様性が生まれているので、規約で縛らないと書き方がバラバラ になる。 •対策1:コンストラクタで予め bindしておく 例: this.onChangeName = this.onChangeName.bind(this);

    •対策2:使う時に適宜 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にも気を配る必要あり