「福岡フロントエンド勉強会#2」に参加して、発表もさせていただきました
ご縁があり、11月8日に開催された「福岡フロントエンド勉強会#2」に参加して、発表もさせていただきました。
発表したこと
Railsのフロントエンド開発フレームワークHotwireの主要構成要素、Turboについて調べたこと・学んだことを発表させていただきました。
発表のサマリ
- Rails に触れる中で
Hotwire/Turboというフロントの FW / ライブラリを知った - Rails（正確に言うとgem）が用意するヘルパーメソッドでHTMLタグを囲むだけで SPA ライクな画面を実装できる
- 初学者にはこれが魔術的な動きに感じた
- 「
Turboは言語を問わず使えるライブラリ」らしい（RubyやRailsでしか使えない、なんてことはない） - しかし、ヘルパータグで要素を囲っているだけでは、その「言語を問わない」イメージがわかない
- 結果: 魔術的な動きも、自分が学習の中で通った基礎的な概念・技術の積み重ねで実現されていることを感じることができた
謝辞
「Railsではない環境（Sinatra）でTurboを使って動きを確認する」という手法については、kinoppydさんの下の記事を大変参考にさせていただきました🙇♂️ありがとうございました🙇♂️
（kinoppydさんのTurboに関する発表は、今年の大阪Ruby会議でも拝聴させていただいておりました🙏）
上記の記事では、Sinatraのサンプル上でシンプルなリンクのクリックやフォームのサブミットを起こすことで、Turboの動きを解説されておりました（非常にわかりやすかったです🙏）。
今回の私の発表では、私に出来る範囲でのプラスオンということで、シンプルながらDBと接続してCRUDができるSinatraアプリのサンプルを用意し、そこに素のTurboを導入し、RailsのCRUDの流れでTurbo FramesやTurbo Streamsを使うとき動きの一部を再現する、というイメージで進めました。
それを踏まえたうえで、turbo_farme_tagヘルパーとTurbo本体のJSソースの一部のコードリーディングをする、のような流れです。
資料をまとめる中で、TurboどころかRubyやJSの基本的な理解があまりにも足りない……と恥ずかしい気持ちになりつつ、最後は「えいや」で発表させていただきました。拙い内容でしたが、聞いてくださった皆様、ありがとうございました🙇♂️
聞かせていただいた発表
- 静的コード分析ツール
SonarQubeの紹介と、コードの可読性についてのお話 - ある既存のWebページの読み込み速度を、現代のフロントエンド技術で更に向上させる方法について考えるお話
- 最新の便利なCSSセレクター・結合子についてのお話
- オリジナルWebサービス「Kakeru」（ブラウザでお絵かきできるアプリ）の作り直しや、技術的な裏側についてのお話
- プログラミングが、UIにおける「インタラクション（対話）」とどのように向き合って来たのかの変遷と、それを踏まえたうえでの
Svelteについてのお話
いずれも非常に興味深かったです！羅列的な形で恐縮ですが、感じたりメモしたりしたことは以下です。
- 最近、積読にしていた『プログラマー脳』を読み始めたのですが、そこで人間の認知能力・脳の処理能力の限界を踏まえた上での可読性の高いコードとはなにか？という話があったのを思い出しました。変数名が説明的に長いこと（情報が必要以上に詰め込まれていること）が、脳のメモリで処理できるか考えると必ずしもベストではないという点など、このあたりとラップさせながら「なるほど〜」と感じながら聞いていました。
- 読み込み速度が早い、あるレガシーな作りのWebページに関して、現代的なマークアップや配信という観点で見ると、さらに速度を向上させるポイントがあり得るということ。非常に興味深く、学習の過程でまだ扱ったことのないものや聞いただけではすぐ理解できなかった向上ポイントもあるので、フロントエンドのことをもっともっと勉強しなくては……という気持ちになりました。
- CSSについては本当に基本的な結合子やセレクターの知識しかなく、またそれさえもまだうまく使いこなせていないのですが、紹介していただいたものはめちゃくちゃ便利そう&&面白そう……！と思いました。変な苦手意識のようなものをこじらせず、興味を持ったものをいじったりして試しながら学ぶのも良さそうだなあと感じました（もちろん基礎の復習も忘れず……）。
Kakeru、めちゃくちゃ素敵なアプリ。ペアプロとか、発表資料とかでサッと手書きの図を作るのにすごく便利そうなので、さっそく使わせていただきたいなと思っています。絵を編集した後に、別タブで開いているその絵をエクスポートした画像のURLを更新すると、すぐに変更が反映されるデモでは思わず声が出ました。- 「Reactive Programming」という言葉はアラン・ケイ氏の時代からあるということに驚きました。初学者の私のレベルでも、あるフレームワークやライブラリの使い方を学習していく際に、それらの機能やインターフェースが現在の形に落ち着くまでの歴史的な経緯を知ると理解度が高まることがある、というのは実感できるので、もっと色々な本を読んでこのようなストックを溜めていきたいなという気持ちになりました。
Svelteもさっそく触ってみたいです。
個人的な事情で恐縮ですが、移動やイベントまでの用事の兼ね合いで疲れていたこともあり、懇親会には参加せずに帰らせていただきました🙇♂️帰り際に、私の発表に対してフィードバックをいただき、本当にありがとうございました。今後も積極的に勉強会に参加したり、できれば発表もしていければなと思います。
おまけ: 博多観光
翌日はちょっとだけ博多観光をしました。
櫛田神社にお参り。
「近所に美術館があるな〜、ちょっと見てみよう」と思ったら、なんとたまたま江口寿史氏の展示会の初日だったらしくびっくり。すぐ入りました。
ごぼ天うどん・豚骨ラーメンも美味でした！
博多、また行きたいです。
