一番初めのRuby on Rails!「Hello Worldアプリ」から基礎を学ぶ

Railsを扱うことにも慣れてきたので、簡単なアプリの作り方を紹介していきます。

この記事はRubyにある程度の知識を有している方を対象にしていますので、もしRubyを知らないのであれば今すぐ戻ってRubyの勉強をして下さい。

みなさん、無事に通過したようですね。それではサクっとアプリを作成していきましょう。

Railsアプリを作るために

Railsアプリを作っていきますが構築環境は整っていることを前提とします。

  1. Railsがインストールされていること
  2. テキストエディタがインストールされている
  3. Rubyの基礎概念が分かっている

では早速進めていきます。今回はデータベースも使わないシンプルなHello Worldアプリを作成していきます。最終目標は「localhost:3000/whispers」にクロームからアクセスしたときにHello World!という文字を表示させることです。

railsapp16

上の画像ではきちんと表示されていることを確認できます。この状態を今回の最終目標として、簡単にrailsを使用したアプリ開発の流れやMVCに関する大事なことを勉強していきます。では、一緒に頑張っていきましょう!

※今回はデータベースを使用せずに表示させるためmodelの説明は行いません。

 

Railsアプリ開発の流れ

Railsアプリを作る場合、はじめにRailsをインストールして開発の下地を作ることから始めます。ターミナルを起動してrailsアプリの雛形をインストールしましょう。まず作りたいフォルダまで移動してrails newコマンドを実行します。

 

ディレクトリーを移動する

ターミナルを起動させ、cd(change directory)コマンドを打ち込んで、今いるディレクトリーから移動します。

※xxxxxxの部分には、あなたのuser名を入れてください。

 

ちなみに今回は、Users直下のrailsというフォルダにアプリを作成していきます。cdコマンドを打ち込むことで、見事にディレクトリーの移動に成功しました。それではターミナル上で、rails newコマンドを実行しrailsフォルダ内にアプリの雛形を作成しましょう。

このコマンドをしようすることで、特定の名前のアプリの雛形をサクッと作ることができます。この場合は、名前をsample_appにしてrailsをインストールします。そのあとに来る-dは、railsコマンドのオプションの一種です。このオプションを追加することで導入するデータベースの種類を指定することができます。

 

今回はSequel proというアプリを使用してデータベースの管理を行うため、mysqlを指定してインストールを行うように指定しています。上記のコマンドを入力したらエンターを押すとインストール作業が始まりコマンド入力ラインが返されます。

次に行うのはrailsアプリの雛形が作成されたフォルダまで降りることです。cdコマンドを使用してディレクトリーを移動していきす。

相対パスで移動することができます。絶対パスでも移動することが可能ですが、少し長くなりますので参考程度にどうぞ。

 

現在のディレクトリーを確認したい場合は、下のコマンドを叩き込んでください。現在いるディレクトリーの絶対パスを返してくれます。

サーバーを取り扱うエンジニアやSEの新人研修で覚える基本的なコマンドです。これを機会に覚えておくとよいかもしれませんね。これを知っているだけで「おおっ」って言われるかもしれません。

 

データベースの作成

ラインが返されたらcreateコマンドを実行してデータベースの作成を行います。この際にgemファイルを書き換えることも可能ですが、特に変更せずにアプリを作成していきます。

 

もし心配な人は以下のコマンドを打ち込み、gemファイルをアップデートおよびインストールを行っておきましょう。

この2つのコマンドはgemファイルを書き換えたいときに使用することで、アプリ内のgemファイルを更新してくれるコマンドです。railsでアプリを制作する際によく使用される代表的なコマンドなので覚えておきましょう。

bundle installコマンドを打ち込むと下のようなコメントが返ってきます。こんな感じに表示がされたらgemファイルは正常にインストールされた証です。

railsap1

 

では次にデータベースを作成しましょう。使うコマンドは下の通りです。

このrakeコマンドはrailsアプリを開発する中でとても重要で、いかに使いこなすかが勝負の鍵だと思っています。このローカル内にデータベースを作成する作業を行ってくれます。このコマンドを使用してデータベースを作成することにより、SequelPro などのアプリでデータベースの中身を確認することができるようになります。

 

以前にアプリケーションを作成したことのない人は、mysqlを起動させる必要があります。この際に使用するのはこのコードになります。

railsapp2
今回、僕が普段から使用しているパソコンでコマンドを打ち込んだので最後の行で「すでにmysqlが立ち上がっています」と怒られてしまいました。初めての場合であれば真ん中あたりの行にある「Starting MySQL SUCCESS!」と返ってきて、喜びをアピールしてくれます。

 

コントローラーとルーティング

さて、データベースの準備が整いました。次に必要なのはMVCのVCの部分です。すなわちビューとコントローラーですね。ビューはコントローラーと対応して作成されるので、先にコントローラーを作成します。

それではコマンドラインを利用してコントローラーを作成していきましょう。使用するコマンドはrails gコマンドです。

 

rails gコマンドは非常に便利で多用するコマンドです。アプリに付随する様々なファイルを作成することができるので、自然と覚えていくかと思います。コマンドが正常に打ち込まれるとアプリに必要なファイルを一気に作成してくれます。

下のような感じでファイルが作成されていたら成功です。

railsapp6

また、MVCについて理解が曖昧な人は、こちらの「url」を確認してみて下さい。MVCの大切さを理解してもらえると思います。

 

では、コントローラーの作成について説明を続けていきます。コントローラーの役割はあるurlにアクセスされた時に、呼び出すアクションを記述する場所になります。sublime Textを開きcommand + oで参照したいフォルダを選択することができます。

