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

@murabito_cx

自己紹介

• 村濱一樹 @murabito_cx

• 株式会社レキサス所属

• 最近はフロントエンド周りの開発してる

• Java Kücheの会長

ひさびさにフロントエンド開発

• 動的にフォームを設置したりボタンのイベント処理を追加したり

• jQuery、jQuery-UI、jQuery-pluginでいいよね？

こういうのでいいよね？$(".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");

とあるgithubのプロジェクト依存ライブラリのインストール 依存ライブラリは npm を用いて管理されている.    npm  install  

JavaScriptやSASSのビルド Gulp タスクが幾つか用意されている.

ビルド ビルドするためには    npm  run  build  を実行する. これを実行する前に npm install を行って依存ライブラリ が正しくインストールしておく必要がある.

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

俺のフロントエンド開発

• 2010年くらい、学生のときにやってみた

• Ajaxで動的にAPIのデータを取得

• ボタンを押すとMapにピンを立てたり、アコーディオンが開いたり

いまどきのフロントエンド開発• Grunt/Gulp（コードの圧縮やコードのビルドなどを自動で行えるタスクランナー）

• npm（ライブラリの依存関係を解消するツール）

• Bower（フロントエンド専用ライブラリの依存関係を解消するツール）

• Vue, Anguler, React（データバインドを実現するフレームワーク）

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

フロントエンドの歴史 ～ 2005年

フロントエンドの歴史 （～ 2005年）

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

有名なやつ

• http://web.archive.org/web/20130515083615/http://www.aiseikai.or.jp/

• http://www.takamagahara.com/printin/

• http://hm.aitai.ne.jp/~naitonet/

Flash黎明期

> 「FLASH黄金時代」に当てはまる期間は人によって差があるが、「始まりは98～02年」「終焉は05～07年」という解釈が一般的である。

引用： http://dic.nicovideo.jp/a/flash黄金時代

Flash黎明期

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

フロントエンドの歴史 2005年 ～

Web2.0が提唱される

Web 2.0とは、従来Web上で提供されてきたサービスやユーザー体験とは一線を画する、新しい発想によって捉えられた、技術、サービス、デザインパターン、ビジネスモデル、Webのあり方などの総称である。

引用：http://www.sophia-it.com/content/Web+2.0

Google Mapの登場

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

引用：「付属」でも超使える！ Macの純正ソフト20連発 http://ascii.jp/elem/000/000/510/510650/index-2.html

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

第二次ブラウザ戦争

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

HTML5/CSS3の登場

HTML5/CSSの恐るべき表現力

• http://fff.cmiscm.com/#!/main

Ajax

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

引用 http://ja.wikipedia.org/wiki/Ajax

Ajax

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

JavaScriptライブラリ/CSSフレームワークの登場

• jQuery

• prototype.js

• uupaa.js

• Bootstrap

• Foundation

jQueryの特徴jQueryには次のような機能・特徴がある。 • ブラウザに依存しないオープンソースのセレクタエンジン Sizzle を使ったDOMエレメントの選択（Sizzle は jQuery プロジェクトからスピンアウト）[3]

• DOM操作と変更（CSS 1-3 と基本的なXPathのサポートを含む） • イベント • CSS操作 • エフェクトとアニメーション • Ajax • ユーティリティ - ブラウザのバージョン取得、each関数など • 拡張性 - jQuery プラグイン

引用 http://ja.wikipedia.org/wiki/JQuery

JavaScriptのDOM操作は難儀

• JavaScriptのみの場合http://akioblog.com/2013/03/10/868/

• jQueryの場合http://qiita.com/kazu56/items/8e92d08fd1bba0a2d771

DOM操作の問題点

• DOMはどこからでも変更可能

• DOMが状態を持っている

• DOMとコードが離れすぎ

WebSocketの登場いわゆるAjaxアプリケーションではサーバとクライアント間のデータのやり取りが頻繁に発生するが、従来のXMLHttpRequestはあくまでブラウザ側からサーバにデータの送信要求を出す手段に過ぎず、サーバ側からクライアントにデータをプッシュ配信することが難しい。一方Cometではサーバ側からのプッシュ配信が可能なものの、多くの実装では擬似的に双方向通信を行うため通信が発生するごとにTCPのハンドシェイク手続きを再度行う必要があるほか、HTTPコネクションを長時間占有するためその間同一サーバに接続する他のアプリケーションの動作に影響を及ぼす可能性があるなど、また別の問題が生じる（XMLHttpRequest#ロングポーリングも参照）。

これに対しWebSocketでは、サーバとクライアントが一度コネクションを行った後は、必要な通信を全てそのコネクション上で専用のプロトコルを用いて行う。従来の手法に比べると、新たなコネクションを張ることがなくなる・HTTPコネクションとは異なる軽量プロトコルを使うなどの理由により通信ロスが減る、一つのコネクションで全てのデータ送受信が行えるため同一サーバに接続する他のアプリケーションへの影響が少ないなどのメリットがある。[1]。

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

引用：http://gigazine.net/news/20111110_flash_history/

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

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

最近

Webの進化により問題が浮き彫りに• モバイル対応

• JavaScriptの未完成さ

• 開発の大規模化

• ユーザー体験の重要性

総じて、考えること、やることが多くなった。

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

新たなフレームワーク,ライブラリの登場

• underscore.js

• Anguler.js

• Vue.js

• React.js

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

JavaScriptだけでなく

• haml / Slim

• sass / scss

フロントエンドでもパッケージ管理（npm）

• node.jsはJavaScriptがサーバーサイドで動く

• npmはnode.js向けのパッケージマネージャ。最近はフロントエンドのパッケージも多い。

タスクランナー（Gulp, Grunt）• Node.jsを使ったタスク自動化ツール。

• CSSやJavaScriptファイルの圧縮や結合ができる

• AltJSやSassのコンパイルなんかも自動化できる

• 画像の圧縮などコードに直接関係のないこともできる

• ほかの人と共有できる

• Webデザイナーでも、使えるようになると作業が捗る

まとめ• Webの世界ではもともとフロントエンドという概念はあまりなかった

• Webの技術の進化（厳密には再発見？）、コンピュータの進化により表現力が爆発的に上がり、UI/UXが見直されるようになった

• よりフロントエンドが開発しやすくできるよう、npmやgulp,AltJSなどを組み合わせたエコシステムが発達した

流れは超絶速い

例えば）１年前：Bowerすごい、Gruntすごい 最近：Bowerオワコン、Gruntオワコン

新しいJavaScriptフレームワークやライブラリ、ツールが どんどん出てきては廃れる

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

終