Rails apiモードのプロジェクトを作成し、Gitにコミットする
  • 2019.08.03に公開
  • 2019.10.12に更新
  • SPA開発
  • 2. 開発環境を整える
  • No.2 / 4
「SPA開発」では、Nuxt.js v2.14未満が使用されています。 Nuxt.jsはv2.13~14で大きなバージョンアップがありました。それに伴い、書き方も大きく変化しています。 v2.14以上で書かれた「SPA開発」の続編は、カテゴリー「 Udemy 」 で公開しています。

この記事で達成すること

今回は、以下の3つの作業を行っていきます。

  1. Railsプロジェクトを作成する
  2. Gitのセットアップをする
  3. RailsプロジェクトをGitにコミットする

それでは順に見ていきましょう。

Rails apiモードでプロジェクトを作成する

プロジェクトを置くディレクトリに移動する

ターミナルからRailsプロジェクトを置くトップディレクトリに移動してください。

(筆者の場合はrailsディレクトリにプロジェクトを作成します。ご自身の環境に合わせて読み替えてください。)

$ cd rails

プロジェクトを作成する

Railsプロジェクトを作成するコマンドを実行します。

--apiコマンドオプションを付けて、apiモードのRailsプロジェクトを作成します。

$ rails new アプリ名 --api

筆者の場合は下記のコマンドを実行しました。

$ rails new myapp8 --api

Railsを起動して確認を行う

プロジェクトの中に移動します。

$ cd myapp8

プロジェクトを起動します。(sはserverの略です)

$ rails s

ブラウザから"http://localhost:3000/"にアクセスしてください。

このような画面が出てくれば、正しくプロジェクトが作成されています。

2019-08-03 13-19-24

プロジェクト作成の確認が取れたので、ターミナル上でControl + Cを押してサーバーを停止します。

Gitのセットアップとコミット

Railsプロジェクトが作成できたので、次はgitのセットアップを行います。

gitインストールの確認

macの環境ではgitが標準装備されていますが、念の為git —versionコマンドでインストールを確認をしておきましょう。

$ git --version

# このようにバージョンが表示されればインストールされています。
git version 2.20.1 (Apple Git-117)

git初期作業

gitの設定を行っておきましょう。

この設定は 最初の一回だけ 行うものです。

プロジェクトを作成するたびに行うものではありません。

$ git config --global user.name "あなたの名前"
$ git config --global user.email あなたのemail

筆者の場合はこのようにセットアップしました。

emailは生きていないものでも大丈夫みたいです。(ちょっと確信はありませんが...)

$ git config --global user.name "andou"
$ git config --global user.email user@example.com

ここで設定した nameとemailはリポジトリ上で一般公開されます。

公開されても良い名前とメールアドレスにしておきましょう。

リポジトリの初期化

リポジトリの初期化を行います。

リポジトリとは、プロジェクトのファイルや画像などを保管する場所のことです。

先ほどのプロジェクトのルートディレクトリでgit initコマンドを実行します。

mac:myapp8 andou$ git init

# 初期化しましたと出てきます。
Reinitialized existing Git repository in /Users/ユーザー名/rails/myapp8/.git/

リポジトリに追加する

下記コマンドでリポジトリにプロジェクトファイルを追加します。

$ git add -A

このコマンドを実行すると、待機用リポジトリに保管されます。

リポジトリは2階層あると考えれば理解しやすいと思います。

コミットする

待機用リポジトリに保管されているファイル群を完全にリポジトリに反映します。

$ git commit -m "created_rails_project"

-mはコミットにメッセージをつけるオプションコマンドです。

何を追加、変更したかを記入しておくと見返すときに便利です。

コミットを確認する

git logコマンドで、いつ何をコミットしたか確認することができます。

$ git log

-mオプションでつけたメッセージが表示されます。

commit a44e99e0d1bab85c367f034b9ffb066851f94d34 (HEAD -> master)
Author: andou <user@example.com>
Date:   Sat Aug 3 13:55:35 2019 +0900

    created_rails_project

おわりに

以上で無事Railsプロジェクトをgitにコミットすることができました。

gitコマンドの使い方はRailsチュートリアルに勝るものはありません。

