おっさん初学者のRailsチュートリアル学習記録(1章)

プログラミング年少組のど素人が、アウトプット用に素人目線の解説を書いていきます。
自分が自分に教えていることを想像しながら進めていきます。
下記と同じような境遇の方であれば参考になるかも

• まっさらなプログラミング初学者目線
• オール独学
• 勉強は得意じゃない
• 社会人のため、1日に勉強できる量は限られる。

電子書籍のwebテキスト(第６版)を購入して使用
Progateの「Web開発パス」完走済
ドットインストールのプレミアム会員卒業

#1.1　前提知識
Railsチュートリアルを始める上で事前にやっておきたいこと、それを学ぶための学習ツールの紹介

Progateの「Web開発パス」
やってみたら1ヶ月近くかかりました。あまり期間をかけ過ぎるとやったことを忘れてしまいがちなので時間をかけずにパッと集中して取り組みましょう
Railsチュートリアル初心者シリーズ
「コマンドライン」「テキストエディタ」「Git」などの基礎
同じようなコースがProgateやドットインストールであったのでそちらをしました。
Railsチュートリアル解説動画
3万円近くします。そこに躊躇して今のところスキップしてます。。。高いもん。。
と、言いながらも4章途中あたりまでやった時点で購入しました。
もっと早く買えばよかったと後悔しました。。
初学者なら絶対に買うべきです！スクールに通うよりも絶対的に安いですし
Railsガイド
Railsチュートリアル走破後にオリジナルサイト作成する際利用するかな。。

チュートリアルの内容

1. 簡単なhello_app（1章）
2. 少し難しいtoy_app(2章)
3. かなり難しい本格的なサンプルアプリ(3章〜14章)

#1.2　さっそく動かす
開発環境としてAWSのCloud9を推奨する理由について

環境構築はベテラン開発者にとってもしんどい作業にります
初学者の段階で環境構築に時間を取られて学習が進まないようなら迷わずcloud9を選びましょう。

こちらですとRubyやRubyGems、Gitなど、Ruby on Railsで必要なものがほとんど最初から入っています。
##1.2.1 開発環境
大まかに2つに分類される開発環境について

1. コマンドラインを使う環境
2. IDE(統合開発環境)←さっきのCloud9はここに含まれる

が、ペーペーならとにかくつべこべ言わずに言われた通りCloud9を選んでおきましょう。
Cloud9なら必須の三種の神器（テキストエディタ、ファイルブラウザ、コマンドラインターミナル）がセットで組み込まれています
Cloud9を使うための手順
AWSのアカウントを取得したり、初期設定したり。。。が、あります！
私はちょうどドットインストールに課金してたので、「AWSのCloud9入門」なるものがあり、それを参考にしながら進めました。
※アカウントの解説にはクレジットカードが必要になります
アカウント開設後はRailsチュートリアルに書いてある通りに進めたらできました。
##1.2.2　Railsをインストールする
Cloud9にはRailsが入っていないので、とりあえずインストールします

まずはインストールで無駄な時間を省くための設定から

$ echo "gem: --no-document" >> ~/.gemrc

そしてついにRails(バージョン6.0.3)をインストール

$ gem install rails -v 6.0.3　# バージョン6.0.3のRailsをインストール

Railsのバージョン確認するためのコマンド

$ rails -v # Railsのバージョンを確認

Railsをインストールしたら終わり。ではありませんでした。
JavaScriptソフトウェアの依存関係を管理するプログラム「Yarn」とかいうものをインストールします
これが、フロントエンドの世界とRailsを繋ぐ役割をしているみたいです
ちなみにこれをやっていないと、次に出てくる「rails new」というコマンドが通らないみたいですので忘れずにやっておきましょう

