簡単なWebアプリケーションを立ち上げてみよう

ここからの章では、いよいよWebアプリケーションを開発していきます。

前提として、Progateの「Ruby on Rails」の学習が修了している前提での内容となるので、難しいと感じる際は、そちらを再度復習してください。

また、Webアプリケーションの構成は下記の通りです。

[box02 title=”Webアプリケーションの構成”]

バックエンド:Ruby on Rails

フロントエンド:HTML、CSS、Javascript、Bootstrap

[/box02]

この章のゴール

・railsによるWebアプリケーション開発の初期設定を完了させる。

Webアプリケーションの初期設定

最初は、画面上に「Hello World」と表示するシステムをRuby on Railsを用いて開発し、Webアプリケーション開発を学習していきます。

まずは、Webアプリケーションを開発する初期設定を行い、そのプルリクエストを作成します。

githubの初期設定

railsのプロジェクトを作成します。

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

cd

まずは、今回の学習用に、新たな作業ディレクトリを作成します。

$ mkdir hello_world
$ cd hello_world/

 

また、今回の学習で利用するgithubのリポジトリを作成しておきましょう。

githubを開き、画面左上の「New」から新たなリポジトリを作成します。

次に、リポジトリの設定を行い、「Create repository」をクリックします。

すると、以下の画面になるので、枠で括った箇所をコピーして、ターミナルにペーストします。

(右上のアイコンをクリックすることで、全ての行を一括でコピーすることができます。)

ターミナルで、コピーした内容を貼り付けます。

$ echo "# hello_world" >> README.md


wakitanoMacbookPro:hello_world alto$ git init
Initialized empty Git repository in /Users/alto/hello_world/.git/


wakitanoMacbookPro:hello_world alto$ git add README.md


wakitanoMacbookPro:hello_world alto$ git commit -m "first commit"
[master (root-commit) b33c6b8] first commit
 1 file changed, 1 insertion(+)
 create mode 100644 README.md


wakitanoMacbookPro:hello_world alto$ git remote add origin git@github.com:wakitakomure/hello_world.git
wakitanoMacbookPro:hello_world alto$ git push -u origin master

Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 228 bytes | 228.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)




To github.com:wakitakomure/hello_world.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

 

では早速、railsでWebアプリケーションを立ち上げるブランチを作成していきます。

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


$ git branch
* feature/create_rails_app
  master

 

railsをインストールする

まずは、最初にrailsをインストールします。

現時点(2019年8月時点)でのrailsの最新バージョンは5.2.2なので、バージョンを指定してインストールします。

$ gem install rails -v 5.2.2
Fetching erubi-1.8.0.gem
Fetching actionpack-5.2.2.gem
Fetching mimemagic-0.3.3.gem
Fetching arel-9.0.0.gem
Fetching actionview-5.2.2.gem
Fetching railties-5.2.2.gem
・
・
・
Installing ri documentation for actionmailer-5.2.2
Parsing documentation for rails-5.2.2
Installing ri documentation for rails-5.2.2
Done installing documentation for activesupport, erubi, actionview, actionpack, railties, mimemagic, marcel, arel, activemodel, activerecord, activestorage, actioncable, activejob, actionmailer, rails after 11 seconds
15 gems installed

 

次に、こちらもバージョンを指定して、新たなrailsアプリを作成します。

rails newコマンドによって、Webアプリケーションの開発に必要なファイル群が、自動的に生成されます。

このような警告が出た場合は「Enter」を押してください。

$ rails _5.2.2_ new .
      create  
      create  README.md
      create  Rakefile
      create  .ruby-version
      create  config.ru
      create  .gitignore
      create  Gemfile
         run  git init from "."
Initialized empty Git repository in /home/ec2-user/environment/hello_world/hello_world_app/.git/
      create  package.json
      create  app
      create  app/assets/config/manifest.js
    ・
      ・
      ・
      create  storage/.keep
      create  tmp/storage
      create  tmp/storage/.keep
      remove  config/initializers/cors.rb
      remove  config/initializers/new_framework_defaults_5_2.rb
         run  bundle install
