RailsTutorial

【Ruby on Rails 独学】Railsチュートリアル 第1章ゼロからデプロイまで。bitbucketのリポジトリ作成時に要注意

【RubyonRails独学記】Railsチュートリアル第1章

【目的別おすすめプログラミングスクール】
  • WebCampPRO
    |転職成功率98%!エンジニアとして転職したい人におすすめ
  • ポテパンキャンプ
    |Railsエンジニアとして自社開発企業に転職したい人におすすめ
  • テックアカデミー
    |オンラインでプログラミングを学びたい方におすすめ
  • Aidemy
    |AI(人工知能)分野特化のスクール。AIを学びたいならここ

自分のやってみたいWebサービスで起業することを目標に、まずはVCに持っていけるレベルのプロダクトを作れるだけの技術力を身につけることを目指してRubyとRuby on Railsを中心に習得していきます。

まずは1か月ほどProgateを使ってRubyとRuby on Railsをその中身をざっと勉強しています。

Progateでは具体的なサービス開発手順が身につかないと感じ、Rails取得者なら誰しも通るであろうRailsチュートリアルに進みたいと思います。

Railsチュートリアルとは:Ruby on Railsで一貫したWeb開発技法を学ぶため3つのアプリを作る

1.1 はじめに:前提知識は多少のHTML知識とプログラミング経験

Progateかドットインストール、もしくはプログラミングスクールの無料体験を活用する

「先にRubyを勉強してからRailsを学ぶ方が良いでしょうか?」という質問をよく受けます。この質問への回答ですが、読者の学習スタイルやプログラミング経験次第で異なるため、一口には言えません。
(中略)これからRailsで開発を始めようとする人は「とにかくWebアプリケーションを作りたい!」と考えていることがほとんどなので、たった1つのWebページを作成するために分厚いRuby本を一気読みする気にはなれないでしょう。
こちらに該当する方は、このまま本チュートリアルを進めてしまって構いません。

RailsチュートリアルではWebサービスの開発がしたいという人にはいきなりこのチュートリアルを進めることもありとしていますが、やはり理解度としてはあらかじめProgateやドットインストールである程度の基礎部分を学んでから始めるのが良さそうです。
link:オンラインプログラミング学習サービス 『Progate』
link:3分動画でマスターするプログラミング学習サイト『ドットインストール』

1.2 さっそく動かす

素直にAWSのクラウドIDEサービス『Cloud9』を使ってRailsチュートリアルを進めていきたいと思います。

今のところWindowsのPCを利用していますが、本格的にサービス開発するときにはMacへ移行する予定でもあるので、わざわざ環境開発は今しなくても良いかなと思っています。

1.2.1 開発環境

さっそくCloud9へ

テキストエディタからファイルブラウザ、コマンドラインターミナルもしっかり揃っていて、非常に便利ですね

1.2.2 Railsをインストールする

$ gem install rails -v 5.1.4

人によっては5分程度かかるみたいですが、私の場合は比較的すぐに終わりました。

1.3 最初のアプリケーション

UNIXのコマンドは随時使い方覚えていけばいいかなと思うので、今回はUNIXコマンド表は軽く目を通す程度で次へ。

まずはどの開発言語でも基本の「Hello World」を表示するアプリケーションを作成します。

$ cd ~/environment
$ rails _5.1.4_ new hello_app

これでRailsで必要な基本となるディレクトリなどは用意できたはずです。

1行目のコマンドは初めからそうなっているためいらないかな?

1.3.1 Bundler

インストールされたGemfileを書き換えます。
左のファイル一覧からGemfileを選択します。

Railsチュートリアルのリスト1.5をコピペして書き換えましょう。

書き換えたらbundle installを実行してgemをインストールします。

$ cd hello_app/
$ bundle install

「bundle updateしてください」というようなメッセージが出る場合がありますが、その場合には

$ bundle update

をした後に再度bundle installを実行してください。

