はじめに
今回やるのは、reails newでアプリを作るところから、
Bootstrapを導入してデザインできるようにするところまで。
初心者なのでおかしい点があったらビシバシお願いしますm(_ _)m
実装する機能は下記の通り。
・tweetの投稿・投稿確認・編集・一覧表示・削除機能
・確認画面から投稿画面に戻った時、打ち込んだ内容が保持されるようにする
・1文字以上140文字以下の字数制限とエラーメッセージの表示
新しくアプリを作成
まずは新しくフォルダを作り、そこにrails newコマンドで新規アプリを作成していきます！
アプリ名は安直ですがrubyでtwitterを作るのでrubitterにしておきます（笑）
$ rails new rubitter -d postgresql
rails db:create
rails s
railsが表示させれるか確認
scaffold
scaffoldとは、Railsに備わっているコマンドの１つで、ルーティングやコントローラー、ビュー、モデルとテーブル（データベース）の記述やファイルなどを自動で作成してくれるコマンド
rails g scaffold murmur content:string
rails g scaffold モデル名 カラム名:データ型
rails db:migrate
DBをいじったら、これを忘れずに！！
ブラウザを開き、
localhost:3000/モデル名+s/new
にアクセスしてアプリを確認。
いじってみて正常に動くか確認。
ここで作られたのは新規作成(new)ページと一覧(index)ページ。
バリデーション機能の追加
バリデーションはモデルに記述。
class Murmur < ApplicationRecord
validates :content, presence: true
end
上記のようにすると、contentという値を確認し、空だったら保存を中止してくれる。
ここでは、１文字以上１４０以下という字数制限をつけたいので、以下のように書き換える。
class Murmur < ApplicationRecord
validates :content, length: { in: 1..140 }
end
バリデーションがその値を許したか許さなかったかによって、処理を分岐させる。
ここでは、
成功 => 一覧画面に移動し、”つぶやきを投稿しました！”と表示する
失敗 => 値を保持したまま入力画面に戻り、エラーメッセージを表示する
この内容をcontrollerに記述していく。
と思ったら、scaffoldで既に記述されていた！
viewにもメッセージ表示のcodeが書かれていた！！ありがてぇよぉ(´；ω；｀)
てことで機能の部分はオッケーなんでフロント部分に移りましょう♪
Bootstrapでデザインしていく
Yarnのインストール
jQueryの導入には、Yarn（JavaScriptパッケージマネージャー）が必要。
$ brew install yarn
実行したところ、already installedと怒られたので、2回目以降はしなくていいらしい。
なのでインストール方法は割愛。
jQueryの導入
$ yarn add jquery
node_modulesというフォルダが作成され、中にjQueryが格納されているか確認。
ちなみにGemfileのような管理ファイルとして、packege.jsonというファイルにもjQueryの記載が増えている。
jQueryを読み込むための設定
確認できたら、node_mojulesというフォルダの中に入ったjqueryを、Rails側で読み込む設定を行う。
Railsの場合は、マニフェストファイルに読み込むものを設定。
JavaScriptのマニフェストファイルは
app/assets/javascript/application.js
ここに、jquery.jsの居場所のパスを記述。
// 一部省略
// Read Sprockets README (https://github.com/rails/XXXXXXXXXXXXXXXXXXXXXX) for details
// about supported directives.
//
//= require rails-ujs
//= require turbolinks
//= require jquery/dist/jquery.js
//= require_tree .
※ //=require_tree . よりも上に記述
これでjQueryが使えるようになった！
Bootstrapの導入（やっと）
$ yarn add bootstrap@4
これでBootstrapの4系をインストールできました。
こちらはCSSとJSのマニフェストファイルに記述していく。
*= require bootstrap/dist/css/bootstrap.min.css
//= require bootstrap/dist/js/bootstrap.min.js
これで読み込みは完了！
いざ、coding！
スマホのような小さなものにもきちんとデザインが反映されるようにapplication.html.erbのheadの中に下記を追加。
<meta name="viewport" content="width=device-width">
あとはCSSとかで好きにデザインしていくだけ！！
ああ！やっとだ！
おつかれサマンサ〜