この記事は「<a href="https://adventar.org/calendars/7752" target="_blank" rel="noopener noreferrer">つながる勉強会 Advent Calendar 2022</a>」の 13日目の記事です。 12日目の記事はこちら⏩ 「<a href="https://michi-programming.hatenablog.com/entry/2022/12/12/200000" target="_blank" rel="noopener noreferrer">JavaScriptの日付型の罠</a>」 どうも、リリーです。 昨年12月にRails 7リリースされましたが、皆さん使ってますか？ 僕が担当しているプロダクトではいずれもRails 6を使用しているためあまり馴染みがないのですが、そろそろリリースから1年ということで、改めてその特徴について調べてみました。 なお、今回はAPIサーバーとしてではなくフルスタックフレームワークとしてのRails、つまりフロントエンドもRails内で完結させる場合を対象としています。 <h2 id="h22eff45fef">Rails 7になって何が変わった？</h2> Rails 7の最大の特徴はフロントエンドの開発環境の刷新です。 JavaScriptのモジュールバンドラとしてRails 5ではSprockets、Rails 6ではwebpackerが標準装備されていましたが、Rails 7ではそれらに代わりimportmap-railsが標準となっています。（ただし、従来通りWebpackerを使うこともできます） また、フロントエンド開発のアプローチとしてHotwireが導入されました。 Rails 6から7になっていきなり上記やjsbundling-rails, Hotwire, Turbo, esbuild, ...など色々な登場人物が現れて、混乱した方もいるのではないでしょうか？かく言う僕もその一人なので、今回改めて諸々の用語を整理しました。 まず、Rails 7で新たに登場したフロントエンド周りの技術として、その役割を大別すると以下の2つになります。<ul><li>フロントエンドの記述方法に関するもの</li><li>JavaScriptの読み込みに関するもの</li></ul> <h4 id="hfdb7589cb9">フロントエンドの記述方法に関するもの</h4> こちらはERBやJavaScriptの書き方に関わってくる技術で、具体的にはHotwire(HTML Over The Wire)が当てはまります。HotwireはTurbo, Stimulus, Stradaという3つの技術から構成される、Railsでのフロントエンド開発の新しいアプローチです。 Turbo Hotwireの中核技術がTurboで、これによりJavaScriptを書かずにSPA風のUIを作ることができます。 Stimulus StimulusはJavaScriptのライブラリで、HTMLとJSの紐付けを分かりやすくしてくれる役割を持ちます。 Stradaについては詳細未発表なので割愛します。 <h4 id="hc6d061d663">JavaScriptの読み込みに関するもの</h4> こちらには以下のものが分類されます。<ul><li><code>importmap-rails</code> </li><li><code>jsbundling-rails</code> <ul><li><code>esbuild</code> </li><li><code>rollup</code> </li><li><code>webpack</code> </li></ul></li></ul> Import MapsはJavaScriptをバンドルせずにブラウザで直接モジュールをインポートできる技術で、これをRailsで使用するためのgemが<code> importmaps-rails</code> です。Node.js環境が不要になる一方で、JSXやTypeScriptが使用できないなどのデメリットがあります。 先述の通り、Rails 6では<code>webpacker</code> がデフォルトだったのに対し、Rails 7では<code>importmaps-rails</code> がデフォルトになっています これに対して、<code>jsbundling-rails</code> は従来通りバンドルを行う方式で、バンドラとして<code>esbuild</code>, <code>rollup.js</code>, <code>webpack</code>のいずれかを選択できます。 <h2 id="h68487170e3">Hotwire vs React 比較</h2> Rails 7で導入された技術について、個別の内容は上記の通りですが、全体としてJavaScriptの記述量を少なく済ませるという方向性に寄ったバージョンアップとなっており、「Railsはフルスタックフレームワークである」というDHHの思想が色濃く出ている方針です。 最近のフロントエンド全盛のトレンドに逆行した方向性なので、正直個人的にはそこまで好きではないものの、少人数・小規模の開発においてはHotwireによりかなり効率化できるプロダクトもありそうです。 何はともあれ、実際に触ってみないと始まらないので、Hotwireを使って簡単なメモリストを作ってみました。 <a href="https://github.com/shu-illy/rails7hotwiresample" target="_blank" rel="noopener noreferrer">https://github.com/shu-illy/rails7</a><a href="https://github.com/shu-illy/rails7hotwiresample" target="_blank" rel="noopener noreferrer">hotwire</a><a href="https://github.com/shu-illy/rails7hotwiresample" target="_blank" rel="noopener noreferrer">sample</a> なお、こちらではscaffoldに毛が生えた程度の超シンプルなUIなので、Stimulusは使わずTurboのみで対応しています。 TurboでSPA風のUIを作る方法はこちらの記事が参考になりました。 <a href="https://zenn.dev/shita1112/books/cat-hotwire-turbo/viewer/tutorial-2" target="_blank" rel="noopener noreferrer">https://zenn.dev/shita1112/books/cat-hotwire-turbo/viewer/tutorial-2</a> また、比較対象としてRails + Reactを使用して同様のメモリストを作りました。 <a href="https://github.com/shu-illy/rails7_vite_react" target="_blank" rel="noopener noreferrer">https://github.com/shu-illy/rails7_vite_react</a> こちらはバンドラにViteを使用しており、viewにReactコンポーネントをマウントする形になっています。 RailsでViteを使う方法はこちらをご覧ください。 <a href="https://zenn.dev/shu_illy/articles/a0ad61ef62e0d4" target="_blank" rel="noopener noreferrer">https://zenn.dev/shu_illy/articles/a0ad61ef62e0d4</a> （記事ではVueを使用していますが、ReactでもViteの導入方法は同様です） <h3 id="hfe6b5d41db">Hotwireを使ってみての所感</h3> Hotwire(Turbo)を実際に使ってみて、SPA風のメモリストのUIが驚くほど簡単に実装できました。JSを1行も書かずにこれが実現できるのはかなり驚きです。 UIにこだわらない管理画面などであれば、Turboだけでサクッと作れそうです。 React/Vueの導入コストを考えると、このレベルのUIならTurboの方が有利そうですね。 Stimulusは今回使用していませんが、使用方法はこちらの記事が参考になりました。 <a href="https://abillyz.com/moco/studies/540" target="_blank" rel="noopener noreferrer">https://abillyz.com/moco/studies/540</a> JSファイルでコントローラ名とアクション名を定義して処理を記述し、viewファイルからコントローラ名・アクション名を指定して処理を呼び出すという使い方です。 webpackerでは、viewとJSファイル内に書いたロジックの対応関係が分かりにくいというデメリットがありました。 一方でStimulusではview側で呼び出すコントローラ名・アクション名を明示しているため、viewとロジックの対応関係がかなり分かりやすくなりそうです。 webpackerでは発火させるために <code>document.addEventListener</code> を何度も書く必要があるのが辛いところでしたが、Stimulusではそれがないところも良いですね。 ただ、Stimulusでの（イベントリスナーの設定を除いた）ロジックの記述量に関しては、従来のVanilla JS / jQueryと大きく変わることはなさそうです。 この辺の命令的な記述量が増えて複雑になるほど、ReactやVueによる宣言的UIの方が効率的になってきますし、モダンフロントのエコシステムの恩恵に預かることもできます。 以上を踏まえて、Rails 7でのフロントエンド開発は以下の方針にするのが効率が良いと思います。<ul><li>シンプルなCRUDや画面遷移のみのUI → Hotwire</li><li>上記以外で、ある程度複雑なDOM操作・非同期処理・状態管理等が必要なUI → React / Vue</li></ul> また開発効率以外の観点だと、Hotwireは独自記法の癖が強めです。慣れてくるとスムーズに書けるようにはなりますが、他の言語・FWに横展開できるものではないですし、Railsのメジャーアップデートにより使われなくなる未来もありえます。 （このあたりも積極的にHotwireを使いたいと思えない理由です） <h2 id="ha214098e44">まとめ</h2> 今回の調査・検証をまとめると以下の通りです。<ul><li>Rails 7ではフロントエンドの開発環境が大きく刷新された</li><li>フロントエンドの記述に関する技術として、Hotwireが導入された</li><li>Rails 7でのJavaScriptの読み込みに関する技術（gem）として、<code>importmap-rails</code> と<code>jsbundling-rails</code> が導入された</li><li>シンプルなUIであればHotwire、ある程度複雑なUIであればReact / Vueを使うのが効率が良い</li></ul> この記事の内容が参考になれば幸いです。 また、内容に間違いなどあればTwitterにてご連絡頂ければと思います。