rails直下に作成されたsample_appのフォルダを選択すると下のようになります。左側にはすべてのファイルやフォルダが配置おり、とても使いやすくなっていますね。

railsapp3

それではコントローラーの中身を確認してみましょう。

railsapp4

最初に書かれているのは、コントローラーが作成された際にデフォルトで記述されるコメントです。Rails~からendの部分は消しても構いません。これは単なるコメントなので、残しておく意味もありませんからね。

 

ルーティングを記述する

railsapp7

このコントローラーのアクションを定義しているのはルーティングです。configフォルダ内にあるroutes.rbが、アクセスされた時に返すコントローラーとルーティングを指定しています。

言い換えると電話帳や道案内のような感じですね。

 

ではroutes.rbに記述していきます。今回記述する内容はgetというhttpメソッドで”/whispers”にアクセスされたらindexアクションを起動する、という内容の記述です。以下のように記述してみてください。

railsapp5

 

アクションを定義する

作成したのはwhispersコントローラーです。まだ現段階ではアクション名は定義されていません。その証拠にwhispersコントローラーは最初に記述されていたコメント以外は何も書かれていませんでしたよね。

それではルーティングにアクション名を記述していきます。では、アクション名を定義していきましょう。whispersコントローラー内に以下を記述してみて下さい。

railsapp9

まず始めに理解してもらいたいのは、def〜endで囲まれた部分をアクションと定義していることです。これはRubyでいうところの、〇〇クラスの〇〇メソッドと同じと理解しておいて下さい。

イメージ的にはtweetsコントローラークラスのindexアクションのような感じです。

では、この記述された内容を表示させるきはどうすればよいでしょうか?じつは、ここで初めてビューファイルの存在が必要となります。

 

ビューファイルについて

ひとまずビューについて理解を深めておきましょう。

ビューファイルの拡張子はhtmlとrbファイルが共存しているものです。この特性によりhtmlもrubyも認識され、実行することができます。このファイルの拡張子は.html.erbと呼ばれていて、railsアプリのViewファイルに格納されています。

 

では早速、ビューファイルを新規で作成し、コントローラーのindexアクションに対応するビューファイルを作成していきましょう。まずsample-app直下にあるappフォルダをクリックし、そのフォルダを表示させて下さい。

その中にviewフォルダがあります。viewフォルダを右クリックしてNew Fileを選択することでフォルダ内の新規のファイルを作成することができます。これは意外と使えるので覚えておくと便利ですよ。

 

ほかにも新規ファイルの作成方法としては「command + N」もあるのですが、ファイルの保存位置をFinderから探す必要があるので手間がかかります。

railsapp10

ではビューフォルダ内にindex.html.erbを作成しましょう。New Fileを選択し「command + S」で保存する事ができます。その際にファイル名を「index.html.erb」として保存してください。

railsapp11

では、ファイルに記述していきます。今回コントローラーで記述した内容には引数が設定されていないので(その証拠にdef index ~ end内には何も書いていませんね)、直接index.html.erbに記述します。

今回はhtmlだけ書いておくことにします。Ruby形式で書くこともできるのですが、今回は難しい処理やモデルを使用しているわけではないので、できるだけ簡単な形で書いておくことにします。

ではindex.html.erbファイルを以下のように編集してみてください。

htmlの説明は省きますが、このpタグはparagraphのpですね。

railsapp12

 

サーバーを立ち上げる

ではサクッと開発したアプリを動かすためサーバーを立ち上げてみましょう。立ち上げる時もrailsコマンドを使用します。下記のコマンドを打ち込むことで、ローカルホスト内のサーバーが起動してアプリが作動するようになります。

このsはserverのsです。覚えておくと便利なので、是非ともたくさん使ってみてください。

プログラミングは英語が理解できると有利です。特にrailsは、エラーメッセージが英語で返ってくるので、英語が読めるとエラーの解読が比較的容易になります。

 

では、https://localhost:3000にアクセスしてみてください。ちゃんとrailsがインストールされていれば下記のような画面になります。

rails_app

では、https://localhost:3000/whispersにアクセスしてみましょう。先程のlocalhost:3000より先の/whispersはお察しの通り、whispersコントローラーのことを指しています。こちらのURLにアクセスしたときに、下記のような画面になっていたらHello Worldアプリが完成です。

rails_app2

 

以上、ここまででルーティング、ビュー、コントローラーと足早に説明してきました。いかがでしたか?頭である程度の内容が整理できていれば、そこまで難しいとは感じなかったのではないでしょうか。

これらで紹介してきたことは、より複雑な実装を行うアプリであっても変わりません。MVCを大切にしつて、たくさんのアプリを開発できるとよいですね。

 

まとめ

以上、Ruby on Railsのアプリ開発をザックリと俯瞰して解説してきました。

これまで解説してきた中でもとくに重要なのが、MVCの関係がアプリの中でどう作用しているかということです。この概念を理解しておかないとアプリ開発を効率的に行うことは難しいかと思います。

それではこれからも、一緒にRuby on Railsを頑張っていきましょう!

この記事が気に入ったら
いいね ! しよう

Twitter で
SPONSORED LINK

ABOUTこの記事をかいた人

旅・音楽・プログラミング・ブログを愛するコンテンツ・クリエーター。フィリピンで就業、カナダで語学留学を経験しニュージーランドで大学を卒業。 TECH::CAMPの二十九期生としてRuby / Ruby on Railsを勉強しました。記事の執筆・広告は「お問い合わせ」からお願いします。