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.

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

6,728 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

×