Vue.js Night Nagoya #2（2019/07/12）　発表内容まとめ

# Vue.js Night Nagoya #2（2019/07/12）　発表内容まとめ

2019/07/12に[Vue.js Night Nagoya #2 - connpass](https://nfug.connpass.com/event/134486/)がありました。
以下では各発表の簡単な紹介と感想を書きます。

## 発表スライド

## まとめの情報源
- Twitter検索
    - [#v_nagoya](https://twitter.com/hashtag/v_nagoya)
    - [#ヤフー名古屋](https://twitter.com/hashtag/%E3%83%A4%E3%83%95%E3%83%BC%E5%90%8D%E5%8F%A4%E5%B1%8B)
- [Vue.js Night Nagoya #2 に行ってきました (主に設営手伝いで) #v_nagoya - niwasawaの迷子センター](http://niwasawa.hatenablog.jp/entry/20190712/vue-js-night-nagoya-2)
- [Vue.js Night Nagoya #2（7/12） - 構築中。](https://hmatsu47.hatenablog.com/entry/2019/07/14/012323)

## タイムテーブル

|時間|内容|発表者|
|:--:|:--|:--|
|19:00|Nagoya Frontend User Group について|-|
|19:05|未経験者が完全独学でVue.jsのSPAを作れるようになるまで|arapower|
|19:15|入門3日目くらいに知りたかったことたち|ひさだ|
|19:20|VueとMarkdownでスライドショーライブラリーを作り始める|Brandon Pittman|
|19:30|JavaScript何も判らんマンが、Vueなら扱えそうだと思って、業務システムのGUIをほぼVueで作った話|ogawa|
|19:45|Vueのdataってどうやってうごいてるんだっけ？|めろたん|
|19:55|休憩|-|
|20:00|会場スポンサーLT|ヤフー株式会社|
|20:10|VueとjestでやるTDD|しぐま|
|20:15|最近ホットな認証とNuxt.jsの話|corocn|
|20:30|Nuxt.js + Netlify CMS でブログを立ててみた|pocchi|
|20:35|NuxtをTS&SCSSで書くにあたってのLinter&formatterの話|kaave|
|20:45|Nuxtでのサーバー、クライアント間でのデータ共有について|steelydylan|
|20:55|お片づけ・終了|-|

## 発表内容

### 未経験者が完全独学でVue.jsのSPAを作れるようになるまで

- Twitter ID … [@arapower](https://twitter.com/ara_shell)
- 発表スライド … [未経験者が完全独学でVue.jsのSPAを作れるようになるまで](https://speakerdeck.com/arapower/wei-jing-yan-zhe-gawan-quan-du-xue-devue-dot-jsfalsespawozuo-reruyouninarumade)
- 私の発表なので、内容についてはほかの方のTweet引用で済ませます
- 気が向いたらもう少し詳しい記事を作成するかも

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">未経験・独学フロントエンドエンジニア向け<a href="https://twitter.com/hashtag/%E3%83%A4%E3%83%95%E3%83%BC%E5%90%8D%E5%8F%A4%E5%B1%8B?src=hash&amp;ref_src=twsrc%5Etfw">#ヤフー名古屋</a> <a href="https://twitter.com/hashtag/v_nagoya?src=hash&amp;ref_src=twsrc%5Etfw">#v_nagoya</a></p>&mdash; shougo (@kroyeeg) <a href="https://twitter.com/kroyeeg/status/1149621460547149825?ref_src=twsrc%5Etfw">2019年7月12日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">「精神的な負担が非常に大きいので注意」w  <a href="https://twitter.com/hashtag/v_nagoya?src=hash&amp;ref_src=twsrc%5Etfw">#v_nagoya</a> <a href="https://twitter.com/hashtag/%E3%83%A4%E3%83%95%E3%83%BC%E5%90%8D%E5%8F%A4%E5%B1%8B?src=hash&amp;ref_src=twsrc%5Etfw">#ヤフー名古屋</a></p>&mdash; ころちゃん＠株式会社bosyu (@corocn) <a href="https://twitter.com/corocn/status/1149621439751843840?ref_src=twsrc%5Etfw">2019年7月12日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">すごく真面目な5ステップ。<a href="https://twitter.com/hashtag/v_nagoya?src=hash&amp;ref_src=twsrc%5Etfw">#v_nagoya</a> <a href="https://twitter.com/hashtag/%E3%83%A4%E3%83%95%E3%83%BC%E5%90%8D%E5%8F%A4%E5%B1%8B?src=hash&amp;ref_src=twsrc%5Etfw">#ヤフー名古屋</a></p>&mdash; hmatsu47(まつ) (@hmatsu47) <a href="https://twitter.com/hmatsu47/status/1149621618286575616?ref_src=twsrc%5Etfw">2019年7月12日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 入門3日目くらいに知りたかったことたち

- Twitter ID … [@hisada_dev](https://twitter.com/hisada_dev)
- 発表スライド … [Vue入門3日目くらいに知りたかったことたち](https://speakerdeck.com/hisada/vueru-men-3ri-mu-kurainizhi-ritakatutakototati)
- 内容
    - タイトル通り初心者が知っておくと役立つこと
    - Chrome拡張のVue.js devtoolsの紹介
    - `v-for`の`:key`で配列のindexを使った場合の予期せぬ動作
    - Vue.set()
    - Vuexは軽率に導入すべき
    - Vuexのgetterが便利だった例
- 感想
    - 確かに、はじめの頃に知りたい情報
    - Twitter IDをすべてのスライド右上に表示させておくのは良い手だと思った

### VueとMarkdownでスライドショーライブラリーを作り始める

- Twitter ID … [@brandonpittman](https://twitter.com/brandonpittman)
- 発表スライド … [brandonpittman/castamere](https://github.com/brandonpittman/castamere)
- 内容
    - 自己紹介 … 「Brandon Pittman。日本人じゃない」
    - 英語の先生からITエンジニアに転職した経歴
    - 発表内容は「Vue.jsでmdx-deckを作る」
    - 具体的には[Gridsome](https://gridsome.org/)の紹介
    - 発表スライドもGridsomeで作成
        - Gridsomeは「Gatsby for Vue.js」
    - Gridsomeの利点（スライドより）
        - JAM Stackにぴったり
        - GraphQLはデフォルト
        - プラグインを簡単に
- 感想
    - `npx`コマンドで名刺を表示させるのは面白い
        - `npx brandonpittman`
    - 発表スライドとそれを生成するソースコードを行き来しながらの発表は“デキる”感じがする
    - 発表スライドをコードで生成したいと思っていたから、参考になるかも
- 参考
    - JAM Stackについて… [2018年のトレンドになるかもしれないJAM Stackの日本語情報がなかったので和訳してみる - Qiita](https://qiita.com/nori-k/items/1e789651ec154fdd8bd8)
    - npxコマンドでの名刺表示
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">npx <a href="https://twitter.com/hashtag/v_nagoya?src=hash&amp;ref_src=twsrc%5Etfw">#v_nagoya</a> <a href="https://twitter.com/hashtag/%E3%83%A4%E3%83%95%E3%83%BC%E5%90%8D%E5%8F%A4%E5%B1%8B?src=hash&amp;ref_src=twsrc%5Etfw">#ヤフー名古屋</a><br>NowBrowsing: 名刺の代わりにCLIアプリを書く - Qiita: <a href="https://t.co/IDdoPk42ik">https://t.co/IDdoPk42ik</a></p>&mdash; しーちょー (@c_tyo) <a href="https://twitter.com/c_tyo/status/1149625457282732033?ref_src=twsrc%5Etfw">2019年7月12日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### JavaScript何も判らんマンが、Vueなら扱えそうだと思って、業務システムのGUIをほぼVueで作った話

- Twitter ID … [@kroyeeg](https://twitter.com/kroyeeg)
- 発表スライド … [Laravel vue-project-upload](https://www.slideshare.net/sh-ogawa/laravel-vueprojectupload)
- 内容
    - 自己紹介 … 「AWSで自責高額請求＆支払い免除された人」
    - 業務システムのフロントエンド
    - Vue + Laravel
    - Ziggy
        - [GitHub](https://github.com/tightenco/ziggy)
    - EventHub
        - 参考 … [Vue.js v2で親子間以外のイベントやり取り - GAミント至上主義](https://uyamazak.hatenablog.com/entry/2018/04/04/114323)

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">今日の内容、イベントハブだけ持って帰ってもらえればそれで満足。</p>&mdash; shougo (@kroyeeg) <a href="https://twitter.com/kroyeeg/status/1149696619228487684?ref_src=twsrc%5Etfw">2019年7月12日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

- 感想
    - 「簡単すぎる画面からやらない」 ← どの程度の難易度か、工数、構成等を見積もるのに良い手順
    - EventHubの考え方、知らなかった。良いこと知った

### Vueのdataってどうやってうごいてるんだっけ？

- Twitter ID … [@renyamizuno_](https://twitter.com/renyamizuno_)
- 参考資料 … [GitHub - vuejs/vue at v2.6.10](https://github.com/vuejs/vue/tree/v2.6.10)
- 内容
    - Vue.jsの`data`が内部でどのように処理されているかをVue.jsのソースコードを抜粋して解説
- 感想
    - 内容に対して説明の速度が速すぎて理解できなかったです

### 会場スポンサーLT（ヤフー株式会社）

- 今回の会場を提供していただいたヤフー株式会社の事業紹介
- スピーカー … [しーちょー](https://twitter.com/c_tyo)
  - 名古屋周辺のIT企業地図を作成した人だった！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">はてなブログに投稿しました <a href="https://twitter.com/hashtag/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%96%E3%83%AD%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#はてなブログ</a> <a href="https://twitter.com/hashtag/%E5%90%8D%E5%8F%A4%E5%B1%8B%E7%95%8C%E9%9A%88?src=hash&amp;ref_src=twsrc%5Etfw">#名古屋界隈</a><br>名古屋ネット系ベンチャー地図をざっくり描いてみた(2019冬) <a href="https://t.co/Jt6K1NTppE">https://t.co/Jt6K1NTppE</a> <a href="https://t.co/eoV9Tk626Y">pic.twitter.com/eoV9Tk626Y</a></p>&mdash; しーちょー🚲 (@c_tyo) <a href="https://twitter.com/c_tyo/status/1087138442717290496?ref_src=twsrc%5Etfw">January 21, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### VueとJestでやるTDD

- Twitter ID … [@ssssssigma](https://twitter.com/ssssssigma)
- 内容
    - Vue.jsのテストをJestで行うのは簡単
    - 環境構築はVue CLIで`Vue create`すると、テスト関連の選択肢に含まれている
- 感想
    - 簡単に導入できるから、とりあえずやってみるのは大事
    - 今時のテストはmocha + chaiではなくJestなのかなぁ

### 最近ホットな認証とNuxt.jsの話

- Twitter ID … [@corocn](https://twitter.com/corocn)
- 内容
    - 多要素認証とは？
    - IDaaSはいくつかあるが、中でもAuth0推し
    - auth0-spa-jsはSPAで利用しやすい
- 感想
  - 推してる記事を見かけたが、Firebase Authenticationで十分ではないかと思っていた
  - やりたいことは大抵できてしまうようなので、試してみたい

### Nuxt.js + Netlify CMS でブログを立ててみた

- Twitter ID … [@_P0cChi_](https://twitter.com/_P0cChi_)
- 内容
    - WordPressのような動的サイトではなく、MovableTypeのような静的サイトジェネレーターの構築例
    - 記事をMarkdownで入力（Webブラウザ上）
    - 記事はGithubからNetlifyにアップロードされて公開
- 感想
  - 運用担当者がMarkdownの書式さえ理解していればとりあえず運用できる形は運用面で優しい

### NuxtをTS&SCSSで書くにあたってのLinter&formatterの話

- Twitter ID … [@junkjunctions](https://twitter.com/junkjunctions)
- 発表スライド … [NuxtをTS&SCSSで書くにあたってのLinter&formatterの話](https://speakerdeck.com/kaave/nuxtwots-and-scssdeshu-kuniatatutefalselinter-and-formatterfalsehua)
- 内容
    - tsc、prettier、ESLint、stylelintのそれぞれの担当領域を決める指針
- 感想
    - Linterはどこまでやればいいのか考えきれていなかった
    - これを参考に複数使ってみよう

### Nuxtでのサーバー、クライアント間でのデータ共有について

- Twitter ID … [@steelydylan](https://twitter.com/steelydylan)
- 発表スライド … [Nuxtでのサーバー、クライアント間データ共有について](https://speakerdeck.com/steelydylan/nuxtdefalsesaba-kuraiantojian-detagong-you-nituite)
- 内容
    - Nuxt.jsのライフサイクル
    - 各ライフサイクルでの動作の特徴
- 感想
  - Nuxt.jsを使い始めるときに見ておくとデータ操作について迷わずに済みそう

## 全体の感想

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">勉強会自体初参加だから不安だったけど、やって良かった。心理的なハードルはさっさと挑戦した方が良い。大抵飛び越えられる。</p>&mdash; arapower (@ara_shell) <a href="https://twitter.com/ara_shell/status/1149849649949241344?ref_src=twsrc%5Etfw">July 13, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

- 今回登壇者として参加して、イベント開催後に登壇者へのフィードバックがあったほうが嬉しいと感じた
    - アンケートとかQRコードで回答フォームへジャンプとか
    - 参考 … [エンジニア向けイベントをやる時に忘れがちだけどやっておいたほうが良いこと - potato4d log](https://potato4d.hatenablog.com/entry/2019/07/11/144633)
- イベント開催の記録を残せたらと思った ← この記事を作成した動機
- 他の人の考えを聞けるのは楽しい
- これからも勉強会には積極的に参加していきたい