とりあえず超簡単なアプリを作ってみる【Ruby on Rails】


はじめに

今回はRuby on Railsでscaffoldコマンドを利用してめちゃくちゃシンプルなアプリを作成する方法を紹介します。

目標はまだRuby on Railsを使ってアプリを作ったことがない人が、とりあえずのものを作って動かしてみることができる、です。

環境

Windows Subsystem for Linux (Ubuntu 18.04)

必要知識・準備

  1. Linuxの超基本的なコマンド(cd, mkdirなど)を知っているもしくは調べて理解できること。
  2. rubyの導入が終わっていること。

アプリ作成の手順

  • STEP.1
    プロジェクトディレクトリを作成し、移動
    渡しの場合とりあえずホームディレクトリに『linux_home』というディレクトリがあって、その下に『project』というディレクトリを作っています。

    project ディレクトリに移動して、その下に『sumple』ディレクトリを作りました。これがアプリのルートディレクトリ、つまり置き場みたいなものになります。

    作ったら sumple ディレクトリに移動しています。

  • STEP.2
    ”bundle init"してGemfileを生成する

    bundlerを利用してgemを管理しますのでもしbundler自体をまだインストールしていないのなら

    でbundlerを準備します。

    準備したら

    を実行することで“sumple”ディレクトリ内に”Gemfile.rb”というファイルが作られます。ここに必要なGemを記入することでgemを管理します。

  • STEP.3
    Gemfileを編集する
    生成されたGemfileにはすでになにか書いてあると思いますが、全部消して上の2行だけを貼り付け、上書き保存します。

  • STEP.4
    railsをインストールする
    Gemfile編集後、bashで上のコマンドを入力、実行すると先ほどGemfileに入力したrailsがsumpleアプリにインストールされます。

    以下のようなログが出力されると思います。Gemfileには”rails”しか入力していませんが、関連するgem群が一緒にインストールされるので、入力していないgemも勝手にインストールされます

  • STEP.5
    アプリを生成する

    それではとうとうアプリを生成します。

    途中で

    と聞かれるので『y』と入力して『Enter』を押しましょう。

    . --skip-bundleとは?

    簡単に解説しておくと、”rails new”のタイミングでいろんなgemがインストールされるのですが、gemは『(アプリのルートディレクトリ)/vendor/bundle』という場所にまとめてインストールしておきたいので、いったんgemのインストールはスキップさせています(”rails new”だけすると違う場所にgemがインストールされてしまう)。

  • STEP.6
    基本gemをまとめてインストールする
    上のコマンドでGemfileに書かれた基本gemをすべてインストールします。

    これはまぁまぁ時間かかると思います(数分~10分程度)。

    Gemfileはいつ書き換えられた?

    STEP.3でGemfileは2行だけに書き換えたはずですが今見ると何やらたくさん書いてあります。これはいつ書かれたのでしょう?実は先程のSTEP.5にて途中で聞かれた『Overwrite /vagrant/TestApp/Gemfile?』というのが『Gemfileがすでにあるけど、初期セットの内容に上書きしていい?』という問いかけで、『y』と答えたのが『yes』を表すので、このタイミングでgem初期セットの内容に書き換えられていたんですね。

    本来であれば、ここで”bundle install”する前に必要なgemを追記したりしてから”bundle install”するといいです。今回は必要ありませんが。

  • STEP.7
    アプリが動かせるか確認する

    ここまでで一応アプリは生成できているのでチェックしてみましょう。

    アプリの起動にはbashに次のコマンドを打ち込みます。

    エラーが無ければ次のような表示がされるはずです。

    これが表示されたら見に行ってみましょう。URLは『http://localhost:3000/』です。

    上の画像が表示されていればバッチリです。これがデフォルトの画面になります。

    あとはここにいろんなページや機能を追加していけば立派なアプリになります。

    ちなみに、起動したままだとそのbash上ではコマンドが打ち込めないので、いったん『Ctrl + C』で終了しましょう。

    “Ctrl + C” を入力すると以下のようなメッセージが出て再びコマンドが打ち込めるようになります。

    railsアプリケーションの終了は『Ctrl + C』を覚えておきましょう。

  • STEP.8
    scaffoldで各種画面を生成する

    ところでrailsには便利な機能がいろいろありますが、その中のひとつ『scaffold』というコマンドを紹介しましょう。

    これはデータの作成、編集、削除などのページがたった2つのコマンドだけで生成できる魔法のようなコマンドです。

    まぁ実践するのが一番早いのでやってみましょう。

    上のコマンドを打ち込みます。とりあえずよくわからなくてもOKです。

    実行すると以下のようなメッセージが返ってきます。create と書いてあるのでなにやらいろいろなものが作られたみたいですね。

    今度は次のコマンドを実行してください。

    以下のようなコメントが返ってくればOKです。

    実はこれだけで先ほど言った『データの作成、編集、削除など』ができるページが作られているのです。

  • STEP.9
    完成

    できたアプリを触ってみましょう。

できたアプリを触ってみる

まずはアクセスしてみよう

それではアプリを起動してアクセスしてみましょう。

アプリの起動は先程やったとおり以下のコマンドです。覚えましょう。

起動したら次は『http://localhost:3000/users』にアクセスしてみてください。

↑こんなページが表示されればOKです。

データを作成してみよう

“New User”をクリックしましょう。

Name(名前)とAge(年齢)を入れる場所が出てきました。適当に入力して、”Create User”ボタンを押してみましょう。

“User was successfully created.”(ユーザーを作成できました)と表示されると思います。”Back”を押して戻ってみると、

先ほどのページに今入力して作成した人物のデータが表示されるようになっています!

同様にどんどん作ってみると、表示される数は増えていきます。

また、”Edit”で編集することや、”Destroy”で削除することもできます。

ちょっとだけ解説

Scaffoldコマンドについて

先ほど魔法のコマンドといったscaffoldコマンドですが、解説を全くしていなかったので簡単に説明します。

“bundle exec rails generate scaffold”

ここまでは良いでしょう。こういう構文なのでこういうものと思うしかないですね。

“User”

ここでなんのModel(モデル)を作成するのかを指示しています。モデルについてよくわからない方は『なんのデータを扱うものか』と考えてもらえばいいと思います。今回は人物の名前と年齢を記録するアプリを作るために”User”という名前のモデルを作成しました。つまり別にここは”User”でなくても大丈夫なのです。

“name:string age:integer”

Userモデルになんの属性をもたせるか、というのを指示しています。

人物なので名前と年齢という属性をもたせています。”string”や”integer”はそれぞれ文字列と整数を表していて、各属性がどんな値を持つのかというのを支持しています。

db:migrate コマンドについて

次に実行した↑のコマンドですが、これはmigrationファイルというDB(データベース)の設計図のようなものから、DBのテーブル(表)を作成するコマンドになります。設計図はいつできたのかというと↑のscaffoldコマンドで生成されています。設計図にはUserテーブルを作成し、name(文字列)とage(整数)をもたせる、という内容が書かれています。

おわりに

今回はscaffoldコマンドを利用したシンプルなアプリ制作を取り扱いました。

今回はscaffoldを使ってみるところに焦点を当てたために、ちょっと説明を省いている部分も多かったので、ほんとにイチからやれるような記事を準備してもいいかなとも思いましたので、また書いていきますね。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください