かきたくぶろぐ

凡人目線の素人ぶろぐ

プログラミング未経験のHTMLコーダーがRailsチュートリアルをやってみた - 1章

Railsチュートリアル Ruby Ruby on Rails

なぜはじめたの？

現在のスキル(2018/10)

  • HTML(pug) / CSS(sass) → 業務で使用経験あり。
  • JavaScript → 個人的に学習はしているが、業務での使用経験は無し。
  • Ruby/Ruby on Rails → 知識ゼロ。
  • GIt → 業務で使用経験あり。

まとめると、Gitが使えてHTMLとCSSだけは書けるが他は業務経験が全くない、といった感じです。

早速はじめてみよう！

Ruby on Rails とは

Rubyプログラミング言語で記述された、Web開発フレームワーク。

開発環境

チュートリアルではAWS Cloud9が推奨されていたが、できそうだったのでローカルで構築する。
以下構築手順 (※Homebrewインストール済)

rbenvインストール

$ brew install rbenv

.bash_profileにパスを通す。

$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi' >> ~/.bash_profile

.bash_profileってなんぞ？
ログインシェル（PCを起動したときにデフォルトに指定されるシェル）をbashにしている場合はログイン（起動）時に以下のような順番で設定ファイルが読み込まれ、PATHを通す、エイリアスを定義する、プログラムを実行するなどの設定が自動で設定される。
参考サイト

以下もインストール

$ brew install ruby-build
$ brew install rbenv-gemset

readlineのインストール

$ brew install readline

readlineってなんぞ？
ターミナル上でrubyのコマンドを打つことの出来るirbで、日本語を使えるようにします。
参考サイト
irbとは

Rubyのインストール

Rubyの公式サイトに行き、安定版のバージョンを確認。
https://www.ruby-lang.org/ja/downloads/

インストール

$ rbenv install [バージョン]

rbenv の再読み込み

$ rbenv rehash

defaultで使うrubyのバージョンを指定

$ rbenv global [バージョン]

Railsのインストール

バンドルインストール

$ gem install bundler --no-document

Railsインストール(現在チュートリアルで使用している5.1.6をDL)

$ gem install rails --version="5.1.6" --no-document

--no-documentとは ドキュメントをインストールしない設定 インストールをはやくする

最新版を入れている場合はチュートリアルに合わせて他バージョンをインストール

ローカルにあるRailsのバージョンを確認

$ gem list rails

バージョンを指定してインストール(5.1.6をインストール)

$ gem i -v 5.1.6 rails

チュートリアルで使用するディレクトリに移動し、バージョンを指定してrailsアプリケーションを新規作成

rails _5.1.6_ new hello_app

railsバージョン5.1.6を使用したhello_appフォルダが作成される。

Bundlerを実行して必要なGemをインストール

Bunderとは？
Gemパッケージの管理に使用

じゃあGemとは？
Ruby言語用のパッケージ管理システム

バージョン管理の仕組み

特定のバージョンを指定しない場合

最新のものがインストールされる。

>= 1.3.0で指定した場合

1.3.0以上であれば最新バージョンがインストールされ、それ以下の場合は最新のものがインストールされる

~> 4.0.0で指定した場合

バージョンが4.0.0より大きく、4.1より小さい場合にインストールされる。
マイナーバージョンの更新のみアップグレードされる。

チュートリアルに記述してあったGemfileを丸っとコピペ。

source 'https://rubygems.org'

gem 'rails',        '5.1.6'
gem 'puma',         '3.9.1'
gem 'sass-rails',   '5.0.6'
gem 'uglifier',     '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks',   '5.0.1'
gem 'jbuilder',     '2.6.4'

group :development, :test do
  gem 'sqlite3',      '1.3.13'
  gem 'byebug', '9.0.6', platform: :mri
end

group :development do
  gem 'web-console',           '3.5.1'
  gem 'listen',                '3.1.5'
  gem 'spring',                '2.0.2'
  gem 'spring-watcher-listen', '2.0.1'
end

# Windows環境ではtzinfo-dataというgemを含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

appディレクトリでbundleインストール

$ bundle install

railsサーバーを起動。 (別のターミナル画面で実行するのが推奨)

$ rails server

Yay! You're on Rails!!!!!!!!!!!!

Model-View-Controller(MVC)

railsの採用しているアーキテクチャパターン。
rubyもrailsも初心者だけどMVCは聞いたことある。
チュートリアルを進めるとこのパターンが体験できる...のか？

Hello, world!

いつもここからはろーわーるど。
Applicationというコントローラーに表示したい文字列を返すhelloアクションを作成。

# app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

  def hello
    render html: "hello, world!"
  end
end

次にデフォルトページ(Yay! You're on Rails!!!!!!!!!!!!)の代わりにこのhelloアクションを使用するように書き換える。
ルーター (router)を編集。

# config/routers.rb
Rails.application.routes.draw do
# コントローラー名:application,アクション名:hello
  root 'application#hello'
end

ルーターとは コントローラーとブラウザの間に配置され、ブラウザのリクエストをコントローラーに振り分け(=ルーティング)をする。

hello, world!

Git

ここでは割愛。

デプロイ

昔はデプロイ作業は大変だったみたいだけど、ここ数年で簡単になったみたい！素敵！
チュートリアルではHerokuを使ってデプロイする。

Herokuのセットアップ

PostgreSQLデータベースを使用。
そのために本番環境にpg gemをインストールして、PostgresSQLと通信できるようにする。

group :production do
  gem 'pg', '0.20.0'
end

HerokuはSQLiteがサポート外の為、sqlite3 gemが本番環境に導入されないよう設定。

group :development, :test do
  gem 'sqlite3', '1.3.13'
  gem 'byebug',  '9.0.6', platform: :mri
end

言われるがまま行う。 開発環境/本番環境で使う物をきっちりわけ無駄なものは導入しないようにってことかな。
(間違えてサポート外のものを導入した場合はどうなるのだろうか)
本番用のgemをローカルにはインストールしないようにする為---without productionをつけてbundle install

$ bundle install --without production

なぜ今またbundle install？
pg gemを追加したことやRubyバージョンを指定したことをGemfile.lockに反映させないと、本番環境へのデプロイで失敗してしまうため

変更内容をコミット。
Herokuのユーザー登録を行い、インストール

$ brew install heroku/brew/heroku

インストール確認。

$ heroku --version

herokuコマンドでログインしてSSHキーを追加。

$ heroku login
$ heroku keys:add

heroku createコマンドを実行し、Herokuサーバーにサンプルアプリケーションの実行場所を作成。

$ heroku create

herokuにデプロイする

$ git push heroku master

hello, world!

...簡単！
人生初デプロイ！

アプリケーションの名前を変更する。

$ heroku rename アプリケーション名

1章はここまで。
開発環境を作って、コマンドの説明があって、Gitの解説があり、デプロイを行い本番に反映するまで行うとは1章なのに盛りだくさんですごい。
わからない単語祭りで頭パンパンになっても焦らずに完走を目指したいと思います。
(場合によっては「わからん！スルーだ！」の精神で)

2章へ続く