ここで勉強しておきましょう。

1.4 Gitによるバージョン管理 - Railsチュートリアル

次回は、Bitbucketに今回作成したRailsプロジェクトをアップロードしていきます。

少々大変ですが、画像多めなのでご安心ください。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
SPA開発の投稿
1
  • 更新情報
  • /
  • #01
「Rails apiとNuxt.jsでSPA開発」のデモアプリを開発中...。【2020/05/19追記: このカテゴリーの更新を一旦終了といたします】
1
  • 今回作るアプリケーション
  • /
  • #01
Railsアプリの完成イメージ画像と作ろうと思った経緯
2
  • 今回作るアプリケーション
  • /
  • #02
今回作るRailsアプリの全体像と機能の整理
1
  • 開発環境を整える
  • /
  • #01
macにRailsをゼロからインストールする
2
  • 開発環境を整える
  • /
  • #02
Rails apiモードのプロジェクトを作成し、Gitにコミットする
3
  • 開発環境を整える
  • /
  • #03
Bitbucketに公開鍵を追加し、Railsプロジェクトをpushする
4
  • 開発環境を整える
  • /
  • #04
HerokuCLIのインストールとherokuアプリケーションの作成
1
  • RailsをHerokuにデプロイする
  • /
  • #01
Herokuのデータベース設定と開発に便利なgemを導入する
2
  • RailsをHerokuにデプロイする
  • /
  • #02
HerokuにPumaを導入するためのRailsセットアップ
3
  • RailsをHerokuにデプロイする
  • /
  • #03
Railsに"Hello"を表示してHerokuへデプロイする
1
  • RailsとNuxt.jsを共存させる
  • /
  • #01
【RailsとNuxt.jsの共存】Rails上にNuxt.jsのプロジェクトを構築しよう
2
  • RailsとNuxt.jsを共存させる
  • /
  • #02
Nuxt.jsからRailsへ、初めてのapi通信でHelloを表示しよう
3
  • RailsとNuxt.jsを共存させる
  • /
  • #03
Nuxt.jsにVuetify2.0を導入してFont Awesomeもインストールするぜ
4
  • RailsとNuxt.jsを共存させる
  • /
  • #04
初めてのRailsApiアプリの公開。Herokuにデプロイする準備と実際のデプロイまで
1
  • データベース設計
  • /
  • #01
データベースを正規化する前に、会計システムの勘定科目データを整理する
2
  • データベース設計
  • /
  • #02
会計システムのデータベース設計に挑む
1
  • バージョンアップ情報
  • /
  • #01
【ご報告】Nuxt.jsを2.10.2にバージョンアップしました
2
  • バージョンアップ情報
  • /
  • #02
【ご報告】Railsを6.0.0にバージョンアップしました
1
  • Userモデル開発
  • /
  • #01
本番環境と開発環境でRailsのSeedデータを切り替える
2
  • Userモデル開発
  • /
  • #02
Railsにユーザーテーブルを作成する【テーブル確認コマンド】
3
  • Userモデル開発
  • /
  • #03
【Rails】EachValidatorクラスを使ったEmailカスタムバリデーション【lib以下読み込み】
4
  • Userモデル開発
  • /
  • #04
【Rails】エラーメッセージの日本語化【i18nとja.ymlのセッティング】
5
  • Userモデル開発
  • /
  • #05
【Rails】開発・テスト・本番環境の全てにユーザーSeedデータ投入する
6
  • Userモデル開発
  • /
  • #06
【Rails】ユーザーモデルのバリデーションをテストする
1
  • ログイン周りのレイアウト設計
  • /
  • #01
【Nuxt.js】ログインフラグでレイアウトを切り替えるテクニック【2019/12/07追記あり】
2
  • ログイン周りのレイアウト設計
  • /
  • #02
【Nuxt.js】ウェルカムページのレイアウト構築【sassの導入】
3
  • ログイン周りのレイアウト設計
  • /
  • #03
【Nuxt.js】ログイン周りの入力フォームコンポーネント設計【2019/12/07追記あり】
4
  • ログイン周りのレイアウト設計
  • /
  • #04
【Nuxt.js】会員登録フォームを構築してサインアップページを完成させる
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。