個人開発③ ~トップページ（haml、SCSS）~
今回はトップページの作成です。
前回はアプリの立ち上げとして、REDAMEなどについて書きました。
まず、サイトの顔となるトップページを作成し、視覚で確認した方がイメージを持って作りやすいのでは？と考えました。
〜今回の記事の内容 〜
☆ Gem、（haml、SCSS）の導入
ルーティング、@importの設定
⬇︎
ヘッダー、フッターの作成
⬇︎
メインコンテンツの作成
haml、SCSSの導入
viewをhamlとscssで書いていくためにGemを導入します
Gemfileに’haml-rais’を記述して$ bundle install
$ bundle install
これで、hanlの導入は完了ですが、現在ファイルの語尾に”.env”がついているものもあると思います。”.env”ファイルがある方はターミナルで $ rails haml:replace_erbsを入力します。
これで、”.env”から”.haml”に変化しました
続いて、SCSSですが手順は単純で、app/assets/styleseetsにあるCSSファイルをSCSSファイルに名前の変更をするだけでOKです！
SCSSを使用する際は＠importを使います
application.scssへ＠import "フォルダ名/ファイル名";と記述することで作成したSCSSファイルを使用することが出来ます
※ファイルによって分けてもクラス名が同じだと、他のviewにも影響を及ぼすため、クラスの名付けには被らないように注意することが必要です
このアプリにはいくつもViewを用意する必要があったため、管理しやすいように細かくフォルダを分けることを意識しました
続いてルーティングを設定し、トップページを見れるようにします
config/routes.rbを開き、root "main#index" を記述します
viewは $ rails g controller コントローラー名 でコントローラーと一緒に作ることが出来ます、ターミナルにて実行
$ rails g controller main
view/mainのフォルダが作成されたので、その中にindex.html.hamlファイルを用意します
これでview/main/indexがhttp://localhost:3000/で立ち上げたときに表示されるようになります
ちょっと余談で通常ならコントローラーにもアクションを書き込む必要がありますが、root ~ の指定をしてる場合はそのまま表示することが出来ます
class MainController < ApplicationController
def index
end
end
indexアクションは用意しなくても大丈夫です
今回はここまで！続きはまた次回書いていきます！
