Ruby入門12: Ruby on Railsの入門

Ruby入門
CANIT先生
CANIT先生

今回の講義では、RubyのフレームワークであるRuby on Railsを学んでいきますよ

猫田さん
猫田さん

ほう……とうとう、ここまできましたか。 ところで、フレームワークってなんでしたっけ?

1章で学んだように、以下の4つがwebアプリの大まかな操作です。

  1. PCやスマホを使ってインターネット経由で何かをする
  2. 登録ができて、登録した人へのサービスがある
  3. 大量のデータの中を検索して、ユーザーが望む情報を与える
  4. 検索結果を見たユーザーに気に入ったものがあればお金が動く

Ruby on Railsを使うと、2のユーザー登録と認証、4のクレジットカードを使った決済も作れます。

CANIT先生
CANIT先生

ただ、今回の講義では3の中のデータの登録と一覧の機能を作ってみましょう。わかりやすいように蔵書管理システムを作りながら学んでいきます

牛山くん
牛山くん

猫田さん、先に1章のRuby on Railsの部分を復習したほうがいいかもしれませんよ

猫田さん
猫田さん

キャニット先生が説明している間に、復習してきました! よし、それでは今回も行ってみよー

Ruby on Railsを始めるための準備

パソコン

準備①:sqlite3とnodeとyarnのインストール

CANIT先生
CANIT先生

まずは、Ruby on Railsに必要なものをインストールしていきますよ

このバージョンのRubyは、sqlite3nodeyarnを手動でインストールしないといけません。古いバージョンだとこの辺のインストールは不要です。そのうちこのバージョンでも全自動になると思われます。

sqlite3のインストール

sqlite3は、

SQLite Home Page

から、DownLoadを選んで、

https://www.sqlite.org/snapshot/sqlite-snapshot-202103011616.tar.gz

をダウンロードして、適当なディレクトリで、

unzip sqlite-snapshot-20210311616.tar.gz
tar xvf sqlite-snapshot-20210311616.tar
cd sqlite-snapshot-20210311616
./configure
make

でsqlite3が出来上がります。

nodeのインストール

nodeは、

Download | Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

からWindows Installer(.msi)を選んでインストールします。

yarnのインストール

yarnは、

Yarn
Fast, reliable, and secure dependency management.

から、

npm install –global yarn

を使ってインストールします。PATHにsqlite3とnodeとyarnがあるディレクトリを追加します。

牛山くん
牛山くん

できました!

猫田さん
猫田さん

わたしもできました。 すでにやり遂げた感しかありません

CANIT先生
CANIT先生

まだなにも始まってませんよ(笑) では、続いて今回の目的であるRuby on Railsをインストールしましょう

準備②:Ruby on Railsのインストール

パソコン

msys上で、

gem install rails -v “6.1.3”

と打つだけです。-vはバージョンの意味です。ここでは6.1.3を採用しました。

CANIT先生
CANIT先生

はい。ここまでで準備は終了です

猫田さん
猫田さん

よっしゃー!

Ruby on Railsを使ってアプリケーションを作成しよう

パソコン
CANIT先生
CANIT先生

では、実際にRuby on Railsを使ってアプリケーションの作成を始めていきます。今回はbookという名前にしました

msys上で、

rails new book

と打ってください。

これだけで、アプリの枠組みが一気に出来上がります。終了時の画面を挙げておきます。

bookというディレクトリが出来て、その下に大量のファイルが自動生成されていると思います。

①:サーバーの起動

msysの端末から、

cd book
rails server

と打ちます。これでこのコンピューターをサーバー(ユーザーからの接続を管理する機能)として使う準備ができました。このrailsプログラムに外から接続するわけです。

この状態で、ブラウザから、

http://localhost:3000

をアクセスすると、

牛山くん
牛山くん

出てきました。今のところ順調ですね

サーバーを止めるときはmsysの画面でctrl-cを打ってください。サーバーを再起動する前に、

タスクバーで右クリック→タスクマネージャー→(「詳細(D)」ボタン)→「プロセス」タグ

