オーダーメイドコース
icon
icon

Ruby on Railsで作る!Webアプリケーションをゼロから開発する手順とは

初心者向けにRuby on Railsを使ったWebアプリケーションの開発手順を解説。企画から実際に開発し公開するまでの流れを細かく紹介しています。Webサービスを作ったことがないという人でも今すぐ知っておきたい内容でしょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

RubyのフレームワークRuby on Railsを使ってWebアプリケーションを作る手順について紹介しています。最近はRuby on Railsで書かれたWebアプリが多く、一人でも素早く開発できる便利なフレームワークとして知られています。

今回の記事では、Webアプリを作ったことがないという初心者向けに分かりやすく2人のキャラクターが登場しながらWebアプリの開発について解説しています。

企業でもメインで使っているところは多いので、エンジニアを目指している方もぜひ参考にしてみてください。

 

今回の登場人物

 

20163020-2田島悠介(29)

元エンジニアで田島アプリスクールの代表。人の成長を見るのが一番のやりがいになっている。
好きな映画は『トスカーナの休日』

 

20160620

大石ゆかり(24)

3ヶ月前に田島アプリスクールに事務として転職してきた。
Instagramには3つの写真加工アプリで編集してからアップするという。

 

 

(ある日の昼休み・・・)
 

大石ゆかり

田島さんちょっとご相談が!

田島悠介

なになにー??

大石ゆかり

私の母親が手作りでアクセサリーを作ってるんですけど「ネット上でも販売できるECサイトが欲しい」って言ってて、どうしても作ってあげたいんですっ!

それで、田島さんに作り方を聞きたくて・・・

田島悠介

なるほどね。いい娘さんだなあ!

大石ゆかり

・・・どうやったら作れますか?

田島悠介

そしたらどんなものが必要か説明していくね!

大石ゆかり

やったー!ありがとうございますっ!

 

目次

 

必要となる知識

HTML/CSS

HTMLとは、Webサイトにものを表示するための言語です。

a0e9f2a9cbbd0601bb5623556c0af9992-620x3791

上の画像のようにWebサイト上に文字を表示することができます。

 

そしてCSSは、サイト上の表示を整えるものです。文字の色や大きさを変えたいといったサイトの見栄えを整えるためにCSSが必要になります。

div7-620x413-1

上の画像を見るとわかるように、背景に色付けしたり白いボックスを真ん中に寄せるなど色や位置をCSSで指定しています。

プログラミングはやったことがないけど、Webアプリを自分で作ってみたいという人はこのHTML/CSSから学んでみることをおすすめします。

 

JavaScript

JavaScriptは、ボタンを押した時やマウスオーバーした際に動きを見せるために必要な言語です。Webサイトの下部に設置されている「ページトップ」に戻る動きなどはJavaScriptを使って実装していきます。

Webサービスをより使いやすい設計にするためにJavaScriptを知っておくと良いでしょう。

 

Ruby

Rubyはプログラミング言語の一つで、日本人のまつもとゆきひろ氏によって作られました。

Rubyはプログラミング言語として、以下のような特徴を持ちます

  • すぐに実行できる(インタプリタ型、スクリプト言語)
  • 簡単に実世界を表現することができる(オブジェクト指向)
  • 短いコードで記述できる(動的型付け)

Web系のプログラミング言語の中でも人気が高く、Webアプリケーションを開発している多くの企業も利用しているのが実情です。

 

Ruby on Rails

プログラミング言語Rubyで書かれたWebアプリケーションフレームワークの1つで、David Heinemeier Hansson(DHH)氏によって作られました。

Ruby on Railsを利用することで、実際のWebアプリケーションを作成するのに必要な、データベースへのアクセスや、HTMLの描画、(ユーザーログインで必要な)セッションの管理などを少ないコードで実現することができます。

RubyやRuby on Railsを触ったことがないという人は、まずRuby on Railsの環境構築方法をご覧ください。Ruby/Ruby on Railsを書いて実際に動かすためにも準備が必要になってくるのです。

 

データベース

データベースとは、あらゆるデータを一元管理し、そのデータを検索などしやすくしたシステムです。普段Webサービスを使っている中で何か登録している動作があれば、すべてデータベースに格納されていると理解できるでしょう。つまり、Webサービスを形にするためにはデータベースの知識も必要不可欠になってきます。

データベースソフトウェアには、SQLiteやMySQL、PostgreSQL, Oracle Databaseなどがあり、これらはリレーショナルデータベース(RDB)と呼ばれます。Ruby on Railsではリレーショナルデータベースを使用することが多いです。

 


 

大石ゆかり

ルビーってなんか名前良いですね!宝石みたいっ!

田島悠介

(相変わらずミーハーだねって言いたいところなんだけど・・・)

実は、誕生石のルビー、つまり宝石から名付けられてるんだよ!

大石ゆかり

え、素敵!じゃあ私がWebアプリ作れたらルビー買ってくださいね♪

田島悠介

