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.
IWD2016 - Women Techmakers in Kyoto
Webフロントエンドエンジニ
アの戦い
−歴史と現在、そして未来− 2016.4.2(Sat)
MATSUDA Emi
本日のメニュー
Today’s special
1. さらっと自己紹介
2. 「Webフロントエンドエンジニア」ってなに?
3. フロントエンドの戦いの歴史
4. 休戦
5. 現在
6. 未来展望: 「Webフロントエンド」って、結局どうなる
?
1. さらっと自己紹介
1. さらっと自己紹介
❖ 氏名: MATSUDA Emi
❖ 職業: Webフロントエンドエンジニア
退職後、
英語短期留学へ
1. さらっと自己紹介
2007.8.16
2013.5.28
2013.9.25
2014.1.16
web制作会社
就職
なんとか
生きて帰国
レンサバやさんに
再就職
現在2014.6.1
web制作会社に
転職...
2. 「Webフロントエンドエンジニア」ってなに?
2. 「Webフロントエンドエンジニア」ってなに?
❖ Web業界では、単に「フロントエンドエンジニア」って言
われる場合が多いです。
❖ ただ、スマホ等アプリ制作の現場でも「フロントエンド」
の仕事があるため、Webに特化している場合、その仕...
❖ 主にHTML, CSS, JavaScriptを使用して、Webのコンテ
ンツを組み立てたりインタラクションを作ったりする
仕事。
❖ それを担当する人を「フロントエンドエンジニア」と
いうふうに言います。
2. 「Webフロントエンドエン...
❖ 「マークアップエンジニア」
→HTMLマークアップとそのレイアウトであるCSSが主なお仕事になり
ます。JavaScriptは「マークアップ」ではない。という認識。
でも、結局似たようなもん、というか...「なんとなくマークアップじゃ
なく...
❖ 「デザイナー」
→主にデザイナーさんは、デザインカンプの制作までの方と、
HTML/CSSまでやる方との2パターンに分かれる感じです。
関西では後者が多いですね。デザインをやる方でJavaScriptまでやられ
る方は少ない印象です。
私も...
❖ 「プログラマー」
→主にバックエンド(サーバサイド)を担当するのがWebプログラマ
ーさんという認識ですが、最近ではバックエンドさんもフロントエンド
のJavaScript部分に足を突っ込んでこられることが増えてきました。
2. 「Webフ...
❖ Web以外の人に自分の仕事を説明するのにとても苦労します...。
2. 「Webフロントエンドエンジニア」ってなに?
それはそうと...
3. フロントエンドの戦いの歴史
3. フロントエンドの戦いの歴史
1. 第2次ブラウザ戦争
2. 第1次JSフレームワーク戦争
3. 「とりあえずHTML5って言っとけ」の呪い
4. 「レスポンシブでやったら管理簡単なんだよね?」爆弾
etc…
3. フロントエンドの戦いの歴史
2007.8
2013.5
2013.9
2014.1
現在2014.6
2015.12このあたり
第2次ブラウザ戦争
3. フロントエンドの戦いの歴史
2007年当時のブラウザ
❖ InternetExplorer 6〜7
❖ InternetExprorer for Mac 5.x
❖ Firefox2〜3
❖ Opera9.x
第2次ブラウザ戦争
❖ Sa...
3. フロントエンドの戦いの歴史
2007年当時のWeb技術
❖ Tableレイアウト→CSSレイアウト
❖ 「Ajax」というコトバが浸透してくる?
❖ 「Web2.0」というコトバがまだ平和の幻想を抱いている
第2次ブラウザ戦争
3. フロントエンドの戦いの歴史
エンジニアの戦い
❖ Tableレイアウトの謎のスキマ
❖ CSS不備すぎるブラウザバグ
❖ JavaScriptのブラウザごとの挙動の差異
❖ 「jQueryとPrototypeを両方入れたいんだけど」問題
...
3. フロントエンドの戦いの歴史
2012年頃に決着がつき停戦か。
❖ MacへのIEの提供が終了し、SafariがWidowsから退去。
❖ 一時はFirefoxがエンジニア層を中心に支持を受けたが、最終的には
Mac, WindowsともC...
3. フロントエンドの戦いの歴史
2007.8
2013.5
2013.9
2014.1
現在2014.6
2015.12このあたり
第1次JSフレームワーク戦争
3. フロントエンドの戦いの歴史
2007年当時のフレームワーク事情
❖ Dreamweaverのビヘイビアを使用したMM_SwapImageとか
が現役
❖ 「jQuery1.2.x系」 v.s. 「Prototype.js1.5.x系」
❖...
3. フロントエンドの戦いの歴史
エンジニアの戦い
❖ JavaScriptのブラウザごとの挙動の差異
❖ 「jQueryとPrototypeを両方入れたいんだけど」問題
❖ 書き方を両方覚えなきゃいけない
❖ バッティングを避けたつもりがバグ...
3. フロントエンドの戦いの歴史
2011年頃にjQueryが圧倒的勝利を上げて終戦
❖ PrototypeでできることはほぼjQueryのプラグインとして実
装された。
❖ その代わりと言ってはなんだが、jQueryプラグインの乱立
と実装内...
3. フロントエンドの戦いの歴史
2007.8
2013.5
2013.9
2014.1
現在2014.6
2015.12
このあたり
「とりあえずHTML5って言っとけ」の呪い
3. フロントエンドの戦いの歴史
HTML5が現実化し始めた頃
❖ 2008年にHTML5のドラフト発表。各ブラウザが対応開始。
❖ 2010年のiPhoneにてFlash非対応となる。
❖ 2011年InternetExplorer9にてIE...
3. フロントエンドの戦いの歴史
エンジニアの戦い
❖ 「HTML5ならFlash使わなくても簡単に実装できるんでしょー?」の認識
がエンジニア以外に蔓延
❖ そもそも「HTML5」というのが何なのか、エンジニア以外にはわかって
いない。
❖ ...
3. フロントエンドの戦いの歴史
現状、ほぼ呪いは解かれている様子
❖ ちまたで大まかに「HTML5」と呼ばれていたWeb技術は
JavaScriptによる実装となるため、JavaScriptのエンジニア
の需要が一気に高まった。
❖ 2015...
3. フロントエンドの戦いの歴史
2007.8
2013.5
2013.9
2014.1
現在2014.6
2015.12
このあたり
「レスポンシブでやったら管理簡単なんだよね?」爆弾
3. フロントエンドの戦いの歴史
レスポンシブウェブデザインとブラウザ技術
❖ ブラウザサイズによってレイアウトを変化させるテクニックが
2004年頃には発表される
❖ 2009年頃に「CSSメディアクエリ」技術がブラウザ搭載
❖ 2010年に...
3. フロントエンドの戦いの歴史
エンジニアの戦い
❖ レスポンシブに適したデザインというものがまだ模索中であ
り、実際に要求されるデザインでは実装不能なことが多々。
❖ エンジニア側も、実装してみて初めて不可能なことが解る等
もあり、実装が難...
3. フロントエンドの戦いの歴史
エンジニアの戦い
❖ HTMLの構造がどうしても複雑になり、管理コストもかなりかかる
。
❖ レスポンシブでかなり消耗した挙句、ややこしいインタラクショ
ンを求められる。スクロール位置や画面幅とるタイミングがつ...
3. フロントエンドの戦いの歴史
経験値による平和的解決
❖ 「レスポンシブにしても、どうやらさして簡単・安価ではないらし
い」ということが伝わり始めており、被弾することも減ってきてい
る。
❖ デザイン・マークアップとも経験値を上げてきたため...
4. 休戦
4. 休戦
1. なんでもかんでもjQuery時代の到来
2. 侵食される「JavaScript」と、「ECMAScript6」の思想
etc…
4. 休戦
2007.8
2013.5
2013.9
2014.1
現在2014.6
2015.12
このあたり
なんでもかんでもjQuery時代の到来
4. 休戦
❖ フレームワーク戦争を勝ち残ったjQueryの勢いはとどまる
ところを知らず、プラグインも次々と生まれてくる。
❖ ブラウザによる実装差異を飲み込んでくれる強力さに
jQuery依存症が急増。
❖ jQueryMobileで簡易な...
4. 休戦
❖ レスポンシブで倦み疲れた案件でもインタラクションや
AjaxはjQueryでなんとでもできてしまう。
❖ ディレクター・デザイナーからの実装要求は難易度を増す
。お手本となるものもjQuery使用のものばかり。
なんでもかんでも...
4. 休戦
とりあえず、「jQueryプラグインを探せればなんとかなる」
状態のjQuery帝国が一旦業界を平定したように見えた。
なんでもかんでもjQuery時代の到来
4. 休戦
2007.8
2013.5
2013.9
2014.1
現在2014.6
2015.12
このあたり
侵食される「JavaScript」と、「ECMAScript6」の思想
4. 休戦
❖ JavaScript案件が増えるにつれ、プログラマーがJavaScript界に侵食
してくるようになる。
❖ ほかの言語の思想をJavaScriptに持ち込まれるようになる。
JavaScriptを他の言語の思想で書けるようにフ...
5. 現在
5. 現在
1. 第2次JSフレームワーク戦争
2. なんでもかんでもコンパイル時代
etc…
5. 現在
2007.8
2013.5
2013.9
2014.1
現在2014.6
2015.12
このあたり
第2次JSフレームワーク戦争
5. 現在
第1次は主にインタラクションに関するフレームワークの覇
権争いだったが、
第2次では大規模プロダクトの設計思想やデザインパターン
によるフレームワーク同士の戦いとなっている。
第2次JSフレームワーク戦争
5. 現在
Backbone
❖ フロントエンドMV*の走りとなった古参。
❖ ライトウェイトだが縛りもすくなく、実装者によってコー
ドに差が大きい。
❖ HuluやTrello等、多くのサービスにて採用されている。
第2次JSフレームワーク戦争
5. 現在
Angular
❖ 独自の書き方になり学習コストが高く他への応用が利かな
い。
❖ 現状、1,2の移行期。Google製で、今後はTypeScriptとの連
携が期待されている。
❖ 今の所一番強い?印象。
第2次JSフレームワーク...
5. 現在
React
❖ ここ数年で人気が出てきたフレームワーク。
❖ Facebook製。Web版のFacebookもコレを採用。
❖ MV*ではなくViewのみ。
第2次JSフレームワーク戦争
5. 現在
❖ 他、様々なフレームワークがある中、決め手となるものが
ない状況。
❖ MV*モデル自体がバックエンド言語から来ている思想。
❖ バックエンドと同じやり方でフロントエンド実装をしよう
とするとやりやすい、という考えの元でのフレーム...
5. 現在
2007.8
2013.5
2013.9
2014.1
現在2014.6
2015.12
このあたり
なんでもかんでもコンパイル時代
5. 現在
JavaScript
❖ CoffeeScriptが走り。Java等の他の言語の人が書きやすい
書き方で書き、JavaScriptにコンパイルする、という流れ
ができた。
❖ TypeScript等、AltJSと呼ばれるJSコンパイ...
5. 現在
他への影響
❖ CSS側でも発生。Sass, Less, StylusがCSSプリプロセッサと
してフロントエンドに投入される。
❖ バックエンドフレームワークにセットアップすることが可能
。
❖ バックエンドフレームワークのVie...
5. 現在
タスクマネージャーの誕生
❖ コンパイルを中心としたタスクを管理するツールが広く使
われ始めている。
❖ コンパイル前提でフロントエンド作業が完結する時代。
→フロントエンド以外の人(≒バックエンドの人)が使いや
すいように進化して...
5. 現在
フロントエンド自体が、バックエンドに侵食され始めている
。
なんでもかんでもコンパイル時代
6. 未来展望: 「Webフロントエンド」って、結局どうなる
?
6. 未来展望: 「Webフロントエンド」って、結局どうなる
?
現状
❖ 新デバイス
❖ HTML5,ECMAScript6/7
❖ 他言語からの思想・技術・技術者の流入
❖ コンパイル言語としてのHTML,CSS,JavaScript
6. 未来展望: 「Webフロントエンド」って、結局どうなる
?
今後
❖ Webの技術自体の適用範囲・注目度は上がっていく。
❖ HTMLやCSS,JavaScriptは、今と違った形へと変わってい
く。言語自体が新しいものに引き継がれて消え...
6. 未来展望: 「Webフロントエンド」って、結局どうなる
?
そうなったとき、
フロントエンドエンジニアはどうやって生き残る?
6. 未来展望: 「Webフロントエンド」って、結局どうなる
?
エンジニアとして生き残っていくためには
❖ これまでも常に学び続けていたが、やっぱり技術の動向をしっかり見
つめていくべき。必要な時に、必要な技術を使えるように。
❖ 過去に苦労...
変化を怖がるよりも、変化を楽しむスタンスで。
6. 未来展望: 「Webフロントエンド」って、結局どうなる
?
ご清聴、ありがとうございました。
Upcoming SlideShare
Loading in …5
×