Bundlerとはなんぞや
●gemは以下のように個別に手動インストールする事が可能です。
・gem install “sinatra”
・gem install “unicorn”
・gem install “omniauth”
●しかし、様々なgem(ライブラリ)を組み合わせて使っていると「gemAのver1とgemBのVer2はうまく動くけど、最新バージョン同士だとうまく動かない。」という互換性の問題が出てくる場合があります。
●また、複数人、複数環境で開発を行う場合は、各環境で使うライブラリの名前、バージョンを合わせる必要があります。
●こういった場合に、gem同士の互換性を保ちながら各gemの導入、管理を行ってくれるのがBundlerです。
●Gemfileというファイルにインストールしたいgemを記述し、それを元にbundlerを使ってインストールを行います。
●bundler本体以外のgemは基本的にbundler経由でインストールを行うのがおすすめです。

-引用:Bundlerの使い方より


1.3.2 rails server

次に開発マシン上でのみブラウズできるローカルのWebサーバーを起動するためのrails serverというコマンドを入力します。

注意点として、これまでのコマンドを入力したターミナルとは別のターミナルを立ち上げて、そこでrails serverコマンドを入力します。

$ cd ~/environment/hello_app/
$ rails server


このサーバーを立ち上げます。

1.3.3 Model-View-Controller(MVC)

各3つの役割はProgateで学習済み

Hello, World!

ルートディレクトリから[hello_app]→[app]→[controllers]→[application_controller.rb]を開きます。
のちのち「hello, world!」を表示するためのアクションを追加します。

def hello
render html: “hello, world!”
end

コントローラとブラウザを繋ぐ役割のルーティングにもコードを追加します。
[hello_app]→[config]→[routes.rb]でルーティングを開き、以下を追加。

root ‘application#hello’

先ほど立ち上げた[rails server]を更新したら「hello, world!」が表示されます。

>>3ヶ月10万円で受講できる転職特化型Ruby実践研修【ポテパンキャンプ】

1.4 Gitによるバージョン管理

ここからは開発を行っていくうえで不可欠なバージョン管理について。

バージョン管理システムを導入しておけば、プロジェクトのコードの履歴を追ったり、うっかり削除してしまったファイルを復旧 (ロールバック) したりという作業が行えるようになります。(中略)
自分の作成したコードを他の開発者と簡単に共有したり (1.4.3)、最初の章で作成したアプリケーションを本番サーバーへデプロイしたりすることもできる
引用:Ruby on Rails Tutorialより

バージョン管理システムの主流はGitで、このチュートリアルでもGitを利用します。

1.4.1 インストールとセットアップ

クラウドIDE「Cloud9」ならデフォルトでGitが導入されているので、インストールの必要はなしです。
ただ最初に設定が必要なようで、以下をコマンドで入力します。

$ git config –global user.name “Your Name”
$ git config –global user.email your.email@example.com

“Your Name”を自分の名前、your.email@example.comを自分のアドレスに変更して入力。
この2つは今後公開されるということで、本名ではない名前にしました。

ちなみに[git config]とは、Gitの設定をするためのコマンドのようですね。

次にリポジトリを作成するための[git init]コマンドを入力。

$git init

これでルートディレクトリに新しいリポジトリを作成し、[git add -A]コマンドでプロジェクトのファイルをリポジトリに追加

$git add -A

[git add -A]コマンドを実行しても、安全のためにいきなり反映されないようになっているらしく、変更を本格的に反映するためのコマンドを使う必要があるらしいです。

$git commit -m”Initialize repository”

1.4.2 Gitのメリット

ソースコードをバージョン管理下に置いておく理由が説明されてますね。
ざっと読んで次へ。

1.4.3 Bitbucket

BitbucketはGitリポジトリのホスティングと共有に特化したサイトで、Githubと並ぶ著名なサービスらしいです。
これにソースコードをアップすることで、ソースコードの完全なバックアップと他の開発者との共同作業がより容易にします。

ここでBitbucketのアカウント作成と公開鍵などの設定へ。

公開鍵の追加が終わったらBitbucketのダッシュボードから[作成]→[Repository]で新規リポジトリの作成に進みます。

ここで要注意ポイントが!

[Include a README?]はデフォルトでは「Yes, with a tutorial(for beginners)」になっていますが、「No」に変更します。

これを変えておかないと、今後指示通りの作業をしてもエラーでBitbucket上にソースコードをアップすることができません。
私はここで無駄に10時間近くストップしました(笑)

