1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Rails-tutorial初心者(5章)(自分メモ)

Posted at

基本的に、2周目のときにブラッシュアップできたらなぁっておもっています。

開発環境

下記vagrantにて構築して利用しています。

$ cat /etc/system-release
CentOS release 6.10 (Final)
$ uname -a
Linux localhost.localdomain 2.6.32-754.3.5.el6.x86_64 #1 SMP Tue Aug 14 20:46:41 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux
$ rails -v
Rails 5.1.6
$ ruby -v
ruby 2.3.1p112 (2016-04-26 revision 54768) [x86_64-linux]

###5章スタート

curlコマンドとは何かしら?
なにかダウンロードとかをCLIできる。

Railsはassetsディレクトリ直下の画像をapp/assets/imagesディレクトリにある画像と紐付けています。これにより、ブラウザから見るとすべてのファイルが同じディレクトリにあるように見えるようになります。そして、このようなフラットなディレクトリ構成を採っていると、ファイルをより高速にブラウザに渡すことができるようになります。

・・・・なんでなんだろうか。

5.1.2

Bootstrapフレームワークでは、動的なスタイルシートを生成するためにLESS CSS言語を使っていますが、RailsのAsset Pipelineはデフォルトでは (LESSと非常によく似た) Sass言語をサポートします (5.2)。そのため、bootstrap-sassは、LESSをSassへ変換し、必要なBootstrapファイルを現在のアプリケーションですべて利用できるようにします10。

・LESS CSS?
→CSSの拡張版のイメージです。
ネストできたり、変数を使えてたりするCSSのことです。
変数は@hogehoge がLESSですが、railsだと$hogehogeを使います。

ここ参考 https://qiita.com/masarufuruya/items/d6125332cc3394b5177c

■課題/ 問題
・HTMLとCSSはドットインストールで勉強していたので、スラスラすすめた。
・パーシャルとかレンダーとかあたりのファイルの関係とかの全体観が抑えられていない。

SassとAsset Pipelineは、(開発効率のために切り分けられた) CSSの冗長な部分を圧縮し、本番環境に最適化した結果を出力する

5.2 Sassとアセットパイプライン

アセットディレクトリ、マニフェストファイル、プリプロセッサエンジンという、

** Sassについて **

素晴らしいCSS生成ツールのことです。

$ sass test.sccs test.css
でsccsからcssファイルを作成できる。
このときにtest.css.mapというマッピングの情報のファイルも一緒に生成される。

Sass(Syntactically Awesome Stylesheets) - wiki

ここ参考 https://qiita.com/masarufuruya/items/d6125332cc3394b5177c

** パーシャル **

ファイルを分割して管理しやすくしたり、DRYをなくす。
直訳は”一部分”
そのファイル分割したファイルをうまく組み合わてHTMLファイルやCSSファイルを作成する機能のこと
・・・・Railsのパーシャルは効率化のために使われ、別ファイルにマークアップを切り出すことができます。

下記のバラバラなファイルをがっちゃんこするやつ
app/views/layouts/_header.html.erb
app/views/layouts/_footer.html.erb
....等

app/views/layouts/application.html.erb

パーシャルをビューの一部に含めて出力するには、ビューでrenderメソッドを使用します。
<%= render "menu" %>

** Asset Pipeline?(アセットパイプライン) **

ここ参考 http://rails.hatenadiary.jp/entry/2013/03/03/125801

アセットパイプラインとは
Rails のアセットパイプライン(Assets Pipeline)は JavaScript や CSS、画像ファイルといった HTML に付随する細々としたファイル達(アセットファイル)を連結したり圧縮することで効率的にアクセスできるようにする仕組み(フレームワーク)です。

つまり??
・cssやjavascriptやimageファイルについて、うまく圧縮とかしてくれる。
・URLでアクセスするときに、いい感じに変換してくれる(assets配下にあるようにみえる)
・プリコンパイルをすることで、app/publicディレクトリ配下に実際のcssやjsが生成される)

** render(ヘルパーの機能) **

レンダリング(表示)の機能です。
ここ参考 http://rails.hatenadiary.jp/entry/2013/03/03/125801

ViewのHTML内で使う場合は、

<%= render "htmlファイル名" %>
このHMTLで表示(レンダリング)するって意味。

パーシャルと関係性がつよそうです。

5.3.3 名前付きルート

ここは理解不足です。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?