おっさんES6/ES2015,React.jsを学ぶ
•Als PPTX, PDF herunterladen•
68 gefällt mir•18,229 views
おっさんES6/ES2015,React.jsを学ぶ 2016JavaScript入門 2016/11/21 @BizReach D3イベント登壇資料 最近のJavaScript動向 ・試験に出るJavaScript21年の歴史 ES6/ES2015を学ぶ ・ES6/ES2015概要 ・ES5を振り返る ・altjsの意義 Reactを学ぶ ・DOCを読む ・Tutorialをやる まとめ ・今回の学習を通じて感じたこと
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie おっさんES6/ES2015,React.jsを学ぶ
Ähnlich wie おっさんES6/ES2015,React.jsを学ぶ (20)
Mehr von dcubeio
Mehr von dcubeio (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (11)
おっさんES6/ES2015,React.jsを学ぶ
- 3. 主な業務経験 2002 2004 2008 2010 VC++ 富士フイルム ソフトウエア OPT Become Bizreach C# Perl PHP Java インフラ Java Scala 在籍企業 2015 2016 インフラ JSJS 言語 マネジメントとかで ほとんど開発してない期間
- 5. おっさんの定義（狭義） • 狭義の意味でのおっさんは３５歳以上 • ワカモノは２０代と定義します • 登壇者は37歳ですがまだまだ若いと思ってます。 • 弊社では「安定感のあるおっさん」などプラスの意味でも使わ れます
- 8. 背景＆経緯 • 最近新しい技術的なのを触ってない気がする • 新しい技術を自ら提案ではなく、ワカモノから提案されるよう になった • 提案されたところでよくわからなかったり(TOT)
- 9. 背景＆経緯 • 業務でメンバーAnguraJSとかReactJSとかでガンガン開発して いる • がっ自分は全く触ってない • しかもReactはかなり来ている肌感はある • 危機感をかんじるものの、触る機会（仕事）がない • プライベートも忙しい（という言い訳） • 重い腰を上げてReactを触ってみることに
- 10. Reactを触ろうとするものの • ヤバイ！まず使われている単語がわからない • 自分の知識はJQueryくらいで止まってる • EcmaScriptってなに？ • トランスパイラって何？ JSなのにコンパイルってどういうこ と？ • Babelなにそれつよいの？大丈夫？神の怒りかっちゃわない？ • Gulp?タスクランナー？なにそれGruntみたいなヤツ？ごめん そっちも知らない。最近はWebpack??もうお腹いっぱいです。 • React触るっつーか スタート地点にも立ててない
- 12. 目次 • 最近のJavaScript動向 • 試験に出るJavaScript21年の歴史 • ES6/ES2015を学ぶ • ES6/ES2015概要 • ES5を振り返る • altjsの意義 • Reactを学ぶ • DOCを読む • Tutorialをやる • 今回の学習を通じて感じたこと
- 14. JavaScriptの歴史 誕生 • 1995年-誕生 • 12月，Netscape Navigator 2.0に，ブレンダン・アイク（Brendan Eich）が開発した『LiveScript』が実装されるNetscape Navigator社 とSun Microsystems(現Oracle)は当時提携関係にあり，Javaの勢いに 便乗しようとLiveScriptから『JavaScript』に改名． • こんな名前にしたせいで多くの混乱と誤解を生む • 1996年 • MSはIEにJavaScriptを搭載しようとしたが，NN社はライセンスを供 与しなかった．そのため，Javascriptに似た言語として『JScript』と いう言語を開発・・ 部分的に互換があったりなかったり • 開発者泣かせの状態に（ブラウザ依存はずっと開発者泣かせだけど ね！）
- 15. JavaScriptの歴史 標準化へ • 1997年 • JscriptとJavascriptというブラウザ互換性のない状態を解決しようと NN社は，Javascriptを標準化しようと画策し，ECMAという標準化機 関にJavascriptの標準化を依頼． • 1997年6月ECMA-262 初版ができる．世界に平和が訪れた！
- 16. JavaScriptの歴史 標準化したものの・・ • 1998年 ECMA-262 第2版、1999年 ECMA-262 第3版までは標 準化は順調に進む • ECMA-262 第4版のときに4版をおすAdobe,Mozira(旧NN社)と 3.1版をおすダグラス・クロックフォード(Douglas Crockford)、 MSやYahoo!で意見が別れて最終的には第４版は破棄 • その後第５版がリリースされるのは１０年後の2009年である • （あとで詳しく語ります）
- 17. JavaScriptの歴史 暗黒期2000年代前半 • 2000年代前半 • JSはOFFにするのがセキュリテーを守る意味でわりと一般的 だった。エンジニアはOFFにしてたような・・（登壇者肌感） • ブラウザ側もセキュリティへの考慮が不十分で，Javascriptの 脆弱性をつくウィルスが登場したり，ブラウザに無理に負荷を かける通称「ブラクラ」が作られていた。 • 動的なベージはFlashを使ったサイトが全盛 • JSこのまま歴史に埋もれた言語となるかと思われた！！
- 18. JavaScriptの歴史 Ajax登場JS復権へ • 2005年2月8日 Google Map登場 日本版は7月14日 • Gmail、GoogleサジェストなどでもAjax技術が使われる • Ajaxとうい概念が誕生（ AjaxはAsynchronous JavaScript + XML の略で、2005年2月18日に米国のインフォメーションアー キテクトであるJesse James Garrettにより名付けられた） • JavaScriptが再評価される
- 19. JavaScriptの歴史 ライブラリの普及 • JavaScriptが見直され、様々な機能が実装されJSライブラリな るものが登場し始める • 2005年 Prototype.js初版リリース • 2006年JQuery初版初版リリース • 特にJQueryは一大ブームに、JSの標準じゃないかと思われるぐ らいに普及する。 $を使うことで、簡単にDOMを扱えるように なり、メソッドチェーンを使って適当に書いたらかっこよく動 く。数多のプラグインが作られ、当時世間を変えつつあったス マホにも対応するjQuery Mobileなども登場 • 世界はJQueryによって包まれた！
- 20. JavaScriptの歴史 V8エンジン • 2008年にGoogle chromeが公開、V8 JavaScriptエンジンが搭載 される • V8エンジンはJIT(Just in time) Virtual Machine型の JavaScript実行エンジン，JSが高速に動作した。 • 当時のJavaScriptは遅いという常識を覆しプラウザ環境を根底 から変えていく • 補足：Firefoxはインタープリタで実行して、統計情報をとって、まず中間コードに変換し、その上 でJITコンパイルするが、V8では、中間コードもなく、インタープリタも搭載せずに最初の実行時 からコンパイルする。
- 21. JavaScriptの歴史 サーバーサイドjs • 2009年 Node.js登場 • サーバーサイドJS、非同期、ノンブロッキングIO • C10K問題への対応 • Google V8エンジン • サーバーサイドだけでなくnpm gulpなどでフロントエンドJSも 恩恵を受ける
- 22. JavaScriptの歴史 フレームワーク編 • 世界はJQueryの天下が続くと思われたが、JSがより大規模開発 になるにつれてJQueryにも不満が溜まってくる。 • 一人でゴリゴリ書くのは良いが、テストが書きづらく集団メン テナンスがわるい、高度化するWebアプリケーションにおいて、 jQueryだと設計とか保守性を担保するのが難しかった。 • そして時代はJSフレームワークを求める始める
- 23. JavaScriptの歴史 フレームワーク編 • Backbone.js、Angular.js，React.js，Riot.jsなどが出てくる • 2009年 Angular.js - Google製フレームワーク • 2010年 BACKBONE.js • 2013年 3月 React.js – Facebook製 • Viewだけなのでフレームワークでは無くライブラリ • 2013年 11月 Riot.js • 2016年 Angular2 (betaは2015年)
- 24. JavaScriptの歴史 altJS • AltJS（Alternative JavaScript）とは、その名の通りJavaScript の代替言語 • 複数人数開発をするに伴い問題になってきた、言語仕様の柔軟 性（悪く言えば適当さ）を解決するために登場 • →動的型付けによりバグの混入 Classが無い等ため仮想的に class概念を作ったりするなど。 • AltJSをコンパイル（トランスパイル）することでJavaScriptを 生成し、言語仕様が柔軟なJavaScriptの持っている問題を解決 します。 • JSを生成する言語という昔のおっさんにはびっくりな世界に
- 25. JavaScriptの歴史 altJS • 2009年 CoffeeScript (Railsに標準でサポート) • 2011年 Dart Google製 • 2012年10月 TypeScript マイクロソフト製 • ES6のスーパーセット • いまはTypeScriptが主流な模様
- 26. EcmaScript ES5 • 2009年 ES5 10年ぶりの仕様更新 • ES4とES3.1の対立を長らく続けていたがES3.1をベースとする ことで調整、実質的な初もESメジャーバージョンアップ • ES4は破棄、ES3.1をES5としてリリース
- 27. EcmaScript - ES2015/ES6 • 2015年6月にリリースされたECMAScript 6th edition • コードネームは「harmony」ES3.1とES4の対立を調和させた らしい。 • 当初はES6という名称だったがこれ以降は1年毎にリリースして いく計画となったためES2015が正式名称となった • 今後の名称はES2015, ES2016,ES2017とうい名称になるとのこ と
- 29. ES2015で追加となった機能(1) • let・const変数宣言 • class構文 • アロー関数 • importとexportによるモジュール構文（Module） • 分割代入 • Pythonスタイルのジェネレータ • 関数のデフォルト引数、関数の可変長引数
- 30. ES2015で追加となった機能(2) • テンプレート文字列 • Symbol • Promise • プロキシ型付き • 配列Map、Set、WeekMap、WeekSet • イテレータ、for/ofループ • 2進数および8進数の整数リテラル
- 34. const • constは再代入できない • 定数として利用できる • Immutableなオブジェクトとして利用できる
- 35. const
- 36. 所感:var,let,constどれを使うべきか？ • varはもう出番はない • 基本はconst、必要に応じてlet • コーディングミスを防ぐためにも、immutable（不変なオブ ジェクト）なプログラミングの流れ的にも constベースでいい のではないか？
- 38. class
- 39. アロー関数
- 40. Promise • Promiseはまだ完了していないが、いずれ完了する処理を表す • callback地獄から脱却出来る、並列処理が書きやすくなる • すごい大事なんですが、説明が難しので今回は割愛 • MDM promise • https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/G lobal_Objects/Promise • ちなみにAsync/AwaitはES2016で入るっぽい予定だったのが入 ら無かったみたいです。（ES2017でほぼ入りそう）
- 43. 結局互換性の問題 • トランスパイラの登場 • トランスパイラはコードをコードに変換する • JSの世界ではES6以降をES5に変換してくれる
- 44. Babel
- 45. Babel • もとの名前は6to5, ES6をES5に変換するためのツールだった • ES6以降もサポートしていくということでBabelという名前に • ES6/ES2015のイケてるJSでコーディングしながらES5対応ブ ラウザで動作させることが出来る
- 46. Babel ES6をES5に変換
- 48. Babelデモ class Person { constructor(name) { this.name = name; } hello() { console.log('My name is ' + this.name); } } const alice = new Person('kotaro'); alice.hello() https://babeljs.io/repl/ に上記を貼り付ける
- 49. ECMAScript Edition 公開日 1 1997年6月 初版 2 1998年6月 EditionはそのままISO/IEC 16262 international standardへの対応 3 1999年12月 正規表現、よりよい文字列の取り扱い、新しいコントロール構文、 try/catch例外処理、より厳格なエラー処理、数字のその他の書式化フォー マット 4 廃棄 政治的な理由により廃棄 5 2009年12月 10年分の負債の精算 "strictモード"、初期化時に発生しがちなエラーを回 避するための追加仕様の追加。多くの曖昧な部分、および仕様に準拠しつ つも現実世界の実装の融通の利く振る舞いを明確にした。いくらかの新機 能、getterやsetter、JSONライブラリのサポート、より完全なオブジェク トの属性のリフレクション 5.1 2011年6月 ISO/IEC 16262:2011への対応 6/2015 2015年6月 クラス、モジュール、イテレータ、for/ofループ、Pythonスタイルのジェ ネレータ、アロー関数、2進数および8進数の整数リテラル、Map、Set、 WeekMap、WeekSet、プロキシ、テンプレート文字列、let、const、型 付き配列、デフォルト引数、Symbol、Promise、分割代入、可変長引数 2016 2016年6月 冪乗演算子、Array.prototype.includes 2017 策定中
- 50. ちょっとES5についても語っておこう • 1999年のES3(ES4は破棄)より10年の時をへて2009年策定され たバージョン • まさかの復権を遂げたJSが使われ方が進化していく中で多くの 曖昧な部分、および仕様に準拠しつつも現実世界の実装の融通 の利く振る舞いを明確にした。 • Array.isArray Array.prototype.forEach Array.prototype.mapと かArray系の機能拡張が多く行われてる • Object系の拡張も目玉だがES6以降はclassでいいよね感 • 色々あるけど“use strict”とかはLL言語のよくある流れ
- 51. use strict • “use strict”; と宣言することで使用可能に • 具体的には次ようなミスがエラーとして処理されます • 宣言されていない変数への代入 • 書き込み不可変数・getterのみの変数への代入 • 削除できないプロパティのdelete • 引数名の重複 • 8進数表記 • with構文
- 53. use strict • 既視感がある • この道はいつか来た道
- 54. use strict の既視感 • Perl • PHPもStrict modeがあるとか無いとか • LL言語 型無し言語の通る道なのかなー
- 56. ESバージョン • 現状のモダンJSを使うならES->Babel使うにしてもES5対応ブ ラウザが最低ライン • IE8対応必須とか言ってる状況なら、ES5/ES6/ES2015は諦め たほうが無難
- 57. ちょっと脱線
- 60. ES6/ES2015以降 altJSは必要か？ • ES6/2015以降でも実現されてない機能はあるのでメリットは 有る（静的型付けなど） • 大規模開発などで構文チェックなどメリットは大きい • 今新たにHRMOSを作るとしてもTypeScriptを採用すると思う • もう少し小さなプロダクトならES6でよいかと
- 61. ES6/ES2015以降 altJSは必要か？ • 学習コストもTypeScriptはES6のスーパーセットなのでそこま でかからない • 逆にTypeScriptはESのスーパーセットなのでES/Javascriptの 悪いところをまだ引きずられてる仕様もあるのでCoffeeScript やDart のを使う意義もある（別のJSに詳しいおっさん談）
- 62. ES6/ES2015以降 altJSは必要か？ • 個人的にはES6でいいじゃんって感じ • でも実際の現場ではニーズはある模様
- 63. ワカモノ聞いたファンキーな話 • TypeScriptを一旦ES6に出力してES5トランスパイルすること もあるらしい • TypeScriptにないツールとか（カバレッジツールとか）を使う ために一旦ES6に出力してツールかましてES5にするとかする こともあるらしい • .....お前正気か？
- 66. React • ReactはFacebookの社員が作ったイケてるJSライブラリ • 公式サイトに、「A JavaScript library for building user interfaces」とあるように、React.jsはUIを構築するためのライ ブラリ、フレームワークでなくあくまでUIを構築するだけのラ イブラリで、MVCでいうところのVのみの機能を提供します。 • ー＞なのでフレームワークではない • Facebook InstagramはもちろんYahooやAirbnbなどでも使われ ている • 現状のJSフレームワークだと圧倒的１位 （弊社ワカモノ談）
- 67. React x Flux • Reactと一緒にFluxについてよく語られますが今回は割愛 • Flux • Architecture • MVCのような設計手法 • 以下の４つからなる • ActionCreators • Dispatcher • Store • View (Reactはここを担当)
- 68. 2015年末のReactTOP
- 69. 現在のTOP
- 70. Reactの特徴を端的にいうと • コンポーネントを組み合わせて構築するコンポーネント指向 FW（View ライブラリ） • VirturalDOMを用いた画面の差分描画を行い高速な画面表示を 提供する つまりUIをコンポーネント化しイベントハンドリングDOMの更新とをやってくれる
- 71. 変更があった場所だけを更新 Component Component Data Data A B C E FD A B C EE FD ユーザーのActionで データが変わった 差分部分のみ更新
- 72. JQueryと何が違うのか？ • JQueryの場合データをDOM自体に形になることが多い • <li>に入ってる文字列がデータ！ • データの更新があった場合.detach()して.clone()して.text()し て.appendTo()みたいになってかなり煩雑 • 機能を追加するときもめんどくさい • データが変わるとDOMの値を書き換える必要がある • DOMがどんな値を持っていて、どんなイベントを発火するのか制御 しないといけない • Reactコンポーネントとデータを分けて考え、データが更新される とコンポーネントが更新されるような機能を提供してくれる
- 73. DOM（Document Object Model） • W3Cから勧告 • HTML文書やXML文書をアプリケーションから利用するための API • DOMツリーと呼ばれるツリー構造として扱う事ができる • JSで言うところのdocument.getElementById(“jid_xx”)
- 74. VirtualDOM • DOMを直接いじるとコストが大きい • React.jsではVirtualDOMとしてメモリ上にDOM Treeのような 情報をもっていて前後の状態を比較し差分の部分だけを実際の DOMに反映してくれます。必要最低限のDOMの更新ですみコ ストがかからず表示も早い
- 75. DOM中心からデータ中心に • 今まで • DOMを作ってDOMを書き換えDOM自体がデータをもつ • React • データが主、データから動的にDOMを生成する
- 76. コンポーネント指向 • UIのパーツをコンポーネントして考える • コンポーネントで管理しコンポーネントを極力ステートレスに する（コンポーネントが情報を持たないようにする） • コンポーネント単位での再利用性が高まる
- 78. 構成（社内の開発構成 A） ES6/2015 ES5 istanbul ①TypeScriptで記述 TSLint(TypeScript検証ツール)でチェック ②一旦ES6に書き出して istanbul（カバレッジツール）でチェック ②BABELでES5へ Webpacがこれらを Module Bundler/ビルドツールとして処理
- 79. Webpack webpack は 必要なリソースの依存関係を解決し、アセット（配布物）を生成す るビルドツール JavaScript,CoffeeScript,TypeScript，CSS,画像などの取りまとめ を行う
- 83. とりあえず開発環境つくる便利なものが • create-react-appが便利！！ • https://facebook.github.io/react/docs/installation.html • 始めるまで時間がかかるBabel/Webpack/gulp/jest/eslint周り を旨いことやってくれる • Facebookのエンジニアが手動して開発 • Reduxの作者Dan Abramov氏 • React Docのinstallationにも手順載ってます https://facebook.github.io/react/docs/installation.html
- 85. Hello World • デモ
- 87. Doc
- 91. Rendering a Component • http://codepen.io/gaearon/pen/YGYmEG?editors=0010 Welcomeという コンポーネントを作って タグとして記述、使用できる
- 92. Functional and Class Components https://facebook.github.io/react/docs/components-and-props.html#functional-and-class-components コンポーネントは classでもかける
- 93. Composing Components コンポーネントをまとめて コンポーネントすることも可能 http://codepen.io/gaearon/pen/KgQKPr?editors=0010
- 94. propsとstateの概念 • props（プロパティ） • 親コンポーネントから渡されたプロパティ • 変わらない値 • state（状態） • そのコンポーネントが持っている状態 • 変わることがある値
- 98. State and Lifecycle • Lifecycleって名前になってるけど、ちょっとこの辺りGUIアプ リのイベントハンドラに似てる
- 102. Lists and Keys • Listなどでデータとしては必要ないがKeyを指定する必要があ る • IDを割り当てることで変更や追加削除などDomの変更を最小限 にすることが出来る • 指定しないと警告が出る
- 103. Tutorial
- 108. まとめ (React) • MVCのVを提供するライブラリというシンプルな位置づけだが コンポーネント、VirtualDomによる開発メリットはかなり大き い • JQuery等でのDOM操作、イベント管理などを煩雑化しやす かった部分を、コンポーネント概念によりコンポーネント単位 でイベントハンドリングなど管理をまとめて再利用性を高める、 データとDOMを分離してステートレスなコンポーネント管理を 実現するなど、複雑化するUI/UXを管理しやすくなる効果はか なり大きいだろう
- 109. まとめ（UI/UX GUI） • 個人的にReactを触る中で感じたことは、 Visual C++/C#/BasicあたりのGUIアプリ開発に考え方がにて いると思った点（コンポーネント、イベントハンドラとか） • Webに求められるUI/UXが「ページ」ではなく「アプリケー ション」になってきている。 • 今までのページとしての発想でなく、GUIアプリなどで使って いた概念が取り入れられているような印象を受けました。（コ ンポーネントとかイベントハンドラとか） • このあたり新しいけど古いみたいな
- 110. まとめ（UI/UX GUI） • デザイナー・フロントエンドエンジニア・プログラマの切り分 けみたいなのは難しくなる気がする。 • コンポーネント化+イケてるUI/UX＝情報設計(IA)をしっかりす る だと思うので • デザイナーに対してIAはより求められると思う
- 111. まとめ（JSフレームワーク） • まずはJSフレームワークを使う場合は本当に必要かを考えたほ うがいいかも。 • 何のために使うのか？ • 新しいUI/UXを提供する必要がある？普通のUI/UXじゃだめなのか？ • SEO施策が必要か？ • ブラウザはどこまでサポートする必要があるのか？
- 112. まとめ • JSフレームワークの進化に追従する意志がないと使うのは難し い • 作った後も更新、キャッチアップを続ける意志が必要 • 二年前作ったAngularのソース誰もメンテ出来ないよとかそう いう状態になっちゃう。 • このあたりサーバーサイドの言語・フレームワークも同じだが 今は過渡期で進化が早いので意識しといたほうがいい
- 113. まとめ（JSの開発環境 ビルド周り） • JSの開発環境 ビルド周りはちょっと複雑化しすぎ • JS/CSS/HTML含めて複雑化してきている。 • 弊社でもビルド職人と呼ばれる人が一手にやっているらしい • ただ現状のビルド周りの複雑化は過渡期なのかとも感じる （Javaとかの歴史と一緒）もう少し待てばベストプラクティス というか環境は整ってくると思う。 • とりあえず昔みたいにJQuery読み込んでちょっといじるとかそ ういう感じではない
- 115. まとめ • JS界隈から離れて3-４年ぐらいだけど進化しすぎ • パラダイムシフトが２回くらい起こってる印象 • ReactはJQuery登場くらいのインパクトだとおもう • 正しい進化だと思うのでキャッチアップしていかないとヤバイ • Web業界にいるならJSの土俵に立たなくてもいいので話くらい は出来るようにはしておくべき
- 116. まとめ • ただカーボーイのみなさんが地雷を踏みまくり屍の山を築き情 報共有をしてくれて、その上に高速道路が引かれるので後から でも結構キャッチアップできる。 • カーボーイの皆さんありがとう
- 117. まとめ • IT業界はほんとに変化が早い、正直つらいっす • 2010年当時なら自分はフルスタックエンジニアと言えたが今は 言えない。周りがドンドン進むので学び続けないと取り残され る。 • 新しいことを学ぶのに、過去の経験は役に立つそこはおっさん のメリット（時には足を引っ張ることもありますが）