The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
Fetching gem metadata from https://rubygems.org/............
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies....
Using rake 12.3.3
Using concurrent-ruby 1.1.5
・
・
・
Using turbolinks-source 5.2.0
Using turbolinks 5.2.0
Using uglifier 4.1.20
Using web-console 3.7.0
Bundle complete! 18 Gemfile dependencies, 78 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
Post-install message from chromedriver-helper:

  +--------------------------------------------------------------------+
  |                                                                    |
  |  NOTICE: chromedriver-helper is deprecated after 2019-03-31.       |
  |                                                                    |
  |  Please update to use the 'webdrivers' gem instead.                |
  |  See https://github.com/flavorjones/chromedriver-helper/issues/83  |
  |                                                                    |
  +--------------------------------------------------------------------+

         run  bundle exec spring binstub --all
* bin/rake: Spring inserted
* bin/rails: Spring inserted

プルリクエストの作成

では、一旦ここまでの内容をコミットして、githubでプルリクエストを作成しましょう。

$ git add -A 
$ git commit -m "rails newで、必要なファイル群を作成"
[feature/create_rails_app 312092c] rails newで、必要なファイル群を作成
 80 files changed, 1259 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 push origin feature/create_rails_app
Counting objects: 88, done.
Compressing objects: 100% (73/73), done.
Writing objects: 100% (88/88), 21.83 KiB | 1.28 MiB/s, done.
Total 88 (delta 2), reused 0 (delta 0)
remote: Resolving deltas: 100% (2/2), done.
remote: 
remote: Create a pull request for 'feature/create_rails_app' on GitHub by visiting:
remote:      https://github.com/wakitakomure/hello_world/pull/new/feature/create_rails_app
remote: 
To https://github.com/wakitakomure/hello_world.git
 * [new branch]      feature/create_rails_app -> feature/create_rails_app

 

次に、githubにアクセスすると、以下のように、pushしたブランチ名が表示されます。

ここで「Compare & Pull request」をクリックして、プルリクエストを作成します。

プルリクエストが作成されると、以下の画面に遷移します。

また、「File changed」をクリックすると、以下ファイルの差分(自分が追加した箇所や変更を加えた箇所)を確認することができます。

問題なければ、masterブランチへマージを行います。

上記のように、マージされるとMergedと表示が変わります。

これで、リモートのmasterブランチに、差分が反映されます。

次に、cloud9上のターミナルに戻ります。

$ git branch
* feature/create_rails_app
  master

今、ローカルのfeature/create_rails_appブランチにいるので、masterブランチに切り替えます。

$ git checkout master

 

次に、ローカルのmasterブランチを最新にします。(= プルします

 $ git pull origin master
remote: Enumerating objects: 1, done.
remote: Counting objects: 100% (1/1), done.
remote: Total 1 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (1/1), done.
From github.com:wakitakomure/hello_world
 * branch            master     -> FETCH_HEAD
   c84ba80..12e422b  master     -> origin/master
Updating c84ba80..12e422b
Fast-forward
 hello_world_app/.gitignore                                             |  31 +++++++++
 hello_world_app/.ruby-version                                          |   1 +
 hello_world_app/Gemfile                                                |  62 ++++++++++++++++++
・
・
・
 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

 

これで、ローカルのmasterブランチが最新になったので、次の開発は、このmasterブランチから新たなブランチを切って、開発を進めます。

最後に、不要になったfeature/create_rails_appブランチは削除しておきましょう。

$ git branch -D feature/create_rails_app
Deleted branch feature/create_rails_app (was 6b7c97c).

 

次は「Hello World」と画面上に表示するアプリを開発していきましょう。

コメントを残す

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

CAPTCHA