6時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。

2021年9月21日現場Rails Chapter8 Turbolinks

Turbolinksを無効化する

Turbolinksには高速化できるというメリットがある反面、ブラウザのページ遷移が発生しないなどのデメリットもあります。そのため、Turbolinksの性質をよく調べてから、使うようにしましょう。 Turbolinksをよく知らない場合は、無効化するのも一つの手です。無効化する方法は、いくつかあるので以下に記載します。

rails newコマンド実行時に、Turbolinksを無効化する

Rails4以降ではTurbolinksはデフォルトで導入済みになっていますが rails new時点で除外する場合は以下のようにskipコマンドを使用します。

rails new app_name --skip-turbolinks

既存アプリケーションのTurbolinksを無効化する

Tubolinksが有効になっている場合は以下の手順で無効化出来ます。

1.Gemfileからturbolinks gemを削除します。

# Gemfile
gem 'turbolinks', '~> 5' # 削除

2.bundle installします。bundle install後、サーバーを再起動します。

bundle install

3.app/assets/javascripts/application.jsなどのマニフェストファイルからTurbolinksの読み込み処理を削除します。

// マニフェストファイル
//= require turbolinks // 削除

4.app/views/layouts/application.html.erbなどのレイアウトファイルからdata-turbolinks-track: 'reload'属性を削除します。

<%= stylesheet_link_tag 'application', media: 'all' %>  
<%= javascript_include_tag 'application' %>

結局bundlerとは何なのか?

【Rails】 結局bundlerって何?bundlerの仕組みを図解形式で徹底解説 上のサイトに詳しい説明があるので、引用します。

bundlerとは、GemのバージョンやGemの依存関係を管理してくれるgemです。bundlerを使うことで、複数人での開発やgemのバージョンが上がってもエラーを起こさずに開発できます。

つまり、gem同士のバージョンを管理してくれるのがbundlerです。bundlerを使うことで、以下のことが出来ます。

bundlerを使って出来ること

  • bundlerを使ってgemをインストールするとgem同士の互換性を保ってくれるので、Gemを追加したり時間が経ってもエラーを起こさず開発できます

  • Gemfileという1つのファイルにGemを書くのでgemの管理がしやすいです

  • Gemfileを使ってアプリごとにGemを管理できます

  • 環境ごとにインストールするGemを管理できます

  • gemの互換性を保ってくれるので、Gemfileさえ共有すれば複数人でアプリを開発してもエラーを起こさないです 引用:pikawaka

bundle install と bundle updateの違い

bundlerをインストールすると、bundle installbundle updateのコマンドが使えるようになるのですが、「そもそもそれらのコマンドの違いって、何?」と思ったので、違いを以下に記述していきます。

bundle install

bundle installを実行すると、railsは、Gemfileを元にインストールを行います。(バージョンが指定されてないGemはGemfile.lockのバージョンを参照します) この時、Gemfile.lockに記述されていない、且つGemfileに記述されているGemがある場合、そのGemとそのGemに関連するGemをインストール後、Gemfile.lockを更新します。

bundle update

bundle updateを実行すると、Bundlerは、Gemfileを元にgemのインストールを行います。その後、gemfile.lockを更新します。

bundle updateGemfileに記載されているgemを全て、最新のバージョンに更新するので、アプリケーションが通常通り動かなくなってしまう場合があります。gemは相互に関係し合っており、最新のバージョンをインストールすることで、互換性が取れなくなることがあるからです。

bundle install ではバージョン変更は行えないため、以下のコマンドが必要です。

$ bundle update --conservative [Gem名]

Gemfileはgemをインストールするための「設計図」
Gemfile.lockは、実際にGemをインストールした後の「結果図」

モダンなJavaScript管理を行う

Yarnとは何?

Yarnとは、Facebook社が開発したJavaScriptのパッケージマネージャです。Yarnを用いることで、JavaScriptのパッケージを外部からインストールしたり、パッケージ毎の依存性を管理できます。

パッケージマネージャーとは?

Package Manager は「そのソフトにどのソフトのバージョン何以上が必要か」、「今インストールされているソフトは何か」といった情報を持っているため、必要に応じてソフトを勝手にダウンロードしてきてインストールしてくれます。 引用:Package Manager(パッケージマネージャー)の必要性、Xcode のインストール、Homebrew のインストール、Homebrewを使ってみる

つまり、パッケージマネージャーを使うことで、ソフト(パッケージ)間の依存関係やバージョンを管理し、さらにパッケージのインストールやアンインストールを簡単に行うことが出来るようになっています。

package.jsonとは

Yarnコマンドでインストールしたいパッケージを記述する場所であるとともに、パッケージを定義するファイルです。Gemfileと同じようなものとイメージできます。

Yarnとnpm

JavaScriptのパッケージマネージャとして一般的にYarnnpmが挙げられます。 Gemfile.lockのようなバージョン・ロックの機構として、yarn.lockがあり、 ライブラリの内容に予期せぬ変更が変わっていないことを確認してくれるためセキュリティが高いという特徴があります。

Yarn使い方

以下のコマンドでパッケージの追加とインストールを同時に行います。 インストールされたパッケージは、node_modulesディレクトリに配置されます。

$ bin/yarn add [パッケージ名]

開発環境のみで利用するパッケージとして指定したい場合は「--dev」オプションをつけます。

予め、package.jsonにインストールしたいパッケージを記述しておき、その記述したパッケージを一括でインストールする場合、以下のコマンドを実行します。このコマンドは、bundle installに似たものとイメージ出来ます。

# 一括でパッケージをインストールする
$ bin/yarn install

Yarnでパッケージを削除する場合、以下のコマンドを実行します。

$ bin/yarn remove [パッケージ名]

yarnまたは、npmとgemのどちらを使うのが正解?

JSのライブラリは、yarnかnpm(どちらもJSのパッケージマネージャー)を使って、インストールするべきです。gem(rubyのライブラリ)として対応したJSのライブラリを使用することも出来ますが、バージョン対応が遅いなどのデメリットがあるので、yarnまたは、npmを使うことをオススメします。

参照

【Rails】 結局bundlerって何?bundlerの仕組みを図解形式で徹底解説

bundle install と bundle updateの違いについて

npmとyarnのコマンド早見表

会計freee が yarn から npm に出戻った本当の理由