$ source <(curl -sL https://cdn.learnenough.com/yarn_install)

#1.3　最初のアプリケーション
Railsでアプリケーションを作成する最初の手順について

これからこの世で最も簡単なアプリ「Hello World」アプリを作っていきます。
まずは、environmentディレクトリを作る(Cloud9の場合は不要)
※ディレクトリはフォルダのこと

Cloud9は不要
$ cd                    # プロジェクトのホームディレクトリに移動
$ mkdir environment     # environmentディレクトリを作成
$ cd environment/       # 作成したenvironmentディレクトリに移動

ここで、Unixコマンドについての説明がありますが、覚えておいて損はありません
cdやmkdirやlsなど便利なだけじゃなく、何より使いこなせればプログラマー気分を味わえます。メモに貼り付け、いつでも見れるようにしときましょう。

ここからアプリケーションの作成に入ります

$ rails new

とすれば、アプリ制作に必要な土台が自動で作られます
が、
条件を当てはめた上で土台を作ることもできますので今回はこちらで実行します

$ rails _6.0.3_ new hello_app

とすることで以下の２つの条件を付与することができます
条件１：開発で使用するRailsのバージョンを6.0.3に指定したい
条件２：アプリ名を「hello_app」にしたい

このコマンド送信後、大量のディレクトリが作成されますが、それぞれに役割があります。
アプリ制作に必要な機能がそれぞれに指定されています。
例えば・・・
アプリの見た目の部分だったら・・・appディレクトリ内で作成します
データベース関連の部分だったら・・・dbディレクトリ内で作成します
テスト関連の部分だったら・・・testディレクトリ内で作成します
##1.3.1　Bundler
アプケーションに必要なgemをインストールする

gemとは
よく使う機能がパッケージ化されたもの。
わざわざコードを書かずとも、gemをインストールすることでアプリに新しい機能を盛り込むことができます。
検索機能を実装したいなあ・・・「検索機能を作るgem」をインストール
パスワードを暗号化する機能を実装したいなあ・・・「暗号化するためのgem」をインストール

要は、取り付けるだけですぐに機能する部品みたいなもんです

gemはどこにあるのか
先ほど作ったディレクトリ一覧の中に「Gemfile」というものがあり、その中にgemの一覧が表示されています。
ファイルを開くと「gem 'gemの名前' 'gemのバージョン'」
といった内容で,そもそも初めから入っているものが表示されます。

gemはどうやってインストールするのか
基本的には以下の流れです

1. 追加したいgemをGemfileに追記する(今回はリスト1.6をコピペしました)
2. commandキー +「s」で保存する(これからファイルの中身を変更したら忘れずに)
3. 下記のコマンドを実行する

$ cd hello_app #hello_appディレクトリに移動
$ bundle install　#gemをインストールする

こちらを実行した後
「try passing them all to 'bundle update'」と表示されたので

$ bundle update

を実行すると、処理が完了しました。
##1.3.2　rails server
ローカルWebサーバーを起動して、作成したアプリを確認する

Railsでは「開発しているパソコンで」、作ったものをすぐに見ることができます
＊私も勘違いしていましたが、この段階だとサイトを見れるのは自分だけということになります。

手順1. ローカルWebサーバーへの接続を許可する

1. ディレクトリ一覧から「config」>「environments」>「development.rb」の順番で選択
2. 「development.rb」ファイルに「config.hosts.clear」を追記して保存する

手順2. コマンドターミナルで＋マークをクリックして「New Terminal」を選択
手順3. 新しく開いたターミナルでコマンドを実行する

$ cd hello_app
$ rails server

手順4. 画面上にある「Preview」を選択し、「Preview Running Application」をクリック
手順5. ターミナルの横に困った顔のイラストが出てきたら、「Browser」横の矢印マークをクリック
手順6. 「Yay!You're on Rails!」が表示されたら成功です！！
終了したい時は・・・controlキー+「c」で終われます
##1.3.3 Model-View-Controller(MVC)
「モデル」「ビュー」「コントローラー」の関係について簡単に説明

超簡単にまとめるとこんな感じのイメージかな。。。
「オレ」
要求するだけの無能な私。
「モデル」
データベースとのやりとりをする役割
「ビュー」
HTMLなどで画面に表示される見た目を生成する役割
「コントローラー」
「オレ」の要求を受け取り、「モデル」や「ビュー」から必要な情報を受け取り、そして「オレ」に返す司令塔的な役割
##1.3.4 Hello, world!
さっき作った「hello_app」を動かしてみる

機能：MVCの「C」だけ使って、文字列を表示させる。。それだけ。。。

$ ls app/controllers/*_controller.rb # 現在作成している「コントローラー」を確認するコマンド。

コントローラーはどこで設定するのか
　ここにあります👉app>controllers
ひとまず、「application_controller.rb」に以下を記入

def hello #helloメソッド
    render html: "hello, world!"
end

これは・・・helloメソッドでは「hello, world!」の文字列を表示する！ということを表していると思います。いきなり何のこっちゃです。
細かいことは今後分かってくるようになります。。
さらに、ここのhelloメソッドのことをhelloアクションと呼びます。
※アクションとは実行される処理のこと

次です
今度は、先ほどトップページで表示させた「Yay!You're on Rails!」ではなくて、helloアクションが指示するものを表示させるように編集していきます。
それにはまず「ルーター」を編集する必要があります。
　ルーターはここにあります👉config>routes.rb

いきなり出てきた「ルーター」とは
先ほどの説明で「オレ」と「コントローラー」の間に実はもう一人登場人物がいて、そいつが「ルーター」です

先ほどの例から、とりあえず「オレ」が何かしらの要求したとする

1. 「オレ」からの要求を「ルーター」が、どこのコントローラーのどのアクションを使え！と指定する
2. コントローラーは命令通りに、アクションを動かして「モデル」や「ビュー」から必要な情報を引っ張ってきて「オレ」に返す

ルーティングの書き方

root 'コントローラー名#アクション名'

今回の例だと

root 'application#hello' #applicationコントローラーのhelloアクションを使え！

ということになり、以下の流れになります。

1. 「オレ」からの要求を「ルーター」が、applicationコントローラーのhelloアクションを使え！と指定する
2. コントローラーは命令通りに、helloアクションを動かして「hello, world!」の文字列を表示する！という情報を「オレ」に返す
3. サーバーでページの更新をすると「hello, world!」が表示される

#1.4　Gitによるバージョン管理
Gitでバージョン管理をしましょうというはなし

バージョン管理をしないで開発をするということは、セーブをせずにロールプレイングゲームを進めていくようなもんです。
セーブをしていれば、大事なアイテムを取り損なったことにあとで気づいても、そこからさかのぼってセーブポイントからまたゲームを始めることができます。

要は**「やり直しがきく」**ということです。
初心者あるあるで、チュートリアル をやっていて、なぜかうまくいかないけど原因も分からない。コードを触っても解決策が分からない。わかるはずもない。。。えーんえんえん・・・
そんな時はうまくいってたところまでいったん戻ってみよう！
という手が使えるので、初心者でも絶対にやっておくべきです。

やり直しがきく状態にするには他の方法もあるけども。。
そのほかにも

• コードの履歴を追うことができる
• 自分の作成したコードを他の開発者と共有することができる
• 作成したアプリを自分以外の人も閲覧できるようにする
• 後ほど紹介されるHerokuというサービスでもGitが必要になる

といった利点がありますので、バージョン管理は絶対にやっておきましょう。
##1.4.1　インストールとセットアップ
Gitの導入

Cloud9にはデフォルトでGitが導入されているみたいなので、導入方法は分かってないです。。やる必要がなかったもので。。
Gitの初期設定は・・・書いてある通りにすればできました。

とりあえずGitをどう使っていくかについてまとめます
まずはローカル環境の準備から
手順1. 初回のリポジトリセットアップ
　いきなり意味がわかりません。。リポジトリて何やねん
　リポジトリとは「保管するところ」という意味らしい・・・
　要は、まずはコードを保管するところを準備するということ

$ cd ~/environment/hello_app #まずhelloアプリに入る
$ git init #これで準備完了

手順2. 保管したいファイルを保管場所に追加（未確定）

$ git add -A

手順3. 追加したものを確定する。commitは「保存」の意味。
" "の中は変更したことを英語で記載すればいいみたいです。

$ git commit -m "Initialize repository" # " "の中は自由

ローカル環境での設定はここで終わり。やっとここからGitHubサイトにデータをあげます
が、続きは1.4.3で・・・
##1.4.2 Gitのメリット
Gitを導入していて良かった〜となる事例を紹介

何でGitの手順途中でやめてこれ挟むのか・・・
ここでは先ほど紹介したGitのメリットの一つである「やり直しがきく」について事例をあげて説明しています。

1. ミスる
2. 「$ git checkout -f」を入力
3. 最後に「git commit」したところに戻る

これが、超簡単に言ったGitを使った復旧の流れです。
##1.4.3 GitHub
GitHubサイトの使用について

PC内でのGitの設定はひとまず置いといて、今度は「GitHub」サイトの登録についてです
こちらを利用するメリットは先ほど紹介した通りです

・ コードの履歴を追うことができる
・ 自分の作成したコードを他の開発者と共有することができる
・ 作成したアプリを自分以外の人も閲覧できるようにする

登録や設定については、書いてある通りにすればできました。
ただ一つ注意点があるとすれば、ここで設定したアカウント名とパスワードはすぐわかるようにしておいた方が良いです！
ちょいちょい使うシーンがあります。

さてさて、ここから先ほどの手順に戻ります
手順5. GitHubにcommitしたデータを送ります

$ git remote add origin https://github.com/<あなたのGitHubアカウント名>/hello_app.git
$ git push -u origin master

これでGitHubのページを開いたら、hello_appのデータが無事に送られています
##1.4.4 ブランチ、編集、コミット、マージ
ブランチ作成からGitにpushするまで

このタイトルに書かれている流れは、Railsチュートリアル14章までずーっと使われるので、慣れておいた方が良いでしょう。

ブランチっていきなり出てきたけども
プロジェクト本体に影響を与えずに開発を進めるための機能です。
詳しく説明できないので、ぬり絵で説明します。

でっかい透明の紙に書かれたロボットのぬり絵があったとします。
一人で全部ぬるのは大変です。みんなで右手や左手などに分担して協力してぬることにしました。ぬるぬるしててすみません。。。
①まずはぬり絵をコピーしてみんなに渡します。これがブランチです
②みんなはそれぞれ分担された箇所をぬります。これがこれが編集です
③ぬった部分を完成させます。これがこれがコミットです
④本体に完成したものを重ねます。これがこれがマージです

透明な紙なので、それぞれが分担された部分をどんどん重ねていくことでぬり絵が完成します。
後になって全体像を見たときに、「何だか右手だけバランス悪いな」となった時にそこだけ抜いてぬり直しすることもできます。
かなり強引ですがこれが「ブランチ、編集、コミット、マージ」の一連の流れになります。

これをコード上の流れに置き換えると
①みんなに渡すコピーを作成することをトピックブランチを作成するといいます

$ git checkout -b modify-README # これでmodify-READMEというブランチができました
$ git branch # できたブランチをこれで確認できます
*印がついているブランチが自分が現在使用しているブランチです

②今回はREADME.mdを編集していますね。コピペして保存しましょう。

③編集した部分をcommitして完成させましょう

$ git commit -a -m "Improve the README file"

④本体(master)に戻ってこの変更をマージ(合体)しましょう

$ git checkout master
$ git merge modify-README

最後に、GitHubにデータを送りましょう

$ git push

#1.5 デプロイする#
Herokuを使った本番環境へのデプロイ

ああ、、意味の分からない言葉の羅列・・・
本番環境(production)
開発環境(development)の対義語。といえば何となく分かるような気がする。
開発環境では製品として稼働していなくて開発者サイドしかサイトを見れないけども、本番環境なら稼働しているのでユーザーがサイトを利用することができる状態。
デプロイ
本番環境で使える状態にすること。
Heroku
Railsアプリケーションを本番環境にデプロイするサービス。
ええーと、作ったアプリを実際に運用できるようにしてくれるサービス。
使用するにあたり、料金設定があるので中身をよく確認してから使いましょう。

要は、Herokuというサービスを使って作ったアプリを世界に公開してみよう。というおはなしです。

Herokuのようなサービスや、公開する方法はほかにもあるみたいですが、ペーペーなので言われた通りにやります。
##1.5.1 Herokuのセットアップとデプロイ##
Herokuを使うまでの設定

まずはHerokuのユーザー登録を完了させ、ログインのためのメールアドレスと、パスワードを設定しておきましょう

①Gemファイルの編集
HerokuではSQLite(データベース)がサポートされていないみたいですので、本番環境にはPostgreSQL(データベース)を導入します
今までよく見ていませんでしたが、Gemファイルって「group」に別れている・・・
group :development 　開発環境で適用されるgem
👉sqliteが本番環境で使われないようにするのでここのグループにいれる
group :test 　テスト環境で適用されるgem
group :production 　本番環境で適用されるgem
👉pg(PostgreSQL)をここのグループにいれる

とりあえず、テキスト記載のGemfileをコピペして保存しましょう
そしていつもの手順で反映させる

$ bundle install --without production # without productionしないとデプロイで失敗するらしい

ファイルを編集したのでコミットして確定させましょう

$ git commit -a -m "Update Gemfile for Heroku"

この後はコマンドを順番に打ち込むだけ

$ source <(curl -sL https://cdn.learnenough.com/heroku_install) # herokuをインストール
$ heroku login --interactive # Herokuにログイン
　ここでHeroku登録時に設定したメールアドレスとパスワードが必要になります
$ heroku create # これでデプロイする準備が完了

##1.5.2 Herokuにデプロイする(1)
Gitを使ってHerokuにデータを丸投げする

$ git push heroku master

##1.5.3 Herokuにデプロイする(2)
URLを検索して無事にデプロイされているか確認する

git pushのコマンドを実行した時に表示される最後から少し手前にあるURLをクリックする
一番最後に表示されたURLではなくて最後から少し手前にあるURLをクリックしてください
もう一度言います、最後ではなく、最後から少し手前にあるURLです
##1.5.4 Herokuコマンド##
Herokuの設定を変更できるコマンドの紹介

紹介と言っても一つだけ書かれているだけです。調べればいくらでも出てきますので、ここでは省略します。

$ heroku help # Herokuのコマンド一覧を見ることができます

#1章の要約をようやく作り終えての感想#
認識が甘かった部分を改めて掘り下げられたのは良かったですが、自分の悪いクセで、1から10までチマチマとやりすぎました。これでは時間がいくらあっても足りませんので2章からはもっと簡略化して分からないことに焦点を当てて進めていこうと思います。。。反省。。。