v-kansai#4 に参加しました！

 Posted on 2019年3月21日  |  1 minutes  |  117 words  |  morifuji

こんばんは。最近物欲がないmorimorikochanです。

昨日3/20の夜に、v-kansaiの第４回が大阪で開催されたので参加レポートを書かされた書きました！

[https://vuekansai.connpass.com/event/121581/:embed:cite]

[:contents]

誰だお前

  • atma株式会社で働いてるクソザコエンジニアです。
  • 直近だとnodejsでスクレイピングしてます。
  • vueに関係する業務だとvuejs/nuxtjs/netlify結構使います。
  • nuxtよりごりごりvuejsかくタイプです。

[https://civiluo.co.jp/:embed:cite]

感想

Nuxt.jsとnetlifyが優しかった話（遅刻したので正確なタイトルわかりません 😭）

netlifyに関しては、開発者への優しさに溢れてますよねー。

yarn.lockがあったら勝手にyarnしてくれたりとか、ブランチごとにpreviewのサイトが建てられていたりとかA/Bテストやってくれたりとか画像を最適化してくれたりとか。全部GUIでぽちぽちするだけなのでいいですよねー。

光があれば闇もあるということで優しくない（むしろ辛い）ところを自分なりに考えてみました

  • Trailing slashの設定がない
  • netlify functionsのドキュメントが少ない（lambdaのドキュメントを読めということでしょうが）

Nuxt.js のディレクトリ

nuxtのディレクトリについて逐一丁寧に説明していただきました。

nuxtって、すでにディレクトリ構成が洗練されているものなので、小〜中規模のPJまではディレクトリ構成をそのまま使えて幸せですよね。vuejsだと個々のPJによってディレクトリ構成がオレオレ構成に変えられていたりする（し、ディレクトリ構成のREADMEがないことが多い）。

強欲なエンジニアというパワーワードが聞けて面白かった

余談ですが、登壇者の方どこかでお見かけしたと思ってましたがPHPカンファレンスにいらしゃった方なんですね（一度だけ前参加した）。

あと。そのあとのMCの人との会話の中で、 page単位のビルドだと、pageを移動するたびに同じcomponentやjsを再度読み込むが、全体のビルドだと、初期ロードの一度で読むのでオーバーヘッドがない、みたいな話が出てたが少しわからなかった。誰か詳しく教えて。

[https://speakerdeck.com/sshono1210/nuxt-dot-js-falsedeirekutori:embed:cite]

揮発性の高いcomponentを作る

twitterでよく見る人の発表でした。

揮発性の高いcomponent=ダイアログとかツールチップとか

グローバルメソッドにする発想がなかったので目から鱗だった。

confirm()と同じようなノリでかけるのは面白い

// confirm()と似てる
const isAgreed1 = await this.$dialog("hogehoge", "warning", options)
const isAgreed2 = confirm("hogehoge")

メリットとしてあげられたのは以下の通り

  • メンテの向上
  • テンプレートを軽く
  • stateやローカルdataを圧迫しない

テンプレートを軽くできるのは本当に嬉しい。使うたびにコンポーネントをimportしてhandlerつけてって作業は本当に煩わしい。

ただ、ダイアログというと状態管理が必要だろうし、個人的にはtypescriptが欲しくなりそうな内容だった。まあけどそこまでするならルートコンポーネントにダイアログ配置してvuexで表示非表示の制御がベターなんだろうなあと思った。

[https://speakerdeck.com/uhck/hui-fa-xing-falsegao-ikonponentowozuo-ruhua:embed:cite]

capacitor

capacitorの紹介でした。

capacitorとcordovaの違いとしてあげられたのは以下の通り。

capacitor Cordova 何がどう変わるか
ビルド時、アプリの必要ファイル群全てを吐き出す 必要ファイルのwwwのみ capacitorだとビルド時間が早い/gitの管理が楽
コアプラグインがあり、本体のバージョンに常に追随する コアプラグインはない capacitorはバージョンを上げるときに、依存関係をcordovaに比べあまり気にしなくて良い
プラグインはまだあまりなさそう 4380個のプラグイン（昨日夜時点） プラグインはcordovaの方が多い

まだベータ版なのでコミュニティは大きくはないがめっちゃ期待できますねー

VueとAWSAppSyncで始めるチャットアプリ開発

AWSAppSyncでgraphQLを使ってチャットアプリを作った事例の紹介

AWSのAppSyncはあまり知らなかったので今回のイベントで一番興味があったスライドですね。

queryとmutationの概念はわかったけどResolverがわからず放置した記憶。。

気になった点

  • 必要なattributeだけ取得できるっていうのは本当に嬉しい点と同時にパフォーマンスの調整がサーバー側でできるのかどうかが少し心配。
    • クエリとかmutationの定義とかで制御できるのかな？誰か教えて
  • エンドポイントが一つだからログは少し見にくい？
    • cloudwatchにログを吐くことはできるからcloudwatchでごにょごにょすれば可能とのこと
  • AppSyncから外部エンドポイント叩ける？
    • 無理とのこと。やるなら、lambdaを用意して、AppSync=>lambda=>外部エンドポイントとのこと。
    • このスライドだと直接叩いているようだけどどうなのだろう？ 🧐

ちらりと映るbulmaがオシャレだった。

[https://www.slideshare.net/RyosukeIzumi1/vueawsappsync-137300026:embed:cite]

NuxtをLightsailとGAEに デプロイした話

lightsailでdockerを使ってnuxtを建てていたが、GCPに移行した話。

lightsailとdocker/dockerswarmって相性どうなんだろう？awsでdocker使われるならecsなイメージだったので驚きでした。料金面でいうと天地の差があるのでもともとはlightsal選んだんですかね、

GCPはコンソールが優しくていいですよねー、感動 😭

[https://slides.com/yutakawakai/deck#/:embed:cite]

Web猫ブログに型安全を

nuxtの2.4.0からtypescriptのサポートを始めたので、typescriptを導入した話。

弊社のとあるnuxtのPJ（ちょうどバージョン2.4.0）でも規模が大きくなりそうなのでtypescriptを導入しないといけないという状態だったため非常に勉強になりました。

typescript非対応なライブラリを使うとしんどそうだが大丈夫そうとのこと

contentfulというサービスもスライドにちらっと映ってたけど、よさげ。CMS界隈あまり知りませんがコンテンツをjsonで管理しやすいようにする流れがあるんですかね？

[https://master.d2ezecqbj32kby.amplifyapp.com/:embed:cite]

AWS Lambdaで Vue.js SSRしてみた

npmプラグイン（vue-server-renderer）を使えばnuxtなしでSSRができるという話。

ssrならnuxt。nuxtならssrというレベルでnuxtが有名で、その選択肢を忘れていた。。

公式ガイドがあって優しい。けどユニバーサルなコードを書くために気をつける点が多くて難易度はnuxtに比べて高そう、以下抜粋。

  • カスタムディレクティブがそのままフロントに返されるとエラーになる
  • サーバーでの実行を考慮していないライブラリはSSRでエラー（例えばwindowみたいな変数使うライブラリとか）

vuejsでMVVM（タイトル未詳）

規模が大きくなるとmvvmの形には自然となりますよね。ただ意識はあまりしていなかったので必要性を再認識しました。

ionic/vue（タイトル未詳）

まだベータ版ですがionicがvuejsに対応した話。

あまりionic触らないので少しわからなかった 😇

[https://speakerdeck.com/mikakane/vue-de-web-apuriwozuo-tutemiru:embed:cite]

まとめ

初のvuejsのイベントでしたが結構vuejs周りのエコシステム（AppSync/vue-server-renderer）の勉強になりました。余裕あればLTやりたい！

登壇者の方ありがとうございました！また参加させていただきます！

tech  Vue.js  Event 

See also