Webフロントエンドエンジニアの戦い〜歴史と現在、そして未来

2,051 views

Published on

webフロントエンドエンジニアとして仕事を始めてからこれまで、どういう立場でどんな苦労をしながら生き残ってきたか、それを踏まえてこれからどうなるか、みたいな点から、これからどうなるか、どうしていったら良いかを悶々と。

Published in: Technology
  • Be the first to comment

Webフロントエンドエンジニアの戦い〜歴史と現在、そして未来

  1. 1. IWD2016 - Women Techmakers in Kyoto Webフロントエンドエンジニ アの戦い −歴史と現在、そして未来− 2016.4.2(Sat) MATSUDA Emi
  2. 2. 本日のメニュー Today’s special 1. さらっと自己紹介 2. 「Webフロントエンドエンジニア」ってなに? 3. フロントエンドの戦いの歴史 4. 休戦 5. 現在 6. 未来展望: 「Webフロントエンド」って、結局どうなる ?
  3. 3. 1. さらっと自己紹介
  4. 4. 1. さらっと自己紹介 ❖ 氏名: MATSUDA Emi ❖ 職業: Webフロントエンドエンジニア
  5. 5. 退職後、 英語短期留学へ 1. さらっと自己紹介 2007.8.16 2013.5.28 2013.9.25 2014.1.16 web制作会社 就職 なんとか 生きて帰国 レンサバやさんに 再就職 現在2014.6.1 web制作会社に 転職 2015.12.31 退職
  6. 6. 2. 「Webフロントエンドエンジニア」ってなに?
  7. 7. 2. 「Webフロントエンドエンジニア」ってなに? ❖ Web業界では、単に「フロントエンドエンジニア」って言 われる場合が多いです。 ❖ ただ、スマホ等アプリ制作の現場でも「フロントエンド」 の仕事があるため、Webに特化している場合、その仕事は 「Webフロントエンド」って言った方がよさげ。 ❖ もちろん、両方できる人もいます。 ❖ ココでは、以降「フロントエンド」とします(長いので) 。
  8. 8. ❖ 主にHTML, CSS, JavaScriptを使用して、Webのコンテ ンツを組み立てたりインタラクションを作ったりする 仕事。 ❖ それを担当する人を「フロントエンドエンジニア」と いうふうに言います。 2. 「Webフロントエンドエンジニア」ってなに? 「フロントエンド」って?
  9. 9. ❖ 「マークアップエンジニア」 →HTMLマークアップとそのレイアウトであるCSSが主なお仕事になり ます。JavaScriptは「マークアップ」ではない。という認識。 でも、結局似たようなもん、というか...「なんとなくマークアップじゃ なくてフロントエンドを名乗ってる」っていうパターンも最近多いんじ ゃないかな?? 個人的には、扱うデータやインタラクションの設計・実装ができるこ とが必要かなぁと思ってます。 2. 「Webフロントエンドエンジニア」ってなに? 似たようなお仕事
  10. 10. ❖ 「デザイナー」 →主にデザイナーさんは、デザインカンプの制作までの方と、 HTML/CSSまでやる方との2パターンに分かれる感じです。 関西では後者が多いですね。デザインをやる方でJavaScriptまでやられ る方は少ない印象です。 私も、デザインはしていません。 2. 「Webフロントエンドエンジニア」ってなに? 似たようなお仕事
  11. 11. ❖ 「プログラマー」 →主にバックエンド(サーバサイド)を担当するのがWebプログラマ ーさんという認識ですが、最近ではバックエンドさんもフロントエンド のJavaScript部分に足を突っ込んでこられることが増えてきました。 2. 「Webフロントエンドエンジニア」ってなに? 似たようなお仕事
  12. 12. ❖ Web以外の人に自分の仕事を説明するのにとても苦労します...。 2. 「Webフロントエンドエンジニア」ってなに? それはそうと...
  13. 13. 3. フロントエンドの戦いの歴史
  14. 14. 3. フロントエンドの戦いの歴史 1. 第2次ブラウザ戦争 2. 第1次JSフレームワーク戦争 3. 「とりあえずHTML5って言っとけ」の呪い 4. 「レスポンシブでやったら管理簡単なんだよね?」爆弾 etc…
  15. 15. 3. フロントエンドの戦いの歴史 2007.8 2013.5 2013.9 2014.1 現在2014.6 2015.12このあたり 第2次ブラウザ戦争
  16. 16. 3. フロントエンドの戦いの歴史 2007年当時のブラウザ ❖ InternetExplorer 6〜7 ❖ InternetExprorer for Mac 5.x ❖ Firefox2〜3 ❖ Opera9.x 第2次ブラウザ戦争 ❖ Safari 3.x ❖ Safari for Windows 3.x ❖ NetscapeNavigator(瀕死) ❖ (Google Chromeはβ版)
  17. 17. 3. フロントエンドの戦いの歴史 2007年当時のWeb技術 ❖ Tableレイアウト→CSSレイアウト ❖ 「Ajax」というコトバが浸透してくる? ❖ 「Web2.0」というコトバがまだ平和の幻想を抱いている 第2次ブラウザ戦争
  18. 18. 3. フロントエンドの戦いの歴史 エンジニアの戦い ❖ Tableレイアウトの謎のスキマ ❖ CSS不備すぎるブラウザバグ ❖ JavaScriptのブラウザごとの挙動の差異 ❖ 「jQueryとPrototypeを両方入れたいんだけど」問題 ❖ コード軽視の風潮 第2次ブラウザ戦争 etc…
  19. 19. 3. フロントエンドの戦いの歴史 2012年頃に決着がつき停戦か。 ❖ MacへのIEの提供が終了し、SafariがWidowsから退去。 ❖ 一時はFirefoxがエンジニア層を中心に支持を受けたが、最終的には Mac, WindowsともChrome勢力が驚異的に上がる。 ❖ OperaはガラケーやNintendoDS等へと落ち延びた後、Chromeのレ ンダリングエンジンWebkit陣営へ。分裂後もChromeとともにBlink へ。 第2次ブラウザ戦争
  20. 20. 3. フロントエンドの戦いの歴史 2007.8 2013.5 2013.9 2014.1 現在2014.6 2015.12このあたり 第1次JSフレームワーク戦争
  21. 21. 3. フロントエンドの戦いの歴史 2007年当時のフレームワーク事情 ❖ Dreamweaverのビヘイビアを使用したMM_SwapImageとか が現役 ❖ 「jQuery1.2.x系」 v.s. 「Prototype.js1.5.x系」 ❖ 「LightBox」の実装が流行。 ❖ 他、YUIやMooTools等、ライブラリが乱立 第1次JSフレームワーク戦争 etc…
  22. 22. 3. フロントエンドの戦いの歴史 エンジニアの戦い ❖ JavaScriptのブラウザごとの挙動の差異 ❖ 「jQueryとPrototypeを両方入れたいんだけど」問題 ❖ 書き方を両方覚えなきゃいけない ❖ バッティングを避けたつもりがバグ発生 第1次JSフレームワーク戦争 etc…
  23. 23. 3. フロントエンドの戦いの歴史 2011年頃にjQueryが圧倒的勝利を上げて終戦 ❖ PrototypeでできることはほぼjQueryのプラグインとして実 装された。 ❖ その代わりと言ってはなんだが、jQueryプラグインの乱立 と実装内容の複雑化によりエンジニアの負担は減ることは なかった。 第1次JSフレームワーク戦争
  24. 24. 3. フロントエンドの戦いの歴史 2007.8 2013.5 2013.9 2014.1 現在2014.6 2015.12 このあたり 「とりあえずHTML5って言っとけ」の呪い
  25. 25. 3. フロントエンドの戦いの歴史 HTML5が現実化し始めた頃 ❖ 2008年にHTML5のドラフト発表。各ブラウザが対応開始。 ❖ 2010年のiPhoneにてFlash非対応となる。 ❖ 2011年InternetExplorer9にてIEもHTML5対応開始 「とりあえずHTML5って言っとけ」の呪い
  26. 26. 3. フロントエンドの戦いの歴史 エンジニアの戦い ❖ 「HTML5ならFlash使わなくても簡単に実装できるんでしょー?」の認識 がエンジニア以外に蔓延 ❖ そもそも「HTML5」というのが何なのか、エンジニア以外にはわかって いない。 ❖ ここでも各ブラウザの対応がまちまち ❖ FlashコンテンツをPCとスマホ両方で見れるように、という作り変え依頼 が発生 「とりあえずHTML5って言っとけ」の呪い etc…
  27. 27. 3. フロントエンドの戦いの歴史 現状、ほぼ呪いは解かれている様子 ❖ ちまたで大まかに「HTML5」と呼ばれていたWeb技術は JavaScriptによる実装となるため、JavaScriptのエンジニア の需要が一気に高まった。 ❖ 2015年頃には「よくわかんないけど、動いてるものは HTML5」みたいな憑き物はほぼ見られなくなっている。 「とりあえずHTML5って言っとけ」の呪い
  28. 28. 3. フロントエンドの戦いの歴史 2007.8 2013.5 2013.9 2014.1 現在2014.6 2015.12 このあたり 「レスポンシブでやったら管理簡単なんだよね?」爆弾
  29. 29. 3. フロントエンドの戦いの歴史 レスポンシブウェブデザインとブラウザ技術 ❖ ブラウザサイズによってレイアウトを変化させるテクニックが 2004年頃には発表される ❖ 2009年頃に「CSSメディアクエリ」技術がブラウザ搭載 ❖ 2010年にAndroid,iPhoneが日本で発売 ❖ 2011年頃には制作にレスポンシブウェブデザインが用いられ始め る 「レスポンシブでやったら管理簡単なんだよね?」爆弾
  30. 30. 3. フロントエンドの戦いの歴史 エンジニアの戦い ❖ レスポンシブに適したデザインというものがまだ模索中であ り、実際に要求されるデザインでは実装不能なことが多々。 ❖ エンジニア側も、実装してみて初めて不可能なことが解る等 もあり、実装が難航。 ❖ どうしようもない場合にはCSSではなくJSで実装すること も。 「レスポンシブでやったら管理簡単なんだよね?」爆弾
  31. 31. 3. フロントエンドの戦いの歴史 エンジニアの戦い ❖ HTMLの構造がどうしても複雑になり、管理コストもかなりかかる 。 ❖ レスポンシブでかなり消耗した挙句、ややこしいインタラクショ ンを求められる。スクロール位置や画面幅とるタイミングがつら い。 ❖ スマホのバグで撃沈。 ❖ 「なぜ実装できないか」を説明するのが非常にたいへん。 「レスポンシブでやったら管理簡単なんだよね?」爆弾
  32. 32. 3. フロントエンドの戦いの歴史 経験値による平和的解決 ❖ 「レスポンシブにしても、どうやらさして簡単・安価ではないらし い」ということが伝わり始めており、被弾することも減ってきてい る。 ❖ デザイン・マークアップとも経験値を上げてきたため、適度な対応 ができるようになってきている。 ❖ でもややこしいインタラクションはレスポンシブでは避けてほしい ...。 「レスポンシブでやったら管理簡単なんだよね?」爆弾
  33. 33. 4. 休戦
  34. 34. 4. 休戦 1. なんでもかんでもjQuery時代の到来 2. 侵食される「JavaScript」と、「ECMAScript6」の思想 etc…
  35. 35. 4. 休戦 2007.8 2013.5 2013.9 2014.1 現在2014.6 2015.12 このあたり なんでもかんでもjQuery時代の到来
  36. 36. 4. 休戦 ❖ フレームワーク戦争を勝ち残ったjQueryの勢いはとどまる ところを知らず、プラグインも次々と生まれてくる。 ❖ ブラウザによる実装差異を飲み込んでくれる強力さに jQuery依存症が急増。 ❖ jQueryMobileで簡易なスマホサイトが作れてしまう。 なんでもかんでもjQuery時代の到来
  37. 37. 4. 休戦 ❖ レスポンシブで倦み疲れた案件でもインタラクションや AjaxはjQueryでなんとでもできてしまう。 ❖ ディレクター・デザイナーからの実装要求は難易度を増す 。お手本となるものもjQuery使用のものばかり。 なんでもかんでもjQuery時代の到来
  38. 38. 4. 休戦 とりあえず、「jQueryプラグインを探せればなんとかなる」 状態のjQuery帝国が一旦業界を平定したように見えた。 なんでもかんでもjQuery時代の到来
  39. 39. 4. 休戦 2007.8 2013.5 2013.9 2014.1 現在2014.6 2015.12 このあたり 侵食される「JavaScript」と、「ECMAScript6」の思想
  40. 40. 4. 休戦 ❖ JavaScript案件が増えるにつれ、プログラマーがJavaScript界に侵食 してくるようになる。 ❖ ほかの言語の思想をJavaScriptに持ち込まれるようになる。 JavaScriptを他の言語の思想で書けるようにフレームワークが作られ 始める。jQueryをdisられるようになる。 ❖ JavaScript標準となるECMAScriptのバージョン6で、ClassやSymbol 、Arrow関数等が定められる。JavaScriptの一つの時代の終焉 侵食される「JavaScript」と、「ECMAScript6」の思想
  41. 41. 5. 現在
  42. 42. 5. 現在 1. 第2次JSフレームワーク戦争 2. なんでもかんでもコンパイル時代 etc…
  43. 43. 5. 現在 2007.8 2013.5 2013.9 2014.1 現在2014.6 2015.12 このあたり 第2次JSフレームワーク戦争
  44. 44. 5. 現在 第1次は主にインタラクションに関するフレームワークの覇 権争いだったが、 第2次では大規模プロダクトの設計思想やデザインパターン によるフレームワーク同士の戦いとなっている。 第2次JSフレームワーク戦争
  45. 45. 5. 現在 Backbone ❖ フロントエンドMV*の走りとなった古参。 ❖ ライトウェイトだが縛りもすくなく、実装者によってコー ドに差が大きい。 ❖ HuluやTrello等、多くのサービスにて採用されている。 第2次JSフレームワーク戦争
  46. 46. 5. 現在 Angular ❖ 独自の書き方になり学習コストが高く他への応用が利かな い。 ❖ 現状、1,2の移行期。Google製で、今後はTypeScriptとの連 携が期待されている。 ❖ 今の所一番強い?印象。 第2次JSフレームワーク戦争
  47. 47. 5. 現在 React ❖ ここ数年で人気が出てきたフレームワーク。 ❖ Facebook製。Web版のFacebookもコレを採用。 ❖ MV*ではなくViewのみ。 第2次JSフレームワーク戦争
  48. 48. 5. 現在 ❖ 他、様々なフレームワークがある中、決め手となるものが ない状況。 ❖ MV*モデル自体がバックエンド言語から来ている思想。 ❖ バックエンドと同じやり方でフロントエンド実装をしよう とするとやりやすい、という考えの元でのフレームワーク 。 ❖ 元々のJavaScriptにはなかった展開。 第2次JSフレームワーク戦争
  49. 49. 5. 現在 2007.8 2013.5 2013.9 2014.1 現在2014.6 2015.12 このあたり なんでもかんでもコンパイル時代
  50. 50. 5. 現在 JavaScript ❖ CoffeeScriptが走り。Java等の他の言語の人が書きやすい 書き方で書き、JavaScriptにコンパイルする、という流れ ができた。 ❖ TypeScript等、AltJSと呼ばれるJSコンパイル言語が発達。 なんでもかんでもコンパイル時代
  51. 51. 5. 現在 他への影響 ❖ CSS側でも発生。Sass, Less, StylusがCSSプリプロセッサと してフロントエンドに投入される。 ❖ バックエンドフレームワークにセットアップすることが可能 。 ❖ バックエンドフレームワークのViewで使用されていたJadeや Slimを単独でコンパイルしてHTMLを書く、という流れも生ま れている。 なんでもかんでもコンパイル時代
  52. 52. 5. 現在 タスクマネージャーの誕生 ❖ コンパイルを中心としたタスクを管理するツールが広く使 われ始めている。 ❖ コンパイル前提でフロントエンド作業が完結する時代。 →フロントエンド以外の人(≒バックエンドの人)が使いや すいように進化している。 なんでもかんでもコンパイル時代
  53. 53. 5. 現在 フロントエンド自体が、バックエンドに侵食され始めている 。 なんでもかんでもコンパイル時代
  54. 54. 6. 未来展望: 「Webフロントエンド」って、結局どうなる ?
  55. 55. 6. 未来展望: 「Webフロントエンド」って、結局どうなる ? 現状 ❖ 新デバイス ❖ HTML5,ECMAScript6/7 ❖ 他言語からの思想・技術・技術者の流入 ❖ コンパイル言語としてのHTML,CSS,JavaScript
  56. 56. 6. 未来展望: 「Webフロントエンド」って、結局どうなる ? 今後 ❖ Webの技術自体の適用範囲・注目度は上がっていく。 ❖ HTMLやCSS,JavaScriptは、今と違った形へと変わってい く。言語自体が新しいものに引き継がれて消えていくので はなかろうか。 ❖ バックエンドとフロントエンドの役割が融合・再編成され て、今の職業区分はなくなっていきそう。
  57. 57. 6. 未来展望: 「Webフロントエンド」って、結局どうなる ? そうなったとき、 フロントエンドエンジニアはどうやって生き残る?
  58. 58. 6. 未来展望: 「Webフロントエンド」って、結局どうなる ? エンジニアとして生き残っていくためには ❖ これまでも常に学び続けていたが、やっぱり技術の動向をしっかり見 つめていくべき。必要な時に、必要な技術を使えるように。 ❖ 過去に苦労したことは、今後の新技術でも同じターンは必ず来る。歴 史は繰り返す。今当たり前になっていることを、たまには振り返って 進化を確認するとよさそう。 ❖ 変化を恐れない。恐れてもいいけど、薄眼を開けてでも直視する勇気 が必要。 ❖ 必要があったら、新しい戦場に飛び込んでいく度胸を持つ。
  59. 59. 変化を怖がるよりも、変化を楽しむスタンスで。 6. 未来展望: 「Webフロントエンド」って、結局どうなる ?
  60. 60. ご清聴、ありがとうございました。

×