私は新しいテクノロジーを学ぶことに時間を費やすのが好きです。しかし、新しいテクノロジーに取り組む際の最大の欠点は、早期導入に伴う避けられない問題点であることがよくあります。「  」でWeb3の知識を深めていたとき、このことをよく目にしました。 2022年にフルスタック開発者から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 は不要になりました この最後の特徴が、私がこの記事を書くきっかけとなったのです。 インポートマップはどのように機能しますか? 大まかに言えば、     Gem を使用すると、開発者はアプリケーションにマップをインポートできます。/bin/importmap を使用すると、エンジニアは必要に応じて依存関係を更新、固定、または固定解除できます。これは、Java ベースのプロジェクトで Maven と Gradle が機能する方法に似ています。 /bin/importmap -rails これにより、パッケージのバンドルや ES6 および Babel のトランスパイルに関連する複雑な処理に対処する必要がなくなります。Webpack はもう必要ありません。Node.js ももう必要ありません。 何かを作りましょう 私はほぼ 20 年間 Ruby on Rails に触れていなかったので、最初に に従って MacBook Pro に Ruby 3.3 をインストールする必要がありました。インストールが完了したら、IntelliJ IDEA IDE の一部として だけで済みました。 このガイド Ruby プラグインをインストールする 次に、IntelliJ で という新しい Ruby on Rails プロジェクトを作成し、JavaScript フレームワークに を使用することを指定しました。  import-map Importmap プロジェクトを作成したら、まずローカル JavaScript ライブラリの使用がどれだけ簡単かを確認したいと思いました。そこで、次の内容を含む という新しい JavaScript ファイルを作成しました。 /public/jvc_utilities.js   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 プラットフォームにデプロイするための作業は、  と 3 つの CLI コマンドの作成で構成されていました。 Procfile どちらの場合も、Rails と Heroku は私のミッション ステートメントを順守しており、Webpack、Node.js、さらには DevOps タスクの課題に悩まされることなく、顧客に価値を提供することに集中することができます。 新しいテクノロジーを探求する際に、私たちは今後も理想的とは言えない問題点に直面し続けるだろうと確信していますが、いずれこの記事で示したような同様の成果が得られるようになると確信しています。 いつものように、私のソースコードは GitLab の で見つかります。 こちら 本当に素晴らしい一日をお過ごしください！

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

2022 - HackerNoon Contributor of the Year - Cloud Computing

2022 - HackerNoon Contributor of the Year - Design

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Salesforce

2022 - Hackernoons Tech Storyteller of the Year

I ♥ writing code. Find me on GitLab.

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - Hackernoons Tech Storyteller of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Cloud Computing

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Design

Nominated for 2022 - HackerNoon Contributor of the Year - Salesforce

このオーディオは、ストーリーの元の言語で制作されています。

長すぎる; 読むには

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

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

About Author

コメント

ラベル

この記事は

Related Stories

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

HackerNoon Coded: HackerNoonが最も活発に活動している上位10カ国

ワークフローを10倍に向上させる方法: 必須アプリ17選

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

HackerNoon Coded: HackerNoonが最も活発に活動している上位10カ国

ワークフローを10倍に向上させる方法: 必須アプリ17選

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps