React.jsを勉強しよう
- 1.
- 2.
- 3. モダンフロントエンド？ HTML + CSS+ JavaScriptで作るフロントエンド。
- 4. 今まで(現行ECMとか) Servlet + JSP+ Javascript
- 5.
- 6.
- 7. 目的 フロント(描画)とバックエンド(データ処理)の分離 Servlert+ JSPで画面構築をする時代は終わった！
- 8.
- 9.
- 10.
- 11.
- 12. 目指したいもの 共通のJavaScriptコード ECM-> ECMSFのロジック移植コストを最小限に テスト工数を減らす(自動化ではなく、ケース数を減らす) 移植時の考慮漏れも最小限に 諸々の高速化ももちろん必須
- 13.
- 14. 使うものと覚えたい用語 Node.js npm Gulp JavaScript ES2015(ES6) Babel Browserify Sass React.js
- 15.
- 16. npm Node 用のパッケージマネージャ Node.js用のyumとかいうざっくりな覚え方でOK!
- 17. Gulp タスクランナ。 設定ファイルをかけば、ビルド周りの処理を勝手にやってくれるニクいヤツ。 Javascript用のAntとかと思ってください。
- 18. JavaScript ES2016/ES6 JavaScriptの新しいカタチ。 ECMAScript6が通称でES6と呼ばれていた Javaで言う所の8とか9とかと同じようなもんだと思ってください。 元々はES5とかES6とか言われてたが、ES2015の方が正式。。。らしい？ 詳しいコードは後ほど。
- 19.
- 20.
- 21. Sass / scss Sassは“Syntactically Awesome Stylesheets” の略 Scssは”Sassy CSS”の略 スタイルシート言語で、Sass形式で書いたコードをcssにコンパイルすることがで きる。 Sassの書き方として.sassと.scssがある感じ Scssはcss3の拡張なので、多分覚えやすい。 生のcssではできない、変数や入れ子な書き方ができる。
- 22. React.js Facebook社が公開しているJavaScript用MV*系Framework “VirtualDOM”という概念を元に設計されている。 HTML要素をComponentとして分離する とにかく速さだ！
- 23. 他にもこんなMV*系 Framework Angular JS Polymer AuraFramework 名前だけでも覚えて帰ってくださいね！
- 24.
- 25.
- 26. おもむろに ターミナルを立ち上げてください Windowsの方はWindows +R からの ”cmd” です。
- 27.
- 28.
- 29. ここだけは覚えたいまとめ WebComponent分割という概念 VirtualDOMという概念 ES6/ES2015の書き方とES5との違い jQueryは捨てたい！！！
- 30.
- 31.