Web猫ブログ
【平成最後】V-KANSAI #5を開催しました!
【平成最後】V-KANSAI #5を開催しました!
04月 25日

平成最後の v-kansai

前日 4/24には東京でも開催された Vue.js Meetup、良きタイミングでカブること無くセッティングできたこと、運営のメンバーには改めて感謝を申し上げます。

※ 4回連続登壇させていただいている私は、自分以外の皆さまにプレゼンテーションをしていただく機会をもっと増やすべく今回は自身の登壇をお見送りさせていただきました.. m(_ _)m

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://

IMG 0889 (1)

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

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

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

きっかけは Atomic Designで満足できず、今回 FLOCSS でコンポーネントを切ってみたとのこと。 vue-cli-3のディレクトリに追加して対応したことでとりあえずは解決、ただしサンプル数がまだまだ少ないと言ったことが課題の一つのようです。

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を使う選択肢を取ることとなった。

ただし良くも悪くもフロント・サーバ共に 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が使える状態となっているようです。とはいえ Japvascriptが使えないってどーなのよ、ファイルサイズに制限があったり、みたいな話もあるようで、まだまだこれからと言った様子のようですね。

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

コメントを残す

タイトル
メールアドレス
詳細

あわせてよみたい..

-----