V-KANSAI #4 リポート
INDEX
4️⃣

V-KANSAI #4 リポート

#Review

By jiyuujin at

京都と異なり大所帯になるケースが多い大阪。今回第 4 弾も参加所定枠 30 名に対し 70 名以上の参加が集まった。

Web猫ブログに型安全を

自ら登壇。一昨日 3/18 にブログを更新させていただきました (下記のリンク参照)

LT の中でも触れましたが、予定より大幅に早まって既に nuxt-ts build の形式で本番稼働を始めています。 Vuex ストアの周りの変更には注意をしつつ、今後も安定的な TypeScript サポートを期待したいですね。

登壇の数々を軽く

NuxtとNetlifyが優しい件について

株式会社 chatbox の の登壇、Nuxt と Netlify が優しい件についての話。文字通り Nuxt の環境を構築することは非常に簡単で、 npx コマンドで簡単に作ることができる。

npx create-nuxt-app <アプリケーション名>

またファイル構成が明確で分かり易い。

Web アプリケーションの開発に便利なツールが揃っている (Store や Vue Router など) Netlify も nuxt コマンドを叩くだけでデプロイできる話でした。

Nuxt.jsのディレクトリ

株式会社 chatbox テックリードの の登壇、ディレクトリ構成のわかりやすい Nuxt。リソースや画面を作る Component、設定ファイルに分類。作り始めると状態を管理するためのストアや外部パッケージを一括で管理するプラグインを使うと良い話でした。

揮発性の高いコンポーネントを開発した話

の登壇、Notice 系のコンポーネントを作った話。そもそも揮発性の高いというのは、一時的に使用されることを意味するようです。グローバルで呼び出し、必要に応じて使用・削除できるものを目指す。state やローカルのデータを圧迫しないことを目的に、メンテの向上を図るというもの。以下デモンストレーションも示されており、 DOM の中に Component が突っ込まれる仕様でした。

Capacitorの話

Ionic Japan UG Organizer、(一社) リレーションデザイン研究所代表の の登壇、Capacitor の話。

2 回目以降のビルドでは差分のみビルドされ本体のバージョンにも常に追随するといった便利な機能も存在。

一方で plugin の充実度で Cordova と比較するとまだまだな部分が多いという話でした。

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

の登壇、GraphQL でチャットアプリを作った話。

Vue + AWS AppSync + Amplify を組み合わせている成果物 (リポジトリは下記参照 URL) で Subscribe が素敵な働きを示してくれる話でした。

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

若井豊さんの登壇、Nuxt のデプロイを Lightsail から GAE に変更した話。Koa +TypeScript を API に、SSR して使っている Nuxt アプリ。サーバの初期設定が煩わしくアプリケーションの開発に時間を取ることができなくなって移行を決断。いざ移行すると自動デプロイなど駆使した結果、楽になったということでした。

LambdaでSSRしてみた

フリーランスプログラマ八木大介さんの登壇、AWS Lambda で SSR してみた話。 vue-server-renderer を使えば Nuxt を使わなくても SSR ができる。 Vue.js サーバーサイドレンダリング (以下リンクを参照) を確認すればすぐにできそう。カスタムディレクティブがそのままフロントに返されるとエラーになったりと苦労も多かったということでした。

Vue.jsで考えるMVVM

の登壇、綺麗なソースコードを書くために必要なことって何だろうと考えアーキテクチャにアプローチした話。まず綺麗なソースコードを書くために、データ設計を今一度見直してみよう。扱うデータをクラス化し、そのクラスに手続き（ロジック）を追加することが重要。ここで挙げられた消費税込価格を算出するという一例は非常に分かりやすかったですね。画面の View で、計算ロジックしていませんか。計算を別管理し描画に集中することでフロントエンドでのテストもし易くなるという話でした。

@ionic/vueでWebアプリを作ってみる

同じく オーガナイザーの一人である の登壇、 Vue.js と Ionic で Web アプリを作った話。先日の Ionic meetup ではイマイチなリアクション.. 汗だったということで、時を改めてだったようです。とりあえず試すなら、 @modus/ionic-vue (下記リンクを参照) を試すと良いということでした。

最後に、

次回来月 4/25 に #5 が開催予定です。