React vtecx20171025
- 1. Copyright © Virtual Technology, Inc React初⼼者勉強会とLT⼤会 2017/10/25 1
- 2. Copyright © Virtual Technology, Inc ⽵嵜 伸⼀郎 （たけざき しんいちろう） twitter id:stakezaki （有）バーチャルテクノロジー代表取締役 2
- 3. Copyright © Virtual Technology, Inc ビジョン ”もうフルスタックエンジニアはいらない。 HTMLとJSの知識さえあればWebサービスを 開発できる。 そのような世界を私たちは⽬指しています。” 3
- 4. Copyright © Virtual Technology, Inc API以外の余計なことは考えたくない 4 適当に分散して勝⼿にスケールすることを期待 これが真のサーバレスではないのか！？
- 5. Copyright © Virtual Technology, Inc React初⼼者勉強会とLT⼤会 5
- 6. Copyright © Virtual Technology, Inc vte.cxアプリのセットアップ • Visual Studio Codeの導⼊ – https://code.visualstudio.com/download • Windowsの場合、git for windowsの導⼊ – https://git-for-windows.github.io/ • あとは、以下のqiitaの記事を⾒ながらセット アップ – http://qiita.com/stakezaki/items/0401d79d 392b081fb85e 6
- 7. Copyright © Virtual Technology, Inc ⼿順 • nodeのインストール(⼊れていない⽅のみ) – https://nodejs.org/ja/ • gulpとflowのインストール – npm install -g gulp – npm install -g flow-bin • vtecxblankのclone – git clone https://github.com/reflexworks/vtecxblank.git • vscodeでプロジェクトを開きコンソールでビルド – npm install • vtecxにユーザ登録後サービスを作成してデプロイ – https://admin.1.vte.cx/login.html – gulp deploy xxxxxxxxx / gulp serve xxxxxxx 7
- 8. Copyright © Virtual Technology, Inc もし、⼀覧にデータが表⽰されない場合 • データを再投⼊してみてください – gulp upload:data XXXXXXX 8
- 9. Copyright © Virtual Technology, Inc バンドラ(Webpack)とタスクランナ(Gulp) 9 ES2015 React(JSX) Flow トランスパイル Css/Sass ビルド・ モジュール結合 JavaScript (ES5) ローカルPC サーバ(vte.cx) Import/ export モジュール結合 ② GulpによるDeploy ① Webpackによるビルド・バンドル
- 10. Copyright © Virtual Technology, Inc Reactの概要 • ReactはFacebookが公開しているライブラ リでUIを効率的に構築することができる – HTMLに似たJSXのテンプレートを使うことで 直感的にUIを記述できる(仮想DOM) – コンポーネントの組み合わせで全体のアプリを 構築する 10
- 11. Copyright © Virtual Technology, Inc Reactの最も効率的な学習⽅法 • Quick Startを⼀通り動作確認する – https://facebook.github.io/react/docs/hell o-world.html 11
- 12. Copyright © Virtual Technology, Inc Reactの基本構⽂ class Setup2 extends React.components { constructor(props:Props) { super(props) this.state = { isConfirmed: false } } componentWillMount() { } handleSubmit(e: InputEvent) { } render() { } } ReactDOM.render(<Signup />, document.getElementById('signform')) // SignupコンポーネントをHTMLのid:signformに挿⼊ 12 ReactComponentを継承してclassを定義 Constructorで初期値を設定 Stateは更新されるとrender()が実行される特殊な変数 表示前に実行される(component関数) JSXをレンダリング ボタンクリックで実行(ユーザ関数)
- 13. Copyright © Virtual Technology, Inc Component Lifecycle • componentWillMount() – ComponentがDOMツリーに追加される前に⼀度だけ呼ばれます。 • componentDidMount() – ComponentがDOMツリーに追加された状態で呼ばれます • componentWillReceiveProps(nextProps) – Propが更新される時に呼ばれます。 • shouldComponentUpdate() – falseを返すとVirtualDOMの⽐較を⾏わずにrerenderされない • componentWillUpdate(nextProps, nextState) – Componentが更新する前に呼ばれます。 • componentDidUpdate(prevProps, prevState) – Componentが更新された後に呼ばれます。 • componentWillUnmount() – ComponentがDOMから削除される時に呼ばれます。 13
- 14. Copyright © Virtual Technology, Inc14 • URLをフォルダに⾒⽴てて⾃由に設定・追加可能 • リソースを様々なフォーマットに変換可能 • XML、JSON、MessagePack等などのデータ • HTMLやCSS、JavaScript、PDF、画像などの静的コンテンツ REST APIと直感的な規約
- 15. Copyright © Virtual Technology, Inc エンドポイントURL(初期フォルダ) • setup/_settings/folderacls.xml 15 /_htmlを除くものが実際にアクセスできるエンドポイント
- 16. Copyright © Virtual Technology, Inc vte.cx スキーマ • シンプルなシンタックス – 「項⽬名（型）＝ 正規表現」の形式で記述 – Indexを指定可能 – 正規表現でバリデーション • ソフトスキーマ – 項⽬の追加が可能 – 運⽤中でも変更可 • setup/_settings/template.xml 16
- 17. Copyright © Virtual Technology, Inc ReactRouterの ハマリどころと解決策 17
- 18. Copyright © Virtual Technology, Inc React Router 18 Link toで遷移先を定義 Route pathで呼び出すコンポーネントを定義 pathを指定しないとデフォルト表示
- 19. Copyright © Virtual Technology, Inc 他の画⾯からの遷移 • this.props.history.push() – ただし、historyを親から渡さないといけない 19
- 20. Copyright © Virtual Technology, Inc propsを渡せない問題の対応⽅法 20 • propsを渡すコンポーネントを別に作成
- 21. Copyright © Virtual Technology, Inc リロードで404エラー回避 • BrowserRouterではなくHashRouterを使う 21
- 22. Copyright © Virtual Technology, Inc 激速！ React V16のサーバサイドレン ダリングでPDF帳票を作成する 22
- 23. Copyright © Virtual Technology, Inc Reactで作る帳票システムの衝撃 • 詳しくはBlogで – https://t.co/WKirbmr06s 23
- 24. Copyright © Virtual Technology, Inc 動的PDF帳票出⼒をReactで • ReactのSSRでHTMLを⽣成し、それをvte.cxのPDF 変換機能(reflex itext)を使ってPDFにする 24 Reflex iText (弊社プロダクト)
- 25. Copyright © Virtual Technology, Inc サーバサイドJSとして実装する • /server/ssrdemo.js 25 Server Side RenderingでHTMLに HTMLをPDFに Styleの指定
- 26. Copyright © Virtual Technology, Inc 実⾏⽅法 • https://{サービス}.1.vte.cx/s/ssrdemo • https://{サービス}.1.vte.cx/s/ssrdemo2 26
- 27. Copyright © Virtual Technology, Inc HTMLタグ、Styleの書き⽅の詳細 • Reflex iText仕様(pageタグ、HTML互換タグ) – http://reflexworks.jp/documentation.html #reflexitext.html#G – http://reflexworks.jp/documentation.html #reflexitext.html#H 27
- 28. Copyright © Virtual Technology, Inc 次回、11/29 やります！ https://vtecx.connpass.com/event/70544/ 28 LTにぜひご応募ください
- 29. Copyright © Virtual Technology, Inc29 [email protected] ご質問はこちらまで