Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javaな人が気を付けるべきJavaScriptコーディングスタイル

469 views

Published on

JavaScriptこわい!なJava・Pythonの人が調べた古い書き方から脱却する話

Published in: Technology
  • Be the first to comment

Javaな人が気を付けるべきJavaScriptコーディングスタイル

  1. 1. JavaScript コーディングスタイル
  2. 2. このセッションのゴール ● 最近のコーディングスタイルを知る ● 流行りの開発環境を知る ● コンポーネント指向フレームワークを知る
  3. 3. Agenda 1. ES5 / ES2015(ES6) 2. JavaScriptコーディングスタイル例 3. コンポーネント指向フレームワーク a. AngularJS b. Backbone.js c. React 4. 開発環境について a. WebStorm b. VisualStudioCode
  4. 4. 1. ES5 / ES2015
  5. 5. Script言語の集い〈 俺JavaScript作ったわ!
  6. 6. Script言語の集い〈 俺JavaScript作ったわ! なんだって!!じゃぁ僕はJScriptにするわ!
  7. 7. Script言語の集い〈 俺JavaScript作ったわ! なんだって!!じゃぁ僕はJScriptにするわ! じゃ、じゃぁ私はActionScript!!!!
  8. 8. おいおい・・・仲間割れするなよ・・・ じゃぁ私が「標準」を策定するぞ! Script言語の集い〈 俺JavaScript作ったわ! なんだって!!じゃぁ僕はJScriptにするわ! じゃ、じゃぁ私はActionScript!!!!
  9. 9. ECMAScript ● JavaScriptを含むスクリプト系言語(JScript/ActionScript)などの実 装言語の元になっている標準言語仕様 ● 標準化団体Ecma Internationalが発行している ● ECMAScript第6版は2015年6月にリリース ● 現在第5版/第6版(以後ES5/ES2015)が主要な規格となっている
  10. 10. ECMAScript ● JavaScriptを含むスクリプト系言語(JScript/ActionScript)などの実 装言語の元になっている標準言語仕様 ● 標準化団体Ecma Internationalが発行している ● ECMAScript第6版は2015年6月にリリース ● 現在第5版/第6版(以後ES5/ES2015)が主要な規格となっている ES5/ES2015 に則った コーディング規約の作成が主流
  11. 11. ES5 ● http://www.ecma-international.org/ecma-262/5.1/ ● 過去の非互換・不明瞭な挙動を明確に定めた仕様 ● ブラウザのほとんどだいたい利用可能 ○ IE9/iOS7以上であることに気を付ける
  12. 12. ES5 ~use strict~ スクリプトの先頭もしくは関数内の先頭に記載することにより strict modeで実行される "use strict"; function testFoo(){ var bar = 4; return bar; } より厳密なエラーチェックが行われる ● withの使用の禁止 ● いくつかの識別子を予約語に ● 8進数表記の禁止 etc..
  13. 13. ES5 ~Array拡張群~ Array型のデータに対してcallback関数を実行し様々なデータアク セスや処理を行うことができる ● Array.filter ○ 関数内に設定した条件に対してtrueを返すデータのみの配列を作成する ● Array.forEach ○ 配列内のそれぞれの値に対して関数処理を実行する ● Array.reduce / Array.reduceRight ○ 配列の2つの値に対して関数処理を行う ■ reduce : 左から右 ■ reduceRight : 右から左 などなど。
  14. 14. ES2015(ES6) ● http://www.ecma-international.org/ecma-262/6.0/ ● より安全で便利に使える仕様に修正・機能追加された ● 対応していないブラウザがまだ多い ❖ Traceur Compiler を使ってES5のコードに 変換することができる ❖ Chrome / Firefox が比較的対応が早い
  15. 15. ES2015 ~let / const~ { } 内のletやconstで 定義された変数は そのブラケットスコープ内のみで 使用することができる。 let foo = [1, 2, 3]; { let foo = [4, 5, 6]; console.log(foo); // => 4, 5, 6 } console.log(foo); // => 1, 2, 3
  16. 16. ES2015 ~アロー関数~ 「function」のキーワードを使わずに「=>」で処理を実行させる //ES5 var plus = function(x, y) { return x + y; }; //ES2015 var plus = (x, y) { return x + y; }; ↓ var plus = (x, y) => x + y;
  17. 17. ES2015 ~promise~ 非同期処理デザインパターンのpromiseを構文で実現できる //ES5 myProcess1(function(result1) { // 処理 myProcess2(function(result2) { // 処理 myProcess3(function(result3) { // 処理 }); }); }); //ES2015 myProcess1() .then(function(result1) { // 処理 return myProcess2(); }).then(function(result2) { // 処理 return myProcess3(); }).then(function(result3) { // 処理 });
  18. 18. この章のまとめ ● ES5/ES2015 に則ったコーディング規約の作成 が主流 ● ブラウザ互換を考えるとES5が無難そうだが、 未来を見据えてES2015を採用しTraceur Compilerを使うことも良し
  19. 19. 2. JavaScript コーディングスタイル例
  20. 20. document.writeは使わない document.writeはHTML5で非推奨となっています。 ● デバッグのしづらさ ● 性能影響 -> 可能な限りinnerHTML/insertAdjacentHTMLを利用する //write【bad】 document.write('<p>' + month + '月</p>'); //innerHTML【good】(だが低速) document.body.innerHTML += '<p>' + month + '月</p>'; //insertAdjacentHTML【best】(使えるならこちらの方が高速) document.body.insertAdjacentHTML(‘beforeend’, '<p>' + month + '月</p>';
  21. 21. window.onXXXは(極力)使わない window.onXXXは1メソッドしか登録できないため、2メソッド以上記述すると上書きされて しまう -> 可能な限りEventTarget.addEventListenerを利用する //onload【bad】 window.onload = function(){ alert('HOGE'); }; //addEventListener【good】 window.addEventListener("load",function(eve){ alert("FOO"); },false);
  22. 22. Date.prototype.getYearは使わない こちらもよく使われていますが非推奨です。 -> Date.prototype.getFullYear()を利用する var date = new Date(); alert(date.getFullYear());
  23. 23. ===や!==を使用する == や != を使うよりも厳密な評価がされる 評価値 判定 備考 数値 true +0 / -0 / NaN の場合はfalse 文字列 true 空文字の場合はfalse オブジェクト true undefined false 真偽値 True / False boolean型 True / False // 【good】 if (name !== '') {} // 【best】 if (name) {}
  24. 24. コーディング規約例 https://github.com/mitsuruog/javascript-style- guide/tree/master/es5
  25. 25. この章のまとめ ● (ES5/ES6に則って)新しい文法は取り入れる ● 規約を策定し、プロジェクト全体で書き方を統 一する
  26. 26. 3. フレームワーク
  27. 27. フレームワークを使わない場合の問題点 ● 運用・保守コストの高さ ○ 各自のスタイルで記述されることによる読みづらさ ○ 影響範囲特定のしづらさ ○ グローバル関数・変数により他開発者との命名重複 ○ 再利用可能コードの共有の困難さ ○ テスタビリティの低さ ● 役割の非分離 ○ jQuery利用時のHTML class/id管理と依存管理
  28. 28. jQueryにおける役割の非分離 <script> $(‘#user_article’).onclick({ ・・・}); </script> <div id = "user_article" class=”pop1”> //ボタンか何か </div> ここの処理を削除しよう
  29. 29. jQueryにおける役割の非分離 <script> $(‘#user_article’).onclick({ ・・・}); </script> <div id = "user_article" class=”pop1”> //ボタンか何か </div> ここの処理を削除しよう 削除した処理以外で使ってないからこ のidも削除しよう
  30. 30. jQueryにおける役割の非分離 <script> $(‘#user_article’).onclick({ ・・・}); </script> <div id="user_article" class=”pop1”> //ボタンか何か </div> #user_article { margin: 20% auto; width: 96%; } CSSでも使っ てた!!!! <script> $(‘user_article’).append(‘追加’); </script> 別のJSでも!
  31. 31. jQueryにおける役割の非分離 <script> $(‘#user_article’).onclick({ ・・・}); </script> <div id="user_article" class=”pop1”> //ボタンか何か </div> #user_article { margin: 20% auto; width: 96%; } CSSでも使っ てた!!!! <script> $(‘user_article’).append(‘追加’); </script> 別のJSでも! ModelやViewの役割分担を しっかりやって 悲劇を回避しよう
  32. 32. jQueryにおける役割の非分離 <script> $(‘#user_article’).onclick({ ・・・}); </script> <div id="user_article" class=”pop1”> //ボタンか何か </div> #user_article { margin: 20% auto; width: 96%; } CSSでも使っ てた!!!! <script> $(‘user_article’).append(‘追加’); </script> 別のJSでも! Hello, Framework!
  33. 33. フレームワーク人気起爆剤 ● SPA (Single Page Application) ○ 初回ページ読込時にサイト全体の移動に必要なリソースを全て 読込んでおく手法 ■ ユーザがアプリケーションを使っている間、Webページ全体 をロードすることがない ■ レスポンスが高速 ■ UI/UXに優れている ■ あくまでJSなのでSEO対策ができない
  34. 34. フレームワーク人気起爆剤 ● SPA (Single Page Application) ○ 初回ページ読込時にサイト全体の移動に必要なリソースを全て 読込んでおく手法 ■ ユーザがアプリケーションを使っている間、Webページ全体 をロードすることがない ■ レスポンスが高速 ■ UI/UXに優れている jQueryでもできなくはない が コードが複雑・難解になる
  35. 35. フレームワーク AngularJS Backbone.js React ライセンス MIT MIT BSD 学習コスト 高い 普通 高い 機能性 フルスタック 必要最低限 Viewのみ データ バインディング 双方向 なし 一方向 おすすめ利用例 - フォーム画面 - 管理画面 DOM操作の多いシ ステム - 大規模システム - サーバサイドで作り込 むシステム
  36. 36. ● Google(とコミュニティ)製MVフレームワーク ● HTML拡張 ○ 既存のタグにAngular独自の役割を付与する手法 ● Data BindingやTemplate Engineなど豊富な機能 ○ 双方向Data Binding ■ Data Bindingは自動適用 ● CRUDに強い ● フルスタックであるが故に初期学習コストが高い ● Angular 2 で仕様が変貌した
  37. 37. Data Bindingの双方向性 たこやき 1 皿 円400 データソースからUIへ 皿の数  =1 初期表示時の値はこれよ!!
  38. 38. Data Bindingの双方向性 たこやき 2 皿 円400 UIからデータソースへ 皿の数  =1 値を変更したよ!!
  39. 39. Data Bindingの双方向性 たこやき 2 皿 円400皿の数  =2 値を変更したよ!! UIからデータソースへ
  40. 40. Data Bindingの双方向性 たこやき 2 皿 円400皿の数  =2 値を変更したよ!! UIからデータソースへ データソースからも UIからも 相互に値の変更ができる
  41. 41. たこやき 2 皿 円800皿の数  =2 UIからデータソースへ Data Bindingの自動適用
  42. 42. <script> var app = angular.module('myApp', []); app.controller('calcController', function($scope) { $scope.price = 400 * dishNum; }); </script> <div ng-controller="myController"> {{price}} </div> Data Bindingの自動適用 値を代入してやるだけで表 示に反映される! (document.innerHTMLにあた る記述がいらない)
  43. 43. ● Google(とコミュニティ)製MVフレームワーク ● HTML拡張 ○ 既存のタグにAngular独自の役割を付与する手法 ● Data BindingやTemplate Engineなど豊富な機能 ○ 双方向Data Binding ○ Data Bindingは自動適用 ● CRUDに強い ● フルスタックであるが故に初期学習コストが高い ● Angular 2 で仕様が変貌した
  44. 44. ● Google(とコミュニティ)製MVCフレームワーク ● MIT Licence / OSS / 商用利用可 ● HTML拡張 ○ 既存のタグにAngular独自の役割を付与する手法 ● SPAでの利用を前提として作られたフレームワーク ● Data BindingやTemplate Engineなど豊富な機能 ● CRUDに強い ● フルスタックであるが故に初期学習コストが高い ● Angular 2 で仕様が変貌した(らしい) CRUDに強い ↓ フォーム画面や管理画面におすすめ
  45. 45. ● MVCフレームワーク(Coffee Scriptと同じ作者) ● 枠組みだけ提供する軽量フレームワーク ○ 不足している機能は他のツールで補う必要がある ● MVCそれぞれが疎結合なコードを書きやすい ○ アプリの状態を管理するRouter etc.を保持 ● 変更の適用は開発者が指定する ● (今のところ)安定している(ちょっと枯れ気味)
  46. 46. たこやき 2 皿 円800皿の数  =2 2皿分の表示にしてね! Data Bindingのnot自動適用
  47. 47. ● MVCフレームワーク(Coffee Scriptと同じ作者) ● 枠組みだけ提供する軽量フレームワーク ○ 不足している機能は他のツールで補う必要がある ● SPAでの利用を前提として作られたフレームワーク ● MVCそれぞれが疎結合なコードを書きやすい ○ アプリの状態を管理するRouter etc.を保持 ● ある程度自由度が高い書き方ができる ○ 下手をするとスパゲティコードが出来上がる ● (今のところ)安定している(ちょっと枯れ気味) 疎結合なコードにしやすい ↓ (DOM操作の多いアプリなど) 複雑になりやすい システムにおすすめ
  48. 48. ● Facebook製Viewライブラリ ● UIパーツを作成・出力するコンポーネントの集合体 ● 規模が大きくなっても管理しやすい ○ 逆に小規模なアプリには向かない ● 一方向Data Binding ○ Data Bindingは自動適用 ● ユーザのアクション毎にViewの再構築 ○ アニメーションを付けようとすると高負荷
  49. 49. たこやき 2 皿 円400 一方向Data Binding ページ全部 再構築!
  50. 50. たこやき 2 皿 円800 一方向Data Binding
  51. 51. ● Facebook製Viewライブラリ ● UIパーツを作成・出力するコンポーネントの集合体 ● 規模が大きくなっても管理しやすい ○ 逆に小規模なアプリには向かない ● 一方向データバインディング ○ 変更は自動適用 ● ユーザのアクション毎にViewの再構築 ○ アニメーションを付けようとすると高負荷 大規模なシステム アニメーションのないページ サーバサイドで作りこみするシステム におすすめ
  52. 52. 4. 開発環境について
  53. 53. おすすめIDE(有償) WebStorm ● JetBrains製フロントエンドIDE ● 強力なコード補完 ● バージョン管理・デバッガ完備 ● 無料のコミュニティライセンスもある(機能制限あり) ● http://samuraism.com/products/jetbrains/webstorm
  54. 54. おすすめIDE(無償) Visual Studio Code ● Microsoft製フロントエンドIDE ● 強力なコード補完 ● バージョン管理・デバッガ完備 ● https://www.visualstudio.com/ja-jp/products/code-vs.aspx
  55. 55. この章のまとめ ● 直感性が高いのはWeb Storm ○ 使うほど細かな使いやすさに気づく ○ ただし有償 ● 無償IDEにこだわるならVisual Studio Code
  56. 56. セッションのまとめ
  57. 57. まとめ! ● 最近のコーディングスタイルを知る ○ ES5/ES2015に則り規約を設けて開発する ● 流行りの開発環境を知る ○ WebStorm / Visual Studio Code ● フレームワークを知る ○ 用途に応じてAngular / Backbone.js / React など を利用する
  58. 58. おしまい。
  59. 59. 参考資料 ES5/ES6 ● ECMAScript compat-table ○ http://kangax.github.io/compat-table/es5/ ○ http://kangax.github.io/compat-table/es6/ ● ECMAScript 仕様ドキュメント ○ http://www.ecma-international.org/ecma-262/5.1/ ○ http://www.ecma-international.org/ecma-262/6.0/ ● use strict ○ https://msdn.microsoft.com/ja-jp/library/br230269(v=vs.94).aspx ● ES6 仕様対応表 ○ https://github.com/lukehoban/es6features#readme ○ http://es6-features.org/#Constants ●
  60. 60. 参考資料 コーディング規約例 ● コーディング規約例(ES6) ○ https://github.com/mitsuruog/javascript-style-guide ● コーディング規約例(ES5) ○ https://github.com/mitsuruog/javascript-style-guide/tree/master/es5 ● tips ○ https://www.w3.org/TR/2011/WD-html5-20110525/apis-in-html-documents.html#document.write ○ https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML ○ http://qiita.com/labocho/items/5fbaa0491b67221419b4
  61. 61. 参考資料 フレームワーク ● AngularJS ○ https://angularjs.org/ ○ http://www.tohoho-web.com/ex/angularjs.html ● Backbone.js ○ http://backbonejs.org/ ○ https://appkitbox.com/knowledge/javascript/20130315-45 ○ http://www.slideshare.net/itokami1123/01-backbone ● React ○ https://facebook.github.io/react/ ○ https://facebook.github.io/react/docs/tutorial-ja-JP.html ○
  62. 62. 参考資料 開発環境 ● Web Storm(本家) ○ https://www.jetbrains.com/webstorm/ ● Web Storm(公式日本代理店) ○ http://samuraism.com/products/jetbrains/webstorm ● Visual Studio Code ○ https://www.visualstudio.com/ja-jp/products/code-vs.aspx ●

×