2,692 測定値

さようなら Webpack と Node.js、こんにちは Rails と Import Maps

に John Vester7m2024/08/07

長すぎる; 読むには

Rails 7 では、Node.js と Webpack を使いやすくする新機能が導入されました。新しい Import Maps 機能を使用すると、開発者はアプリケーションにマップをインポートできます。これにより、パッケージのバンドルや ES6 と Babel のトランスパイルに関連する複雑な作業に対処する必要がなくなります。この記事では、Ruby on Ruby で新しい Import Maps 機能を使用する方法について説明します。

featured image - さようなら Webpack と Node.js、こんにちは Rails と Import Maps

私は新しいテクノロジーを学ぶことに時間を費やすのが好きです。しかし、新しいテクノロジーに取り組む際の最大の欠点は、早期導入に伴う避けられない問題点であることがよくあります。「 2022年にフルスタック開発者からWeb3パイオニアに移行する方法」でWeb3の知識を深めていたとき、このことをよく目にしました。

ソフトウェアエンジニアとして、私たちは新しい技術を試用する際に、こうした早期導入者の課題を受け入れることに慣れています。私にとって最も効果的なのは、一見非論理的な手順は記憶に残らないため、実行したメモやコマンドのリストを常に保持しておくことです。

Web3 以外にも、Node.js と Webpack を使用するという準標準の要件がある JavaScript の分野でもこの課題に遭遇しました。Node.js と Webpack で苦労せずに JavaScript をそのまま使用できるソリューションを特定したいと考えていました。最近、Rails 7 リリースでこの状況がどのように解決されたかを読みました。この記事では、そのユースケースについて取り上げます。

Railsについて

正直に言うと、私は Ruby と Ruby on Rails の経験がほとんどありません。何年も前に、誰かがコマンドを発行して完全に機能するサービスを作成しているのを見て、「すごい、すごい」と思ったのを覚えています。しかし、サービスやアプリケーションを構築するためにこのアプローチを試したことはありませんでした。

Rails が初めて登場したのは 2005 年後半だったので、そのデモを見たのは 2006 年の初めだったと確信しています。デモで見たように、最終的な結果はモデルビューコントローラ (MVC) 設計パターンをサポートするサービスでした。このパターンは、Spring、Struts、JSF、Seam フレームワークを初期に使用していたときによく知っていたものです。

