はじめに
[対象者]
- Ruby HTML CSSをある程度理解しているが、Rails Tutorial で挫折した。
- 不安なので誰かの解説を受けながら一緒に作りたい。
- 「Railsで試しにアプリケーションを作りたいが、何も思いつかない」
[前提知識]
全ての知識が必要ではありませんが、Railsの前に学習しておくことを推奨します。
Railsの学習をはじめた初学者が陥る問題として、Rails以外の関連知識が不足しているため
挫折するといったケースが多く見受けられます。
未学習の方は Progate の下記コースを奨めています。
学習済であることが推奨される
【HTML&CSS】 基礎（入門書や Progate HTML & CSS）レベル
【Ruby】 基礎（入門書や Progate）レベル
【データベース】 基礎 (https://products.sint.co.jp/topsic/blog/sql#toc-1)
余裕があれば、学習してあると望ましい
【JavaScript】 基礎（入門書やProgate JavaScript）レベル
【Sass】 Progate Sass
【SQL】Progate SQL
【Git】Progate Git
【目次】
1章：環境構築 Paiza編◀ いまここ
2章： ポケモン図鑑をつくろう
プログラミングの学習ステップ
まずはじめに
Awesome Ars Academiaの教育チームが提唱している学習のステップが個人的に賛同出来るので紹介致します。
プログラミングの学習には、下記３つのステップがあると考えています。
それは、
- 見よう見まねでとりあえず動かしてみるハンズオン学習
- 理論や概念などの理解を深める概念学習
- 理解した内容をベースに作りたいものを作り上げようとする実践・演習学習
という３段階のステップです。
第１段階のステップは、かなり入門的なオンライン学習サービスなどを使って、「言われたとおりにやってみたら動いた」ということを経験する中で、「なんとなくこうしたらこう動く」ということを感覚的に知っていくフェーズです。
第２段階のステップは、初心者向けのプログラミング教科書を用い、実際にコードを書きつつ勉強することで、「なんとなく動いている裏側ではこんなことが起こっているんだ」ということを学び、理解を深めていくフェーズです。
第３段階のステップは、「こういうサービス・こういう機能を実現したい」という状況のもと、自力でそのゴールを達成していくフェーズです。
本講義では、第１段階のステップの役割を担っています。
ポケモンずかんを、解説を受けながら作り上げていきます。（２章）
開発環境について
ご自身のパソコンにRubyとRuby on Railsの開発環境を構築する場合、予期せぬエラーが発生してしまいその解決に数時間を要してしまう事があります。
開発に集中するためにも、本講義ではクラウド開発環境を利用します。
クラウド開発環境
クラウド開発環境の中ではCloud9を推奨します。AWS (Amazon が提出する多くのクラウド開発サービス群) の１つであり、AWSの他のサービスともシナジーが良い為です。（学生であれば無料利用申請可能なようです）
Amazonによる承認のステップを挟むため時間的事由により講義内では、Paiza Cloudを用いて説明します。
(Windows や Mac にRailsの環境を構築する方法は本資料の下の方に記載しています)
前置き：講義を進める前に注意事項
1. コマンドについて
本資料では、下のような画像を多数載せています。
これらにはターミナルに打ち込むコードや、プログラムを記述しています。
行頭に$と記述されている行は、ターミナルへのコマンドであることを示しています。
その下の行は、コマンドの実行結果です
コードをコピーする際は行頭の$を除いてください。
$ echo "hello world"
hello world
また、この様に下のような画像も多数載せている箇所があります。
-
+ p 'hello' # これを追記する
赤い箇所は、削除される部分、
青い箇所は追記する部分になっています。
コードをコピーする際は行頭の＋を除いてください。
この場合はp 'hello'をコピー＆ペーストしてください。
-の行は追記せず、削除やコメントアウトをしてください。
2.記述場所
コードの記述場所は、左上に書いてあります。
どこに書くのか確認しつつすすめてください。
（新しくファイルを作成する場合もあれば、既に作成されているファイルに追記する場合もあります）
3.反復学習
本講義では、同じ内容を繰り返し説明しています。
１度目は簡易的な説明に留めており、理解が曖昧なままでも次に進む事を重視します。
再登場する毎に徐々に詳しく説明及び補足していき、理解を深めていきます。
理由
初学者にとっては未知の情報が多く、その１つ１つに厳密且つ詳細な説明を行っていくと、本筋の説明が遅々として進まず理解が困難になるといったケースが発生する為
【厳密な説明よりも、テンポと理解しやすさ】を重視します。
大事なのは脳死でコピペしてすすめるのではなく、可能な限り理解に努め、調べていき、開発力を磨くことです。
環境構築中のエラーやトラブルについて
手順通りに進めていても何らかのエラーにより、手詰まりになることもあると思います。
そういった場合は、講義時間内に質問してください。
質問は Discord にて受け付けています。
Discordグループの招待URLは、WebClass に記載しています。
テーマ6(Webアプリケーション制作）を参照してください。
- 質問窓口について
-
質問の際は，エラー箇所，エラー内容について詳細に記入して下さい．
例）エラー箇所【2-3】，gem install railsを打ちこんだら以下のエラーが出ました．
Could not find gem 'rails x64-mingw32' in any of the gem sources listed in your Gemfile.
Run `bundle install` to install missing gems. -
質問への回答には時間がかかります(順番待ちが予想されるため)
回答を待っている間もできるだけ自己解決を図って下さい．
自己解決できた場合は，その旨も報告してください。 -
質問しても成績下がることはないです 匿名の質問でもOK 課題内容でも気になったことでも
-
本講義ではPaizaCloudで環境構築を行って進めていきます。
PaizaCloudは、ブラウザ上でウェブ開発やアプリケーション開発を行うことができるサービスです。
個人で使用しているデバイスには依存していないため、Railsの環境構築でつまずくことはほぼありません。
ただし、無料版には以下の利用制限が設けられているので十分注意してください。
- サーバは作成後24時間を経過すると削除される
- サーバの連続稼働時間は最大4時間
- サーバ上で作成したフォルダは，ローカルPCにダウンロード不可(ファイルのダウンロードは可能)
PaizaCloudのアカウント作成
1. PaizaCloud利用登録
はじめに、https://paiza.cloud/へアクセスし、登録無料をクリックします。
アカウント作成のページが開かれるので，
①メールアドレス(大学のメールアドレスを使用してください)
②ユーザ名
③パスワード
を入力し、
④ロボットではありませんにチェックを入れ，
⑤アカウント作成をクリックします。
入力したメールアドレス宛に登録確認のメールが届くので、メールに記載されたURLをクリックします。
次のようなページに飛ばされ、利用登録が完了します。
2. Ruby on Rails環境構築
Paizaサーバを使用してRuby on Railsの環境構築を行います。
ターミナルにコマンドを打ち込むことが多いので、間違えずに入力してください(コピー&ペーストがオススメ)
2-1 Paizaサーバーの作成
新規サーバ作成をクリックします。
プラン選択の画面に移るので、無料プランを選択します。
サーバ設定画面では，
①サーバ名を入力し、初期インストール設定として②Ruby on Railsを選択します。
最後に、③新規サーバ作成をクリックします。
サーバーが立つまで待ちましょう。
サーバーが立ちました。
ブラウザも一緒に立ち上がるので×で閉じておきます。
2-2 ワークフォルダを作成
ここからはターミナルを使用してRailsの環境を構築します。
左のメニューから、ターミナルをクリックします。
そうすると、ターミナルが立ち上がります。
ターミナルに以下の順番でコマンドを打ちこんでいきます。
$ mkdir rails_app
$ cd rails_app
$ mkdir pokemon_zukan
$ cd pokemon_zukan
mkdirコマンドはフォルダを作成するコマンド
cdコマンドはカレントディレクトリを移動するコマンド
以下のようにフォルダが作成され、カレントディレクトリ(今自分がいる場所）)がkadaiフォルダに移っていればOKです
2-3 Gemfileの作成・編集
Gemfile ▷ 利用したい機能を列挙しておくことで一括してインストールを行ってくれるファイル
Gemfileの生成には以下のコマンドを入力します。
$ bundle init
以下のように、kadaiフォルダ内にGemfileが生成されたらOKです。
生成されたGemfileをダブルクリックして開きます。
Gemfile内7行目のgem "rails"をgem "rails","~> 6.0.2"に変更します
# frozen_string_literal: true
source "https://rubygems.org"
git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
gem "rails","~> 6.0.2"
変更後、保存してウィンドウを消します。
変更が完了したら、次のコマンドを打ち込みます。
$ bundle install
bundle installはGemfileに記載されたGemをインストールするコマンド
2-4 Railsアプリケーションの作成
ここでは、Railsの立ち上げに必要なファイルを生成します。
次のコマンドを打ち込みます。(ドットまで合わせて打ち込むこと)
$ rails new .
rails new は，Rails関係のファイルやフォルダを生成するコマンド
. は，カレント ディレクトリを示す相対パス
このとき、Gemfileを上書きするか聞いてくるので、yと入力しEnterを押す。
2-5 hostnameの設定
config/environments/development.rbに
config.hosts.clearを追記します。
なぜこれを設定するのか気になる人は下記の記事を読んでください
https://qiita.com/kodai_0122/items/67c6d390f18698950440
2-6 Railsサーバーの起動
Railsサーバの起動もターミナルから行います。
サーバの起動は次のコマンドで行います。
rails s
rails sはサーバを起動するときのコマンド(rails serverと打ち込んでも起動する)
コマンドを打ち込むと処理が始まり、左のメニュー中に3000と表示されたブラウザ(下図の③)が出現するのでクリックします。
他の確認方法
サーバ起動コマンド(bin/rails s)を打ち込んだ状態で①ブラウザを開き，②URL欄に以下のURLを入力することでも確認可能．
http://localhost:3000
すると、Railsのトップページがブラウザ上で表示されているはずです。
この画面が表示されたら導入は完了です。
自分のPCでRailsを触りたい人向け
Windows,MACのRails環境構築方法を載せるのでやってみてください。
##Ruby on Railsの環境構築手順【Windows OS】
クリックして展開
Windows OSでRuby on Railsを動作させるには，以下4つのソフトウェアが必要です．
- MSYS2 (本手順でのバージョン：20200522)
- Ruby (本手順でのバージョン：2.6.6)
- Node.js (本手順でのバージョン：12.16.3)
- Yarn (本手順でのバージョン：1.22.4)
このうち、Rubyに関しては注意が必要で、導入済みの場合はエラーが出る可能性が高いです。
Rubyのバージョンを変更しても問題ない場合は、一度アンインストールしてから本手順に従い再インストールすることを推奨します。
しかし，そうすることで今まで使用できていたRubyのアプリケーションやライブラリが使えなくなるかもしれません．
その可能性を理解した上で，アンインストール＆再インストールしてください．
【W1】MSYS2の導入【Windows OS】
MSYS2とはUnix系の各種コマンドをWindows上で動作させるためのパッケージです．
RailsにはUnix系のコマンドを使用するため，導入が必要です．
【W1-1】MSYS2が導入されているか確認する
スタートメニューの一覧から，MSYS2があるか確認しましょう．
メニューの一覧にない場合は，【W1-2】へ進み，MSYS2を導入します．
もし，画像のようにMSYS2が存在している場合，一度アンインストールすることを推奨します．
【W1-2】MSYS2インストーラのダウンロード
以下のリンク(https://www.msys2.org)から，MSYS2のインストーラをダウンロードします．
画像の赤枠部分をクリックしてダウンロードしてください．
######【W1-3】MSYS2のインストール
ダウンロードされたmsys2-x86_64-2020????.exeを実行します
設定ウィザードが立ち上がるので，次へを押します。
次へ．
次へ．
インストールが開始されます。
完了を押してください。
今すぐ MSYS2...にチェックを入れていた場合は，MSYS2が起動します。
ここでは使わないので×で閉じてください。
MSYS2の導入は完了です．
【W2】へ進んでください．
###【W2】Rubyの導入【Windows OS】
######【W2-1】Rubyが導入されているか確認します
コマンドプロンプトを立ち上げ，次のコマンドを打ち込みます．
ruby -v
以下のようにバージョン情報が返された場合は，Rubyが既に導入されています．
C:¥Users¥ohata>ruby -v
ruby 2.6.6p146 (2020-03-31 revision 67876) [x64-mingw32]
C:¥Users¥ohata>
導入済みの方は，以降の手順でエラーが出る可能性があります．
バージョンを変更しても問題ない場合は，導入済みのRubyをアンインストールしてから【W2-2】へ進んでください．
以下のような表記が返された場合は，Rubyがインストールされていません．
C:¥Users¥ohata>ruby -v
'ruby' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
C:¥Users¥ohata>
【W2-2】へ進み，Rubyをインストールしましょう．
######【W2-2】Rubyインストーラのダウンロード
次のリンク(https://rubyinstaller.org/downloads/)から，DEVKIT付きRubyのインストーラをDLします。
64ビットPCの場合は画像の赤枠(Ruby+Devkit 2.6.6-1 (x64))をクリックしてダウンロードしてください
32ビットPCの場合はRuby+Devkit 2.6.6-1 (x86)をクリックしてダウンロードしてください。
######【W2-3】Rubyのインストール
ダウンロードされたrubyinstaller-devkit-2.6.6-1-x??.exeを実行します。
I accept the Licenseにチェックを入れて，Nextを押します。
10.jpg
Add Ruby executables to your PATHのチェックは必ず入れること．
Installを押します。
MSYS2 dev... のチェックを外してNextを押す．
インストールが開始される．
インストールが完了すると，このような画面が出る．
Run 'ridk install' to... にチェックを入れ，Finishを押す．
######【W2-4】RubyとMSYS2の関連付け
先ほどの工程でFinishを押すとコマンドプロンプト上でRubyInstaller2が起動する．
コマンドプロンプトに3と打ち，Enterキーを押します。
インストールが始まるので少し待ちましょう。
以下の画像のように全ての項目(この例では52項目)のインストールが完了したら，Enterを押します。
Enterが押されるとコマンドプロンプトが閉じられます。
これでRubyのインストールとMSYS2への関連付けは完了です。
【W3】へ進んでください．
###【W3】Node.jsの導入【Windows OS】
######【W3-1】Node.jsが導入されているか確認します
Node.jsはサーバー側で動作するjavascriptであり，Railsの一部を利用する際に要求されます
コマンドプロンプトを立ち上げ，次のコマンドを打ち込みます
node -v
以下のようにバージョン情報が返された場合は，Node.jsが既に導入されています．
C:¥Users¥ohata>node -v
v12.16.3
C:¥Users¥ohata>
導入済みの方は，【W4】へ進んでください．
以下のような表記が返された場合は，Node.jsがインストールされていません．
C:¥Users¥ohata>node -v
'node' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
C:¥Users¥ohata>
【W3-2】へ進み，Node.jsをインストールしましょう．
######【W3-2】Node.jsインストーラのダウンロード
次のリンク(https://nodejs.org/en/download/)から，Node.jsのインストーラをDLします
画像の赤枠部分をクリックしてダウンロードしてください
######【W3-3】Node.jsのインストール
ダウンロードされたnode-v12.??.?-x??.msiを起動します
Nextを押してください
I accept the... にチェックを入れ，Nextを押してください
Next．
何も触らずNextを押してください
チェックを外してNext．
Installを押してください。
インストールが開始されるので，しばらく待ちましょう。
Finishを押して導入完了です。
###【W4】Yarnの導入【Windows OS】
######【W4-1】Yarnが導入されているか確認する
YarnとはNode.jsのパッケージ管理ソフトウェアの一種であり，こちらもRailsには必要なのでインストールする．
コマンドプロンプトを立ち上げ，次のコマンドを打ち込んで下さい．
yarn -v
以下のようにバージョン情報が返された場合は，Yarnが既に導入されています．
C:¥Users¥ohata>yarn -v
1.22.4
C:¥Users¥ohata>
導入済みの方は，【W5】へ進んでください．
以下のような表記が返された場合は，Yarnがインストールされていません．
C:¥Users¥ohata>yarn -v
'yarn' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
C:¥Users¥ohata>
【W4-2】へ進み，Yarnをインストールしましょう．
######【W4-2】Yarnインストーラのダウンロード
次のリンク(https://yarnpkg.com/lang/en/docs/install)から，YarnのインストーラをDLしてください
画像の赤枠部分をクリックしてダウンロードしてください
######【W4-3】Yarnのインストール
ダウンロードされたyarn-1.22.4.msiを起動します
Nextを押してください
I accept the... にチェックを入れ，Nextを押してください
Nextを押してください
Installを押してください
Finishを押して導入完了です
###【W5】Ruby on Rails環境構築(端末操作)
ここからはコマンドプロンプトを使用して，コマンド上で構築を行います。
######【W5-1】ワークフォルダの作成
まず，デスクトップ上にrails_appという名前のフォルダを作成します。
作成したrails_appフォルダに入り，アドレス欄にcmdと打ちEnterを押してください
すると、コマンドプロンプトが立ち上がり，カレントディレクトリ(今自分がいる場所)がrails_appになリます。
Microsoft Windows [Version 10.0.18362.836]
(c) 2019 Microsoft Corporation. All rights reserved.
C:¥Users¥ohata¥Desktop¥rails_app>
######【W5-2】sqlite3のインストール
SQLiteはデータベースの一種であり，Railsにも採用されています
コマンドプロンプトに
gem install sqlite3 --platform ruby
と打ち込み，sqlite3をインストールします
C:¥Users¥ohata¥Desktop¥rails_app>gem install sqlite3 --platform ruby
処理略
しばらくして，以下のように表示されたら正常にインストールされています。
処理略
Successfully installed sqlite3-1.4.2
Parsing documentation for sqlite3-1.4.2
Done installing documentation for sqlite3 after 0 seconds
1 gem installed
C:¥Users¥ohata¥Desktop¥rails_app>
######【W5-3】Railsのインストール
Railsをインストールします。
コマンドプロンプトに
gem install rails
と打ち込み，Railsをインストールします
C:¥Users¥ohata¥Desktop¥rails_app>gem install rails
処理略
時間がかかるので，気長に待ちましょう
以下のように表示されたら正常にインストールされています
処理略
Successfully installed rails-6.0.3.1
Parsing documentation for rails-6.0.3.1
Done installing documentation for rails after 0 seconds
1 gem installed
C:¥Users¥ohata¥Desktop¥rails_app>```
念のため，Railsがインストールされているか確認します．
`rails -v`
以下のようにバージョン情報が返されたらインストールに成功しています。
```:コマンドプロンプト
C:¥Users¥ohata¥Desktop¥rails_app>rails -v
Rails 6.0.3.1
C:¥Users¥ohata¥Desktop¥rails_app>
######【W5-4】サーバの構築ファイル生成
次のコマンドを打ちこむことでkadaiというフォルダが作成され，その中にサーバの構築ファイが生成される。
rails new kadai
C:¥Users¥ohata¥Desktop¥rails_app>rails new kadai
処理略
Done in 4.50s.
Webpacker successfully installed・ ‥ ‥‥
C:¥Users¥ohata¥Desktop¥rails_app>
たしかにkadaiフォルダが作られている．
######【W5-5】Railsサーバの起動
まず，kadaiフォルダにチェンジディレクトリ（cd kadai）してから，
Railsサーバを立ち上げるためのコマンド（rails s）を打ち込む．
コマンドプロンプトが以下のような状態になり、
カレントディレクトリ(¥rails_app¥kadai>)に帰ってこなくなれば，Railsサーバが起動している．
C:¥Users¥ohata¥Desktop¥rails_app>cd kadai
C:¥Users¥ohata¥Desktop¥rails_app¥kadai>rails s
=> Booting Puma
=> Rails 6.0.3.1 application starting in development
=> Run `rails server --help` for more startup options
*** SIGUSR2 not implemented, signal based restart unavailable!
*** SIGUSR1 not implemented, signal based restart unavailable!
*** SIGHUP not implemented, signal based logs reopening unavailable!
Puma starting in single mode...
* Version 4.3.5 (ruby 2.6.6-p146), codename: Mysterious Traveller
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://[::1]:3000
* Listening on tcp://127.0.0.1:3000
Use Ctrl-C to stop
######【W5-6】Railsサーバへの接続
サーバが起動しているか確かめましょう。
次のリンク(http://localhost:3000)をクリックし，以下のようなページが表示されたら成功です。
これで環境構築は終了です。
サーバを終了させるには，コマンドプロンプト上で「Ctrlを押しながらC」を入力すれば終了します。
ジョブを終了するか問われるので，Yと打ちEnterを押してください。
Completed 200 OK in 1ms (Views: 1.1ms | ActiveRecord: 0.0ms | Allocations: 335)
Ctrl + C
処理略
バッチ ジョブを終了しますか (Y/N)?Y
C:¥Users¥ohata¥Desktop¥rails_app>
##Ruby on Railsの環境構築手順【Mac OS】
クリックして展開
### 1. Xcodeのインストール ・Appstoreから「Xcode」と検索 ・Xcodeをインストール（容量が多いので少し時間がかかります。) Xcodeをすでにインストールしている学生はこの手順は不要です。
2.Command line tools for xcodeのインストール
$ xcode-select --install
インストールできたか以下のコマンドで確認
$ xcode-select --version
Xcode 11.1
Build version 11A1027
3.Homebrewのインストール
公式HP(https://brew.sh/index_ja) に記載のあるコマンドを使用します。
パスワードを求められるので、自身のMacに設定したパスワードを入力してください
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
[Password : （入力）
インストールできたか以下のコマンドで確認します
$brew -v
Homebrew 2.1.15
Homebrew/homebrew-core (git revision 93b0; last commit 2019-10-17)
$ brew doctor
Your system is ready to brew.
4.rbenvのインストール
Homebrewを利用してrbenvをインストール
$ brew install rbenv ruby-build
$ echo 'export PATH="~/.rbenv/shims:/usr/local/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile
インストールできたか以下のコマンドで確認します
$ rbenv -v
rbenv 1.1.2
5.Rubyのインストール
$ rbenv install --list # Rubyのバージョンを確認
$ rbenv install 2.5.6 # 今回は2.5.6を指定
$ rbenv global 2.5.6
$ rbenv rehash
インストールできたか以下のコマンドで確認します
$ ruby -v
ruby 2.5.6p33 (2019-01-30 revision 66950) [x86_64-darwin17]
$ which ruby
/Users/[ユーザ名]/.rbenv/shims/ruby
6.Bundlerのインストール
$ gem install bundler
インストールできたか以下のコマンドで確認します
$ bundle -v
Bundler version 2.0.2
gemのアップデートを行う場合は、以下のコマンドを実行します
$ gem update --system
Latest version already installed. Done.
$ gem list
7.Railsのインストール
$ gem install -v 5.2.3 rails # バージョンを指定する
$ brew install node # node.jsも導入
インストールできたかは以下のコマンドで確認する
$ rails -v
Rails 5.2.3
###8.トラブルシューティング
1. railsアプリケーション作成時にエラーになる
$ rails new sample
・・・
Errno::EACCES: Permission denied @ dir_s_mkdir -
/Users/[ユーザ名]/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/extensions/x86_64-darwin-19/2.6.0-static/bindex-0.8.1
対処法としては以下のコマンドを実行する
$ sudo chown -R [ユーザ名]:staff /Users/[ユーザ名]/.rbenv
2. 使用するrailsのバージョンを変えたい
$ gem uninstall railties -v 'X.X.X'
$ gem install -v 'X.X.X'