前編(翻訳)|TechRacho(テックラッチョ)〜エンジニアの「?」を「!」に〜|BPS株式会社エンジニアの「?」を「!」に。原著者の許諾を得て翻訳・公開いたします。フランスのFinTech系Web開発会社ですタイトルは内容に即したものにしました。画像は元記事からの引用です。6アプリケーションでJavaScriptエコシステム全体がどのように機能しているかという概念を急いで理解する必要にかられているそこのお方、あなたが探しているのはまさにこの記事です。6を追加する手順を記載しますのでご期待ください。npmnpmは、JavaScript(正確にはNode.jsモジュール)のパッケージマネージャです。言ってみれば、JavaScript世界におけるRubygemです。<パッケージ名>たとえばbootstrapをインストールするには以下を実行します。bootstrapnpmは、ダウンロードしたパッケージを./node_modulesに保存し、パッケージのリストを./package.jsonに保存します。この時点では、npmとRailsがどう関係するのかについてはまだ何も説明していません。理由についてはこの先をお読みください。yarnyarnは、npmより新しいパッケージマネージャです。yarnはnpmのリポジトリからパッケージを取得する点は同じですが、その他の機能もあります。yarn.lockというファイルを自動生成し、必要なバージョンのnpmパッケージをそのファイルでロックします(RubyのGemfile.lockと同じようなものです)し、npmよりずっと高速です。6アプリケーションでJavaScriptのライブラリが必要になった場合の操作は以下のとおりです。JavaScriptのライブラリを提供するgemを追加し、app/assets/application.jsでライブラリをrequireします(これはSprocketsがコンパイルします)。同じ作業をyarn(https://yarnpkg.com)で行います。<パッケージ名>を実行してからrequireします(詳しくは後述します)。npmにもその後package-lock.jsonでロックする機能が追加されました。ES6ES6はJavaScriptの新しい標準です(JavaScriptの新バージョンと呼んでも結構です)。ES6にはクラス定義やデストラクタ、アロー関数といった極めて便利な機能が搭載されています。さよならCoffeeScript、実は君のことがずっとキライだったよ。CoffeeScriptはES6の仕様に影響を与えたという功績も指摘されています。JavaScriptに変換するツールが必要になります。Babelはそのための変換を行うコンパイラです。WebpackBabelとYarn、それらの設定ファイルが揃ったら、次はアセットを自動コンパイルして環境を管理したりする手段が欲しくなります。開発者はコードを書くこととアセットプリコンパイルの自動化だけに集中したいので、Webpackをバンドマスターとして使うことになります。Webpackはアセットを取り出して適切な個別のプラグインに渡します。プラグインは入力ファイルを適切なツールに処理させて、期待どおりの結果を得ます。バンドマスター(バンマス)は、音楽のバンドにおける経営者を指します。Webpackではたとえば以下のようなことができます。src="path-to-es5-javascript-pack.js"></script>)WebpackerWebpackerは、RailsアプリケーションにWebpackをいい感じに取り込めるgemです。Webpackerにはいくつかの初期設定ファイルが揃っているので(実際これだけで十分です)、設定のことを気にせずにコードを書き始められるようになります。Webpackerのデフォルト設定では以下が指定されます。%>はapp/javascript/packs/my_app.jsをインクルードする)本記事の最後に、これらをうまく動かせる極めて明快な例を示しますが、最初にSprocketsについて少しだけ説明しておく必要があります。falseというデフォルト設定がconfig/webpacker.ymlにあります。packをstylesheet_pack_tagで提供する方法を認識していたとしても提供をオフにする設定です。本記事はJavaScriptに特化しているのでこれ以上深追いしませんが、この機能がデフォルトでオフになっていることは頭の隅に置いておくとよいでしょう。これがデフォルトの振る舞いであり、バグではないことを知っておけばデバッグで無駄に時間を使わずに済みます。assets:precompileを実行するとapp/assets/の下にあるものだけがプリコンパイルされると思っている方もいるかもしれません。実際には、Railsはapp/javascript/の下にあるWebpackのアセットと、app/assets/の下にあるSprocketsのアセットを両方コンパイルします。4Webpackと同様に、Sprokectsも「アセットパイプライン」です。アセットパイプラインとは、アセットファイル(JavaScriptやCSSや画像など)を入力に取り、それらを処理して欲しいフォーマットを出力として生成するものです。6から、Sprocketsに代わってWebpack(er)がRailsアプリケーションでJavaScriptを書くための新しい標準となりました。Sprocketsは今もアプリケーションにCSSを追加するデフォルトの方法でもあるのです。Sprocketsは以下のように使われていました。6の時代)Sprocketsのパイプラインを用いてアセットをインクルードしたい場合は以下のようにします。%>)Sprocketsを使ってたときのようにWebpackを使わないこと流れに逆らって時間を無駄に溶かしたくなければ、このセクションの内容を理解しておくことが重要です。そんな時間があればES6を学ぶことに少しでも回せれば理想ですが、少なくともこれだけは言えます。Webpackがコンパイルするのはモジュールであるという点が、Sprocketsと異なっています。6のデフォルト設定の場合)。これは何を暗示しているのでしょうか?つまり、モジュール内で宣言されるものは、ある意味すべて名前空間化されるということです。いうのも、これはグローバルスコープからアクセスできるようにするものではなく、むしろインポートしてから使うものだからです。いくつか例を挙げてみましょう。Sprocketsでは以下のように書けます。'Straits')">Hey!</button>かなりシンプルに理解できますね。Webpackerではどうなるのでしょうか?「上の2つのJavaScriptファイルをapp/javascript/packsの下に移動してjavascript_pack_tagでそれぞれインクルードすればいいんじゃね?」とお思いの方、ちょっと待った。それではたぶん動かないでしょう。その理由は、hello()は1つのES6モジュールとしてコンパイルされるからです(user_greeting()も同様に(別の)ES6モジュールとしてコンパイルされます)。ビューで両方のJavaScriptファイルをインクルードしたとしても、user_greeting()関数にとってhello()関数は存在しないのです。'Straits')">Hey!</button>残念ながら、これも同じ理由で動きません。greet_user()がコンパイルされると、モジュール内に隠蔽されてしまうため、ビューからgreet_user()にはアクセスできないのです。本セクションで最も肝心な部分にたどり着きました。packに含まれているものにはビューからアクセスできないではJavaScriptアクションをボタンでトリガーするにはどうすればよいのでしょう?答えは、packから、ある振る舞いをHTML要素に追加することです。JSだろうとjQueryだろうとStimulusJSだろうとどれでもやれます。以下はjQueryでやる場合の例です。Webpackでは、欲しい振る舞いをビューではなくpackでセットアップせよ。直前の例を用いて、繰り返し申し上げます。何らかのライブラリ(たとえばselect2とかjQueryとか)が必要になった場合、そのライブラリをpackの中でインポートすればビューで使えるでしょうか?できません。あるpackでインポートしたライブラリはそのpackの中でお使いください。なければ本記事の次のセクションをお読みください。101がおすすめです。ES6のあるモジュールがコンパイルされてES5コードに変換されると、そのモジュールの中身は1つの無名関数の内部に封じ込められ、その関数の外からはモジュール内で宣言された変数や関数に一切アクセスできなくなります。コボラー、ITコンサル、ローカライズ業界、Rails開発を経てTechRachoの編集・記事作成を担当。チュートリアル第2版の監修および半分程度を翻訳、Railsガイドの初期翻訳ではほぼすべてを翻訳。その後も折に触れて更新翻訳中。enno.jpを運営。実は最近Go言語が好きで、Goで書かれたRubyライクなGoby言語のメンテナーでもある。仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.muに移転。Storageを使ってはいけない(翻訳)#Tags#会社紹介#自社サービス#勉強会#Rails#PHP#デザイン#実績#週刊RailsウオッチCONTACTお気軽にご相談ください。(翻訳)CONTACTTechRachoでは、パートナーシップをご検討いただける方からのご連絡をお待ちしております。お気軽にご意見・ご相談ください。