②Hello Worldの世界

この章のゴール

「Hello World」と表示するだけのシンプルなWebアプリケーションを作成する。

Hello Worldの世界

この章では、実際に「Hello World」と画面上に表示されるWebアプリケーションの実装を進めていきましょう。

この章での到達イメージは以下のページです。

Webアプリケーションの起動確認

まずは、作業ディレクトリを移動してください。

$ cd ~/hello_world

 

まずは、今回の作業をするにあたって、新たなブランチを作成します。

$ git checkout -b feature/display_hello_world
Switched to a new branch 'feature/display_hello_world'

 

もう一つターミナルを立ち上げて(Command + DもしくはCommand + N)、rails sで実際にWebサーバーを起動させておきます。

rails s等のコマンドが難しく感じる場合は、プロゲートで再度、復習をしてみてください。)

Command + D:タブで開く

Command + N:新規ウィンドウで開く

$ rails s
=> Booting Puma
=> Rails 5.2.3 application starting in development 
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.12.1 (ruby 2.6.3-p62), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:8080
Use Ctrl-C to stop

 

ブラウザで確認します。

http://localhost:3000/にブラウザでアクセスしてください。

次の画面が表示されていればOKです。

この画面が確認できたら、Webサーバーが無事に立ち上がっています。

今はルートパスにアクセスした際には、上記の画面が表示されるようになっています。

これを変更してみましょう。

TOPページを変更する

初めに、Vscodeで、今の作業フォルダを開きます。

以前に開いていたVscodeは閉じてください

まずは、ルーティングを追加します。

config/routes.rbを開いてください。

次に、以下のように以下のように記述して保存してください。

Rails.application.routes.draw do
  get '/', to: 'pages#index'
end

 

ルーティングとは、WebアプリケーションのURLにアクセスがあった際に、どのコントローラのどのアクションに飛ばすかを決めたルールのことです。

 

[box05 title=”MVCモデルのついて”]

モデル(M):アプリケーションが扱うデータの操作

ビュー(V):ユーザからの入力・画面出力

コントローラ(C):入力の受け取り、ModelとViewの操作

[/box05]

今回は、pages#indexpagesコントローラindexアクション)に飛ばすように設定しているので、実際にpagesコントローラとindexアクションを追加していきます。

まずは、作業ディレクトリに移動します。

$ cd ~/hello_world

 

次に、

$ rails g controller pages
Running via Spring preloader in process 10071
      create  app/controllers/pages_controller.rb
      invoke  erb
      create    app/views/pages
      invoke  test_unit
      create    test/controllers/pages_controller_test.rb
      invoke  helper
      create    app/helpers/pages_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/pages.coffee
      invoke    scss
      create      app/assets/stylesheets/pages.scss

 

このように、rails gというコマンドを入力することで、必要なコントローラやファイルを自動的に生成してくれます。

「rails g」は「rails generate」の略です。

rails generate controller pages」でも同じ意味になります。

それでは、実際にブラウザでトップページ「/」にアクセスしてみましょう。

どうでしょう?うまくアクセスできましたか?

以下のようにエラーが出たかと思います。

このエラーは「indexアクションがありません。」と怒られています。

先ほど、pagesコントローラは追加したのですが、indexアクションは追加していませんでした。

なので、indexアクションを追加します。

app/controllers/pages_controller.rbを開いて、以下の内容を保存します。

class PagesController < ApplicationController
  def index
  end
end

 

そして、再度ブラウザで「/」にアクセスします。

次は、以下のエラーが出たかと思います。

「対応するviewファイルがない」と怒られています。

なので、app > views >  コントローラ名のフォルダ配下に「アクション名.html.erb」を作成します。

$ touch app/views/pages/index.html.erb

 

そして、app/views/pages/index.html.erbを開いて、以下の通り保存します。

<h1>Hello World</h1>
<p>こんにちは</p>

 

すると、以下のように、保存した内容がブラウザで確認できるはずです。

では、ここまでの内容をコミットし、githubへプッシュしておきましょう。

$ cd ~/hello_world/


$ git add -A
$ git commit -m "hello worldと表示"
[feature/display_hello_world d6e08a7] hello worldと表示
 Committer: EC2 Default User <ec2-user@ip-172-31-18-105.us-east-2.compute.internal>
Your name and email address were configured automatically based
on your username and hostname. Please check that they are accurate.
You can suppress this message by setting them explicitly:

    git config --global user.name "Your Name"
    git config --global user.email you@example.com

After doing this, you may fix the identity used for this commit with:

    git commit --amend --reset-author

 86 files changed, 1282 insertions(+)
 create mode 100644 hello_world_app/.gitignore
 create mode 100644 hello_world_app/.ruby-version
 create mode 100644 hello_world_app/Gemfile
・
・
・
 create mode 100644 hello_world_app/test/test_helper.rb
 create mode 100644 hello_world_app/tmp/.keep
 create mode 100644 hello_world_app/vendor/.keep



$ git branch
* feature/display_hello_world
  master

pushします。

$ git push origin feature/display_hello_world
Counting objects: 96, done.
Compressing objects: 100% (81/81), done.
Writing objects: 100% (96/96), 22.70 KiB | 1.26 MiB/s, done.
Total 96 (delta 2), reused 0 (delta 0)
remote: Resolving deltas: 100% (2/2), done.
To github.com:wakitakomure/hello_world.git
   c84ba80..d6e08a7  feature/display_hello_world -> feature/display_hello_world

プルリクエストを作成

githubを開いて、「Compare & Pull request」→「Create pull request」を押します。

内容を確認して、問題なければマージします。

リモートのmasterブランチにマージされたので、ローカルでプルします。

$ git checkout master
Switched to branch 'master'
Your branch is up-to-date with 'origin/master'.


$ git pull origin master
remote: Enumerating objects: 8, done.
remote: Counting objects: 100% (8/8), done.
remote: Compressing objects: 100% (4/4), done.
remote: Total 4 (delta 1), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (4/4), done.
From github.com:wakitakomure/hello_world
 * branch            master     -> FETCH_HEAD
   12e422b..f904e59  master     -> origin/master
Updating 12e422b..f904e59
Fast-forward
 hello_world_app/app/assets/javascripts/pages.coffee       | 3 +++
 hello_world_app/app/assets/stylesheets/pages.scss         | 3 +++
 hello_world_app/app/controllers/pages_controller.rb       | 5 +++++
 hello_world_app/app/helpers/pages_helper.rb               | 2 ++
 hello_world_app/app/views/pages/index.html.erb            | 2 ++
 hello_world_app/config/routes.rb                          | 2 +-
 hello_world_app/test/controllers/pages_controller_test.rb | 7 +++++++
 7 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 hello_world_app/app/assets/javascripts/pages.coffee
 create mode 100644 hello_world_app/app/assets/stylesheets/pages.scss
 create mode 100644 hello_world_app/app/controllers/pages_controller.rb
 create mode 100644 hello_world_app/app/helpers/pages_helper.rb
 create mode 100644 hello_world_app/app/views/pages/index.html.erb
 create mode 100644 hello_world_app/test/controllers/pages_controller_test.rb

これで、ローカルのmasterブランチにマージされたので、feature/display_hello_worldブランチを削除しておきます。

$ git branch -D feature/display_hello_world
Deleted branch feature/display_hello_world (was d6e08a7).

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA