【勉強会メモ】v-kansai Vue.js/Nuxt.js meetup #2
- 日時：2019/01/19(土) 14:00 〜 17:00
- 場所：株式会社アイル
また興味深いコミュニティが関西で始まりました。参加希望者が多すぎて抽選に外れてしまいましたがブログ枠で参加してきました。
デザイナーの私がvue.jsと Nuxt.js学んでみた
riri_mohu さん
遅刻したので聞き逃しました。すみません。
Vueコンポーネントについて考えてみた
Chiaki Uehira さん
コンポーネント設計をする理由
デザイナー
- 再利用性によるデザイントーンの統一
- storybookなどでの確認がしやすい
- 別プロジェクトでも使える
エンジニア
- コンポーネントの再利用
- コードが分割
- 別のプロジェクトで使える
ラベル propsでsizeを渡す
コンポーネントを使った制作の流れ（Nuxt.js）
- まずは画面をデザイン
- 画面から粒度をわけてシンボル化（コンポーネント化）
- ナビゲーター
- 開いたとき
- 選択されたとき
- フィールド
- 初期表示
- フォーカス時
- エラー時など
- ボタン
- 用途ごとの色
- ナビゲーター
Vue Componentの作成
- componentsの中をAtomic Designの構造にする
- componentsの中をさらに分割
- atoms
- molecules
- organisms
一概にコンポーネントと言っても再利用可能のものとそうじゃにものがある
再利用前提みぎやそうじゃない
- v-forで回すから切り離したい
- ロジックが大きくなる
- Pagesに入るコンポーネントは再利用可能とは言えない
各ディレクトリのルール
- atoms
- 再利用前提
- 内部で別のコンポーネントを参照しない
- ステートレスであること
- modeculs
- 再利用前提
- 内部でatoms以外を参照しない
- ステートレスであること
- organisms
- 再利用しなくていい
- ステートフルであっていい
PagesはAtomic DesignのTemplate、Pagesに該当
頑張るところ
まとめ
コンポーネントをうまく使うことがVue.js/Nuxt.js攻略の近道
※メモ
Atomic Design
Vue.jsからFirebaseに入門しようとしたら使い方間違ってた件
amanoese さん
www.slideshare.net
Firebase＝mBaas
相性の良さそうなデータベースを使ってみる
- Cloud Database
- RealTime Datastore
最新のRealTime Datastoreを使ってとりあえずゲームを作る
- pongをつくる
- 対戦形式にしたい
- Vuexfireが良いらしい？
- Firebase Authenticationで簡単にできるらしい
- あとはPongのデータをFirebaseにつなぐ
flamboyant-dubinsky-fc9a3e.netlify.com
read上限にひっかかる
- リアルタイムにデータが動悸されるといってもそこまでリアルタイムは無理
感想
- 通信速度があるしアクションゲーム系は無理
- 将棋や囲碁などのボードゲームを作るべきだった？
- Firebaseの権限周りでハマった
- Vue CLI 3がカッコイイPluginがすごい便利
- 次はNuxt.jsを使いたい
Nuxt.jsでSSR対応をする
ショウノシオリ さん
Laravel JP Conferenceのスポンサー詳細ページをSSR対応する
SSRって聴いたことあるけど何？なぜ、どうやってする？
学んだことの紹介
- サーバサイドでレンダリング
- Vue.jsをHTMLにするとか
- メリット
- ブラウザ以外の場所でHTMLを生成
- ブラウザに法事される前にHTMLにデータを埋め込める
- SEo的に強い
- デメリット
- 実装が面倒
- ブラウザで使える関数がサーバ上では使えなかったりする
- 実装が面倒
Nuxt.jsのSSR
どうやって？
pages/sponsor/_name.vue- コーディングのみ完了
- スポンサー情報はAPIで取得
やることは2つ
- 動的URLページを静的ページ化
動的URLページを静的ページ化
ファイル名を「_」始まりにすると複数のURLで同じコンポーネントを表示されることができる
pages/sponsor/_name.vue_name.vueのパラメータは$route.param.nameでとれる
- ただし_はじまりのファイルはgenerate時に書き出されない
設定方法
nuxt.config.jsのgenerateプロパティ下にあるroutesオプションに配列で設定- 動的なパラメータが必要な場合はPromiseを返す関数を使う
SSRせず
mouted()やcreated()でデータとってくるとブラウザで読み込まれた段階で空っぽ- ページコンポーネント内でSSRするにはasyncData/fetchが使える
- 使い分けのポイント
asyncData/fatch
- ページコンポーネントがロードされる前に呼び出される
- SSRやページ遷移前にも呼び出される
- 第一引数にcontextオブジェクトを受けとることができる
- ページコンポーネントが初期化される前に呼び出される
- ページコンポーネント内でデータを使うためasyncDataを使用
Nuxt.jsでSSR対応してみた
Contentful製ブログでGoogle Adsenseが使えるようになるまで
jiyuujin さん
master.d1h9dtu7vg4vd.amplifyapp.com
参考サイト
- ブログのアドセンス通過
- 審査通過に2週間ほどかかった
- JAMStack構成なWeb猫ブログ
- Nuxt Contentful
基本的な取得は content_type と order で
-UIにVuetifyを採用するはずだったが余計なマージンが吐き出されてしまった
お世話になっているパッケージ
@nuxtjs/google-adsense@nuxtjs/google-analytics@nuxtjs/sitemap
その他審査に通るために
- 適度に固定文字列を追加
- サイトの説明やプロフィールを追加
- プライバシーポリシーの設定
- キャッシュ使用を明示
vue-cookie-lawとvuexを作ったストア管理
- 誤ったルーティングだった⇒404 Errorを出す
layouts/error.vueで設定
- コメントの問い合わせの設定
- 履歴をFiresoteに格納
- Nuxt Adminで確認
困ったこと
- ライフサイクル上での変更
- nuxtServerInit()でレンダリング前に取得、asyncData() で非同期首都kうするように変更
- 「||」を使って対処
Nuxt.jsのinjectでインジェクトしてみる話
kenev さん
injectして何がうれしい？
Demoアプリ
nuxt-inject-example
開発時にうれしそうなこと
- Vuex内は要件の変化に強い
- スター数をとってくる
- どこから取ってくるかわかっていない
- interface⇒GithubだったりGitlabだったり差し替え可能
- Vuexのビジネスロジックは影響を受けない
- 環境変数を使うことで
npm run offlineのような開発モードも簡単に実現できる - 固定値を返すスタブにしてしまうことでローカルで動作確認
テストの雰囲気
- Mockを作ってテストできる
気になったところ
- pluginsに書くと必ずメインのbundleに入ってしまう
- Vuexを使う場合はstoreでしか使うことがないのでは
- storeに直接差し込んでしまえばいい気がする
まとめ
- injectの仕組みが最初から用意されているのはうれしい
- ある程度のアプリであればinjectでDIするのも一つの手段
- プラグインもLaxyLoadできると大規模アプリで巨大なdependenciesフッぁいるにならずに住むかも
- Vuexを使うアプリであればSoreだけにinjectする手段があれば良いだけな気もする
Vue.js経験日数2日で、あるサービスを作ってみた
がおまる さん
みんなのゼロカロリー理論
zerocalorieskill.firebaseapp.com
- 1ヶ月前にVueのイロハを知る
- 冬休みの2日で誰でも登録できるソーシャルアプリ
つかったもの
- Vue.js+Vuetify
- Forebase
- スマートスピーカー
Vueを使ってみた感想
- Vuetifyで立地なものが作れる
v-model便利v-show,v-if便利
Nuxt.js+Firebase と Laravel で 非同期に アプリケーション開発する話
mikakane さん
Forebase Authentication
- Firebaseを利用した認証機構
- WebGUI操作で簡単な認証機構を用意することが可能
- Google/Githubなどのサービス認証
- 匿名認証にも対応
- JSを数行記述するだけ
- ポップアップ認証で画面遷移も不要のPromiseベース認証
Firebase Database
- Realtime Database/Cloud Firestore
- どちらもNoSQLベースで柔軟な利用が可能
- Realtime DatabaseはJSONツリーにデータを追加していく形式
- Cloud Firestoreはコレクションと呼ばれる単位でJSONライクにデータを管理する形式
vuexfire
- Vue.jsのストアVuexとFirebase Databaseを同期させるツール
- Realtime Database上の任意のパスと任意のstateを紐付けることができる
- nodeのfirebaseモジュールを利用した任意のRead/Write操作も可能
Firebaseでバックエンド構築
- コードを記述することなく柔軟に利用可能なバックエンド基盤を構築できる
フロント開発の課題
Firebaseを使った開発
- フロントエンドの手間が省かれる
Fireabse Admin
- 管理者権限でRealtime Databaseの読み書きを実行
- 認証のためのIDトークンを確認
Firebase Anywhere
- 大規模でもどこでも使える
- 必要なところだけ使う
LT
「Vue.jsでesa風markdownエディタを作成してみた 」 t-mina
esa.ioを無料で個人でも使いたい⇒Vueに慣れてきたので腕試し的に開発 実際に使ってみる
- Vue.js
- Firebase
- Vue
- vue-moment
- mavon-editor⇒Markdown
- vue-katex
- reveal.js⇒スライド
- vuex
- vue-router
- vuetify
良い点
苦労した点
「Webデザイナから見た Nuxt.jsを使う理由」maki_saki
vue.jsとの出会い
- JSフレームワークをなにか使わないといけない雰囲気
- riot.jsを使い始めたけど実用までいけなかった
vue.js
Nuxt.jsの存在
エンジニアと作業しやすい
- 一緒に開発できてるチーム感
「mermaid.jsを使ってみた」 ToyokawaYasuhiro
mermaid.jsって何？
- Markdownのコードブロックの形で書かれている
- シンプルに一定のルールで書かれる
- gitlabのissueではシーケンス図で見える
- フロー図やガントチャートも作れる
- Gitbookとかでも利用可能
使い方
実際に使ってみる
メリット
- Excelで書く必要がなくなった
- 手軽にフロー図を書くようになった
- 慣れれば楽
デメリット
- ルールを覚える必要がある
- 戦の位置の調整が難しい
Vue.js × LINE Payでリアルガチャを作ってみた」torisankanasan
LINE Things
- LINE Dev Dayで発表
- LINEでデバイスの管理や操作ができる
- 昨今はキャッシュレス決済ブーム
- LINE Payで決済
社内に設置して儲ける
- 課金でもうける＝ガチャ
LINEアプリからLIFF APP（WebView）⇒AWS⇒ガチャが動く
LIFF
「ライフサイクルを完全に理解する」chan_kakuz
Vueのライフサイクル
インスタンスが生成されてから削除されるまでの流れ
インスタンス作成時
- beforeCreate
- Created
- インスタンスが作成されたあとで実行
- elementプロパティはまだ呼ばれていない
- マウント時
- beforeMount
- インスタンスが作成されたあとelementへのマウント雨
- mouted
- マウントされああと
- beforeMount
- データ更新時
- beforeUpdate
- データ更新があった時にrerenderされるまえに実行
- updated
- rerenderされたあと
- beforeUpdate
- 削除
- beforeDestory
- destoryd
- エラー
- errorCaptured
「お花咲かせたかっただけなのに」Yasui Risa
vue.jsでスクロールとアニメーション
スクロールで変化するアニメーションが作りたい
- 花が咲く過程のイラスト
- 簡単なコーディング
nuxt環境の準備
npxで一発
もらったコードの確認
- アニメーションをどう実装するかを整理する
- DOMができていないのでnextTickを使う
- スクロール位置と花の高さ、Windowの高さなどをデータに入れる
- 計算して咲かせる
まとめ
- 餅は餅や
- 実装の仕組みを知ることは大事
「Vue.jsの布教活動をしている話」 RyousukeIzum
なぜ布教活動？
- 趣味で始めたVue.js
- 独断で自社アプリをリプレイス
- 今後もやっていきたい
布教
- Vue.jsを知ってもらうためにプレゼン、ハンズオン
- 簡単なQA
- 簡単なデモ
- スライドもVue
今後はVue.jsに熱意を注げる人を探したい、育てたい
「Nuxt on Rancher(Docker)」@SatohJohn
NuxtをRancherで動かす
どういうときに使うか
- Nuex.jsをフロントサーバとしるサービスの構築
- GUIで簡単にスケーリング
- ほかのサービス（gke,eks）を使えない環境
- 自分ならではの設定をいろいろ加えられる
何が必要課
- アプリをDocker Imageにする
- Dockerコンテナが動く環境
