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.

Okinawa frontend meetup1_俺のフロントエンド開発がこんなに時代おくれなワケがない

1,758 views

Published on

Okinawa Frontend Meetup#1で話した内容です。
間違いがあればこっそりおしえてください。

https://okinawa-frontend.doorkeeper.jp

Published in: Technology
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Okinawa frontend meetup1_俺のフロントエンド開発がこんなに時代おくれなワケがない

  1. 1. 俺のフロントエンド開発が こんなに時代遅れなわけがない @murabito_cx
  2. 2. 自己紹介 • 村濱一樹 @murabito_cx • 株式会社レキサス所属 • 最近はフロントエンド周りの開発してる • Java Kücheの会長
  3. 3. ひさびさにフロントエンド開発 • 動的にフォームを設置したりボタンのイベント処理を追加したり • jQuery、jQuery-UI、jQuery-pluginでいいよね?
  4. 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. 5. とあるgithubのプロジェクト 依存ライブラリのインストール 依存ライブラリは npm を用いて管理されている.    npm  install   JavaScriptやSASSのビルド Gulp タスクが幾つか用意されている. ビルド ビルドするためには    npm  run  build   を実行する. これを実行する前に npm install を行って依存ライブラリ が正しくインストールしておく必 要がある.
  6. 6. え、ちょっと何言ってるかわか んないっすね…
  7. 7. 俺のフロントエンド開発 • 2010年くらい、学生のときにやってみた • Ajaxで動的にAPIのデータを取得 • ボタンを押すとMapにピンを立てたり、アコーディオンが開いたり
  8. 8. いまどきのフロントエンド開発 • Grunt/Gulp(コードの圧縮やコードのビルドなどを自動で行えるタ スクランナー) • npm(ライブラリの依存関係を解消するツール) • Bower(フロントエンド専用ライブラリの依存関係を解消するツー ル) • Vue, Anguler, React(データバインドを実現するフレームワーク)
  9. 9. そもそもWebにおける フロントエンド開発とはなにか? ちょっと歴史を振り返ってみる
  10. 10. フロントエンドの歴史 ∼ 2005年
  11. 11. フロントエンドの歴史 (∼ 2005年) • JavaScriptは実行が遅くページ内でDOMを動的に操作するというのはあま りなかった。 • レンダリングもブラウザによって差があった。 • ページ遷移することでしか表示を変えれないので、ネイティブアプリケー ションの振る舞いは難しい。 →これらの理由によりWebの表現力には限界があり、UI/UXへの注目度は低 かった
  12. 12. 有名なやつ • http://web.archive.org/web/20130515083615/http:// www.aiseikai.or.jp/ • http://www.takamagahara.com/printin/ • http://hm.aitai.ne.jp/ naitonet/
  13. 13. Flash黎明期 > 「FLASH黄金時代」に当てはまる期間は人によって差があるが、「始 まりは98∼02年」「終焉は05∼07年」という解釈が一般的である。 引用: http://dic.nicovideo.jp/a/flash黄金時代
  14. 14. Flash黎明期 2005年以前のフロントエンドといえば、 Flashだったかもしれない
  15. 15. フロントエンドの歴史 2005年 ∼
  16. 16. Web2.0が提唱される Web 2.0とは、従来Web上で提供されてきたサービスやユー ザー体験とは一線を画する、新しい発想によって捉えられた、技 術、サービス、デザインパターン、ビジネスモデル、Webのあり 方などの総称である。 引用:http://www.sophia-it.com/content/Web+2.0
  17. 17. Google Mapの登場
  18. 18. ブラウザとクライアントPCの性能向上 引用:「付属」でも超使える! Macの純正ソフト20連発 http://ascii.jp/elem/000/000/510/510650/index-2.html
  19. 19. ブラウザとクライアントPCの性能向上
  20. 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. 21. HTML5/CSS3の登場
  22. 22. HTML5/CSSの恐るべき表現力 • http://fff.cmiscm.com/#!/main
  23. 23. Ajax > 従来のWebアプリケーションでは、サーバにリクエストを送信後、レスポンスを新 たにウェブページとして受け取ることで画面遷移が発生していたが、Ajaxにより画面 遷移を伴わない動的なWebアプリケーションの製作が実現可能になる[1]。 例えば Web検索に応用することで、従来は入力確定後に行っていた検索を、ユーザがキー入 力をする間にバックグラウンドで行うことによってリアルタイムに検索結果を表示し ていくといったことが可能になる。 引用 http://ja.wikipedia.org/wiki/Ajax
  24. 24. Ajax • PHP を使用して Ajax ベースの Web サイトを作成する
 https://www.ibm.com/developerworks/jp/web/library/wa-aj- php/
  25. 25. JavaScriptライブラリ/CSSフレームワークの登場 • jQuery • prototype.js • uupaa.js • Bootstrap • Foundation
  26. 26. jQueryの特徴 jQueryには次のような機能・特徴がある。 • ブラウザに依存しないオープンソースのセレクタエンジン Sizzle を使ったDOMエレメントの選 択(Sizzle は jQuery プロジェクトからスピンアウト)[3] • DOM操作と変更(CSS 1-3 と基本的なXPathのサポートを含む) • イベント • CSS操作 • エフェクトとアニメーション • Ajax • ユーティリティ - ブラウザのバージョン取得、each関数など • 拡張性 - jQuery プラグイン 引用 http://ja.wikipedia.org/wiki/JQuery
  27. 27. JavaScriptのDOM操作は難儀 • JavaScriptのみの場合
 http://akioblog.com/2013/03/10/868/ • jQueryの場合
 http://qiita.com/kazu56/items/8e92d08fd1bba0a2d771
  28. 28. DOM操作の問題点 • DOMはどこからでも変更可能 • DOMが状態を持っている • DOMとコードが離れすぎ
  29. 29. WebSocketの登場 いわゆるAjaxアプリケーションではサーバとクライアント間のデータのやり取りが頻繁に発生する が、従来のXMLHttpRequestはあくまでブラウザ側からサーバにデータの送信要求を出す手段に 過ぎず、サーバ側からクライアントにデータをプッシュ配信することが難しい。一方Cometでは サーバ側からのプッシュ配信が可能なものの、多くの実装では擬似的に双方向通信を行うため通信 が発生するごとにTCPのハンドシェイク手続きを再度行う必要があるほか、HTTPコネクションを 長時間占有するためその間同一サーバに接続する他のアプリケーションの動作に影響を及ぼす可能 性があるなど、また別の問題が生じる(XMLHttpRequest#ロングポーリングも参照)。 これに対しWebSocketでは、サーバとクライアントが一度コネクションを行った後は、必要な通 信を全てそのコネクション上で専用のプロトコルを用いて行う。従来の手法に比べると、新たなコ ネクションを張ることがなくなる・HTTPコネクションとは異なる軽量プロトコルを使うなどの理 由により通信ロスが減る、一つのコネクションで全てのデータ送受信が行えるため同一サーバに接 続する他のアプリケーションへの影響が少ないなどのメリットがある。[1]。
  30. 30. Flashの終焉 ? 以前からFlashに批判的なAppleのスティーブ・ジョブズCEOが、Wall Street Journalを訪れた際、Flashを痛烈に批判したと伝えられている。 同氏はFlashを「バッテリーを大きく消費する」「CPUリソースを大食 いする」「セキュリティーホールのもと」「死にかけの技術」とこき下 ろし、「われわれは古い技術に多くのエネルギーを注がない」と語った という。ジョブズ氏は以前からFlashはバグが多いと批判しており、 「Flashは使われなくなりHTML5に移行する」と語ったとも伝えられ ている。 引用:http://gigazine.net/news/20111110_flash_history/
  31. 31. 2005年以降、Webはかなり進 化し、表現力があがった
  32. 32. UI/UXがWebの世界でも見直されるように
  33. 33. 最近
  34. 34. Webの進化により問題が浮き彫りに • モバイル対応 • JavaScriptの未完成さ • 開発の大規模化 • ユーザー体験の重要性 総じて、考えること、やることが多くなった。
  35. 35. どうやって開発しやすくするか どうやって品質を上げるか
  36. 36. 新たなフレームワーク,ライブラリの登場 • underscore.js • Anguler.js • Vue.js • React.js
  37. 37. 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
  38. 38. JavaScriptだけでなく • haml / Slim • sass / scss
  39. 39. フロントエンドでもパッケージ管理(npm) • node.jsはJavaScriptがサーバーサ イドで動く • npmはnode.js向けのパッケージマ ネージャ。最近はフロントエンド のパッケージも多い。
  40. 40. タスクランナー(Gulp, Grunt) • Node.jsを使ったタスク自動化ツール。 • CSSやJavaScriptファイルの圧縮や結合ができる • AltJSやSassのコンパイルなんかも自動化できる • 画像の圧縮などコードに直接関係のないこともできる • ほかの人と共有できる • Webデザイナーでも、使えるようになると作業が る
  41. 41. まとめ • Webの世界ではもともとフロントエンドという概念はあまりなかっ た • Webの技術の進化(厳密には再発見?)、コンピュータの進化によ り表現力が爆発的に上がり、UI/UXが見直されるようになった • よりフロントエンドが開発しやすくできるよう、npmやgulp,AltJS などを組み合わせたエコシステムが発達した
  42. 42. 流れは超絶速い
  43. 43. 例えば)
 1年前:Bowerすごい、Gruntすごい
 最近:Bowerオワコン、Gruntオワコン 新しいJavaScriptフレームワークやライブラリ、ツールが どんどん出てきては廃れる
  44. 44. 一人ではやっていけないスピード感なので、 みんなで知見を寄せ合おう 
 終

×