【DIVE INTO CODE】第8回授業レポート(アセットパイプラインの理解を深める)

【Rails】プログラミング初心者の勉強ブログ #79

今回の授業は「アセットパイプライン」についてです。90分という制限時間の中、Bootstrapを組み込んだブログアプリを作成する授業内容です。Rails特有のアセットパイプラインの仕組みについて、理解を深められる内容です。cssとscssの違いを意識するきっかけになりました。

 

目次

[toc]

 

前回までの授業内容

第7回授業レポート

[blogcard url=”https://whatsupguys.net/programming-school-dive-into-code-learning-72/”]

第7回授業レポート。Webアプリケーションの処理の流れの復習とともに、デバックすべき6つの視点について学習しました。

第6回授業レポート

[blogcard url=”https://whatsupguys.net/programming-school-dive-into-code-learning-66/”]

第6回授業レポート。Webアプリケーションの処理の流れについての学習です。Railsフレームワークで開発に入る前に必ず知っておくべきアプリの流れの概要です。

第5回授業レポート

[blogcard url=”https://whatsupguys.net/programming-school-dive-into-code-learning-60/”]

第5回授業レポート。アイデア創出の手順について。オリジナルWebアプリ作成のために必要な要件定義の方法を学習しました。

第4回授業レポート

[blogcard url=”https://whatsupguys.net/programming-school-dive-into-code-learning-53/”]

第4回授業レポート。オブジェクト指向についての講義です。カプセル化・継承・ポリモーフィズムについて学習しました。

第3回授業レポート

[blogcard url=”https://whatsupguys.net/programming-school-dive-into-code-learning-45/”]

第3回授業レポート。Rubyで二分探索法アルゴリズムを考えた回です。コーディングからフローチャートを作成し、グループワークで理解を深めました。

第2回授業レポート

[blogcard url=”https://whatsupguys.net/programming-school-dive-into-code-learning-33/”]

第2回の授業レポート。事前課題で提出したJavaScriptでコーディングした「成績判定プログラム」のフローチャート作成が抗議内容のメインです。

課題で作成した成績判定アルゴリズムを噛み砕き、個人ワークでフローチャートを作成した後、グループワークで共有・発表といった流れです。

第1回授業レポート

[blogcard url=”https://whatsupguys.net/programing-school-dive-into-code-learning21/”]

初回授業レポート。こちらも事前課題に沿ってHTML/CSSのアウトプット。

プログラミングスクール「DIVE INTO CODE」の授業の雰囲気なども書いてます。

 

8回目授業はアセットパイプラインについて

今回はRailsアプリケーションのアセットパイプラインについてです。

【Rails】デプロイに強くなるアセットパイプラインまとめ(アセットプリコンパイルで何が起きているか)

前にアセットパイプラインについてまとめたこともありましたが、今回はもっと基礎的な内容から改めて復習することができました。

 

ブラウザが認識できるファイルは3つのみ

ブラウザは、サーバーに対しリクエストを送り、そのレスポンスとしてHTMLやCSSを受け取り、画面に表示させることができます。しかし、あくまでブラウザはHTMLとCSSとJavaScriptの3つのみ認識することができ、それ以外のファイルで書かれた言語を読み込むことができません。

アセットパイプラインは、ファイルを結合し圧縮するだけでなく、HTMLやCSS、JavaScript以外で書かれたファイルの変換を行うことで、ブラウザが認識できる状態でレスポンスを返す処理を行っています。

以上の内容を含め、アセットパイプラインが行う処理は大きく分けて4つになります。

 

1,ブラウザが認識できるファイル形式への変換

Railsアプリ開発で利用されるerbファイルやscss、coffeeなどを、ブラウザが認識できるHTML、CSS、JavaScriptに変換する処理を行う。これによりブラウザはレスポンス内容を表示することができる。

 

2,ファイル同士の結合

Railsではモデルごとにscss やerbを書いたりするので、開発したプログラムには複数枚のscssファイルが存在する状況になります。scssをcssに変換したあとは、この複数枚に渡るcssコーディングを1枚のファイルにコンパクトにまとめる処理が行われます。

 

3,ファイル内の圧縮

cssで普通にコーディングを行うと、改行やスペースを多く含んだ状態になります。1枚のcssファイルにまとめられたあとは、その中の改行やスペース等を払い、さらに量が小さくなるようコードを圧縮する処理が行われます。

 

4,ハッシュ(ダイジェスト)の付与

変換され結合され圧縮されスリムになったファイル名に、ハッシュ(ダイジェスト)を付与する処理を最後に行います。アセットプリコンパイル後のpubulic/assets下のコンパイル済みのファイル名を見ると、暗号のようなハッシュが名前の後ろにくっついているのが分かります。ハッシュがつくことで、ブラウザに対しての「このデータは最新盤のものだよ」という印の意味になります。

 

結局アセットパイプラインの何が良いか

上記の処理が行われる仕組みがあることで、「開発者とブラウザが、どちらも分かりやすい状態のファイル形式で、仕事を行うことができる」という状況を生み出します。

アセットパイプラインのファイルの読み込み順や仕組みがよくわからなくて、思うような動きをしてくれず困ることもよくありますが、そもそもアセットパイプラインは開発者を助けてくれているフレームワークの一つであることを知っておくことで、より寛容な心でアセットパイプライン絡みのデバックを行えるようになれる気がします。

 

ペアプログラミングによるBootstrapを用いたブログアプリ作成

今回のグループワークは、「ペアプログラミングでブログアプリ作成」を行いました。「Bootstrapを用る」という点が一番の課題であり、アセットパイプラインを理解しているか否かが問われます。

Bootstrap自体は使ったことがあったのですが、今回使用したBootstrapが僕の知っているBootstrapと違いました。

start bootstrap

Start Bootstrap – Free Bootstrap Themes and Templates

 

このBootstrapすごすぎます。サイトデザインそのまま使えるBootstrapです。これ使ったら普通に綺麗なサイトになります。

ここのBootstrapはGitHubに載ってるcssファイルを引っ張って、自分のアプリのassetsファイル下に入れるのですが、ファイルが複数あり構成が少し複雑です。

授業後にこの「StartBootstrap」でscssを少しいじってみたので、その感想を書きます。

 

scssファイルについて

今まであまり触れてこなかったscss について、今回は少し学ぶことができました。「cssと少し違う」くらいの認識しかなかったのですが、scssは変数使って色々できたり、Railsのアセットパイプラインでその変数が読み込まれなかったりと、慣れが必要そうです。

 

パーシャルを利用できる

scssファイルはパーシャルを利用できます。先ほどのStartBootstrapの中の「stylish-portfolio」というデザイン使ってみます。

stylish-portfolio

BlackrockDigital/startbootstrap-stylish-portfolio

 

app/assets/stylesheets下の構成が、

stylesheets下の構成

このように多数のscssファイルで構成されています。(css以外にもjsファイルもあります。)

頭がアンダーバーから始まる「_bootstrap-overrides.scss」などのファイルは全てパーシャルであり、一番下の「stylish-portfolio.scss」ファイルの中をみると、

assets/stylesheets/stylish-portfolio.scss

@import "variables";
@import "mixins";
@import "global";
@import "masthead";
@import "sidebar";
@import "services";
@import "callout";
@import "portfolio";
@import "footer";
@import "bootstrap-overrides";

このようにパーシャルのファイル名が全てimportで記載されております。これで読み込みを行っているようです。

 

変数が利用できる

先ほどのファイルの中から一つ、「_callout.scss」というファイルを見てみます。

assets/stylesheets/_callout.scss

.callout {
  padding: 15rem 0;
  background: linear-gradient(90deg, fade-out($white, 0.9) 0%, fade-out($white, 0.9) 100%), image-url('bg-callout.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  h2 {
    font-size: 3.5rem;
    font-weight: 700;
    display: block;
    max-width: 30rem;
  }
}

上から3行目に「$white」という記述があります。これが変数です。

どこで定義されているか探しました。

 

assets/stylesheets/_variables.scss

// Variables

// Restated Bootstrap Variables

$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;

$primary: #1D809F !default;
$secondary: #ecb807 !default;

「 _variables.scss」というファイルにありました。このファイルで変数を作成し、各ファイルで利用しているようです。

 

まとめ

scssについて、今まではcssと同じように使って動いていたので、違いをあまり意識しませんでしたが、結構違うんんだなとBootstrapを通じて感じました。使えるようにならないとscssのコードを読み解くのも難しいです。今度のアプリのcss装飾では、少しscssのパーシャルとか使ってみて慣れていければと思います。

以上ありがとうございました。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA