LoginSignup
1
0

More than 3 years have passed since last update.

@AsagiriDesign(Atsushi Asagiri)

2日に分けて、初めてのRuby on Rails まずは動かしてみる（初心者向け）

Last updated at Posted at 2018-08-03

今回のドキュメントのゴール

  • Railsで簡単なアプリを作成して、「未経験」状態から「なんか色々できそう♪」という体験をする事

対象の方

  • Rails未経験で、ちょっと触ってみようかなという方
  • 環境 / Mac
  • RubyやRails自体のインストールは終わったものとします環境構築ので、別箇所参照に構築お願いします
    • （Rubyのバージョン管理可能なHomebrew環境が推奨です）

その他

  • 覚書きですので、読みにくいかも知れませんがご了承ください
  • 参考元 ドットインストール
    • 基本ドットインストールに添っていますが、仮想ローカルサーバは立てていません。
    • コマンドなどそれに該当する場所は飛ばして最も簡単なやり方にしています (rails s など)

導入してみましょう

作業フォルダ作成からRails立ち上げまで

  • まずは重い腰を上げて気持ちを立ち上げる

  • 作業フォルダを作成する

  • そこに移動
    $ cd ~/作業フォルダパス

  • Railsインストール
    $ gem install rails --no-document (ドキュメント不要な場合--no-documentを付ける)

  • 確認
    $ rails -v（表示されていればOK）

  • Railsフォルダ作成
    $ rails new myapp

  • Rails作業パスに移動
    $ cd myapp

  • バックグラウンドサーバー立ち上げ
    $ rails s

  • 停止する時は
    Ctr + C

  • Rails画面確認
    ブラウザー　URL欄に入力→ http://localhost:3000/

ヲレからオマヘえ贈る「おめでとうさん」

バックグラウンドで立ち上がりっぱなしにしておくやり方

  • ターミナルを閉じても継続します $ $ rails s -d ##### ↑を停止させる
  • プロセス番号調べる $ ps aux | grep puma (RailsはPumaというWebサバーで動いている)
    • 表示結果例 User 16616 0.0 0.0 2432804 796 s003 S+ 6:54PM 0:00.00 grep pumaなど出て来る 0.0 の左側の数字をKillする
    • $ kill -9 16616
  • ブラウザで再確認
  • （止め方がややこしいので個人的には基本使わない方向です）


簡単なメモアプリ作成してみようではありませんか

フィル作成

  • scaffold(なんか簡単にいい感じにしてくれるの)を使います

    • Memoアプリで一行タイトルと複数行テキストフィールドを作成 $ rails g scaffold Memo title:string body:text

  • データの構造を反映させる

    • rails db:migrate(マイグレートって読むらしい)　

  • サーバー立ち上げ
    $ rails s

  • サーバー表示
    http://localhost:3000/memos/new (複数形(複数扱うから？)として/memos/ に入り、さらに新規作成ページとして/new を表示)

    （マウスツールの半円が右下に入り込んでいてごめんなさい）

UIまわり 表示関連ファイル

HTML

.html.erb(ルビー用のHTMLという拡張子みたいです)
~/myapp/app/views/memos/new.html.erb

<h1>New Memo</h1>
<%= render 'form', memo: @memo %>
<%= link_to 'Back', memos_path %>

CSS

~/myapp/app/assets/stylesheets/scaffolds.scss

プチUI改修してみる（最上部に追加）
// CDNのリセットCSS
@import "http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css";

// フォームスタイルの初期化
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
  background: none;
  border: none;
}

// BootStrapを設置
@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
フォーム関連の該当URL myapp/app/views/memos/_form.html.erb

BootStrapスタイル追加

<div class="actions">
<button class="btn btn-primary" type="submit">
<%= form.submit %>
</button>
</div>

ボタンUI変更後

この要領でUIのブラッシュアップも可能という事を確認

UIブラッシュアップ

  • フォームスタイル参考
  • Gitファイル公開
  • これ系スタイルのCodePenスタイル（背景画像&グラデーション&半透明デザイン）も公開しています