Rails7でのフロントエンド開発について考えてみた

どうも、リリーです。 先日（といってももう3ヶ月近く前ですが）、転職ドラフトというサービスを使ってお試し転職活動をしてみました。 その時の体験がとても良かったのでまとめてみます。 <h2 id="h24710f0057">転職ドラフトとは</h2> 転職ドラフトは、求職者が用意したレジュメをもとに企業側から指名を行う、いわばITエンジニア版ドラフト会議のような転職サービスです。 転職ドラフトのリンクはこちら↓ <a href="https://job-draft.jp/" target="_blank" rel="noopener noreferrer">https://job-draft.jp/</a> ドラフトは毎月1回開催されており、以下のような流れになっています。 <ul><li>指名期間中に、企業が求職者の指名を行う</li><li>使命期間終了後の一定期間後までに、求職者が企業の指名を受けるかどうか選択する</li><li>指名を受ける場合、企業とのカジュアル面談を行う</li><li>カジュアル面談後、求職者が希望する場合は選考に応募する</li></ul> 他の転職サービスと比較して、転職ドラフトの特徴は以下のような点です。 <h3 id="h793a7493e4">企業側からのオファーが先である</h3> 一般的な転職サービスでは、求人に応募するところから選考フローがスタートします。 これに対し、転職ドラフトでは企業が求職者にオファーを送るところからスタートします。 （前提としてあらかじめ求職者がレジュメ（後述）を記入しておく必要はありますが、求職者と企業のやり取りという意味では企業からのオファーが起点となります） <h3 id="hf95b929d54">指名と一緒に年収が提示される</h3> 企業からの指名が来る時には、必ず提示年収もセットになっています。 一般的な転職サービスでも年収は表示されていますが、あくまで目安ですし、「◯◯◯万円〜◯◯◯万円」のような表記となっており、実際に内定を貰うまで自分の年収がいくらになるか分からないケースがほとんどだと思います。 転職ドラフトでは、そのような幅のある表記ではなく具体的な金額となっています。 また、内定年収が提示年収の90%を下回ることはルールで禁止されています。 <h3 id="h5f9faa7825">ドラフト参加時にレジュメの審査がある</h3> ここでいうレジュメとは職務経歴書のようなものです。 指定のフォーマットに沿って担当プロジェクト・スキル・野望・希望条件などを記入します。 レジュメを提出すると、内容を転職ドラフト側に審査してもらい、通過すればドラフトに参加することができます。 通過できなくても参加不可というわけではなく、何回も修正して審査を受け直すことができます。 このとき、内容のフィードバックを貰うことができるので自分の職務経歴書のブラッシュアップにもつながります。 <h3 id="hc770e67243">業務委託での指名もある</h3> メインのユーザー層は正社員としての転職希望者なのですが、転職ドラフトでは業務委託契約も扱っています。 正社員としてのオファーに比べるとまだまだ少ないのですが、業務委託としてのオファーもあります。 また、正社員としてのオファーを受けても、フリーランスや副業としての業務委託で内定を貰えるケースもあります。 <h2 id="hab0f568882">ドラフトの結果</h2> 8月回の結果はこのような感じでした。 <img src="https://images.microcms-assets.io/assets/043564340b264ce2b7690706ccc19a13/519d8ffc3c5c47dcaf30da6d8a3d29a0/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-11-12%200.53.17.png" alt=""> この時が初参加でしたし、参加当時はWebエンジニアに転身して1年1ヶ月程度だったので、エントリー時は「提示年収は400万台か良くて500万台前半くらいかな？というかそもそも指名貰えるかな？ドキドキ…」という感じでした。 が、蓋を開けてみるとオファー4件、提示年収は650万円〜と個人的には大満足な結果でした。 僕がドラフトに参加した理由は、「自分の市場価値を定量的に可視化したい」というモチベーションからだったので、元々は選考を受けるつもりはなかったのですが、せっかくなので4社ともカジュアル面談を受けてみました。 なんとなくでカジュアル面談を受けてみた結果、そのうち1社の雰囲気や技術スタックがかなり自分にマッチしたので選考に進みました。 選考後すぐに業務委託で内定を頂き、10月から参画しています。 単純に案件数が増えたのでそれなりに忙しくなりましたが、今まで以上に技術的好奇心が満たされているので充実しているように感じます。 <h2 id="ha214098e44">まとめ</h2> ここまで転職ドラフトのサービス内容と僕の参加結果についてまとめてきました。 僕自身の経験からも、転職ドラフトは本当にオススメのサービスです！！ 実務経験1〜2年以上のエンジニアは全員使って欲しいと思っています。 こちらのリンクから無料登録できますので、興味のある方は是非参加してみてください！ <a href="https://job-draft.jp/" target="_blank" rel="noopener noreferrer">https://job-draft.jp/</a>

