株式会社アルゴリズム 開発チームリーダーの安藤です。
今回は2023/06/26に弊社のオープンスペースにて行われたイベント Vue.jsの勉強会はなんぼあってもいいですからね のレポートをお届けします。
ハッシュタグ #アルゴテック でお届けしておりましたので、イベントの雰囲気についてはTwitter…Xも合わせてご覧いただければと思います。
勉強会はなんぼあってもいい
学んでも学んでもキリがなく、何かをするたび再発見に溢れているのがプログラミングや開発業務というものではないかと思います。故に、勉強会はなんぼあってもいい。登壇するのもよし、聞きながら学ぶもよし、同じ技術の同好の士と懇親会で語り合うもよし。
ということで今回は弊社でメインで利用している技術スタックであるところのVue3,Nuxt3の勉強会を開催させていただきました。
多くの方に登壇・ご参加をいただきましたこと、改めてお礼申し上げます。
登壇者・セッション内容紹介
今回はセッション枠3名・LT枠3名という形でセッションを頂きました！
登壇いただいた皆様とセッション内容について紹介させていただきます。
ITかあさん 氏 (@chihiro_kaasan) Vue Amplifyで始めるWeb App開発
ITかあさんこと松田さんにお話いただいたのは、AWS Amplifyによる認証機構を超スピーディに作成するための手法について。
動画によるデモンストレーションをあわせ具体的な方法についての展開があり、認証の事始めとして非常に実用的な内容でした。
VueについてはCogniteで使用できるテンプレートフォームのカスタマイズやあっという間にローカライズを行うなど、実際に使い始めると必要になる！というかゆいところに手が届く内容でした。
AWSのアカウントを必要としますが、ウェブアプリ開発を始めてみたい、という人が最初に学ぶ資料として見てみるのに良いセッションだと感じました！
あと、この登壇の直前に40万のMacbookが壊れたとの内容が発表され会場をざわめかせ・・・もとい温めてくれました、そんな体の張り方ある…？なお、修理代は11万円だったそうです。ITかあさんを皆で応援しましょう。
📄 資料URL
🎦 配信動画
9:27~ 登壇者カメラがオフになってしまい、お顔をお届けできず申し訳ありません・・・！
にしはら 氏 (@crayfisher_zari) コンポーザル関数からコンポーネントを返して、見た目とロジックを分離しようぜ
にしはらさんにお話頂いたのは、Vueのよくある実装について、見た目とロジックを分離するという内容についてです。
コンポーザブル関数からコンポーネントを呼び出すとは、以下のような形でコンポーネントを呼び出すというのは、具体的に以下のスライドページの画像のような内容になります。
これにより、親コンポーネントは親の関心にない子コンポーネントの状態管理をコンポーザブル関数に任せられる、つまりセッションタイトルである【見た目とロジックの分離】が叶うことになります。
この記事を書いている安藤はVueで開発しているときにFatComponentを作ってしまいがちなので目からウロコがぽろぽろでした。
にしはらさんはデジタル庁のデザインシステムを個人的にVueで作成しているという猛者であり、このセッションの内容でその実装内容についても触れられています。 にしはらさんのコードを拝読してロジックと見た目を分離したFatにならないコンポーネントを設計するスキルを身につけましょう。
📄 資料URL
🎦 配信動画
31:15
関連URL
HTMLにちょい足しでできる！Vue.jsでサクッと動きをつける方法
にしはらさんの着ていたシャツはここで買えます
hiroko_ino 氏 (@uribou_studying) v10.0突破記念！VueUseで手軽にWeb APIを実験してみよう🥳
inoさんにお話いただいたのは、Vueのエコシステムの一つであるVueUseの紹介といくつかの実際の使用例についての内容です。
VueUseは200以上の様々なユーティリティコンポーザブル関数を提供してくれるものとなっています。
VueからBluetoothを使用するための useBluetoothのプレゼンとして、心拍数を右上に表示するスタイルを展開。勉強会とはRTA会場だった…？
プレゼンテーションとしてのエンターテイメント性があまりにも高く、見た目も機能も実装も素晴らしい実例がたくさん紹介されました。
是非inoさんのプレゼンテーションを動画でごらんください。
📄 資料URL
まさかのVercelホスティング！Webアプリ！！
🎦 配信動画
52:52
沖 良矢 氏 (@448jp) 書く・即・DONEな仕組みをNuxtで作る
沖さんによるNuxtで超速でCMSを構築するという内容のセッション。
CMSを構築しようと思うと、スクラッチ開発、SaaSをつかう、ノーコードツールを使う…など色々な手法が存在していますが、その方法は一長一短。
では、スクラッチ開発を行う場合は…「その手法はラーメン化している」というフレーズが現れました。その内容の意図するところは、醤油ラーメンと豚骨ラーメンに勝ち負けがないようにスクラッチ開発の手法については好みやこだわりとしての違いしかなくなってきている、ということでした。
非常に良いフレーズですね！！技術ってみんな違ってみんな良いですよね。
プレゼン内では以下の形の技術選定でブログシステムを構築され、デモンストレーションが披露されました。構築速度が本当に超速…！
Cloudflare Pagesを使用する際の注意点など実用的な部分にも触れられており、早くて強いCMSを作るためのナレッジが詰まっていました。ほか、動画内で確認できますが３人のVueが殴り合うAIに生成された謎画像なども面白いので是非Youtubeを合わせてご覧ください。
📄 資料URL
🎦 配信動画
1:14:35
関連URL
初心者からちゃんとしたプロになる Figma基礎入門
田中正吾 氏 (@1ft_seabass) Nuxt3 で IoT を Web Bluetooth で操作するツールがサッと作れて楽しかった話
前回に引き続き今回も登壇を頂きました。
IoT開発においてNuxt3を使う、一見するとややアンマッチにも聞こえそうですがどういうことなのかというと…
田中さんの業務はIoT Bluetoothデバイスを技術検証したりツールを作る機会が多いそうですが、IoTのBLE検証をスマホアプリから検証するのは結構大変、という実態が存在するそうです。
そこで、Nuxt3，そしてWebBluetooth APIでIoTデバイスと接続・検証できる仕組みをサッと構築しようというお話でした。
そしてinoさんのセッションに登場したuseBluetoothの話が知見になりより良く出来そうという内容をスライドにその場で取り込み。勉強会で新しいナレッジが取り入れられている現場を目の当たりにしました。とても良いですね…！
📄 資料URL
🎦 配信動画
1:26:04
関連URL
田中さんによる本イベントのレポートブログ
fumiya konno 氏 (@238_k_) CDNから届ける Nuxt Edge-Side Rendering
konnoさんにお話いただいたのはEdge-Side Renderingについてです。
そもそも、Nuxt3が扱えるレンダリング方法にまずいくつかの種類があり、静的サイトジェネレート(SSG
)、サーバーサイドレンダリング(SSR)、そして現在の主流であるクライアントサイドレンダリング(CSR)があります。
こと、SSRについては動的サイトの作成や、CSRに比べてSEOの強さや表示が高速・サーバでレンダリングが実行されるため実行環境にレンダリング結果が左右されないなどのメリットがある一方、サーバが遠方にあると通信遅延が大きいというデメリットが存在します。
レンダリングの速さ、処理の速さ、まずそもそも物理的レスポンス・配信の速さ！！！と、兎にも角にも速さが求められる昨今において、サーバとの物理的な距離を詰めることができる技術のひとつがESRとなります。
Cloudflare Pagesを使えばzero configurationでESRが…？！
具体的は設定についてや、Edge Databaseなどの話も必聴です。是非詳しい説明が展開されている動画にてフルでご覧ください。
📄 資料URL
🎦 配信動画
1:39:01
関連URL
パフォーマンスの高みを目指せ！CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順
イベントを振り返って
前回に引き続き、ご登壇・ご参加いただいた皆様のおかげで大変良いイベントとなりました。弊社が開発中のシステムでまさに知りたかったことがセッションで聞けてめちゃくちゃ役得でした！！！！😄
登壇者の皆様、素晴らしいセッションをありがとうございました！！！🙌
Youtube配信も前回よりは安定してお届けできたのではないかと思いますが、より良い環境をお届け出来るように改善して参ります。
VueFesJapanの協賛を行いました！！
本イベントにご来場いただいた方の紹介がきっかけで、VueFesJapanへの協賛を行わせていただきました。
弊社でもプロダクト開発にVueをガンガン使っていますので、Vueへ貢献出来ることを嬉しく思います！
株式会社アルゴリズムはエンジニア・デザイナーを募集中です
弊社ではエンジニア・デザイナーを募集中です！イベントを開催したり、新しい事業を提案して実際に開発に取り掛かったりできる、自分の可能性を試せる会社です！
上記の職種以外の方でも、ご興味があればそれもまた大歓迎です。是非会社ホームページ、もしくは直接安藤までお問い合わせください。
それではまた次回のイベントでお会いしましょう！！👋✨またね！！！
Discussion