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アプリの開発について解説しています。
企業でもメインで使っているところは多いので、エンジニアを目指している方もぜひ参考にしてみてください。
今回の登場人物
|
元エンジニアで田島アプリスクールの代表。人の成長を見るのが一番のやりがいになっている。
大石ゆかり（24） 3ヶ月前に田島アプリスクールに事務として転職してきた。
|
田島悠介（29）
（ある日の昼休み・・・）
田島さんちょっとご相談が！
なになにー？？
私の母親が手作りでアクセサリーを作ってるんですけど「ネット上でも販売できる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アプリ作れたらルビー買ってくださいね♪
なんでそうなるの笑
[PR] Rubyのプログラミングで挫折しない学習方法を動画で公開中
実際に開発してみよう
実際に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サイト作って公開したときは経費で落としてくださいね♪
・・・うん、自分で払おうね笑
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
おさらい
|
Webアプリを作ることでデザイン面、システム面両方の知識が身につくでしょう。エンジニアとして就職転職したいという人も一度自分で何か作った経験があれば、大いに役立つはずです。
Ruby on Railsは初心者でも受け入れやすくアイデアを形にしやすいフレームワークなので、ぜひチャレンジしてみてください。
[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルサービスが作れるRuby on Railsオンラインブートキャンプを開催しています。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