See the Pen gradient & image by Pistol (@pistol) on CodePen.

See the Pen 背景画像 要素上下左右センタリング by Pistol (@pistol) on CodePen.


  • 多分CSSファイル設計は別途必要かもですが、何が出来るか目視出来たので、ひとまずここまでメモメモアプリは一旦終了
  • その他メモアプリには　edit（編集）　show（閲覧）画面などあります


備考

  • ログを見るコマンド $ tail log/development.log
  • gitも同時に組み込まれているみたいなので、一人用だとしてもまめにGit管理した方が手戻りなさそうですね
    • ちなみに私はgitと打つのも省略したいので、ターミナル立ち上げた習慣に alias g='git'と打って、g st（stはグローバルエイリアスで設定したstatus）などでGit管理しています。
    • （↑ alias g='git'はグローバルでデフォルトに出来なかったんですよねー、２文字以上のエイリアスはだいたいいけたのですが）
  • Railsアプリを公開しようと思えばレンタルサーバー選定が必要になってくるようです
    • 導入簡単なherokuか、導入フロー覚えるのも兼ねてAWSに今度挑戦したいと思います。
scaffoldって初めて聞きました。。こっそり調べてみましょう

「scaffold？　何それ？」って言ったら笑われた

2日目

  • １回目参照
  • 前回に続き、今度はscaffoldを使わずにRailsアプリを作ってみます
  • ※覚書きですので、読みにくいかも知れませんがご了承ください

作業ファイル作成

  • 作業ファイル作成します
  • 作業パスに移動します

Railsアプリ用ファイル作成

$ rails new myblog　
- ざばーっとMVCに関するファイルが色々作成されます

モデルの作成をしてみよう

モデル作成の基本コマンドは$ rails g model
- 今回は以下を打ちます
$ rails g model Post title:string body:text（g = generate略）
- データ型:string text /（タイトルタイトル）string=1行テキスト　(本文) text=複数行テキスト
- model = 個々のデータの構造を定義するので、単数「Post」（Postsでは無い）
- モデル関連ファイルが色々作成される

データの構造を反映させる

  • rails db:migrate(マイグレートって読む)　
    • RailsだとSQLまわりの諸々をこれで自動実行してくれるらしい

データを格納

$rails c　(略：Console)

命令モード:
- Postオブジェクト作成
$ p = Post.new(title: 'title 1' , body: 'body 1') Enter
- SQL文が発行される
結果：=> #<Post id: nil, title: "title 1", body: "body 1", created_at: nil, updated_at: nil>
$ p. save（データの保存）
INSERT INTO "posts" ("title", "body", "created_at", "updated_at") VALUES (?, ?, ?, ?) [["title", "title 1"], ["body", "body 1"], ["created_at", "2017-11-10 12:03:42.176718"], ["updated_at", "2017-11-10 12:03:42.176718"]]
- created_at updated_at フィールドはRailsが自動生成

↑上記２工程合算のコマンド：
$ Post.create(title: 'title 2', body: 'body 2')

確認コマンド：
$ Post.all

sqlite抜け方
$ .quit

  • このような流れはSQLを意識しないActive Record（アクティブレコード）という仕組みらしい

データの確認 初期データ設定

データベースへ接続
$ rails db

表示結果:sqlite>
$ .tables
表示結果:
ar_internal_metadata posts schema_migrations
− ※作成Modelは単数形の「Post」だが、テーブル名はPostを複数格納するので「posts」（複数形になる）

中身を確認
$ select * from posts;
表示結果:

1|title 1|body 1|2017-11-10 12:03:42.176718|2017-11-10 12:03:42.176718
2|title 2|body 2|2017-11-10 12:08:26.765221|2017-11-10 12:08:26.765221

一回ドロンします
$ .quit

