Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Javaな人が気を付けるべきJavaScriptコーディングスタイル
Similar to Javaな人が気を付けるべきJavaScriptコーディングスタイル (20)
Recently uploaded
Recently uploaded (15)
Javaな人が気を付けるべきJavaScriptコーディングスタイル
- 2. このセッションのゴール ● 最近のコーディングスタイルを知る ● 流行りの開発環境を知る ● コンポーネント指向フレームワークを知る
- 3. Agenda 1. ES5 / ES2015(ES6) 2. JavaScriptコーディングスタイル例 3. コンポーネント指向フレームワーク a. AngularJS b. Backbone.js c. React 4. 開発環境について a. WebStorm b. VisualStudioCode
- 4. 1. ES5 / ES2015
- 9. ECMAScript ● JavaScriptを含むスクリプト系言語(JScript/ActionScript)などの実 装言語の元になっている標準言語仕様 ● 標準化団体Ecma Internationalが発行している ● ECMAScript第6版は2015年6月にリリース ● 現在第5版/第6版(以後ES5/ES2015)が主要な規格となっている
- 10. ECMAScript ● JavaScriptを含むスクリプト系言語(JScript/ActionScript)などの実 装言語の元になっている標準言語仕様 ● 標準化団体Ecma Internationalが発行している ● ECMAScript第6版は2015年6月にリリース ● 現在第5版/第6版(以後ES5/ES2015)が主要な規格となっている ES5/ES2015 に則った コーディング規約の作成が主流
- 11. ES5 ● http://www.ecma-international.org/ecma-262/5.1/ ● 過去の非互換・不明瞭な挙動を明確に定めた仕様 ● ブラウザのほとんどだいたい利用可能 ○ IE9/iOS7以上であることに気を付ける
- 12. ES5 ～use strict～ スクリプトの先頭もしくは関数内の先頭に記載することにより strict modeで実行される "use strict"; function testFoo(){ var bar = 4; return bar; } より厳密なエラーチェックが行われる ● withの使用の禁止 ● いくつかの識別子を予約語に ● 8進数表記の禁止 etc..
- 13. ES5 ～Array拡張群～ Array型のデータに対してcallback関数を実行し様々なデータアク セスや処理を行うことができる ● Array.filter ○ 関数内に設定した条件に対してtrueを返すデータのみの配列を作成する ● Array.forEach ○ 配列内のそれぞれの値に対して関数処理を実行する ● Array.reduce / Array.reduceRight ○ 配列の2つの値に対して関数処理を行う ■ reduce : 左から右 ■ reduceRight : 右から左 などなど。
- 14. ES2015(ES6) ● http://www.ecma-international.org/ecma-262/6.0/ ● より安全で便利に使える仕様に修正・機能追加された ● 対応していないブラウザがまだ多い ❖ Traceur Compiler を使ってES5のコードに 変換することができる ❖ Chrome / Firefox が比較的対応が早い
- 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. 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. 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. この章のまとめ ● ES5/ES2015 に則ったコーディング規約の作成 が主流 ● ブラウザ互換を考えるとES5が無難そうだが、 未来を見据えてES2015を採用しTraceur Compilerを使うことも良し
- 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. 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. Date.prototype.getYearは使わない こちらもよく使われていますが非推奨です。 -> Date.prototype.getFullYear()を利用する var date = new Date(); alert(date.getFullYear());
- 23. ===や!==を使用する == や != を使うよりも厳密な評価がされる 評価値 判定 備考 数値 true +0 / -0 / NaN の場合はfalse 文字列 true 空文字の場合はfalse オブジェクト true undefined false 真偽値 True / False boolean型 True / False // 【good】 if (name !== '') {} // 【best】 if (name) {}
- 26. 3. フレームワーク
- 27. フレームワークを使わない場合の問題点 ● 運用・保守コストの高さ ○ 各自のスタイルで記述されることによる読みづらさ ○ 影響範囲特定のしづらさ ○ グローバル関数・変数により他開発者との命名重複 ○ 再利用可能コードの共有の困難さ ○ テスタビリティの低さ ● 役割の非分離 ○ jQuery利用時のHTML class/id管理と依存管理
- 28. jQueryにおける役割の非分離 <script> $(‘#user_article’).onclick({ ・・・}); </script> <div id = "user_article" class=”pop1”> //ボタンか何か </div> ここの処理を削除しよう
- 29. jQueryにおける役割の非分離 <script> $(‘#user_article’).onclick({ ・・・}); </script> <div id = "user_article" class=”pop1”> //ボタンか何か </div> ここの処理を削除しよう 削除した処理以外で使ってないからこ のidも削除しよう
- 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. 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. 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. フレームワーク人気起爆剤 ● SPA (Single Page Application) ○ 初回ページ読込時にサイト全体の移動に必要なリソースを全て 読込んでおく手法 ■ ユーザがアプリケーションを使っている間、Webページ全体 をロードすることがない ■ レスポンスが高速 ■ UI/UXに優れている ■ あくまでJSなのでSEO対策ができない
- 34. フレームワーク人気起爆剤 ● SPA (Single Page Application) ○ 初回ページ読込時にサイト全体の移動に必要なリソースを全て 読込んでおく手法 ■ ユーザがアプリケーションを使っている間、Webページ全体 をロードすることがない ■ レスポンスが高速 ■ UI/UXに優れている jQueryでもできなくはない が コードが複雑・難解になる
- 35. フレームワーク AngularJS Backbone.js React ライセンス MIT MIT BSD 学習コスト 高い 普通 高い 機能性 フルスタック 必要最低限 Viewのみ データ バインディング 双方向 なし 一方向 おすすめ利用例 - フォーム画面 - 管理画面 DOM操作の多いシ ステム - 大規模システム - サーバサイドで作り込 むシステム
- 36. ● Google(とコミュニティ)製MVフレームワーク ● HTML拡張 ○ 既存のタグにAngular独自の役割を付与する手法 ● Data BindingやTemplate Engineなど豊富な機能 ○ 双方向Data Binding ■ Data Bindingは自動適用 ● CRUDに強い ● フルスタックであるが故に初期学習コストが高い ● Angular 2 で仕様が変貌した
- 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. ● Google(とコミュニティ)製MVフレームワーク ● HTML拡張 ○ 既存のタグにAngular独自の役割を付与する手法 ● Data BindingやTemplate Engineなど豊富な機能 ○ 双方向Data Binding ○ Data Bindingは自動適用 ● CRUDに強い ● フルスタックであるが故に初期学習コストが高い ● Angular 2 で仕様が変貌した
- 44. ● Google(とコミュニティ)製MVCフレームワーク ● MIT Licence / OSS / 商用利用可 ● HTML拡張 ○ 既存のタグにAngular独自の役割を付与する手法 ● SPAでの利用を前提として作られたフレームワーク ● Data BindingやTemplate Engineなど豊富な機能 ● CRUDに強い ● フルスタックであるが故に初期学習コストが高い ● Angular 2 で仕様が変貌した(らしい) CRUDに強い ↓ フォーム画面や管理画面におすすめ
- 45. ● MVCフレームワーク(Coffee Scriptと同じ作者) ● 枠組みだけ提供する軽量フレームワーク ○ 不足している機能は他のツールで補う必要がある ● MVCそれぞれが疎結合なコードを書きやすい ○ アプリの状態を管理するRouter etc.を保持 ● 変更の適用は開発者が指定する ● (今のところ)安定している(ちょっと枯れ気味)
- 47. ● MVCフレームワーク(Coffee Scriptと同じ作者) ● 枠組みだけ提供する軽量フレームワーク ○ 不足している機能は他のツールで補う必要がある ● SPAでの利用を前提として作られたフレームワーク ● MVCそれぞれが疎結合なコードを書きやすい ○ アプリの状態を管理するRouter etc.を保持 ● ある程度自由度が高い書き方ができる ○ 下手をするとスパゲティコードが出来上がる ● (今のところ)安定している(ちょっと枯れ気味) 疎結合なコードにしやすい ↓ (DOM操作の多いアプリなど） 複雑になりやすい システムにおすすめ
- 48. ● Facebook製Viewライブラリ ● UIパーツを作成・出力するコンポーネントの集合体 ● 規模が大きくなっても管理しやすい ○ 逆に小規模なアプリには向かない ● 一方向Data Binding ○ Data Bindingは自動適用 ● ユーザのアクション毎にViewの再構築 ○ アニメーションを付けようとすると高負荷
- 51. ● Facebook製Viewライブラリ ● UIパーツを作成・出力するコンポーネントの集合体 ● 規模が大きくなっても管理しやすい ○ 逆に小規模なアプリには向かない ● 一方向データバインディング ○ 変更は自動適用 ● ユーザのアクション毎にViewの再構築 ○ アニメーションを付けようとすると高負荷 大規模なシステム アニメーションのないページ サーバサイドで作りこみするシステム におすすめ
- 52. 4. 開発環境について
- 53. おすすめIDE(有償) WebStorm ● JetBrains製フロントエンドIDE ● 強力なコード補完 ● バージョン管理・デバッガ完備 ● 無料のコミュニティライセンスもある(機能制限あり) ● http://samuraism.com/products/jetbrains/webstorm
- 54. おすすめIDE(無償) Visual Studio Code ● Microsoft製フロントエンドIDE ● 強力なコード補完 ● バージョン管理・デバッガ完備 ● https://www.visualstudio.com/ja-jp/products/code-vs.aspx
- 55. この章のまとめ ● 直感性が高いのはWeb Storm ○ 使うほど細かな使いやすさに気づく ○ ただし有償 ● 無償IDEにこだわるならVisual Studio Code
- 56. セッションのまとめ
- 57. まとめ！ ● 最近のコーディングスタイルを知る ○ ES5/ES2015に則り規約を設けて開発する ● 流行りの開発環境を知る ○ WebStorm / Visual Studio Code ● フレームワークを知る ○ 用途に応じてAngular / Backbone.js / React など を利用する
- 58. おしまい。
- 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. 参考資料 コーディング規約例 ● コーディング規約例(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. 参考資料 フレームワーク ● 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. 参考資料 開発環境 ● 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 ●