から、

Ruby interpreter(CUI)2.7.2p137 [x64-mingw32]

を選択(クリック)して、下のタスクの終了ボタンを押してください。

②:データベースのスキーマの指定

パソコン
CANIT先生
CANIT先生

さて、次はデータベースのスキーマを指定するのですが、何をやっているのかわかりづらいと思うので簡単に説明しますね

データベースとは

大量の同型のデータを高速に安全に使うプログラムがデータベース(DB: database)です。データベースにもいろいろな種類があるのですが、もっともよく使われているRDB(リレーショナルデータベース、Relational Database)を使います。

ちなみに、「同型の」データと書きましたが、データの形は統一されていないといけません。

蔵書アプリを作るために必要なデータは?

CANIT先生
CANIT先生

では、ここから蔵書管理のためにどんなデータが必要なのか、考えてみましょう

牛山くん
牛山くん

そうですね。まずはタイトルと著者名でしょうか

CANIT先生
CANIT先生

その2つは大事ですね。 あとは……せっかくなので、購買日、出版日、価格も入れましょう。 ここまで押さえておけば、間違えて同じ本を二度買うことはなくなると思います

それぞれの管理方法

  • 書名と著者は文字列
  • 購買日と出版日は日付
  • 価格は整数

日付は初めて出てきましたが、日付を管理する専用のデータ型です。日付順に並べることができます。

次に変数名を決めましょう。

変数は、それぞれ書名:title, 著者:author, 購買日:purchase_date, 出版日: date_of_publication, 価格:priceにします。

そして、ここでscaffoldという機能を使うと一気にスキーマ(データ構造)を作ることができます。具体的には、msys上で、

rails generate scaffold publications title:string author:string purchase_date:date date_of_publication:date price:integer

と打ちます。

③:テーブルの作成

次はテーブル(データベースの一部分です。Excelでいうとシートに当たります。データベース自身はExcelのブックに当たります。)の作成です。msys上で、

rake db:migrate

と打つだけです。

④:ローカル環境での実行

CANIT先生
CANIT先生

では、いよいよローカル環境で実行してみましょう

rails server

と打って、ブラウザから、

http://localhost:3000/publications

にアクセスしてみてください。

猫田さん
猫田さん

んん? なんも出てきませんよ?

CANIT先生
CANIT先生

まだなにも登録していませんからね。 では、登録をしてみましょうか

New Publication

をクリックして登録してみてください。

こんな感じです。最後に、

Create Publication

を押すと登録完了です。

登録内容に修正がある場合は、

Edit

で戻れます。

Back

を押すと、メイン画面に戻ります。

猫田さん
猫田さん

おおおおお、なんかそれっぽいものができましたねぇ

右側の、

Show

を押すと、個別データを見ることができます。

Edit

を押すと、編集画面に飛びます。

Destroy

ボタンを押すと、そのデータが削除できます。

たくさんRuby on Railsに触れていこう!

パソコン
CANIT先生
CANIT先生

では、以上で今回の講義は終了です。webシステムの中核部分をRuby on Railsで作ってみましたが、どうでしたか?

牛山くん
牛山くん

実際に動かすと面白いですね

猫田さん
猫田さん

なんか、いろいろできそう!

CANIT先生
CANIT先生

今回は、データ登録の説明だけでしたが、認証や決済も作れるのでぜひ挑戦してみてください。いろいろと試して、Ruby on Railsに慣れていくのが大切ですよ

挫折率が高い??プログラミング学習のポイント
駆け出しエンジニアが一緒に学ぶ
CANITは、Progateやドットインストールで独学している人達同士をつなげます。駆け出しエンジニアのあなたのためのSNSです。
Ruby入門
【この記事を書いた人】
CANIT 先生

あらゆるプログラミング言語をあやつるフリーの凄腕講師。温和な性格で「わかるまで教えます」がモットー。たまに時間ができると動物の仲間達に、プログラミングを教えることもある。現在の生徒は牛山くんと猫田さん。

CANIT
タイトルとURLをコピーしました