Ruby on Railsで作る！Webアプリケーションをゼロから開発する手順とは
RubyのフレームワークRuby on Railsを使ってWebアプリケーションを作る手順について紹介しています。最近はRuby on Railsで書かれたWebアプリが多く、一人でも素早く開発できる便利なフレームワークとして知られています。
今回の記事では、Webアプリを作ったことがないという初心者向けに分かりやすく2人のキャラクターが登場しながらWebアプリの開発について解説しています。
企業でもメインで使っているところは多いので、エンジニアを目指している方もぜひ参考にしてみてください。
今回の登場人物
|
元エンジニアで田島アプリスクールの代表。人の成長を見るのが一番のやりがいになっている。
大石ゆかり（24） 3ヶ月前に田島アプリスクールに事務として転職してきた。
|
（ある日の昼休み・・・）
田島さんちょっとご相談が！
なになにー？？
私の母親が手作りでアクセサリーを作ってるんですけど「ネット上でも販売できるECサイトが欲しい」って言ってて、どうしても作ってあげたいんですっ！
それで、田島さんに作り方を聞きたくて・・・
なるほどね。いい娘さんだなあ！
・・・どうやったら作れますか？
そしたらどんなものが必要か説明していくね！
やったー！ありがとうございますっ！
目次
必要となる知識
HTML/CSS
HTMLとは、Webサイトにものを表示するための言語です。
上の画像のようにWebサイト上に文字を表示することができます。
そしてCSSは、サイト上の表示を整えるものです。文字の色や大きさを変えたいといったサイトの見栄えを整えるためにCSSが必要になります。
上の画像を見るとわかるように、背景に色付けしたり白いボックスを真ん中に寄せるなど色や位置を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アプリ作れたらルビー買ってくださいね♪
なんでそうなるの笑
実際に開発してみよう
実際にWebアプリケーションを作っていこうと考えたら「企画→設計→開発」といった流れが一般的です。
「企画」では、どんな人がいつ使うのかといったターゲットを決め具体的なWebアプリの構想を練っていきます。
「設計」では、サイトマップ、ワイヤーフレームの作成、データベースの設計を行いましょう。以下で具体的に解説しています。
サイトマップの作成
サイトマップとはWebサイトの構成図です。作ろうと考えているWebサイト・Webアプリにはどんなページが必要なのか、どういう配置にしたら良いか考えるものです。
例として、コーポレートサイトのサイトマップを作成してみました。
会社のHPに限らずどのWebサイト、Webサービスもサイトマップを作っておくと余分なページや足らないページなどを把握することができます。また、複数人で開発する際の共有としても役立つでしょう。
ワイヤーフレーム
ワイヤーフレームは、各ページをより詳細に設計するための図になります。特に色付けなどは必要ありませんが、そのページにはどんなボタンやレイアウトが必要なのか作成する必要があります。
自分の頭の中にイメージがあっても形にする時にワイヤーフレームを書き出しておくとより鮮明に理解できるでしょう。
Cacooなどのツールを利用すれば、初心者でも簡単に作成することができるはずです。
データベース設計
データベースで管理するデータの全体図を書き出していきます。Webサービスを運営していく中で機能を追加したり削ったりすることがあるので、将来的にも一元管理しやすいデータベースを設計しておくと良いでしょう。項目なども洗い出しておくことにより、Modelの設計などに役立ちます。
やり方が分からないという方は、作りたいWebサービスと似たすでにあるサービスの情報を洗い出してみると良いでしょう。何か動作したときにどんなデータが登録されているのか確認してみると勉強になるはずです。
開発では、Ruby on Railsでコーディングしながらアイデアを形にしていく段階になります。
コードは、テキストエディタというものを使って書いていくようにしましょう。
ひとつWebアプリ作るのにも大変そうですね〜
そうだね〜。企業で作るとしたらディレクター、デザイナー、エンジニアで役割分担することが多いからね！
だいたいどれくらい時間かけるんですか？
早くても3ヶ月くらいはかかると思うよ。ゲームとかは1本作るのに1年くらいかけてつくり込むからね！
え、そんなに・・・
Webアプリを公開してみよう
オリジナルのWebアプリを作ったら公開して誰でも使えるような状態にしたいと思うでしょう。中には自前でサーバーを立てて運用する人もいますが、費用や時間的なコストを考えるとレンタルサーバーを借りて公開する方が良いでしょう。
実際に公開するためには、独自ドメインを取得し、サーバーを立ち上げる必要があります。それぞれ以下で記載している記事も合わせてご覧ください。
費用をかけずに手軽に公開したいという方であれば、Herokuというツールを利用すると良いでしょう。
独自ドメインの取得
ドメインとは、インターネット上にある住所のようなもので登録していないと訪問先がなくWebサイトを見ることができません。ムームードメインやお名前.comなどが人気でしょう。
サーバー(自前・レンタル)
ドメインを取得したらサーバーを用意しなければなりません。自分で取得した住所に建物を建てるようなイメージです。決まった住所(ドメイン)に建物(サーバー)を置くことでWebサイトを見ることができるのです。
レンタルサーバーは数多くあるので、選ぶ基準としては、「利用したい技術が利用できるか」や「かかる費用」などを事前に確認しておくと良いでしょう。
さくらのVPSやSqale(スケール)などは初めて利用する人でも扱いやすいかと思います。
サーバーとかって高いんですか？
1,000円程度あれば借りられるところは多いよ！
そうなんですねっ！
じゃあ私がECサイト作って公開したときは経費で落としてくださいね♪
・・・うん、自分で払おうね笑
おさらい
|
Webアプリを作ることでデザイン面、システム面両方の知識が身につくでしょう。エンジニアとして就職転職したいという人も一度自分で何か作った経験があれば、大いに役立つはずです。
Ruby on Railsは初心者でも受け入れやすくアイデアを形にしやすいフレームワークなので、ぜひチャレンジしてみてください。
[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルサービスが作れるRuby on Railsオンラインブートキャンプを開催しています。
