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.

JavaScript の過去と現在、ガチな JS アプリケーション設計

25,565 views

Published on

2015/09/26 at Hacker Tackle

Published in: Technology
  • Be the first to comment

JavaScript の過去と現在、ガチな JS アプリケーション設計

  1. 1. JavaScript の過去と現在 ガチな JS アプリケーション設計 @kiwanami Hacker Tackle 2015/09/26
  2. 2. @kiwanami UI デザイン、プログラマー 医療系システム開発、研究
  3. 3. 経歴と作ったものなど ● 小さい頃: MSX など ● 学生時代:未踏 ● 仕事:画像解析、業務システム ● OSS : Emacs でいろいろ、ブラウザ拡張など 最近 ... JavaScript, Emacs Lisp, Ruby
  4. 4. 5 つの世界 ● パッケージ(サービス) ● インターナル ● 組み込み ● ゲーム ● 使い捨て Joel Spolsky 2002
  5. 5. 最近の JS 周辺のまとめ
  6. 6. ES6 / ES.next ブラウザー技術 その他
  7. 7. ES6 ● 2015/6/17 published ● class ● module ● scope ● arrow function ● default param / rest param ● 文字列テンプレート ● Promise
  8. 8. ES6 ● すごく良くなっている – JS からではなくて、いきなり ES6 から入門 – 今まで書いてた人は、復習と Update ● ES.next – Object.observe – async/wait – など
  9. 9. ブラウザ技術 ● HTML5 / CSS3 ● WebSocket ● WebWorker ● ServiceWorker ● WebRTC ( ORTC ) ● その他 – Touch/Pointer 、 WebAssembly ● 各プラットフォームの事情
  10. 10. Node.js ● サーバーに限らず、ビルドツールなどの JS の 実行環境 ● Electron
  11. 11. JavaScript スタイル ● 昔 – コピペプログラミング – 設計、構造化無し ● ちょっと前 – jQuery, prototype.js → ブラウザ依存の吸収 – altJS → JS つらさの回避 ● 現代 – ES6 スタイルならつらくない – ブラウザの JS が十分速い – →大規模化   設計・構造化の必要性
  12. 12. JS への入り方 ● Want to learn JavaScript in 2015? — Medium – https://medium.com/@_cmdv_/i-want-to-learn-javascript-in- 2015-e96cd85ad225 ● 初心者とすごい人の記事しか無い – 中間の人向けが無い ● とにかく基本 – いい本、ビデオ、書いて試せるテキスト – 人のコード読みまくる – いろいろ試して経験する
  13. 13. JS のフレームワーク問題
  14. 14. フレームワーク多すぎ どれを選ぶべきかわからない
  15. 15. なぜなのか? → 絶賛進化中だから ● カンブリア紀 – 正しい現象 – 多種多様な進化 – その後淘汰 ● この先生きのこるためには?
  16. 16. 歴史から学ぶ
  17. 17. GUI 周辺の歴史1 ● 〜 80 年代 – GUI 誕生 – 68 年マウス発表 – GOTO is considered harmful – 72 年アルト ● アルゴリズムとデータ構造 – 80 年 Smalltalk ● GUI と OOP の融合 – 86 年 OOPSLA ● OOP のシンポジウム – 87 年 HyperCard
  18. 18. GUI 周辺の歴史2 ● 90 年代 – OOP の発展 ● デザインパターン ● MVC – スタンドアロンアプリ全盛期 ● サバクラ、 2 層 – IDE 開発競争
  19. 19. GUI 周辺の歴史3 ● 00 年代前半 – CGI 、 Web アプリのブレイク – 3 層、サーバー完結 – Flash ● 00 年代後半 – JS 盛り上がり – jQuery ● 10 年代 – スマートフォンアプリ – SPA
  20. 20. 多様性と淘汰の歴史 ● GUI 誕生後、コンポーネント、操作方法、パタ ーンの整理 ● アルゴリズム、データ構造、デザインパターン ● IDE 開発競争 ● Web フレームワーク – ポスト Struts
  21. 21. 生き残っているもの ● デザインパターン ● アルゴリズム、データ構造 ● ユーザーインタフェース設計 ● Visual Studio ● Emacs/Vim ● lisp
  22. 22. 生き残っているもの ● デザインパターン →   抽象化した設計パターン – 言語やパラダイムによる ● アルゴリズム、データ構造 →   学術的に研究されている ● ユーザーインタフェース設計 →   人間(本質は変わらな い)との接点 – デバイスの進化により新しい提案 ● Visual Studio →   金と気合 ● Emacs/Vim →   愛 ● lisp →   神
  23. 23. 生き残るのに大事なこと 大企業だからといってあてにならない!!
  24. 24. どうすればよいか? ● 事前にどれが生き残るかわからない – 多様性の時代と淘汰のタイミング – 淘汰ではなくて衰退の可能性 ● UI デザイン、基本設計は変わらない – 手段が変わっているだけ ● 圧倒的金や愛が感じられるもの
  25. 25. 現代の JS のフレームワークについて
  26. 26. そもそも「フレームワーク」とは?
  27. 27. Web サーバー FW の機能 ● ルーター・ディスパッチ – URL 解析 / コントローラー選択 / 呼び出し ● パラメーターコンバート ● 入力バリデーション、自動制御 ● レスポンス制御 – リダイレクト / テンプレート呼び出し ● セッション管理 ● その他 – ORM / 認証
  28. 28. クライアント側に 求められる機能とは? ● MVC/MVVM ● テンプレート? ● コレクション、ストア管理? ● 全体の制御? → フォームの制御?
  29. 29. GUI 開発設計に必要なもの ● レイヤーアーキテクチャ ● 通知( Pub/Sub, Observer, Signal ) ● 粗結合 → すなわち MVC ● コンポーネント – 境界、汎用化、共通化 ● 状態管理
  30. 30. 求められているのは ソフトウエア設計 ● 抽象化 ● カプセル化 ● 情報隠蔽 ● モジュール化 ● 関心の分離 ● 結合度と凝集度 ● インタフェースと実装の分離 ● 参照の一点性 ● 分割統治
  31. 31. 目的と手段、理由 ● http://steps.dodgson.org/b/2014/12/11/why-is-real-dom-slow/
  32. 32. フレームワーク自作のすすめ ● いちから全部やってみる ● 他のフレームワークの実装が理解できる ● 自作した上で他のフレームワークに乗ることも ある ● MVC 自作の本 – →既に書いてた Isomorphic 、 flux 、 VirtualDOM (枝刈)
  33. 33. 今のフレームワークに必要なもの ● 状態管理 ● コーディング規約、多人数ルール ● 教育、使用の判断 ● ドキュメント
  34. 34. 今後必要になると思われるもの ● ルーティング・画面遷移前後での処理 – 状態の受け渡し、記憶 – アニメーションの接続 ● クライアント側の M とサーバー側の M – アプリ全体の設計で M と更新通知を考える – トランザクション、排他制御
  35. 35. 今後必要になると思われるもの2 ● 非同期処理の設計 – Promise, async/wait の先 – デッドロック、スレッドの闇 – 同期・非同期 ● →同期・待つ   人間が詰まる – 非同期・待たない ● push/pull どこかが詰まる → flow control / backpressure – 処理の流れではなく、データの流れを定義 ● ロックの要らない設計 ● 並行処理の設計パターン
  36. 36. 結局フレームワークはどうなのか? ● Vanilla がおすすめ ● コードの寿命、チームの寿命を考える ● フレームワークのコードを断片的にも読むぐら いは必要 ● 覚悟の問題 – フレームワークもメンテする – スクラッチから作りなおしてもいいやと思える
  37. 37. まとめ ● 最近の JS の状況と入り方の紹介 ● GUI の JS の混乱状況の整理 ● 今後の JS でのアプリケーション開発のヒント の提案

×