LoginSignup
4
2

More than 5 years have passed since last update.

Ruby on Rails 取り敢えず形にしてみる

Last updated at Posted at 2018-06-17

第一にメモ代わりに書いております。
それから、プログラミングの一歩で挫折しない人が増えれば楽しいという気持ちで
できるだけ自分なり噛み砕いてに仕組みを書いてみました。
書いている私も至らない点が多いと思いますので、誤記がありましたらご指摘いただけると幸いです。

作業環境
Mac OS
エディタ:Atom


1.これから作成するデータの保管場所を作成
mkdir フォルダ名(任意) + Enter
スクリーンショット 2018-06-17 18.09.21.png
ここではrutkoというフォルダを作成できました。


2.先程作ったフォルダ場所まで移動
cd フォルダ名(先程作ったやつ) + Enter

3.フォルダをAtomで起動
atom . + Enter
スクリーンショット 2018-06-17 18.24.51.png
Atomでフォルダを作業する準備ができました。
まだ何もファイルが出来ていない状態です。


3.Railsアプリケーションの環境を作成
rails new アプリケーション名(任意) + Enter
スクリーンショット 2018-06-17 18.31.23.png
ここではtwitterというアプリケーション名のフォルダが作成されその中に開発に必要なフォルダが入りました。

4.作成したアプリケーションフォルダまで移動
cd アプリケーション名 + Enter

5.Railsサーバー起動
rails s+ Enter
スクリーンショット 2018-06-17 18.41.15.png
ブラウザでlocalhost:3000を入力すると可愛いページが表示されます。


ここからはターミナルを2つ使います。(1つはサーバーを動かしてるのでほっておきましょう)
6.アプリケーションのTOP画面を作成
rails generate controller home top
スクリーンショット 2018-06-17 18.47.36.png
ブラウザでlocalhost:3000/home/topへアクセスするとTOP画面が表示されます。

rails generate controller ファイル名 ページ名
ページを表示するために必要なファイルを作るコマンドくらいの理解でよろしいと思います。

次はページの作成をしていきます。


7.Atomからページの見た目を変更(view)
twitter/app/views/top.html.erb
スクリーンショット 2018-06-17 19.39.49.png
viewsの中に作成したページファイルがあるので、htmlを書く要領でページの見た目を作成しましょう。


8.viewファイルをブラウザに反映させる(controller)
twitter/app/controller/concerns/home_controller.rb
スクリーンショット 2018-06-17 23.04.13.png
def ~ end ブラウザのhomeの中の~に views/home/~.html.erbを送信するアクションです。


9.URLを読み込む部分を作成(routing)
twitter/config/locales/routes.rb
スクリーンショット 2018-06-17 23.20.02.png
get 'home/top(URL)' => 'home(コントローラ名)#top(アクション名)'
localhost:3000/home/topのURLにhome_controller.rbで指示したtop.html.erbを表示してくださいと命令を出す感じです。

なので、URLの部分は書き換えても表示されます。
スクリーンショット 2018-06-17 23.27.50.png
こんな感じです。


10.各ページを作成する
rails generate controller user main
スクリーンショット 2018-06-17 23.42.15.png
rails generate controller user main
コントローラ名とアクションは同じものを使うことができないので違うものを入れる必要があります。
7.8.9の手順を使えば沢山のページを作ることができます。


4
2
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
4
2