Rails は、DRY (don't repeat yourself) プラクティスを遵守しながら、物事をシンプルに保つという約束を守っています。この約束を守るために、Ruby はエンジニアがプロジェクトに共有依存関係を導入できるように Gem を使用しています。

バージョン 7 のハイライト

2021 年後半、Rails の 7 番目のメジャーバージョンでいくつかの魅力的な機能が導入されました。

非同期クエリ – クエリをシリアルに実行することから脱却する
暗号化されたデータベース層 – サービス層と永続層間のデータの保護
比較検証 – 永続化前にオブジェクトの検証が可能
マップのインポート – JavaScript ライブラリに Node.js と Webpack は不要になりました

この最後の特徴が、私がこの記事を書くきっかけとなったのです。

インポートマップはどのように機能しますか?

大まかに言えば、 /bin/importmap -rails Gem を使用すると、開発者はアプリケーションにマップをインポートできます。/bin/importmap を使用すると、エンジニアは必要に応じて依存関係を更新、固定、または固定解除できます。これは、Java ベースのプロジェクトで Maven と Gradle が機能する方法に似ています。

これにより、パッケージのバンドルや ES6 および Babel のトランスパイルに関連する複雑な処理に対処する必要がなくなります。Webpack はもう必要ありません。Node.js ももう必要ありません。

何かを作りましょう

私はほぼ 20 年間 Ruby on Rails に触れていなかったので、最初にこのガイドに従って MacBook Pro に Ruby 3.3 をインストールする必要がありました。インストールが完了したら、IntelliJ IDEA IDE の一部としてRuby プラグインをインストールするだけで済みました。

次に、IntelliJ でimport-mapという新しい Ruby on Rails プロジェクトを作成し、JavaScript フレームワークにImportmapを使用することを指定しました。

プロジェクトを作成したら、まずローカル JavaScript ライブラリの使用がどれだけ簡単かを確認したいと思いました。そこで、次の内容を含む/public/jvc_utilities.jsという新しい JavaScript ファイルを作成しました。

 export default function() { console.log('*****************'); console.log('* jvc-utilities *'); console.log('* version 0.0.1 *'); console.log('*****************'); }

デフォルトの関数は、単にいくつかのコマンドを JavaScript コンソールにエコーするだけです。

次に、次の内容の HTML ファイル ( /public/jvc-utilities.html ) を作成しました。

 <!DOCTYPE html> <html> <head> <title>jvc-utilities</title> </head> <script type="importmap"> { "imports": { "jvc_utilities": "./jvc_utilities.js"} } </script> <script type="module"> import JvcUtilities from "jvc_utilities"; JvcUtilities(); </script> <h3>jvc-utilities.html</h3> <p>Open the console to see the output of the <code>JvcUtilities()</code> function. </p> </html>

この例では、追加の作業なしで、ローカル JavaScript ファイルをパブリック HTML ファイルで使用する方法を示します。

次に、 Exampleという新しいコントローラーを作成しました。

 bin/rails generate controller Example index

この例ではLodash ライブラリを使用したかったので、次のコマンドを使用してライブラリをimport-mapプロジェクトに追加しました。

 bin/importmap pin lodash

コントローラーに JavaScript ベースの機能を追加するために、 javascript/controllers/example_controller.js次のように更新しました。

 import { Controller } from "@hotwired/stimulus" import _ from "lodash" export default class extends Controller { connect() { const array = [1, 2, 3] const doubled = _.map(array, n => n * 2) console.log('array', array) // Output: [1, 2, 3] console.log('doubled', doubled) // Output: [2, 4, 6] this.element.textContent = `array=${array} doubled=${doubled.join(', ')}` } }

このロジックは、3 つの値の配列を確立し、その値を 2 倍にします。これを行うには、Lodash のmap()メソッドを使用します。

最後に、 views/example/index.html.erbを更新して次の内容を含めました。

 <h3>Example Controller</h3> <div data-controller="example"></div>

この時点で、次の URI が利用可能になりました。

/jvc-utilities.html
/example/index

デプロイして検証しましょう

Rails サービスをローカルで実行するのではなく、代わりに Heroku を使用することにしました。こうすることで、自分のサービスが他の消費者にもアクセス可能になることを保証できます。

Heroku アカウントを使用して、「 Ruby で Heroku を使い始める」ガイドに従いました。私のプロジェクトに基づいて、最初のステップは、次の内容のProcfileという名前のファイルを追加することでした。

 web: bundle exec puma -C config/puma.rb

次に、Heroku CLI を使用して Heroku に新しいアプリケーションを作成しました。

 heroku login heroku create

createコマンドを使用して、次のアプリケーションを起動して実行しました。

 Creating app... done, ⬢ lit-basin-84681 https://lit-basin-84681-3f5a7507b174.herokuapp.com/ | https://git.heroku.com/lit-basin-84681.git

このステップでは、Heroku エコシステムが使用する Git リモートも作成されました。

今必要なのは、最新のアップデートを Heroku にプッシュしてアプリケーションをデプロイすることだけです。

 git push heroku main

これで、コードが Heroku にプッシュされ、アプリケーションがコンパイルされてデプロイされました。1 分も経たないうちに、次のような画面が表示され、アプリケーションが使用可能になったことがわかりました。

 remote: Verifying deploy... done. To https://git.heroku.com/lit-basin-84681.git fe0b7ad..1a21bdd main -> main

次に、Heroku URL (アプリケーション固有のものですが、現在は削除しています) を使用して/example/indexページに移動しました: https://lit-basin-84681-3f5a7507b174.herokuapp.com/example/index

私が見たものはこれです:

ブラウザで JavaScript コンソールを表示すると、次のログが表示されました。

/jvc-utilities.htmlに移動すると、次の情報が表示されました。

ブラウザで JavaScript コンソールを表示すると、次のログが表示されました。

成功しました。Rails 7 アプリケーションで、自己完結型の JavaScript ライブラリとパブリック Lodash JavaScript ライブラリを使用できました。すべて Import Maps を使用することで、Webpack や Node.js を扱う必要がありません。さようなら、Webpack と Node.js!

結論

読者の皆さんは、私の個人的なミッションステートメントを覚えているかもしれません。これは、あらゆる IT プロフェッショナルに当てはまると思います。

「知的財産の価値を高める機能や特性を提供することに時間を集中してください。他のすべてにはフレームワーク、製品、サービスを活用してください。」 — J. ベスター

この記事では、Rails 7 に真っ先に飛び込み、Import Maps を使用して、Webpack や Node.js を使用する手間をかけずに JavaScript ライブラリを簡単に使用できることを示しました。Rails が実際に動作しているのを最後に見たのは 20 年以上前でしたが、目標を達成するのにかかった時間が短かったことに非常に感銘を受けました。

デプロイメントの観点から見ると、Rails アプリケーションを Heroku プラットフォームにデプロイするための作業は、 Procfileと 3 つの CLI コマンドの作成で構成されていました。

どちらの場合も、Rails と Heroku は私のミッションステートメントを順守しており、Webpack、Node.js、さらには DevOps タスクの課題に悩まされることなく、顧客に価値を提供することに集中することができます。

新しいテクノロジーを探求する際に、私たちは今後も理想的とは言えない問題点に直面し続けるだろうと確信していますが、いずれこの記事で示したような同様の成果が得られるようになると確信しています。

いつものように、私のソースコードは GitLab のこちらで見つかります。

本当に素晴らしい一日をお過ごしください！