RailsでToDoサービスを作ろう(第2回)〜scaffoldでやる事のCRUD作る〜
![にゅ~ぶる](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2022/11/7BRUtb4r_400x400.jpg)
こんにちは、にゅ〜ぶるです。
こんにちは〜、ぶるこだよ〜💕
![ぶるこ](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2020/03/4gSmS8r-1-300x300.jpg)
![にゅ~ぶる](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2022/11/7BRUtb4r_400x400.jpg)
さて、第2回目ですね!前回は、こちら
今日は、「scaffoldでやる事のCRUD作る」について、進めていきたいと思います!
![にゅ~ぶる](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2022/11/7BRUtb4r_400x400.jpg)
ToDoリストのメインとなる、タスクでCRUDを作っていくよ!
わ〜い💕
ついに画面が出来ていくんですね!!
![ぶるこ](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2020/03/4gSmS8r-1-300x300.jpg)
![にゅ~ぶる](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2022/11/7BRUtb4r_400x400.jpg)
RailsにはScaffoldという、コマンドひとつでCRUDが出来ちゃう便利機能があるんだ。
すご〜い💕
![ぶるこ](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2020/03/4gSmS8r-1-300x300.jpg)
![にゅ~ぶる](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2022/11/7BRUtb4r_400x400.jpg)
コマンドは、こんな感じ
rails generate scaffold モデル名 カラム名1:データ型1 カラム名2:データ型2 …
![にゅ~ぶる](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2022/11/7BRUtb4r_400x400.jpg)
今回は、タスク(Task)で作っていくよ。
カラムとしては、何がいると思う?
そうねぇ〜
タスク名は必要でしょ〜
あとは〜詳細?
締め切り日?
![ぶるこ](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2020/03/4gSmS8r-1-300x300.jpg)
![にゅ~ぶる](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2022/11/7BRUtb4r_400x400.jpg)
そうだね!そんな感じのカラムで設定していくよ。
rails generate scaffold Task title:string content:text deadline:date
タスク名…titleというカラム名の文字列型(string)
詳細…contentというカラム名の複数行入力可能にしたいので、テキスト型(text)
締切日…dedlineというカラム名の日付入力にしたいので、日付型(date)
![にゅ~ぶる](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2022/11/7BRUtb4r_400x400.jpg)
このコマンドを、プロジェクトのルートディレクトリで実行してね。
ファイルやディレクトリを自動で作成してくれるよ!
これだけで良いの?
![ぶるこ](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2020/03/4gSmS8r-1-300x300.jpg)
![にゅ~ぶる](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2022/11/7BRUtb4r_400x400.jpg)
うん。これだけなんだ。簡単でしょ?
簡単に出来ちゃうので注意も必要だよ。理解しないまま進んでしまうからね…
確かにそうですね!
どんなフィイルが作られたのか、そのファイルが何を意味しているのか、
ちゃんと調べないとね!
![ぶるこ](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2020/03/4gSmS8r-1-300x300.jpg)
![にゅ~ぶる](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2022/11/7BRUtb4r_400x400.jpg)
うんうん!
これはなんのファイル?って疑問があれば質問してね!
今回は長くなるので省略するけど、コメントどうぞ。
![にゅ~ぶる](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2022/11/7BRUtb4r_400x400.jpg)
これで、ソースは出来たので、次はDBを作っていくよ。
次のファイルを確認してね。
config/database.yml
ここに、DBへの接続情報が含まれているから、
default: &default adapter: mysql2 encoding: utf8mb4 pool: <= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>; username: root password: socket: /tmp/mysql.sock development: <<: *default database: todo_development
![にゅ~ぶる](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2022/11/7BRUtb4r_400x400.jpg)
この、usernameとpasswordを皆さんの設定に合わせてくださいね。
![にゅ~ぶる](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2022/11/7BRUtb4r_400x400.jpg)
設定を合わせた状態で、まずはDBを作成するために、次のコマンドを実行しましょう。
rails db:create
![にゅ~ぶる](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2022/11/7BRUtb4r_400x400.jpg)
すると、こんなログが出るよ。
Created database 'todo_development' Created database 'todo_test'
![にゅ~ぶる](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2022/11/7BRUtb4r_400x400.jpg)
これでDBが作成されました。
DB接続ツールなどを使って確認してみてください。
![にゅ~ぶる](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2022/11/7BRUtb4r_400x400.jpg)
そして次は、テーブルを作成してきます。
これもコマンドひとつで出来ちゃうんですよ!
rails db:migrate
![にゅ~ぶる](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2022/11/7BRUtb4r_400x400.jpg)
このログはこんな感じ。
== 20200429055957 CreateTasks: migrating ====================================== -- create_table(:tasks) -> 0.0297s == 20200429055957 CreateTasks: migrated (0.0298s) =============================
![にゅ~ぶる](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2022/11/7BRUtb4r_400x400.jpg)
これだけでテーブルも出来ました!
実はこれで完成なんですよ!
なんやてー!!
![ぶるこ](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2020/03/4gSmS8r-1-300x300.jpg)
![にゅ~ぶる](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2022/11/7BRUtb4r_400x400.jpg)
では早速、「rails s」して、ブラウザで「http://127.0.0.1:3000/」にアクセスしてみてね。
前のRails画面から変わってないよ〜?
![ぶるこ](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2020/03/4gSmS8r-1-300x300.jpg)
![にゅ~ぶる](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2022/11/7BRUtb4r_400x400.jpg)
おっと失礼。
Taskの画面を作ったので、「http://127.0.0.1:3000/tasks」にアクセスしてみて!
おおお!
![ぶるこ](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2020/03/4gSmS8r-1-300x300.jpg)
![](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2020/04/スクリーンショット-2020-04-29-16.25.10-1.png)
しょぼ…
![ぶるこ](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2020/03/4gSmS8r-1-300x300.jpg)
![にゅ~ぶる](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2022/11/7BRUtb4r_400x400.jpg)
まぁ確かに…
画面デザインはデフォルトのままで行くから勘弁してください笑
CRUDの全ての機能が出来上がってるから、実際に使ってみてよ!
ほんとだ〜💕
機能はちゃんと出来てるね!
デザインは…まぁ…追々…笑
![ぶるこ](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2020/03/4gSmS8r-1-300x300.jpg)
![にゅ~ぶる](https://newburu.sakura.ne.jp/wp/wp-content/uploads/2022/11/7BRUtb4r_400x400.jpg)
今回はここまでだよ。お疲れ様でした!
次回は、「ユーザを紐付ける」お楽しみにっ!!
最後まで読んでくれてありがとうございました!
現在、Railsのチュートリアル的な感じで、
「Todoサービスを作る!」をテーマにお送りしております。
アジェンダは、こちら
質問等ありましたら、コメントなりTwitterなりで頂ければ対応させて頂きますので、遠慮なく利用くださいね。
ディスカッション
コメント一覧
まだ、コメントがありません