Okinawa Frontend Meetup#1で話した内容です。 間違いがあればこっそりおしえてください。 https://okinawa-frontend.doorkeeper.jp

1. 俺のフロントエンド開発が
こんなに時代遅れなわけがない
@murabito_cx

2. 自己紹介
• 村濱一樹 @murabito_cx
• 株式会社レキサス所属
• 最近はフロントエンド周りの開発してる
• Java Kücheの会長

3. ひさびさにフロントエンド開発
• 動的にフォームを設置したりボタンのイベント処理を追加したり
• jQuery、jQuery-UI、jQuery-pluginでいいよね？

4. こういうのでいいよね？
$(".class-a").css("float","left")
.css("margin","0px 8px")
.css("height","28px")
.css("width","28px")
.css("text-align","left")
.css("width","80%")
.css("font-size","1em")
.css("line-height", "normal")
.css("display","table-cell")
.css("vertical-align","middle");

5. とあるgithubのプロジェクト
依存ライブラリのインストール
依存ライブラリは npm を用いて管理されている.
npm
install
JavaScriptやSASSのビルド
Gulp タスクが幾つか用意されている.
ビルド
ビルドするためには
npm
run
build
を実行する. これを実行する前に npm install を行って依存ライブラリ が正しくインストールしておく必
要がある.

6. え、ちょっと何言ってるかわか
んないっすね…

7. 俺のフロントエンド開発
• 2010年くらい、学生のときにやってみた
• Ajaxで動的にAPIのデータを取得
• ボタンを押すとMapにピンを立てたり、アコーディオンが開いたり

8. いまどきのフロントエンド開発
• Grunt/Gulp（コードの圧縮やコードのビルドなどを自動で行えるタ
スクランナー）
• npm（ライブラリの依存関係を解消するツール）
• Bower（フロントエンド専用ライブラリの依存関係を解消するツー
ル）
• Vue, Anguler, React（データバインドを実現するフレームワーク）

9. そもそもWebにおける
フロントエンド開発とはなにか？
ちょっと歴史を振り返ってみる

10. フロントエンドの歴史
∼ 2005年

11. フロントエンドの歴史 （∼ 2005年）
• JavaScriptは実行が遅くページ内でDOMを動的に操作するというのはあま
りなかった。
• レンダリングもブラウザによって差があった。
• ページ遷移することでしか表示を変えれないので、ネイティブアプリケー
ションの振る舞いは難しい。
→これらの理由によりWebの表現力には限界があり、UI/UXへの注目度は低
かった

12. 有名なやつ
• http://web.archive.org/web/20130515083615/http://
www.aiseikai.or.jp/
• http://www.takamagahara.com/printin/
• http://hm.aitai.ne.jp/ naitonet/

13. Flash黎明期
> 「FLASH黄金時代」に当てはまる期間は人によって差があるが、「始
まりは98∼02年」「終焉は05∼07年」という解釈が一般的である。
引用： http://dic.nicovideo.jp/a/flash黄金時代

14. Flash黎明期
2005年以前のフロントエンドといえば、
Flashだったかもしれない

15. フロントエンドの歴史
2005年 ∼

16. Web2.0が提唱される
Web 2.0とは、従来Web上で提供されてきたサービスやユー
ザー体験とは一線を画する、新しい発想によって捉えられた、技
術、サービス、デザインパターン、ビジネスモデル、Webのあり
方などの総称である。
引用：http://www.sophia-it.com/content/Web+2.0

17. Google Mapの登場

18. ブラウザとクライアントPCの性能向上
引用：「付属」でも超使える！ Macの純正ソフト20連発
http://ascii.jp/elem/000/000/510/510650/index-2.html

19. ブラウザとクライアントPCの性能向上

20. 第二次ブラウザ戦争
http://ja.wikipedia.org/wiki/ブラウザ戦争#.E7.AC.AC.E4.BA.8C.E6.AC.A1.E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E6.88.A6.E4.BA.89

21. HTML5/CSS3の登場

22. HTML5/CSSの恐るべき表現力
• http://fff.cmiscm.com/#!/main

23. Ajax
> 従来のWebアプリケーションでは、サーバにリクエストを送信後、レスポンスを新
たにウェブページとして受け取ることで画面遷移が発生していたが、Ajaxにより画面
遷移を伴わない動的なWebアプリケーションの製作が実現可能になる[1]。 例えば
Web検索に応用することで、従来は入力確定後に行っていた検索を、ユーザがキー入
力をする間にバックグラウンドで行うことによってリアルタイムに検索結果を表示し
ていくといったことが可能になる。
引用 http://ja.wikipedia.org/wiki/Ajax

24. Ajax
• PHP を使用して Ajax ベースの Web サイトを作成する
https://www.ibm.com/developerworks/jp/web/library/wa-aj-
php/

25. JavaScriptライブラリ/CSSフレームワークの登場
• jQuery
• prototype.js
• uupaa.js
• Bootstrap
• Foundation