微妙にBitbucket側が変更されているのか、ここはいくら調べても出てこなかった…
ひたすらエラーの解消法を探してました。盲点でしたね…
変なところで折れるところでした(笑)

リポジトリが作成されたら、以下のコマンド入力。

$git remote add origin git@bitbucket.org:/hello_app.git
$ git push -u origin –all

は自分のBitbucketのアカウント名に変更します。
これで[hello_app]のリポジトリのページがBitbucketに作成されます。

1.4.4 ブランチ、編集、コミット、マージ

ブランチ(branch)はリポジトリのコピーで、元のファイルを触らずに新しいコードを書いたり、自由に変更や実験を試すことができるもの。本体がmasterブランチ(?)。
ブランチを作成し操作するブランチを切り替え、変更したいファイルを編集したら、コミットで変更を反映させ、マージでmasterブランチに統合させます。

$ git checkout -b modify-README
$git branch

1行目のコマンドでブランチの作成とブランチの切り替えを実行。
2行目のコマンドがすべてのローカルブランチを一覧表示させるもので、[*]がついたブランチが使用中のブランチ。

READMEをコピペして書き換え。

書き換えが終わったら変更を反映。

$ git commit -a -m “Improve the README file”

[-a]フラグは[git commit]コマンドで現存する全てのファイルへの変更を一括でコミットする意味があり、
[-m]フラグはコミットメッセージをコマンドラインで直接指定できるもの。
コミットメッセージとは、「どういう(何の為とか)コミットなのかを明確にしておくメモ書きのようなもの」らしいです。

ファイルの変更が終わったらマージという操作でトピックブランチで行った変更をmasterブランチに統合させます。

$ git checkout master
$ git merge modify-README

1行目のコマンドでmasterブランチに切り替え、2行目で変更したブランチのマージを指示。

変更をマージしたらトピックブランチを削除。

$ git branch -d modify-README

Bitbucketに変更をプッシュ。

$ git push



1.5 デプロイする

Herokuを使ってアプリケーションをデプロイしていきます。

デプロイとは、主にネットワークを通じて提供されるWebアプリケーションなどのシステム開発工程において、システムを利用可能な状態にすることである。
引用:IT用語辞典バイナリ

1.5.1 Herokuのセットアップ

[Gemfile]を開き、以下を追加。

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

追加したら[bundle install]をします。

$ bundle install –without production

[–without production]はローカル環境にはインストールしないようにするためのものらしいですが、正直今のところはよくわからないです。

変更をコミット。

$ git commit -a -m “Update Gemfile for Heroku”

だんだんめんどくさくなってきたので、大してつまらないところはカットしていきます(今頃)

[heroku create]コマンドまで実行すれば、ブラウザで表示可能な状態になりますが、まだデプロイしていないので初期画面状態です。

1.5.2 Herokuへデプロイする(1)

$ git push heroku master

このコマンドを実行すればデプロイ完了です。
[heroku create]コマンド実行時に表示されたURLを開けば「hello, World!」が表示されたら成功ですね。

第1章はここまで。

第2章:【Ruby on Rails 独学】Railsチュートリアル 第2章 Toyアプリケーション|scaffold使ってアプリを作る
第3章:【Ruby on Rails 独学】Railsチュートリアル 第3章ほぼ静的なページの作成

POSTED COMMENT

  1. YUMI より:

    こんにちは。はじめまして。
    私もチュートリアルの1.4.3のBitbucketにpushできないエラーで何時間もストップしました。
    ググりまくって色々試しても変わらず分からず、もう泣きそうになっていました。(当方、ずぶずぶの素人です…)

    ですが、こちらに書かれていた、{~README?}をNOにするという方法で、みごと解決できました!!
    貴重な解決方法を発信して頂きありがとうございます!!

  2. Clove より:

    こんにちは。
    Include a READMEの箇所でハマっておりましたが、
    この記事のお陰で、ハマった時間が2h程度でなんとか済みました。発信して頂いてありがとうございます!

  3. 管理人 より:

    私も随分悩んだところだったので、お役に立ててよかったです!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

error: Content is protected !!