【完全初心者向け】Ruby on Rails7を使って初めてのWebアプリケーション作成からインターネット公開までを一気に体験！#1

「プログラミング学習を始めたいけど、明確に何ができるようになるのか把握してから…」 という方、仕組みや背景など細かい説明は抜きにして、まずは体験してみましょう！

【完全初心者向け】Ruby on Rails7を使って初めてのWebアプリケーション作成からインターネット公開までを一気に体験！#1

【シリーズ記事一覧】

• 【完全初心者向け】Ruby on Rails7を使って初めてのWebアプリケーション作成からインターネット公開までを一気に体験！#2
• 【完全初心者向け】Ruby on Rails7を使って初めてのWebアプリケーション作成からインターネット公開までを一気に体験！#3
• 【完全初心者向け】Ruby on Rails7を使って初めてのWebアプリケーション作成からインターネット公開までを一気に体験！#4
  
  

どんな分野でも学習をする上で大事なことは、明確な目標を持つことです！

明確な目標を持つためには、「それを習得することで、何ができるようになるのか」という点を明らかにしておく必要があります。

この記事では、「簡単なWebアプリケーションを作成し、インターネット上に公開する」というゴールを設定しています。

どんな初心者の方でも、簡単にWebアプリケーションを作成することができるように書いていきます。

「プログラミング学習を始めたいけど、明確に何ができるようになるのか把握してから…」という方、Ruby on Railsの仕組みや背景など細かい説明は抜きにして、まずは体験してみましょう！

使用するもの

• パソコン端末（OSは問いません）
• Codeanywhere： webブラウザがあればどんな端末でもプログラミングができるサービス（7日間無料）
• Heroku： 作成したWebアプリケーションをインターネット公開するサービス（基本無料）
  
  

できること

Ruby on Railsを使用し、簡単なブログ投稿のWebアプリケーションを作成することができる。

注意点

こちらの記事は、初心者の方がWebアプリケーション開発を体験するためのものなので、Ruby on Railsの細かい構造などは触れずに進めていきます。

今回の記事で行うこと

• 開発を行うために使用するクラウドサービスへの7日間無料登録（クレジットカード不要）
• Ruby on Railsを用いたブログアプリケーション開発に必要なツールのインストール
• アプリケーションをインターネット公開する際に使用するサービスへの無料ユーザー登録（クレジットカード不要）
  
  
  それでは始めていきましょう。
  
  

  Codeanywhereの登録

今回の体験では、クラウドIDEサービスのCodeanywhereを使用していきます。

Codeanywhereを使うメリットとこれから行う作業について

【メリット】

• PCへのインストール作業が不要、ネットが繋がればどのPCからも作業ができる。
• クレジットカードの登録が不要、誰でも利用することができる。
• Rubyのファイルを作成し、そこにコードを入力し保存することで、ファイルに書かれたRubyのコードが正常に動いているかを確認することができる。

【デメリット】

• 無料枠の場合、フリートライアル期間として7日間しか使用できない。（それ以降も使用する場合は月額$6程度かかる。）
• ネット上のサービスなので、インターネット環境が悪いと読み込みが遅くなる。
• 英語のサービスなので、英語に慣れていないと説明などがわかりづらいことがある。

【これから行う作業】

• Codeanywhereを開発環境として使用するためには、OSや開発言語、データベース管理システムや、ツールを自分で選択したり、インストールする必要があります。
• Rubyのコードがちゃんと動いているかどうかの確認や、Ruby on Railsアプリケーションを開発するために必要な作業を行います。

Codeanywhereにユーザ登録

【手順】 Codeanywhereのサイト（ https://codeanywhere.com/ ） にアクセスして、ページ右上の［Sign Up］をクリックする

既にユーザ登録が完了している場合は、［Login］からログインしてください。

ユーザ登録する

【手順】First name, Last name, メールアドレス, パスワードを入力し、［Signup for free］をクリックする

登録ボタンをクリックすると下記の様に読み込み画面になるので、完了までそのまま待ちます。

【手順】以下の画面が表示された（＝アカウントが登録できた）ことを確認し、画面中央部の赤枠で囲われている ［Start Free 7-Day Trial］をクリックする。

【手順】Dashboardが表示されたことを確認する。

