Before Rails Tutorial１章　Goormでの環境構築

## はじめに

#### 《 対象者 》
+ Ruby HTML CSSをある程度理解しているが、Rails Tutorial で挫折した。
+ **不安なので誰かの解説を受けながら一緒に作りたい。**
+ **「Railsで試しにアプリケーションを作りたいが、何も思いつかない」**


#### 《 前提知識 》
全ての知識が必要ではありませんが、Railsの前に学習しておくことを推奨します。
Railsの学習をはじめた初学者が陥る問題として、Rails以外の関連知識が不足しているため
挫折するといったケースが多く見受けられます。

未学習の方は Progate の下記コースを奨めています。

##### 学習済であることが推奨される
**【HTML&CSS】　基礎（入門書や [Progate HTML & CSS](https://prog-8.com/courses/html)）レベル**
**【Ruby】 基礎（入門書や [Progate](https://prog-8.com/courses/ruby)）レベル**
**【データベース】　基礎 (https://products.sint.co.jp/topsic/blog/sql#toc-1)**


##### 余裕があれば、学習してあると望ましい
**【JavaScript】　基礎（入門書や[Progate JavaScript](https://prog-8.com/courses/es6)）レベル**
**【Sass】 [Progate Sass](https://prog-8.com/courses/sass)**
**【SQL】[Progate SQL](https://prog-8.com/courses/sql)**
**【Git】[Progate Git](https://prog-8.com/courses/git)**

## 【目次】
[1章: 環境構築 goorm編](https://qiita.com/earth660/items/a51874eba618e2aa5ce6) ◀ いまここ
[2章: ポケモン図鑑をつくろう](https://qiita.com/earth660/items/6773e8b59cc24c772244)
[3章: ポケモン図鑑 課題](https://qiita.com/earth660/items/94fcec3943f5004090d9)




# プログラミングの学習ステップ
まずはじめに
Awesome Ars Academiaの教育チームが提唱している学習のステップ　が個人的に賛同出来るので紹介致します。

::: note info
プログラミングの学習には、下記３つのステップがあると考えています。

それは、
 

1. 見よう見まねでとりあえず動かしてみるハンズオン学習
2. 理論や概念などの理解を深める概念学習
3. 理解した内容をベースに作りたいものを作り上げようとする実践・演習学習

という３段階のステップです。

第１段階のステップは、かなり入門的なオンライン学習サービスなどを使って、「言われたとおりにやってみたら動いた」ということを経験する中で、「なんとなくこうしたらこう動く」ということを感覚的に知っていくフェーズです。

第２段階のステップは、初心者向けのプログラミング教科書を用い、実際にコードを書きつつ勉強することで、「なんとなく動いている裏側ではこんなことが起こっているんだ」ということを学び、理解を深めていくフェーズです。

第３段階のステップは、「こういうサービス・こういう機能を実現したい」という状況のもと、自力でそのゴールを達成していくフェーズです。
:::

本講義では、第１段階のステップの役割を担っています。

ポケモン図鑑を、解説を受けながら作り上げていきます。[ポケモン図鑑の作り方はこちらから](https://qiita.com/earth660/items/6773e8b59cc24c772244)


##### 開発環境について

ご自身のパソコンにRubyとRuby on Railsの開発環境を構築する場合、予期せぬエラーが発生してしまいその解決に数時間を要してしまう事があります。

開発に集中するためにも、本講義ではクラウド開発環境を利用します。

##### クラウド開発環境
クラウド開発環境の中ではCloud9を推奨します。AWS (Amazon が提出する多くのクラウド開発サービス群) の１つであり、AWSの他のサービスともシナジーが良い為です。（学生であれば無料利用申請可能なようです）

Amazonによる承認のステップを挟むため時間的事由により講義内では、[goorm](https://ide.goorm.io/)を用いて説明します。


WindowsやMacにRailsの環境を構築したい方は下記リンクから
- Windowsでの環境構築方法（リンク貼る）
- Macでの環境構築方法（リンク貼る）
    



# 前置き：講義を進める前に注意事項
##### 1. コマンドについて
本資料では、下のような画像を多数載せています。
これらにはターミナルに打ち込むコードや、プログラムを記述しています。

行頭に`$`と記述されている行は、ターミナルへのコマンドであることを示しています。
その下の行は、コマンドの実行結果です

<font color="Red">コードをコピーする際は行頭の`$`を除いてください。</font>


```terminall:terminal
$ echo "hello world"
hello world
```

また、この様に下のような画像も多数載せている箇所があります。
```diff_ruby:test.rb
-
+ p 'hello' #　これを追記する
```
赤い箇所は、削除される部分、
青い箇所は追記する部分になっています。
**コードをコピーする際は行頭の＋を除いてください。**
**この場合は`p 'hello'`をコピー＆ペーストしてください。**
**-の行は追記せず、削除をしてください。**
***


##### 2.記述場所
コードの記述場所は、左上に書いてあります。
どこに書くのか確認しつつ進めてください。
**（新しくファイルを作成する場合もあれば、既に作成されているファイルに追記する場合もあります）**

##### 3.保存について
コードを追加するごとに必ず保存をする癖をつけましょう。
**control + S**（controlを押しながらSを押すこと）で保存ができます。

##### 4.反復学習

本講義では、同じ内容を繰り返し説明しています。
１度目は簡易的な説明に留めており、理解が曖昧なままでも次に進む事を重視します。
再登場する毎に徐々に詳しく説明及び補足していき、理解を深めていきます。

理由
初学者にとっては未知の情報が多く、その１つ１つに厳密且つ詳細な説明を行っていくと、本筋の説明が遅々として進まず理解が困難になるといったケースが発生する為
【厳密な説明よりも、テンポと理解しやすさ】を重視します。



<font color="Red">大事なのは脳死でコピペしてすすめるのではなく、可能な限り理解に努め、調べていき、開発力を磨くことです。</font>

## よくあるエラー・トラブル集
### 1.ファイルを保存できていない
![スクリーンショット 2023-04-25 20.25.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/457c8de7-ae5b-0806-38bf-65a0a80cb790.png)
ファイル名の文末に＊がついている（上の画像だと`Gemfile＊`になっている）と、変更したものが保存できていません。
このままだと、正しく実行できないので、なにか変更を加えた際、必ず保存をしましょう。
*が☓に変わっていれば保存完了です。
![スクリーンショット 2023-04-25 20.26.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/9a853078-dc32-1fcf-9717-f301769ca4ad.png)


### プレビューをしようとしても表示されない
正しく表示されているか確認しようとプレビューを見ると下のようなものが表示された…。
![スクリーンショット 2023-04-26 0.16.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/351e2226-1e4a-e1fa-9129-3471e06c6f14.png)
`▶ new run ruby on Rails`しているか確認してください。

## 環境構築中のエラーやトラブルについて
手順通りに進めていても何らかのエラーにより、手詰まりになることもあると思います。
そういった場合は、講義時間内に質問してください。

質問は　Discord にて受け付けています。
Discordグループの招待URLは、WebClass に記載しています。
テーマ6(Webアプリケーション制作）を参照してください。

- 質問窓口について
    - 質問の際は，エラー箇所，エラー内容について詳細に記入して下さい．<br>
    例）エラー箇所【2-3】，gem install railsを打ちこんだら以下のエラーが出ました．<br>
Could not find gem 'rails x64-mingw32' in any of the gem sources listed in your Gemfile.<br>
Run \`bundle install\` to install missing gems.

    - 質問への回答には時間がかかります(順番待ちが予想されるため)<br>
    回答を待っている間もできるだけ自己解決を図って下さい．<br>
    自己解決できた場合は，その旨も報告してください。
    - <font color="Red">　質問しても成績下がることはないです　匿名の質問でもOK　課題内容でも気になったことでも
    </font>


## さあ、環境構築へ！
goormは、ブラウザ上でウェブ開発やアプリケーション開発を行うことができるサービスです。

### 1.goormのアカウント作成
はじめに、[goorm](https://ide.goorm.io/)へアクセスし、右上の**はじめに**をクリックします。
![スクリーンショット 2022-05-24 12.16.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/b9615da9-7e8c-0b0e-9b34-51a94e2edf4f.png)
アカウント作成のページが開かれるので，
①メールアドレス
を入力して認証ボタンを押してください。
入力したメールアドレスに認証メールが来るのでメール内のリンクをクリックして認証を完了させてください。


完了し終わったら、
②パスワード
③名前
を入力して会員登録をクリック

![スクリーンショット 2022-05-24 12.25.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/affc6123-cb30-ec89-b462-93dd049a3e46.png)
上のページの入力は任意です。

![スクリーンショット 2022-05-24 12.26.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/4cefb221-4fc6-376e-fe7c-cdbfba44f020.png)
下部の**本題に入る**をクリックしてください。
トップページに戻ると思うので右上のコンソールをクリックしてください。

![スクリーンショット 2022-05-24 12.28.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/a71ac3c5-7f42-4e2b-fa3b-2f583966f3a6.png)
右上にある**新しいコンテナ**をクリックしてください。
コンテナ名 **pokemon_zukan**
地域　**Seoul (KOR)**
公開範囲 **Private**
テンプレート　**基本テンプレート**
配備　**Not used**
ソフトウェアスタック **Rails**を選択
以上の情報を入力、選択し、コンテナを作成してください。
作成には時間がかかります。

作成されるとロードが入り、このようなページに入ります。
![スクリーンショット 2022-05-24 12.41.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/a1a27f6f-aca2-0f78-0e86-38b8edf2a309.png)

右上にある**▶Run**を押してください。
(表示言語によっては**▶実行**や、**▶new run ruby on rails**になっている場合があります。)
下部のターミナルがこの様になってたら良いです。
```terminal:terminal
root@goorm:/workspace/pokemon_zukan# cd /workspace/pokemon_zukan && rails s -b 0.0.0.0 -p 3000
=> Booting Puma
=> Rails 6.0.3.2 application starting in development
=> Run `rails server --help` for more startup options
Puma starting in single mode...
* Version 4.3.5 (ruby 2.6.5-p114), codename: Mysterious Traveller
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://0.0.0.0:3000
Use Ctrl-C to stop
```
Railsアプリケーションページを表示するには、
**▶Run**の左にある**Preview　> 
Open Preview in New Tab**を押すと、
ブラウザの新しいタブで下部のようなページに移動します。
(ここも表示言語によって**▶実行** > **プレビュー** > **新しいタブでプレビュー**になっていますが、操作は一緒です。) 
 
![スクリーンショット 2022-05-24 12.46.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/b153db64-e7ae-9a31-ed2b-68c704d9d72e.png)

きちんと表示されていたら環境構築は完了です。
[２章：ポケモンずかんを作ろう](https://qiita.com/earth660/items/6773e8b59cc24c772244)へ進んで下さい。