なんでそうなるの笑

 

[PR] 未経験からWebエンジニアを目指す方法とは

実際に開発してみよう

実際にWebアプリケーションを作っていこうと考えたら「企画→設計→開発」といった流れが一般的です。

「企画」では、どんな人がいつ使うのかといったターゲットを決め具体的なWebアプリの構想を練っていきます。

 

「設計」では、サイトマップ、ワイヤーフレームの作成、データベースの設計を行いましょう。以下で具体的に解説しています。

 

サイトマップの作成

サイトマップとはWebサイトの構成図です。作ろうと考えているWebサイト・Webアプリにはどんなページが必要なのか、どういう配置にしたら良いか考えるものです。

例として、コーポレートサイトのサイトマップを作成してみました。

スクリーンショット 2016-08-10 15.48.56

会社のHPに限らずどのWebサイト、Webサービスもサイトマップを作っておくと余分なページや足らないページなどを把握することができます。また、複数人で開発する際の共有としても役立つでしょう。

 

ワイヤーフレーム

ワイヤーフレームは、各ページをより詳細に設計するための図になります。特に色付けなどは必要ありませんが、そのページにはどんなボタンやレイアウトが必要なのか作成する必要があります。

自分の頭の中にイメージがあっても形にする時にワイヤーフレームを書き出しておくとより鮮明に理解できるでしょう。

Cacooなどのツールを利用すれば、初心者でも簡単に作成することができるはずです。

 

データベース設計

monolist-database

データベースで管理するデータの全体図を書き出していきます。Webサービスを運営していく中で機能を追加したり削ったりすることがあるので、将来的にも一元管理しやすいデータベースを設計しておくと良いでしょう。項目なども洗い出しておくことにより、Modelの設計などに役立ちます。

やり方が分からないという方は、作りたいWebサービスと似たすでにあるサービスの情報を洗い出してみると良いでしょう。何か動作したときにどんなデータが登録されているのか確認してみると勉強になるはずです。

 

開発では、Ruby on Railsでコーディングしながらアイデアを形にしていく段階になります。

コードは、テキストエディタというものを使って書いていくようにしましょう。

06a38e0d1b838d31d38b33270bc00f1d11-620x358

 


 

大石ゆかり

ひとつWebアプリ作るのにも大変そうですね〜

田島悠介

そうだね〜。企業で作るとしたらディレクター、デザイナー、エンジニアで役割分担することが多いからね!

大石ゆかり

だいたいどれくらい時間かけるんですか?

田島悠介

早くても3ヶ月くらいはかかると思うよ。ゲームとかは1本作るのに1年くらいかけてつくり込むからね!

大石ゆかり

え、そんなに・・・

 

Webアプリを公開してみよう

オリジナルのWebアプリを作ったら公開して誰でも使えるような状態にしたいと思うでしょう。中には自前でサーバーを立てて運用する人もいますが、費用や時間的なコストを考えるとレンタルサーバーを借りて公開する方が良いでしょう。

実際に公開するためには、独自ドメインを取得し、サーバーを立ち上げる必要があります。それぞれ以下で記載している記事も合わせてご覧ください。

費用をかけずに手軽に公開したいという方であれば、Herokuというツールを利用すると良いでしょう。

 

独自ドメインの取得

ドメインとは、インターネット上にある住所のようなもので登録していないと訪問先がなくWebサイトを見ることができません。ムームードメインやお名前.comなどが人気でしょう。

ドメインが取得できるサイト

 

サーバー(自前・レンタル)

ドメインを取得したらサーバーを用意しなければなりません。自分で取得した住所に建物を建てるようなイメージです。決まった住所(ドメイン)に建物(サーバー)を置くことでWebサイトを見ることができるのです。

レンタルサーバーは数多くあるので、選ぶ基準としては、「利用したい技術が利用できるか」や「かかる費用」などを事前に確認しておくと良いでしょう。

さくらのVPSやSqale(スケール)などは初めて利用する人でも扱いやすいかと思います。

レンタルサーバー比較

 


 

大石ゆかり

サーバーとかって高いんですか?

田島悠介

1,000円程度あれば借りられるところは多いよ!

大石ゆかり

そうなんですねっ!

じゃあ私がECサイト作って公開したときは経費で落としてくださいね♪

田島悠介

・・・うん、自分で払おうね笑

 

おさらい

  1. WebアプリはRuby on Railsを使うのがおすすめ!
  2. Webアプリを作る時は企画→設計→開発という順番で進めよう!
  3. Webアプリを公開するためにドメイン取得とサーバーを借りよう!

 

Webアプリを作ることでデザイン面、システム面両方の知識が身につくでしょう。エンジニアとして就職転職したいという人も一度自分で何か作った経験があれば、大いに役立つはずです。

Ruby on Railsは初心者でも受け入れやすくアイデアを形にしやすいフレームワークなので、ぜひチャレンジしてみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルサービスが作れるRuby on Railsオンラインブートキャンプを開催しています。