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

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

発表スライド

まとめの情報源

• Twitter検索
  • #v_nagoya
  • #ヤフー名古屋
• Vue.js Night Nagoya #2 に行ってきました (主に設営手伝いで) #v_nagoya - niwasawaの迷子センター
• Vue.js Night Nagoya #2（7/12） - 構築中。

タイムテーブル

時間	内容	発表者
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
• 発表スライド … 未経験者が完全独学でVue.jsのSPAを作れるようになるまで
• 私の発表なので、内容についてはほかの方のTweet引用で済ませます
• 気が向いたらもう少し詳しい記事を作成するかも

未経験・独学フロントエンドエンジニア向け#ヤフー名古屋 #v_nagoya

— shougo (@kroyeeg) 2019年7月12日

「精神的な負担が非常に大きいので注意」w #v_nagoya #ヤフー名古屋

— ころちゃん＠株式会社bosyu (@corocn) 2019年7月12日

すごく真面目な5ステップ。#v_nagoya #ヤフー名古屋

— hmatsu47(まつ) (@hmatsu47) 2019年7月12日

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

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

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

• Twitter ID … @brandonpittman
• 発表スライド … brandonpittman/castamere
• 内容
  • 自己紹介 … 「Brandon Pittman。日本人じゃない」
  • 英語の先生からITエンジニアに転職した経歴
  • 発表内容は「Vue.jsでmdx-deckを作る」
  • 具体的にはGridsomeの紹介
  • 発表スライドもGridsomeで作成
    • Gridsomeは「Gatsby for Vue.js」
  • Gridsomeの利点（スライドより）
    • JAM Stackにぴったり
    • GraphQLはデフォルト
    • プラグインを簡単に
• 感想
  • npxコマンドで名刺を表示させるのは面白い
    • npx brandonpittman
  • 発表スライドとそれを生成するソースコードを行き来しながらの発表は“デキる”感じがする
  • 発表スライドをコードで生成したいと思っていたから、参考になるかも
• 参考
  • JAM Stackについて… 2018年のトレンドになるかもしれないJAM Stackの日本語情報がなかったので和訳してみる - Qiita
  • npxコマンドでの名刺表示

    npx #v_nagoya #ヤフー名古屋
    NowBrowsing: 名刺の代わりにCLIアプリを書く - Qiita: https://t.co/IDdoPk42ik

    — しーちょー (@c_tyo) 2019年7月12日

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

• Twitter ID … @kroyeeg
• 発表スライド … Laravel vue-project-upload
• 内容
  • 自己紹介 … 「AWSで自責高額請求＆支払い免除された人」
  • 業務システムのフロントエンド
  • Vue + Laravel
  • Ziggy
    • GitHub
  • EventHub
    • 参考 … Vue.js v2で親子間以外のイベントやり取り - GAミント至上主義

今日の内容、イベントハブだけ持って帰ってもらえればそれで満足。

— shougo (@kroyeeg) 2019年7月12日

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

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

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

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

• 今回の会場を提供していただいたヤフー株式会社の事業紹介
• スピーカー … しーちょー
  • 名古屋周辺のIT企業地図を作成した人だった！

はてなブログに投稿しました #はてなブログ #名古屋界隈
名古屋ネット系ベンチャー地図をざっくり描いてみた(2019冬) https://t.co/Jt6K1NTppE pic.twitter.com/eoV9Tk626Y

— しーちょー🚲 (@c_tyo) January 21, 2019

VueとJestでやるTDD

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

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

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

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

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

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

• Twitter ID … @junkjunctions
• 発表スライド … NuxtをTS&SCSSで書くにあたってのLinter&formatterの話
• 内容
  • tsc、prettier、ESLint、stylelintのそれぞれの担当領域を決める指針
• 感想
  • Linterはどこまでやればいいのか考えきれていなかった
  • これを参考に複数使ってみよう

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

• Twitter ID … @steelydylan
• 発表スライド … Nuxtでのサーバー、クライアント間データ共有について
• 内容
  • Nuxt.jsのライフサイクル
  • 各ライフサイクルでの動作の特徴
• 感想
  • Nuxt.jsを使い始めるときに見ておくとデータ操作について迷わずに済みそう

全体の感想

勉強会自体初参加だから不安だったけど、やって良かった。心理的なハードルはさっさと挑戦した方が良い。大抵飛び越えられる。

— arapower (@ara_shell) July 13, 2019

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