Your SlideShare is downloading. ×
良質なコードを高速に書くコツ
良質なコードを高速に書くコツ
良質なコードを高速に書くコツ
良質なコードを高速に書くコツ
良質なコードを高速に書くコツ
良質なコードを高速に書くコツ
良質なコードを高速に書くコツ
良質なコードを高速に書くコツ
良質なコードを高速に書くコツ
良質なコードを高速に書くコツ
良質なコードを高速に書くコツ
良質なコードを高速に書くコツ
良質なコードを高速に書くコツ
良質なコードを高速に書くコツ
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,744

Published on

社内勉強会資料

社内勉強会資料

Published in: Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,744
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
19
Comments
0
Likes
12
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 株式会社FLECT 小西俊司 2014/02/27
  • 2.   大袈裟なタイトルは釣りです。(^^; 僕が他人のコード(主にFLECT社内)を見る時に気に なる点のひとつを、文書化しただけで、そんなたいし た話はないのであまり期待しないように
  • 3.     良いコードを書くための方法論は最終的にはすべて 「一度に考えなければならないことの量を減らす」こと によって目的が達成されていると考えます。 「オブジェクト指向」「分割統治」などは良い例で、これ らの方法論を使うとその部分以外のことを考えなくて 良くなるわけです。 逆にいわゆる「スパゲティ化したコード」とは一度にあ れもこれも考えなくてはならなくて訳がわからなくなっ た状態を指します。 これを踏まえてコードを書く時に意識して欲しいこと は。。。
  • 4. ことです
  • 5.  開発者が考えなければいけないことには ◦ ◦ ◦ ◦ ◦   アプリの要件 アプリの実装 インフラ ストレージ など様々なレイヤがある これらは俯瞰で考えなければいけない時もあるが、全部 いっぺんに考えるのは無理なので基本的には別々に考え る(別の人が考える場合もある) コンテキストスイッチとはここで考えることのレイヤが切り 替わること ◦ これは人間にとってコストの高い処理
  • 6. AならばB BならばC すなわち、AならばC    これは常に正しい が、この考え方は往々にしてコンテキストをまたぐ 特にフロントエンド開発(jQuery+JavaScript)ではコ ンテキストスイッチが発生しやすい
  • 7.  アプリ要件 ◦ 情報量の多いテーブルの一部の表示/非表示をボタンで切 り替えたい ◦ データが切り替わった時には非表示  実装 ◦ jQueryで楽勝!
  • 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.   簡潔な記述なので、コード自体はそんなに悪くない しかしこのコードを書くためにはアプリ要件を考えてい る時にHTMLとJavaScriptの間を行ったり来たりしな ければならない ◦ HTMLとJavaScriptの行き来でもコンテキストスイッチは発生 する  コードを読み書きする時に何度もコンテキストスイッチ が発生して、疲れる
  • 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. //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.  アプリ要件を考える時に使う用語がそのままメソッドになっ ている ◦ テーブルを開く -> open ◦ テーブルを閉じる -> close ◦ テーブルが開いていたら -> isOpened  jQueryで1行でできることでもアプリ要件の用語でメソッド 定義することが重要 ◦ セレクタがでてくるとそこでコンテキストスイッチが発生する  オブジェクトの実装とアプリ要件のコードはどちらを先に書 いても良い ◦ ていうかオブジェクトを先に書く方が一般的かも。。。 ◦ 慣れてくるとアプリ要件を先に書く方が楽。  Backbone等のフレームワークを使うという解もある ◦ しかしこれができるようになるとあまり必要を感じなくなる
  • 13.   コンテキスト境界を意識してコンテキストをまたぐ場合はメ ソッドを切る jQueryはHTMLとの結びつきが強いのでアプリ要件を考 えるところは分離する ◦ オブジェクト指向はそのための有効な手段  サーバサイドや他のところでも考え方は同じ。大事なのは 以下の2つ ◦ 一度に考えなければならない事柄を減らす ◦ コンテキストスイッチの回数を減らす   オブジェクト指向的なJavaScriptの書き方が良く分からな い人はこれも併せて読もう(宣伝) http://www.slideshare.net/shunjikonishi/ajaxapp-20725783

×