Reactによるモダンフロントエンド開発入門/react

Transcript

1. React による モダンフロントエンド開発⼊⾨ 2019/10/9
2. アジェンダ u はじめに u 現状を知る u JavaScript の３⼤フレームワーク u モダンな JavaScript 概要 u TypeScript 概要 u React 概要 u React のプロジェクト作成⽅法 u おわりに u Appendix
3. はじめに u この発表(約30分)のゴールは以下のように設定しています u JavaScript が⼤きく変わったことを理解できる u TypeScript の概要を理解できる u React の概要を理解できる
4. 現状を知る
5. 今、フロントエンドで何が起きているか︖ u ユーザがUI・UXに求める⽔準が⾼くなった u SPA(Single Page Application) の台頭 u SPAでは従来の技術では対応が難しくなった u jQuery などを使⽤した Ajax での画⾯更新 u パフォーマンスの問題やメンテナンスの困難さがある u SPAの問題を解決するために新しい技術が必要になった u React に代表される新しいフレームワークの登場
6. JavaScriptの３⼤フレームワーク
7. JavaScript の３⼤フレームワーク u JavaScript の３⼤フレームワーク u React (リアクト) u Angular (アンギュラー) u Vue.js (ヴュージェイエス) u 特徴 開発元 使⽤⾔語 ﾗｲｾﾝｽ 特徴 React Facebook JavaScript/TypeScript MIT ⼤規模、複雑なアプリに向いている Angular Google TypeScript MIT フルスタックで⼤規模開発に向いている Vue.js Evan You JavaScript/TypeScript MIT シンプルなアプリに向いている
8. ３⼤フレームワーク⽐較 − npm Trends ⽇本で⼈気のvueは 意外と世界では低調 Reactが圧倒的 Angularは低調
9. モダンな JavaScript 概要
10. モダンな JavaScript 概要 (1/3) u 現在の JavaScript は以前とは⼤きく異なる u ECMAScript 5以前とECMAScript 6(2015年)以降は別物 u jQuery は以前の書き⽅ u 変数の宣⾔で var を使⽤するのは⾮推奨（というかダメ） u 代わりに、const と let を使⽤する u const は定数、let は変数に使⽤。基本は const を使⽤する。 u アロー関数 u 従来の関数 アロー関数 function hello(m) { return "Hello," + m; } const hello = (m) => { return "Hello" + m;}; //省略形 const hello = m => "Hello" + m; ※JavaScript(ECMAScript) の遷移はAppendix参照
11. モダンな JavaScript 概要 (2/3) u クラス構⽂ u ECMAScript 6 から JavaScript でもクラス構⽂を使⽤できるようになった class Animal { constructor(name) { this.name = name; } cry() { console.log(`${this.name}です`); } } class Cat extends Animal { constructor(name) { super(name); } } const animal = new Animal("animal"); animal.cry(); // animalです const cat = new Cat("cat"); cat.cry(); // catです
12. モダンな JavaScript 概要 (3/3) u ⾮同期処理 u ES 6 から Promise 構⽂、ES2017から async/await が導⼊された Promise 構⽂ async/await const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)); const greet = () => { console.log('good night'); //2秒待つ sleep(2000) .then(() => { console.log('wake up'); console.log('good morning'); }) .catch(err => { console.error('error happend!') }) } greet(); const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)); const greet = async () => { console.log('good night'); try { // 2秒待つ await sleep(2000); console.log('wake up'); console.log('good morning'); } catch (err) { console.error('error happend!') } } greet(); ※finally句はES2018から サポートされている
13. TypeScript 概要
14. TypeScript 概要 (1/3) u TypeScript は JavaScript のスーパーセット u JavaScript の⽂法は TypeScript ですべて使⽤できる u JavaScript を知っていれば TypeScript の習得は⽐較的容易 u TypeScript は今やメジャー⾔語 u マイナー⾔語というイメージは払拭する必要あり u GitHubの統計でアクティブユーザーは2018年で10位。Rubyは11位。(参考⽂献１) u プログラミング⾔語のトレンド u 静的型付け u 型推論 u Null 安全性 u TypeScript はすべて備えている︕
15. TypeScript 概要 (2/3) u TypeScript は静的型付け⾔語 u 型があるため実⾏時エラーが起きにくい u プリミティブ型 u number, string, boolean, null 等 u 特殊な型 u any ・・・どんな型でも受け⼊れる、JSONなどで使⽤ u 関数定義 function hello(m:string):string { return "Hello," + m; } const hello = (m:string):string => "Hello," + m;
16. TypeScript 概要 (3/3) u クラス構⽂ u フィールド宣⾔と型宣⾔が必要 class Animal { private name:string; constructor(name:string) { this.name = name; } cry() { console.log(`${this.name}です`); } } class Cat extends Animal { constructor(name:string) { super(name); } } const animal = new Animal("animal"); animal.cry(); // animalです const cat = new Cat("cat"); cat.cry(); // catです
17. React 概要
18. React の基本思想 u 仮想DOM (Virtual DOM) u JavaScriptのオブジェクトで仮想 DOM を構築して、最終的な処理の結果と、 DOM 本体との差分だけを更新することでオーバーヘッドを最⼩にする技術 u DOM 更新時のオーバーヘッドの解消はそれまで⼤変な労⼒を要した u コンポーネント指向 u 独⾃の HTML タグを、Web 標準の技術だけで実現する技術 u 単⽅向データフロー u データは必ず親コンポーネントから⼦コンポーネントに⼀⽅向に流れる u これにより複雑になったフロントエンドに対処している <<DOMツリー>> html ┣ head ┃ ┗ title ┗ body ┗ section ┗ p ┗ text
19. 拡張記法JSX u React では HTML ライクな JSX で表⽰を記述する u JSX は JavaScript eXtension で JavaScript の拡張 u あくまでも JavaScript で以下の２つはJSXで同じ意味になる u とは⾔え、JSX は基本的に HTML と同じように記述できる u 独⾃タグを作成することもできる u タグ属性の class -> className, for -> htmlFor は例外 u 変数の記述は以下のようにする u {変数} ・・・これで変数が展開される <h1>Hello,world!</h1> React.createElement("h1", "Hello,world!");
20. JSXのサンプル (create-react-app で作成された App.tsx) import React from 'react'; import logo from './logo.svg'; import './App.css'; const App: React.FC = () => { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.tsx</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App;
21. React のプロジェクト作成⽅法
22. 実際にReactのプロジェクトを作成してみる (1/2) u React のプロジェクトを作成するには、Node.js と npm, yarn が環境構築 されている必要がある。OSごとに⽅法が異なるので、ネットの記事を参 考に構築する。 u 下記コマンドを実⾏して React のプロジェクトを作成する u 現状の動向を踏まえTypeScript を採⽤する u 下記コマンドを実⾏して、React のプロジェクトを起動する $ npx create-react-app hello-world --typescript $ cd hello-world $ yarn start
23. 実際にReactのプロジェクトを作成してみる (2/2) u 起動した React のプロジェクト
24. Demo
25. おわりに
26. おわりに u はじめて React のことに触れたら、今⽇の内容でおなかいっ ぱいかもしれませんが、まだほんの⼊⼝に⽴った程度です u React に限らず、３⼤フレームワークの追随には⼤きなパラ ダイムシフトを伴います u そのパラダイムシフトに追いつくためには、相応の時間がか かります u さまざまな流れが、フロントエンドの⾼度化を促しているの で、キャッチアップを始めることをおすすめします
27. Appendix
28. 近年のJavaScript(ECMAScript)の遷移 公開⽇ バージョン 略称 備考 2009年12⽉ ECMAScript 5th Edition ES5 ブラウザで標準サポート されているバージョン 2015年6⽉ ECMAScript 2015 ES2015(ES6) ES5から⼤幅にアップ デートされ別物に 2016年6⽉ ECMAScript 2016 ES2016(ES7) 2017年6⽉ ECMAScript 2017 ES2017(ES8) 2018年6⽉ ECMAScript 2018 ES2018(ES9) ※ES6以降のコードはBabelでES5に変換(トランスパイル)する⽅法が標準的
29. 参考⽂献 u １．『りあクト︕ TypeScriptで始めるつらくないReact開発 第2版』 u https://booth.pm/ja/items/1312652 u ２．『りあクト︕ TypeScriptで極める現場のReact開発』 u https://booth.pm/ja/items/1312815 u ３．『ネコミミでもわかるシングルページアプリケーション』 u 現在⼊⼿不可
30. 参考サイト u なぜ React か? サービスを成⻑させるための技術選択 u https://www.wantedly.com/companies/wantedly/post_articles/27340 u ３⼤フレームワーク Angular, React, Vue.jsを⽐べてみよう (2018年4⽉) u http://iwasiman.hatenablog.com/entry/2018/04/23/200000 u JavaScript⼊⾨ u http://www.tohoho-web.com/js/what.htm