Vue.jsとSpring Bootを使ったＷｅｂ開発を聞いてきた！

５月２０日、ＪＪＵＧ　ＣＣＣ　２０１７　Ｓｐｒｉｎｇに行ってきた！

まずは

Vue+Spring Bootで他のすくフルスタック開発やってみた

をメモメモ

---

・自己紹介
・今日話すこと
　Vueとかwebpackまわり
　SpringBootとともにビルド
　最強スタック

・VueとＷｅｂｐａｃｋまわり
　SAStruts＋ＪＳＰ→まあ時代的にも妥当だった
　　　ＪａｖａＳｃｒｉｐｔで頑張ることができなかった
　JAX-RS+静的ＨＴＭＬ＋Knockout→よかった（２０１１年後半）
　　　バインディングができる
　Spring MVC+Thymeleaf→Ｓｐｒｉｎｇ　Ｂｏｏｔ素敵
　　　サーバーサイドテンプレートはもうなくていいかな

・Knockoutのよさ
　双方向データバインディング
　　Ｊａｖａｓｃｒｉｐｔ変更するとＨＴＭＬに反映
　　フォームコントロールで入れるとＪａｖａｓｃｒｉｐｔのオブジェクトに反映

・データバインディング
　変更通知
　　→通知されたときにする

・サーバーサイドテンプレートエンジンの好きになれないところ
　　ＨＴＭＬとＪａｖａｓｃｒｉｐｔとテンプレートの式言語が混在
　　ＪａｖａｓｃｒｉｐｔでＤｏｍいじるなら、サーバーでレンダリングしなくても

・最近やったスマートフォン案件
　Ａｎｄｒｏｉｄ・iosの両方に対応
　機能的にはＷｅｂアプリの域を脱しない
　Ｃｏｒｄｏｖａを選択

・双方向バインディングしたい
　cordovaを選択したけどvanilla JS(すっぴんのＪＳ）もJQueryもやだ！
　Vueファイル→コンポーネント→ＷｅｂＰａｃｋ

・VueでＳＰＡ
　ＳＰＡにするためのもの
　　vue-router2
　　　：ルーティング
　　Vuex
　　　：Flux実装
　　　　actions→mutation→state
　　axios
　　　：ＨＴＴＰクライアント
　　　　ＡＪＡＸを投げる（プロミスが返される）

・Vueよかったこと
　学習コストが低い
　公式ドキュメント日本語
　アニメーション　ＣＳＳ　Ｔｒａｎｓｉｔｉｏｎ

・こまったこと
　iosのWebViewでびゅー→ｊｓのバインドがうまく動かないケース

・npmとWebpackの導入
　依存関係追加
　 package.json

・webpack　１つのjsファイルにまとめる
　　設定
　ぷらがぶるなコンパイラー
　開発中のＷｅｂｐａｃｋビルド
　　webpack dev server
　　　　コード変更を検知してビルド、
　　　　ブラウザを自動リロード

・便利なもの
　vue-cli　すぷりんぐ　いにしゃらいざーみたいなもの
　chrome拡張

・ここまでのまとめ

・ＳＰＡは必須か？
　すべては必要ないけど、ちょっとなってくれれば・・
　ＪＳファイルを複数出力したい→webpackの設定を変える

・ＳｐｒｉｎｇＢｏｏｔとともにビルド
　ポイント
　　webpackビルド対象となるソースだいる
　　ビルドしたjsの出力先
　　ホスティングするパス

　ビルド済みjs　src/main/js
　出力先：クラスファイルの出力先にしている（ほんとはりそーすのところ）
　ホスティングしているパス bin/staticの下

・Gradleのビルドの流れ
　npm run buildを実行　
　
・さいきょうすたっく
　・Spring Boot devtools
　・Spring MVC Jax-RS
　・Ｄｏｍａ：ＤＯアクセス
　・Ｖｕｅ(+vue-router2,Vuex),axios
　・Ｇｒａｄｌｅ
　・npm,webpack
　・selenide（せるにど）Ｅ２Ｅ、ブラウザテスト

・クラス設計
　いみゅーたぶる
　ばりゅーおぶじぇくと
　　→なるべく静的に

・クラス設計
　おぶざーばー
　いてれーたー
　びじたー

・さいきょうのへんせん
　フロントエンドの進化

・さらに気になる
　ＣＳＳ　Ｇｒｉｄ　Ｌａｙｏｕｔ

・まとめ