ターミナルを使わずファイルで初期データ設定してみよう

  • myblog/db/seeds.rb db配下のseeds.rbにて作業
    • 最下部に追加
    • 5回ループさせてみましょう 5.times do |i| Post.create(title: "title #{i}" , body: "body #{i}") end

  • ここで一旦現在のDBを削除

    • $ rails db:migrate:reset

  • seedsファイルで作成したDBを流し込む

    • $ rails db:seed

  • 確認
    $ rails db
    $ sqlite> select * from posts;

結果：


1|title 0|body 0|2017-11-10 17:26:51.814847|2017-11-10 17:26:51.814847
2|title 1|body 1|2017-11-10 17:26:51.817256|2017-11-10 17:26:51.817256
3|title 2|body 2|2017-11-10 17:26:51.818751|2017-11-10 17:26:51.818751
4|title 3|body 3|2017-11-10 17:26:51.820228|2017-11-10 17:26:51.820228
5|title 4|body 4|2017-11-10 17:26:51.821700|2017-11-10 17:26:51.821700

コントローラーの作成/ルーティング

  • 初期データが用意出来たので、このデータ表示したい
  • Controllerを作ってデータを取得する $ rails g controller Posts　(複数形) 結果： controller ディレクトリに posts_controller.rbが作成され 、 views のディレクトリに posts 用のディレクトリ作成された

「ルーティング」= どのURLにアクセスされたら、コントローラーのどのメソッドを実行するかの設定

作業ファイル：
~/myblog/config/routes.rb

end 直前に以下追加
resources :posts

確認
$ rails routes(読み：ルーツ or ラウツ)

結果の先頭部：

Prefix Verb URI Pattern Controller#Action
posts GET /posts(.:format) posts#index

↑　訳：GETで/postsにでアクセスして来たら、postsコントローラーのindexメソッドでアクションしてください

コントローラーのアクションの設定/アクションの作成

  • 記事一覧を表示したい 作業ファイル /app/controllers/posts_controller.rb
  def index
    @posts = Post.all.order(created_at: 'desc')
  end
  • メソッド = def index
  • Post.all　> 全てのデータの取得
  • order(created_at: 'desc') > 順番の制御/新しいもの順

ビューの作成

app/views/posts/ に index.html.erbを作成 (Cmd+Fでファイル作成)
記述:

<h2>My Posts</h2>
<ul>
<% @posts.each do |post| %>
<li>
<%= post.title %>
</li>
<% end %>
</ul>

- アクションで作成したインスタンス変数 @posts をターゲットにする
- −基本表記 <%= 表記内容　%>
- Ruby記法でループさせるeach do別途Rubyの基礎学習が必要
- 大枠は<% @posts.each do |post| %><% end %>
- この中でタイトルを表示させる
- <%= %>:この中に書いたRuby式を評価しながら表示してくれる書き方

表示：
http://localhost:3000/posts

結果：ちゃんと逆順に並んでいますね

パスの設定

config/routes.rb　に以下追加
root 'post#index'

ルーティングの確認
$ rails routes
表示結果：最下部
root GET / posts#index ※複数形

結果的に
http://localhost:3000/と
http://localhost:3000/posts
は同じ表示ページになります

備考

  • 単語が複数形なのか単数形なのか、どのファイルを作るかというルールがRailsでは定められている
    • この設計思想のことを Rails では Convention over Configuration (CoC) と言う
    • このような規約を決めておくことでコードを書く量を減らしましょう、という狙いらしい

ブログ画面のカスタマイズ

  • 表示された画面の設定箇所は/layouts/ 配下の application.html.erb で全体のテンプレートが実は読み込まれている
  • Viewで書いたコードは、ここの<%= yield %>で読み込まれる仕組み
  • こいつをクラスで囲む <div class="container"> <%= yield %> </div>
  • 編集CSSは　/app/assets/stylesheets/application.css
  • 適当に編集する UI改修例：

ひとまず今回はここまでです。

Railsで出来る事が何となく体感出来れば楽しくなってきますね

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
Sign upLogin
1
0