【Rails入門】YarnでjQueryとBootstrapを使うには!?オオイシ2018/9/182018/9/18こんにちは!システムエンジニアのオオイシです。Rails5.1から対応したYarn(ヤーン)をご存知ですか?Yarnはフロントエンド開発のためのNodeモジュールのパッケージマネージャです。まとめYarnとは?Yarnとは、Facebook、Googleなどが共同開発したNode.js(JavaScript)のパッケージマネージャです。Yarn自体もNodeモジュールのパッケージです。Manager)というパッケージマネージャがありますが、npmと比較してYarnは、Nodeモジュールのインストールがとても早い誰が作っても同じバージョンになる機能がある(バージョンロック機能)セキュリティが強化されているコマンドラインの出力がシンプルでみやすいのような特徴があります。RailsにはBundlerというGemのパッケージマネージャがありますが、そのJavaScript版だと理解しやすいと思います。そんなYarnのRailsでの役割についてみていきましょう。Gemfileについてはこちらで詳しく解説しているので、ぜひ参考にしてみてください。2019年1月11日Node.jsについては、こちらで解説しています。2019年10月8日Railsにおけるyarnの役割Rails5.1からは、フロント開発のためのNode.jsが標準でサポートされるようになりました。そのためNodeのパッケージマネージャであるyarnもサポートされるようになりました。Railsで正式にサポートしてるフロントエンドのモジュールとして、WebpackVue.jsReact.jsTypeScriptPostCSSなどがあります。これらのモジュールをRailsから簡単に管理するためのツールとしてYarnが使われています。インストールしたNodeモジュールは、node_modulesディレクトリに保存されます。yarn.lockファイルとはyarn.lockファイルとは、Nodeモジュールのバージョンロックするためのファイルです。RailsのGemfile.lockと同じで、Nodeモジュールの依存関係と依存するモジュールのバージョンを管理します。ファイルを直接編集することはありませんが、共同で開発するためにはgitなどのバージョン管理として含める必要があるのでファイルの存在は覚えておくとよいでしょう。ついては、こちらで詳しく解説しているので、ぜひ参照してみてください。2019年12月4日yarnコマンド一覧よく使うyarnのコマンドの一覧を紹介します。パッケージの一覧と依存関係を階層で出力。Pipelineで使う方法について解説します。Yarnはとっても簡単に使えることがわかっていただけると思います!サンプルコントローラーの作成はじめに、WebpackなしでRailsプロジェクトを作成します。s今回は、Bootstrapが適用されたことを確認するためにHTMLボタン追加します。アクセスして、初期のサンプル画面を確認してみましょう。このように、サンプル画面が表示されました。次の説明で、この画面をBootstrapに対応させていきます。addコマンドjQueryとBootstrapをインストールこのサンプル画面にBootstrapをインストールする手順について解説していきます。yarnコマンドでBootstrapをインストールします。<モジュール名>Bootstrapは、jQueryとPopper.jsを使うため、同時にインストールします。Popper.jsは簡単にツールチップを実装できるJavaScriptライブラリです。1.75s.このように、絵文字つきでシンプルな出力でインストールされました!BootstrapとPopper.jsもインストールします。bootstrapNodeモジュールのインストールリストを確認してみます。0.11s.このようにNodeモジュールを確認することができました。@以降の数字はバージョンを意味します。インストールしたNodeモジュールはnode_modulesディレクトリ配下にインストールされています。〜〜jQueryとBootstrapの設定をするインストールしたjQueryとBootstrap、Popper.jsをマニフェストに追加します。アクセスして、サンプル画面を確認してみましょう。このように、Bootstrapがインストールできました。次項では、同じ内容でWebpackerを使ったサンプルを紹介いたします。Railsのマニフェストファイルについては、こちらで詳しく解説しているため、ぜひ参考にしてみてください。PipelineからWebpackを使った方法に変更する方法を紹介いたします。WebpackerのGemをインストールRailsでwebpackを使うための、Gemをインストールします。追加Webpackerをインストールします。コマンドを実行すると、多数のNodeモジュールがインストールされたことが確認できます。2018年8月21日WebpackでjQueryとBootstrapを使う設定Webpackを使ってYarnでインストールしたjQueryとBootstrapを使えるように設定します。Pipelineのマニフェストで追加したモジュールは、Webpackではエントリーポイントに追加します。'bootstrap/dist/css/bootstrap.css'Webpack用のタグに変更します。〜〜BootstrapがjQueryを参照できるようにするためにjQueryがどこでも参照できるように設定します。Popper.jsについても同様です。environment以上で設定作業は終わりました。アクセスして、サンプル画面を確認してみましょう。このように、WebpackでもBootstrapがインストールできました。まとめいかかでしたか?今回は、Rails5.1で使えるようになったのYarnについて解説しました。YarnはNode.js(JavaScript)のパッケージマネージャです。Railsでモダンなフロントエンド開発をするためにはYarnでNodeモジュールのパッケージ管理が必須になってくるため、ぜひ使ってみてください。Yarnの使い方を忘れてしまったらこの記事を確認してくださいね!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。プログラミング、システムアーキテクトからマネジメントに到るまでなんでも食べます。