26. jQueryの特徴
jQueryには次のような機能・特徴がある。
• ブラウザに依存しないオープンソースのセレクタエンジン Sizzle を使ったDOMエレメントの選
択（Sizzle は jQuery プロジェクトからスピンアウト）[3]
• DOM操作と変更（CSS 1-3 と基本的なXPathのサポートを含む）
• イベント
• CSS操作
• エフェクトとアニメーション
• Ajax
• ユーティリティ - ブラウザのバージョン取得、each関数など
• 拡張性 - jQuery プラグイン
引用 http://ja.wikipedia.org/wiki/JQuery

27. JavaScriptのDOM操作は難儀
• JavaScriptのみの場合
http://akioblog.com/2013/03/10/868/
• jQueryの場合
http://qiita.com/kazu56/items/8e92d08fd1bba0a2d771

28. DOM操作の問題点
• DOMはどこからでも変更可能
• DOMが状態を持っている
• DOMとコードが離れすぎ

29. WebSocketの登場
いわゆるAjaxアプリケーションではサーバとクライアント間のデータのやり取りが頻繁に発生する
が、従来のXMLHttpRequestはあくまでブラウザ側からサーバにデータの送信要求を出す手段に
過ぎず、サーバ側からクライアントにデータをプッシュ配信することが難しい。一方Cometでは
サーバ側からのプッシュ配信が可能なものの、多くの実装では擬似的に双方向通信を行うため通信
が発生するごとにTCPのハンドシェイク手続きを再度行う必要があるほか、HTTPコネクションを
長時間占有するためその間同一サーバに接続する他のアプリケーションの動作に影響を及ぼす可能
性があるなど、また別の問題が生じる（XMLHttpRequest#ロングポーリングも参照）。
これに対しWebSocketでは、サーバとクライアントが一度コネクションを行った後は、必要な通
信を全てそのコネクション上で専用のプロトコルを用いて行う。従来の手法に比べると、新たなコ
ネクションを張ることがなくなる・HTTPコネクションとは異なる軽量プロトコルを使うなどの理
由により通信ロスが減る、一つのコネクションで全てのデータ送受信が行えるため同一サーバに接
続する他のアプリケーションへの影響が少ないなどのメリットがある。[1]。

31. Flashの終焉 ?
以前からFlashに批判的なAppleのスティーブ・ジョブズCEOが、Wall
Street Journalを訪れた際、Flashを痛烈に批判したと伝えられている。
同氏はFlashを「バッテリーを大きく消費する」「CPUリソースを大食
いする」「セキュリティーホールのもと」「死にかけの技術」とこき下
ろし、「われわれは古い技術に多くのエネルギーを注がない」と語った
という。ジョブズ氏は以前からFlashはバグが多いと批判しており、
「Flashは使われなくなりHTML5に移行する」と語ったとも伝えられ
ている。
引用：http://gigazine.net/news/20111110_flash_history/

32. 2005年以降、Webはかなり進
化し、表現力があがった

33. UI/UXがWebの世界でも見直されるように

34. 最近

35. Webの進化により問題が浮き彫りに
• モバイル対応
• JavaScriptの未完成さ
• 開発の大規模化
• ユーザー体験の重要性
総じて、考えること、やることが多くなった。

36. どうやって開発しやすくするか
どうやって品質を上げるか

37. 新たなフレームワーク,ライブラリの登場
• underscore.js
• Anguler.js
• Vue.js
• React.js

38. JavaScriptの書きづらさを解消する、AltJSの登場
言語 設計/開発 登場時期 影響を受けた言語
CoffeeScript Jeremy Ashkenas, et al. 2009 JavaScript, Python, Ruby, Haskell
TypeScript Microsoft 2012 JavaScript, Java, C#
Haxe Haxe Foundation,
Nicolas Cannasse
2005 ActionScript, OCaml
Dart Google 2011 Java, C++, JavaScript, CoffeeScript, Go
JSX DeNA 2012 JavaScript, ActionScript

39. JavaScriptだけでなく
• haml / Slim
• sass / scss

40. フロントエンドでもパッケージ管理（npm）
• node.jsはJavaScriptがサーバーサ
イドで動く
• npmはnode.js向けのパッケージマ
ネージャ。最近はフロントエンド
のパッケージも多い。

41. タスクランナー（Gulp, Grunt）
• Node.jsを使ったタスク自動化ツール。
• CSSやJavaScriptファイルの圧縮や結合ができる
• AltJSやSassのコンパイルなんかも自動化できる
• 画像の圧縮などコードに直接関係のないこともできる
• ほかの人と共有できる
• Webデザイナーでも、使えるようになると作業が る

42. まとめ
• Webの世界ではもともとフロントエンドという概念はあまりなかっ
た
• Webの技術の進化（厳密には再発見？）、コンピュータの進化によ
り表現力が爆発的に上がり、UI/UXが見直されるようになった
• よりフロントエンドが開発しやすくできるよう、npmやgulp,AltJS
などを組み合わせたエコシステムが発達した

43. 流れは超絶速い

44. 例えば）
１年前：Bowerすごい、Gruntすごい
最近：Bowerオワコン、Gruntオワコン
新しいJavaScriptフレームワークやライブラリ、ツールが
どんどん出てきては廃れる

45. 一人ではやっていけないスピード感なので、
みんなで知見を寄せ合おう
終