平成最後の V-KANSAI を開催しました
4/25/2019

前日 4/24 には東京でも開催された Vue.js Meetup、結果としてたまたまタイミングのカブること無くセッティングできたことは嬉しい限りです。

Put Your Hands Up

今回利用させていただいたサービス、登壇者に質問することを目的にしたサービス「Put Your Hands Up」

https://pyhu.nkgr.app/

Nokogiri さんから今回は個別に v-kansai #5 専用ページまで用意していただきました。

https://pyhu.nkgr.app/events/badb6c63-1194-4993-99f7-10f3d932ccae/http://

とはいえ、上記リンクよりご覧になれますので、是非チェックのほどお願いします。

スポンサーである LINE さまのLT

LINE 株式会社 @tech_many さんの登壇、 CSS 設計手法でコンポーネント設計した話。

きっかけは Atomic Design で満足できず、今回 FLOCSS をやってみた。

Vue CLI v3 のディレクトリに追加して対応したことでとりあえずは解決、ただしサンプル数がまだまだ少ないと言ったことが課題のひとつのようです。

https://speakerdeck.com/tech_many/cssshe-ji-shou-fa-dekonponentoshe-ji-sitahua

FLOCSS

TypeScript でテストを始めた

ユカイ さんの登壇、 TypeScript 導入から Jest でテストを書いた話。まず TypeScript 導入について tslint を採用したようです。個人的に今となっては @typescript-eslint を採用した方が良いのではと思いました。まぁそれだけ Web 界隈の進むスピードが早いことを実感させられますね。

TypeScript でテストを始めた

続いてテスト。中身は Ruby のようですが、「初めての自動テスト」がテストを書く上で凄く参考になったようです。

TypeScript でテストを始めた

下記のことに気をつけながら、何のテストを書いているかを明確にしたようです。

  1. テストケース it ひとつに対し、テストケースをひとつにすること
  2. API の呼び出しを独立にすること
  3. コンポーネントを出来るだけ小さくすること

Nuxt.jsと Expressで Webサービスを作ってみた

だら さんの登壇、「100の質問メーカー」を Nuxt.js + Express で作っている話。

Nuxt.js と Express で Web サービスを作ってみた

新規 Nuxt プロジェクトのスタートアップで create-nuxt-app ではサーバの選択肢が与えられ、凄く使い勝手が良かった。また今後データの集計機能も盛り込む予定があったので、 NoSQL と違ってしっかりと設計できる MySQL を採用。フロント、サーバ共に Node.js を使う選択肢を取ることとなった。

ただしフロント・サーバ共に組み合わせるパッケージで動かない事象が度々発生。デプロイ先である GAE でも一番貧弱なサーバを選択したこともこの原因と考えられるとのこと。

結果としてサーバは専用のフレームワークを採用した方が無難だったそうです。

Nuxt.js と Express で Web サービスを作ってみた

amp-script + Vue.js

関西 Node 学園オーガナイザ @shisama さんの登壇、先週の AMP Conf 2019 でも話題になった amp-script の話について。

AMP-Access-Control-Allow-Source-Origin などを追加した上で公式の サンプル を使うことができる。

一部申請のあったオリジンに対しては、既に AMP が使える状態となっているようです。とはいえ JS が使えないってどーなのよ、ファイルサイズに制限があったりという話もあるようで。これからに期待したいです。

AMP Conf 2019

amp-script + Vue.js

その他 LT セッション

Vue.js の Reactive の中をのぞいてみた件

atma 株式会社の morifuji さんの登壇。

Vue.js でしばしば object にプロパティを追加したのに反映されていないと言ったことにハマるのは Reactive に振り回されているから起因している話について。

実際に Vue.js の作者である Evan 氏の リポジトリ でステップ実行してみた経験から話されました。

ToDo MVC

Vue.js の Reactive の中をのぞいてみた件

iOSで Vueを書き JAMStackな LT資料を作った話

んじゃみ さんの登壇、目立ちたい一心から iPad でプレゼンテーションスライドを作った話。しかも縦型で魅せる形式でした。

このスタイルを実現するに当たって外付キーボードに問題、一部キーで入力できないことがあるようです。また iOS12.2 以降、 PWA 周りが更新されておりこの対応を進めたことで、結果としてネイティブアプリと同じ挙動になったという話でした。

初心者の Vue.js奮闘記録

インフォニック株式会社の山下大輔さんの登壇、 Vue.js を使ってプロフィールページを作った話。

レスポンシブ化まではされていないようですが、 Webサイト の出来は素晴らしいですね。

プロフィールページ

困ったことは webpack 周りの設定ファイルが隠蔽されていたので少し分かりづらかったこと。 eslint による制限が厳しかったので全て無視してしまったこと、初めてビルドすると意外とその対応が辛かったりしますね。また今後テストコードをちゃんと書いていきたい、vuex も活用していきたいと言った話でした。

初心者の Vue.js 奮闘記録

最後に、

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

v-kansai #6

あわせてよみたい..