この段階でCodeanywhereを登録した際に使用したメールアドレスに認証メールが送信されています。そのメールに記述されているURLをクリックして、ユーザ登録を認証してください。

この操作が完了しないとこの次の手順を先に進めることができません。

ここまででcodeanywhereの要録は完了です。

初期設定

Containerを作成する

Dashboardに戻り、一度画面を読み込み直したら、［New Container］をクリックする。

【手順】New Container画面が表示されるので下記を行う

1. 今回使用する言語 ［Ruby］ をクリックする。
2. 画面下部の ［Container name］ に任意の名前をつける。（最初から割り当てられている名前のままでもOK）
3. 画面右下の ［Create］ をクリックする。
4. 

下記のような読み込み画面になるので、しばらく待つ。

※ 黒いEditor画面が表示されるまで少し時間がかかることがあります。数分待ってもこの画面から変わらない時は、ページを再読み込みしてみましょう。

IDE画面確認

Codeanywhereの画面構造を確認する

【手順】Editor画面が表示されたことを確認する

青枠部のようにウィンドウが表示されますが、右上の×をクリックして閉じます。

【手順】 画面をざっと確認する

画面の角枠組みのことをペインと呼びます。

左ペイン：フォルダ構造（Codeanywhere内に配置されています）。
中央ペイン：コマンド実行やファイルの編集を行えます。

ターミナルを表示する

【手順】 画面下部のタブ（ターミナルを使用する）

赤線部は、Container作成時につけた名前が表示されます。

下記画像のように”~/workspace $”という表示がされていれば、コマンド（命令）を実行できる状態です。
ここに文字列でコンピュータに対する命令文を打ち込む事で、その命令が実行されます。
（「指定のRubyファイルを実行してほしい」という命令もここに打ち込む事で実行されます）

今回使用するRubyやRails、その他ツールをインストールする

【手順】 Railsのバージョン7をインストールする

標準で最初からインストールされているRailsのバージョンは６ですが、今回は最新のバージョン７を使用していくので、改めてインストールしていきます。

［コマンド］

$ gem install rails -v 7.0.0

インストールコマンドを実行すると、インストール状況のメッセージが沢山表示されますが、そのまま待ちます。

下記のように、~/workspace$が再度表示されたらインストール完了です。

念のため、Rails7がインストールできたか確認してみましょう。

［コマンド］

$ rails -v

Rails 7.0.XXと結果が返ってきたら問題なくインストールできています。

PostgreSQLをインストールする

[コマンド]

$ sudo apt-get install libpq-dev postgresql

【手順】”Y/n” と表示が出たら”Y”と入力して［エンターキー］を押す

Y

処理が先に進みます。

【手順】処理が完了するまでしばらく待つ

途中、ターミナル右側に「Process is listening on port 5432.」と表示されることがありますが、×をクリックして閉じてしまって構いません。

「~/workspace $」という表示がされていれば、処理が完了して次のコマンドを実行できる状態です。

【手順】PostgreSQL実行モードにする

PostgreSQLに初期設定をするためにモードを切り替えます。

[コマンド]

$ sudo su postgres -c psql

【手順】PostgreSQLに自動アクセスするためのPostgreSQLユーザを作成する

PostgreSQLは、Railsアプリケーションから接続する際に、そのコンピュータのOSユーザと同名のPostgreSQLユーザ名で接続する、という標準の仕様があります。そのため、今回はcaboxというターミナルに表示されているOSユーザ名と同名のPostgreSQLユーザを作成します。

[コマンド]

CREATE ROLE cabox SUPERUSER LOGIN PASSWORD 'diveintocode';

【手順】PostgreSQLモードから抜け出る

‘\q’（バックスラッシュとq）を打ち込むことで抜け出る（quit）ことができます。

[コマンド]

\q

お疲れ様でした！

ここまでで開発準備は完了です。
次の記事では、いよいよRailsを用いてのWebアプリケーション開発を行なっていきます!

次の記事：【完全初心者向け】Ruby on Rails7を使って初めてのWebアプリケーション作成からインターネット公開までを一気に体験！#2

■ディープロの公式HPはこちら
■ディープロのオンライン個別説明会 & 相談会予約はこちら
■オンラインプログラミング学習サービス ディープロ Learningsはこちら