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

SPONSORED LINK

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

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

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

Railsアプリを作るために

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

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

では早速進めていきます。今回はデータベースも使わないシンプルなHello Worldアプリを作成していきます。

最終目標は「localhost:3000/whispers」へGoogle Chromeを使ってアクセスしたとき、画面上にHello World!という文字を表示させることです。

上の画像ではきちんと表示されていることを確認できます。この状態を今回の最終目標として、railsを使用したアプリ開発の流れや、Ruby on Railsの大切な概念(実は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ファイルは正常にインストールされた証です。

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

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

 

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


今回、僕が普段から使用しているパソコンでコマンドを打ち込んだので最後の行で「すでにmysqlが立ち上がっています」と怒られてしまいました。初めてのsqlを立ち上げた時は、画面上の真ん中にあるように「Starting MySQL SUCCESS!」と表示されますよ!

 

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

さて、データベースの準備が整いました。次に必要なのはMVCのVCの部分です。

すなわち、ビューとコントローラーです。ビューはコントローラーと対応して作成されるので、先にコントローラーを作成します。それではコマンドラインを利用してコントローラーを作成していきましょう。

今回の作業で使用するコマンドは「rails g」コマンドです。

rails gコマンドはアプリ作成時に多用するコマンドなので、よく覚えておくようにしましょう!

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

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

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

Ruby on Railsの必須知識!「MVC」について理解を深めよう

2016.12.26

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

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

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

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

 

ルーティングを記述する

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

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

 

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

 

アクションを定義する

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

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

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

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

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

 

ビューファイルについて

ひとまずビューについて理解を深めておきましょう。ビューファイルはhtmlとrbファイルが共存している形式のデータファイルです。この特性により、htmlもrubyも同時に認識され、プログラムを実行することができます。

拡張子は.html.erbと呼ばれていて、railsアプリのViewファイルに格納されています。

 

ではビューファイルを新規で作成し、コントローラーのindexアクションに対応するビューファイルを作成していきましょう。

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

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

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

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

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

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

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

 

サーバーを立ち上げる

ではサクッと開発したアプリを動かすためサーバーを立ち上げてみましょう。立ち上げる時もrailsコマンドを使用しますよ。

下記のコマンドを打ち込んで、ローカルホスト内のサーバーを起動させましょう!

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

プログラミングは英語が理解できると有利です。特にrailsはエラーメッセージが英語で返ってくるので、英語が読めるとエラーの解読が比較的容易になる、なんていう特典があります。他にも情報収集に英語が出来ると最新のものを入手できるようになるのも強いですよね。

 

ではGoogle Chromeを立ち上げて、https://localhost:3000にアクセスしてみてください。ちゃんとrailsがサーバー内にインストールされていれば、下記のような画面になるはずです。

rails_app

ではhttps://localhost:3000/whispersにアクセスしてみましょう。

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

 

以上、ここまででルーティング、ビュー、コントローラーと足早に説明してきました。

いかがでしたか?

頭である程度の内容が整理できていれば、そこまで難しいとは感じなかったのではないでしょうか。これらで紹介してきたことは、より複雑な実装を行うアプリであっても変わりません。MVCの作成順序を正しく理解して、たくさんのアプリを開発できるとよいですね!

 

まとめ

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

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

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

SPONSORED LINK

更新情報はSNSでお届け

ABOUTこの記事をかいた人

HIRO

旅・音楽・プログラミング・ブログを愛するコンテンツ・クリエーター、ミニマリスト。ガジェット、海外ドラマ、旅行が好きで、趣味は読書。都内のIT企業でSEとして働いています。※このブログでの発言はすべて個人に帰属し、企業や団体とは一切関連がありません(PRを除く)。