良質なコードを高速に書くコツ

3,656 views
3,427 views

Published on

社内勉強会資料

Published in: Technology

良質なコードを高速に書くコツ

  1. 1. 株式会社FLECT 小西俊司 2014/02/27
  2. 2.   大袈裟なタイトルは釣りです。(^^; 僕が他人のコード(主にFLECT社内)を見る時に気に なる点のひとつを、文書化しただけで、そんなたいし た話はないのであまり期待しないように
  3. 3.     良いコードを書くための方法論は最終的にはすべて 「一度に考えなければならないことの量を減らす」こと によって目的が達成されていると考えます。 「オブジェクト指向」「分割統治」などは良い例で、これ らの方法論を使うとその部分以外のことを考えなくて 良くなるわけです。 逆にいわゆる「スパゲティ化したコード」とは一度にあ れもこれも考えなくてはならなくて訳がわからなくなっ た状態を指します。 これを踏まえてコードを書く時に意識して欲しいこと は。。。
  4. 4. ことです
  5. 5.  開発者が考えなければいけないことには ◦ ◦ ◦ ◦ ◦   アプリの要件 アプリの実装 インフラ ストレージ など様々なレイヤがある これらは俯瞰で考えなければいけない時もあるが、全部 いっぺんに考えるのは無理なので基本的には別々に考え る(別の人が考える場合もある) コンテキストスイッチとはここで考えることのレイヤが切り 替わること ◦ これは人間にとってコストの高い処理
  6. 6. AならばB BならばC すなわち、AならばC    これは常に正しい が、この考え方は往々にしてコンテキストをまたぐ 特にフロントエンド開発(jQuery+JavaScript)ではコ ンテキストスイッチが発生しやすい
  7. 7.  アプリ要件 ◦ 情報量の多いテーブルの一部の表示/非表示をボタンで切 り替えたい ◦ データが切り替わった時には非表示  実装 ◦ jQueryで楽勝!
  8. 8. $("#btn-toggle").click(function() { var opened =$("#table").find(".view-toggle").toggle().is(":visible"); $(this).text(opened ? "閉じる" : "開く"); }); $("#btn-exec").click(funtion() { $.ajax({ "url" : ... "data" : { ...}, "success" : function(data) { var $table = $("#table"); $table.find(".data-name").text(data.name); //ここにデータ設定のコードが並ぶ $table.find(".view-toggle").hide(); } }); });
  9. 9.   簡潔な記述なので、コード自体はそんなに悪くない しかしこのコードを書くためにはアプリ要件を考えてい る時にHTMLとJavaScriptの間を行ったり来たりしな ければならない ◦ HTMLとJavaScriptの行き来でもコンテキストスイッチは発生 する  コードを読み書きする時に何度もコンテキストスイッチ が発生して、疲れる
  10. 10.  まず、アプリ要件だけを先に全部書く //Tableオブジェクト function Table($table) { //中身は後で書くのでとりあえず空 } var table = new Table($("#table“)); $("#btn-toggle").click(function() { table.toggle(); $(this).text(table.isOpened() ? "閉じる" } $("#btn-exec").click(funtion() { $.ajax({ "success" : function(data) { table.apply(data); table.close(); } }); }); : "開く"); まだTableオブジェクトの メソッドを1行も書いてない うちから「toggle」「apply」 などのアプリ要件を実現する メソッドを記述する (関数宣言だけは先に書く場合 もある)
  11. 11. //Tableオブジェクト function Table($table) { function toggledRows() { return $table.find($(".view-toggle"));} function isOpened() { return toggleRows().is(“:visible");} function open() { toggleRows().show();} function close() { toggleRows().hide();} function toggle() { toggleRows().toggle();} function apply(data) { $table.find(".data-name").text(data.name); ... } $.extend(this, { 要するにオブジェクト指向的な実装をすると “isOpend" : isOpened, いうことだがコンテキスト境界が明確になる "open" : open, ことが大事 "close" : close, "toggle" : toggle, 関数をローカルに宣言して$.extendで公開 "apply" : apply するやり方は単に小西の好みなので普通に } prototypeでやっても良い }
  12. 12.  アプリ要件を考える時に使う用語がそのままメソッドになっ ている ◦ テーブルを開く -> open ◦ テーブルを閉じる -> close ◦ テーブルが開いていたら -> isOpened  jQueryで1行でできることでもアプリ要件の用語でメソッド 定義することが重要 ◦ セレクタがでてくるとそこでコンテキストスイッチが発生する  オブジェクトの実装とアプリ要件のコードはどちらを先に書 いても良い ◦ ていうかオブジェクトを先に書く方が一般的かも。。。 ◦ 慣れてくるとアプリ要件を先に書く方が楽。  Backbone等のフレームワークを使うという解もある ◦ しかしこれができるようになるとあまり必要を感じなくなる
  13. 13.   コンテキスト境界を意識してコンテキストをまたぐ場合はメ ソッドを切る jQueryはHTMLとの結びつきが強いのでアプリ要件を考 えるところは分離する ◦ オブジェクト指向はそのための有効な手段  サーバサイドや他のところでも考え方は同じ。大事なのは 以下の2つ ◦ 一度に考えなければならない事柄を減らす ◦ コンテキストスイッチの回数を減らす   オブジェクト指向的なJavaScriptの書き方が良く分からな い人はこれも併せて読もう(宣伝) http://www.slideshare.net/shunjikonishi/ajaxapp-20725783

×