更新情報

こんにちは。タイムシフトの野呂です。

私は、34歳で約2ヶ月間集中して自習してWebアプリケーションの開発を行い、Rails3技術者認定ブロンズを一発合格した経験があります。本業では、プログラミング・スクール「Dive into Code」の講師を務めています。

今回は、つまずきやすいポイント「アセットパイプライン」について解説をします。効果的に学習を進めるためのお役に立つことができましたら、幸いです。

アセットパイプライン

Ruby on Rails は、どのようなWebアプリケーションを開発する際にも共通して作成する必要があるものを、自動的につくることができます。Webアプリケーションフレームワークのひとつです。

 

Webアプリケーションフレームワークは、みなさんが日常的に使っている「メールテンプレート文」とその役割が同じです。どちらも作業を効率化するために使う点では、同じことです。メールテンプレート文は、メールを新たに作成する都度使います。Webアプリケーションフレームワークは、Webアプリケーションを開発する都度使います。

 

Ruby on Railsにはアセットパイプラインという機能が実装されています。その役割をひと言で説明すると、「Web画面上の色塗りを楽にする機能」です。

 

比喩として”色塗り”と言っていますが、具体的にはWebブラウザに画面のデザインを認識させるためにHTMLに紐付くCSSやJavaScript、Imageファイルを記述・作成することです。

 

 

つまずきやすいポイント

 

初学者が、アセットパイプラインにつまずくのは、「仕組みがよく分からない」こと。次に「Herokuデプロイ後のトラブル」においてです。

 

まず、「仕組みがよく分からない」についてです。

 

初学者は、Ruby on Railsのフレームワークの役割とディレクトリ構造を覚えることに苦心します。そのため、”Webブラウザ上に画面が表示される仕組み” については見落とされがちです。

 

インターネット上の情報は、Webブラウザを介して見ることがほとんどです。そのWebブラウザ上に画面が表示されるのは、”WebブラウザがHTMLとCSS、JavaScriptを認識する” 必要があることを、認識せずに Ruby on Rails の学習を進める初学者が多いです。

noro20160101

Webブラウザ上で表示されるものは、HTMLとCSS、JavaScriptが紐付くことによって、描かれていると認識しましょう。Ruby on Rails では、この仕組みがアセットパイプラインによって実現されるようになっています。

 

次に「Herokuデプロイ後のトラブル」についてです。

 

初学者がインターネット上にWebアプリケーションを公開する際には、Herokuがよく使われます。デプロイするまでの手順が極めて少なく済み、楽だからです。

 

初学者は、Herokuデプロイ後に「レイアウトが崩れた」というトラブルによく直面します。

 

その理由は、Heroku上で動作する環境の仕様やアセットパイプラインの挙動が異なるためです。Heroku上では、Ruby on Rails 内の production 環境が標準では使われます。

 

これらの背景をしっかりと理解しないまま学習を進めると、「よく分からないけど、とりあえずやってみよう」というモヤモヤした悩みが常に生まれ、脳内のストレスが溜まります。

 

初学者が学びを加速させるためには、これらを早めに解消する必要があります。

では、アセットパイプラインの仕組みの概要を理解しましょう。

 

 

アセットパイプラインの仕組み(概要)

 

アセットパイプライは、Ruby on Railsのアプリケーション内で使用したいJavaScriptやCSS、画像ファイルを「開発作業がしやすいようにファイルを分割してコーディングができるようにしつつ、最終的に一つのファイルに連結・圧縮する」仕組みです。

 

WebブラウザがWebページを表示するために必要なHTMLファイルの元ファイル(.erb)をapp/viewsディレクトリ内に配置します。

noro20160102

一方、そのHTMLを装飾するためのCSSファイルや画像ファイル、JavaScriptファイルは、app/assetsディレクトリ内に配置します。

noro20160103

 

stylesheetsディレクトリ内には、CSSファイル。imagesディレクトリには、Imageファイル。javascriptsディレクトリには、JavaScriptファイルを配置します。

 

このように、記載する内容の種類ごとにディレクリやファイルを分けています。それは、「開発者にとって、何がどこに記載されているかをわかりやすく認識させるため」です。

 

Webブラウザには、ひとつのWebページを表示するために複数のファイルを結合する機能は備わっていません。そのため、開発者が作業をしやすいようにファイルをたくさんのディレクトリに分けてしまうと、それらのディレクトリをそのままひとつのWebページとして扱うことができなくなってしまいます。

 

そこで、このアセットパイプラインの仕組みが考え出されました。

 

アセットパイプラインは、複数のディレクトリやファイルに分かれたassetsディレクトリ内のファイルをひとつに連結・圧縮する機能です。

noro20160104

ひとつのファイルに連結・圧縮され、erbテンプレートからHTML化されたファイルとひも付いてからWebブラウザ画面上に表示されるようになります。この仕組みによって、Webアプリケーション内への効率的にアクセスすることもできます。

 

以上が、アセットパイプラインの役割です。

 

Heroku上で使われる環境

 

もう一つのつまずきやすいポイント「Heroku上で使われる環境」について触れておきましょう。Heroku上では、標準で「production環境」、通称「本番環境」が使われます

 

Ruby on Rails内部には、開発作業用とお客様に公開して使ってもらう用に環境を分けて開発できるような仕組みがあります。概要としては、環境ごとに別々のファイルや設定が反映できるように作られています。

 

普段の開発作業をする際は、開発環境を使います。特に何も意識をせずに作業をしていれば、開発環境が使われます。あえて本番環境で作業をする、と明示して作業をした場合のみ本番環境を使うことが可能な仕様になっています。その他、テスト用の環境もありますが今回は特に触れません。

noro20160105

 

開発環境は、プログラムを新規開発、修正するための環境です。本番環境は、修正やテストが完了し正常に動作することが保証されているプログラムを動かす環境です。

 

アセットパイプラインの仕組みを通って生成されたファイルは、Ruby on Rails 内部では開発環境と本番環境用で別々のものとなります。

 

注意すべきことは、通常本番環境ではアセットパイプラインを通る処理が自動実行されないことです。Heroku上に送付されたWebアプリケーションを何もせずにただ動かそうとすると、CSSやJavaScriptなどが反映されない状態になります。

 

Heroku上に反映するためには、2つの作業をすることが確実な方法です。

 

・本番環境上でアセットパイプラインを通るようにプリコンパイル処理を実行する

・本番環境上でアセットパイプラインを自動で通るように設定を変更する

 

前者は、Herokuにファイルを送付する前に

$ rake assets:precompile RAILS_ENV=production

を開発環境上のコンソールで実行します。

 

後者は、config/production.rbファイル内の記述のうち

config.assets.compile = false

の記述を見つけ、「falseをtrueに書き換えて」保存します。

 

以上で、Heroku上で使われる環境上のHTMLにCSSやJavaScriptを反映させることができます。

 

 

初学者がRuby on Railsのアセットパイプラインを使う場合は、WebブラウザがWebページを表示するために必要なことの背景をしっかり理解しましょう。その上で、Heroku上にCSSやJavaScriptが反映させるために必要なことを理解しましょう。

 

私のコラムでは、Ruby on Rails を学習する初学者がつまずきやすいポイントを補う内容をお伝えしていきます。お読みくださり、ありがとうございます。

 

それでは、また!