転職ドラフトに参加してみた

はじめまして、リリーです。 ブログ始めてみました。 実は以前にもWordPressでブログを開設していたことがあったのですが、1記事も書かずに閉鎖してしまったので、日の目を見ることがありませんでした。（サーバー代。。。） そんなことがありながらも懲りずにまたブログを開設したので、見ていただけると嬉しいです。 <h2 id="h1905e3b68e">何のためのブログ？</h2> 正直言うと、「ブログ書きたい」「マネタイズしたい」というより、「今勉強しているフロントエンド技術を使って何か作りたい！」というモチベーションからできたものです。 Next.js初心者のアウトプットとしては「microCMSを使ったブログ構築」が割と鉄板なので、例に漏れず僕もブログを構築することにしました。 そういった経緯もあるので、このブログでは<ul><li>プログラミング関連の技術</li><li>エンジニアとしてのキャリア</li></ul>などを主なテーマとして扱っていきたいと思います。 <h2 id="h8f16b0379a">どうやって作った？</h2> 上述の通り、このブログはNext.jsとmicroCMSを使って開発しています。 リポジトリはこちら。 <a href="https://github.com/shu-illy/personal-blog" target="_blank" rel="noopener noreferrer">https://github.com/shu-illy/personal-blog</a> 主な技術スタックは以下の通りです。 <ul><li>TypeScript</li><li>React, Next.js</li><li>Mantine</li><li>Tailwind CSS</li><li>microCMS</li><li>Vercel</li></ul> <h3 id="hbc08ded6c8">TypeScript</h3> Microsoft社が開発したaltJS言語（JavaScriptを代替する言語）で、「静的型付けができるJavaScript」のようなものです。 静的型チェックがエディタの入力補完と非常に相性が良く、最近のフロントエンド開発ではほとんどTypeScriptが使われていると言ってもいいのではないでしょうか。 <h3 id="h36afb0d416">React, Next.js</h3> Reactは、Facebook社が開発したフロントエンド開発用のJavaScriptライブラリで、SPA(Single Page Application)を構築することができます。 似たような立ち位置のものにVue.js, Angularがありますが、Vue.js, Angularはフレームワークであるのに対し、Reactはライブラリです。 Next.jsはReactをベースにVercel社が開発したフレームワークです。 詳細な説明は割愛しますが、ReactなどのSPAでは、主にCSR(Client Side Rendering)という方式で描画を行うため、SEO等の面で不利になります。 このデメリットを克服できるのがNext.jsのSSR(Server Side Rendering), SSG(Static Site Generation), ISR(Incremental Static Regeneration)です。 （僕自身がしっかり対策するかは置いといて）ブログではSEOが重要な指標になるので、このブログでもNext.jsを採用しています。 後述のVercelのWebhookとmicroCMSを連携して、記事の投稿・更新時にSSGのビルドを実行するようになっています。 また、ディレクトリ構成とコンポーネントのデザインパターンはAtomic Designっぽいものを採用しています。 <h3 id="hf2988f46ac">Mantine</h3> MantineはReact用のUIコンポーネントライブラリで、Reactで使えるコンポーネントやhookが豊富に提供されています。 <a href="https://mantine.dev/" target="_blank" rel="noopener noreferrer">https://mantine.dev/</a> 類似のライブラリとしてはChakra UI, MUIなどがあります。 実務でChakra UIも使ったりしていますが、個人的にはMantineの方がカスタマイズしやすくコンポーネントも豊富なので好きです。 デザインができない僕でも、それっぽいUIのブログが作れているのは完全にMantineのおかげです。 <a href="https://twitter.com/shimabu_it" target="_blank" rel="noopener noreferrer">しまぶー</a>さんがご自身のオンラインサロン内で紹介していたのをきっかけに知ったのですが、もはやReactで開発する際にはMantineが手放せなくなりました。 ありがとうしまぶーさん。 <h3 id="h5572fb6d00">Tailwind CSS</h3> Tailwind CSSはユーティリティファーストをコンセプトとしたCSSフレームワークです。 僕含めてCSSに疎い人からすると「ユーティリティファースト…？」という感じですが、要は「CSSを一切書かずに、ライブラリが用意しているクラスを使ってスタイリングを行う」ということです。 （例えば<code>p-0</code>は<code>padding: 0px;</code>, <code>bg-white</code> は<code>background-color: rgb(255 255 255);</code> といった具合） <ul><li>クラス名がCSSプロパティに紐付いているので、直感的にスタイリングがしやすい</li><li>膨大なCSSファイルを用意しなくて良いので、一部CSSを弄った時の影響範囲を考えなくて良い</li></ul>などのメリットがある一方で、Tailwind CSSのみでスタイリングしていると、クラスが異様に長くなるというデメリットもあります。 そこでこのブログでは、<ul><li>基本的なスタイリングはMantine</li><li>Mantineではやりにくい微調整はTailwind CSS</li></ul>という線引きで使い分けています。 （といっても、Mantineに慣れてきたらほぼほぼTailwind CSSを使う必要性がなくなってきましたが…） <h3 id="hae6947d5ce">microCMS</h3> microCMSは日本製のヘッドレスCMSです。 WordPressなどのCMSでは、コンテンツ管理機能と見た目部分がまとめて提供されていますが、 これに対しヘッドレスCMSとは、従来のCMSからヘッド(見た目部分)を取り除いたもので、バックエンドのコンテンツ管理機能のみを備えたCMSです。 その分、見た目部分を自分で作る必要がありますが、フロントエンドの自由度が高まるというメリットもあり、まさにフロントエンドの練習にうってつけの技術です。 <h3 id="h065a574f0d">Vercel</h3> VercelはNext.jsの開発元であるVercel社が提供しているホスティングサービスです。 Githubと連携してpushするだけで簡単にアプリのデプロイができます。 個人ブログ程度であれば無料で使用できるので、個人開発には心強いツールです。 <h2 id="h7dabb5418b">今後の展望</h2> 冒頭で書いた通り、このブログでは技術やキャリアに関する情報を発信していきたいと思います。 技術面に関しては、まだ最低限の機能しか実装していないので、以下の技術・機能を取り入れていきつつ、UI/UXも改善していきたいと思っています。<ul><li>Jest, React Testing Library（テスト）</li><li>Storybook（コンポーネント管理・テスト）</li><li>検索機能</li><li>コメント機能</li><li>etc...</li></ul> 今後ともよろしくお願いします。