Laravel/Vue.js勉強会#10 に参加しました #Laravue
今日は勉強会に参加したので、レポートを書きます✨
今日はコチラに…
— y-mix (@bwolftech) 2019年7月18日
Laravel/Vue.js勉強会#10 https://t.co/cvpywwcGY5 #Laravue
もくじ
- もくじ
- [Vue] スポンサー: Storybookを用いたVue.js共通コンポーネント開発との戦い
- [Vue] LT1: Vuex ORMの紹介 - フロントエンドのORMとデータのノーマライズ
- [Laravel] LT2: Laravel + AWSで CI/CDしてみた話
- [Vue] LT3: Vue.jsでFormをAtomic Designしてみたときのコンポーネント間のやり取り
- [Laravel] LT4: Laravel のイベントディスカバリー
- [Laravel] LT5: PHPUnit + openapi-validator で「スキーマが正、実装が追従」にする
- [Nuxt] LT6
- 懇親会
- 感想
[Vue] スポンサー: Storybookを用いたVue.js共通コンポーネント開発との戦い
Storybookを使っている環境でどのようにレグレッションテストや組織内でのモジュール配布をしたか、というお話です。
reg-suitで画面キャプチャーを使ったテストができるのは便利ですね✨
モーダルダイアログ等で背景が暗くなったとき、背景分の差分も出てしまう場合 のテスト方法も解説されています。
[Vue] LT1: Vuex ORMの紹介 - フロントエンドのORMとデータのノーマライズ
Vuexをデータベースみたいに使えるものVuex ORMの紹介です。
Vuex ORMを実践した SOKUSEKIというタスクかんばんのアプリも作っているそうです！
永続化が今後の課題など、使い所が気になりますね✨
[Laravel] LT2: Laravel + AWSで CI/CDしてみた話
資料は見つかりませんでした…
資料がアップされたのでまとめました🙇♂️
S3->ECR->運用開始 という流れでCodePipeline, CodeBuildを使った話になります。 CodeBuild内でPHPUnitを動かしているそうです。
CodeBuild/PHPUnitなどの解説があるため、はじめての方でもわかりやすいですね！
[Vue] LT3: Vue.jsでFormをAtomic Designしてみたときのコンポーネント間のやり取り
t.co
「Atomic Designについて」から「Atomic Designにした構成でどのようにデータをやり取りするか」まで解説されていました。
また、Atomic Designのデータのやり取りが分かりづらい方に向けてprops in / event outの考え方を用いた解説になっています。
[Laravel] LT4: Laravel のイベントディスカバリー
スライドではなくQiitaの記事になります。
Laravelのイベントの作り方 から Laravel 5.8.9から出た最近の イベントディスカバリー の使い方を解説しています。
[Laravel] LT5: PHPUnit + openapi-validator で「スキーマが正、実装が追従」にする
API仕様書を元にしてLaravelで作ったAPIをテストする話になります。
「API仕様書に当たるYAMLを作るのが大変」ということですが、作ってしまえばそれをソースにしてAPIのテストができるのは楽そうですね💪
[Nuxt] LT6
スライドは無いそうです。
FlutterからNuxtに変えた受付システムを作る話で、入力があったらSlackに送る…
はずが発表時にSlackに通知を送れていない状況だそうです！
「Nuxtはvue-property-decoratorを使っているが非推奨になるので要注意」というお話を聴けました。
懇親会
各テーブルごとに軽食が違っていて、(撮っていなかったのですが)メロンが出ました！🍈🍈🍈
感想
Vueの v-model は v-bind と v-on を組み合わせた効果になる、というのは初耳で有用な話でした✨
Atomic Designでのデータの受け渡しですが、子で起きた変更は親にイベントを渡して変更を伝え、親でデータを変更するなど、こちらの話とつながってきたなという感じもしました💪
懇親会で話を聞いたところ「VuexはSPAを用いたときに画面間でデータを渡すために使うべき」という意見があり、
Atomic Designでは親-子コンポーネント間のデータの渡し方を徹底する必要があるという課題は残りました…
＼ 勉強会の皆様、ありがとうございました！ ／
100DaysOfCode #18: Vue.js <script>直接組み込み(8) watchと公開されているWeb APIでGETを試したいときの注意
やったこと
- 算出プロパティとウォッチャ: 2h
今日の進捗のコードはコチラ。
Vue.jsの知見を聴きに勉強会に参加しました。
Web APIを試したい！…アクセスキーが不要なAPIを試そうとするとCORSの制限に引っかかる
ウォッチャのサンプルで「テキストボックスの入力が終わって少ししたらAPIに問い合わせる」というモノを作りたいときに
とりあえず 問い合わせにAPIキーがいらないWeb APIを使いたいのです。
このAPI一覧など参考になります。
そのうちのWikipediaの記事を検索して取得するAPIを試そうとすると、 CORSの制限でGETすらできない模様。
https://ja.wikipedia.org/w/api.php?format=json&action=query&prop=revisions&titles= { Keyword } &rvprop=content&rvparse&callback=jsonData
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
代わりにデータを取得する中継サーバーを作る
これを解決するには、問い合わせを受ける側から適切な Access-Control-Allow-Origin のHTTPヘッダーを付けてクライアントに返す必要があり、
[クライアント: Vue.jsのサンプル] - [HTTPヘッダー(CORS)を付けるサーバー] - [WikipediaのAPI]
という形で中継する必要がある。
データを取ってくるときは、一旦中継するサーバーに問い合わせをして
[クライアント: Vue.jsのサンプル] -> [HTTPヘッダー(CORS)を付けるサーバー]
HTTPヘッダーを付けるサーバー - WikipediaのAPI間はCORSの制限を受けない方法でデータを取得する。
- PHPなら
file_get_contents() - Node.js なら
http.get()？(未検証)
[HTTPヘッダー(CORS)を付けるサーバー] <-> [WikipediaのAPI]
最後に、中継したサーバーからクライアントのVue.jsに返すときに Access-Control-Allow-Origin ヘッダーを付ける。
[クライアント: Vue.jsのサンプル] <- [HTTPヘッダー(CORS)を付けるサーバー]
この中継サーバーを立てる方法をPHPで解決した例はコチラの記事で…
今やらないの？
サンプルのレベルでやるならNodeのexpress.jsでヘッダーを付けたAPIを作ってそれでやり取りするのかなぁ…と思ったけど、
今の <script> 直接読み込みなプロジェクトの構成が大きく変わるのと、Vue.jsの本題から外れてしまうので後ほど。
＃でもVue.jsのドキュメントとは違うことをやりたかった…
100DaysOfCode #17: Vue.js <script>直接組み込み(7) computed/watch
やったこと
- 算出プロパティとウォッチャ: 1h
今日の進捗のコードはコチラ。
風邪気味なようです…
きづいたこと
- v-…の省略記法で
:はv-bind:、@はv-forになる- 習いたてだと「テキストボックスの内容と結びつけるのも省略記法でいけるのでは」と思われるが、 これは
v-model:
- 習いたてだと「テキストボックスの内容と結びつけるのも省略記法でいけるのでは」と思われるが、 これは
100DaysOfCode #16: Vue.js <script>直接組み込み(6)
やったこと
- テンプレート構文: 1h
- 生のHTML
- 属性
- JavaScript式の使用
- ディレクティブ
今日の進捗のコードはコチラ。
きづいたこと
aタグに対して(CSS/SCSSの勢いで?)v-on:hoverでは期待通りに動作しないのでv-on:mouseoverを使う
100DaysOfCode #15: Vue.js <script>直接組み込み(5) テンプレート構文 / GitHub found 1 vulnerability on...
やったこと
- テンプレート構文: 1h
早く寝なきゃ…
今日の進捗のコードはコチラ。
GitHubでコミットしたら「脆弱性が見つかった」というメッセージが出た！
表題の通り、コミットの操作をした時点でリポジトリに脆弱性が見つかるとGitHubが教えてくれます。
リポジトリのページでもガッツリ出ています。
詳しく開くとこんな感じです。
Sassの自動コンパイルをするためにyarnでnpmのパッケージを導入したのですが、その 中の依存パッケージに脆弱性が見つかっていますね。
Automated security fixesを試す
パッケージを更新した上で動作に問題がないか等確認するのですが、今回はお手軽に済ませましょう。
右上の "Automated security fixes" から "Automated security fixes" にチェックを入れます。
右上の "Create automated security fix" をクリックします。
作成中… ページの再読込をしないと反映されません
ページを再読込すると Pull Requestができています。
また、 git pull すると自動で作られたブランチがローカルにやってきます。
ローカルにもブランチを作って動作確認してみましょう。
git checkout -b dependabot/lodash-4.17.14 origin/dependabot/npm_and_yarn/20190704-pt4-landingpage/lodash-4.17.14
正しくないと思いますが、一旦 node_modules を消してからアップデートされた yarn.lock に従ってパッケージを入れて動作確認します。
rm -rf node_modules yarn install npx parcel ./src/index.html
今回は、 ParcelでSassのコンパイルが正しくできればOKなのでPull Requestを開いてそのままマージします。
Automated security fixxes で作られたブランチは、PRマージ後勝手に削除されるようです。
done!
100DaysOfCode #14: Vue.js <script>直接組み込み(4) Vueインスタンス
やったこと
体調の悪い日が続いています。
今日の進捗のコードはコチラ。
WebpackもParcelも導入しないでホットリロードを実現したい！: Visual Studio Code + Live Server
ちょうどエディタをVisual Studio Codeに変えたところ、 エディタの拡張機能だけで ファイルが更新されたらブラウザの内容も自動で更新してくれる機能が実現できました。
まずはExtensionsのMarketplaceで "Live Server" と検索してインストールします。
つぎに表示したいHTMLを開いた状態で、 いつもの Command + Shift + P を押して"Open with Live Server"を選択するだけです。
それでLive ServerがホストするHTMLがブラウザで開いたら、あとはHTML/JSを上書き保存すると自動で反映してくれます。
Sassのコンパイルなどはしてくれませんが、HTMLと <script> で 直接読み込む範囲であれば
便利 & お手軽 😄
