【初心者向け】WEBサービス開発のステップを詳しく解説する

development-step-top

自分でWEBサービスを開発してみたい!でもどうやって進めればいいのか分からない…

という人へ向けて、この記事ではWEBサービス開発のはじめの一歩をカンタンに解説します。様々な技術がありますが、今回はRuby on Rails + React.jsで開発をするという前提で書いていきます。もちろんその他のFW(フレームワーク)でも共通する部分はありますので、是非参考にしてください。

この記事をお読みいただくことで、

  • WEBサービス開発のために必要な最低限のスキルや知識がわかる
  • それらを学習するための方法やツール、サイトがわかる
  • 基礎を卒業してアウトプットできる

ように書いています。

まず結論、この3つをやっていきましょう

point
  • 最低限ググりながら書ける状態を目指す
  • まずはCRUDの枠組を作ってfirebaseへデプロイしようUIデザインを凝るためにデザイン例を参考にしよう

これらをすべて達成すれば、超初心者から初心者になれるといったところです。未経験エンジニアとして会社に就職できるかな?という最低限のラインです。

「準備 → 実装 → 発展」という流れで進めていきます。こちらでは詳しいところは解説しませんが、それぞれのステップで何を参照しながら進めればいいのか?は分かるようになると思います。

未経験エンジニアとして重要なことは「自分でなんとかする力」です!プログラミング学習はもちろん、仕事をするなかでも、わからないことを自分一人でなんとかしようとすること、はとても大事です。

Railsチュートリアルを完走しよう

WEBサービス開発に必要なエッセンスはRailsチュートリアルにつまっています。

Railsチュートリアル

Railsチュートリアルで学ぶべきは以下です。

  • Railsでの基本的なアプリーケーションのつくりかた
  • Herokuへのデプロイ方法
  • gitの使い方
  • gemの使い方
  • DB設計

これらはすべてWEBサービス開発の基礎として知っておくべきものです。さらに、就職後のチーム開発では必ず使うような知識です。まずは頭に入れておきましょう!

もしRailsチュートリアルの完走が難しい…という方はポテパンキャンプの受講をオススメします。オープンクラスなら先着順でとてもリーズナブルな料金でRailsのカリキュラムを受けられます!

 

 

サービスのコンセプトを決める

インプットが完了したら、サービス開発のコンセプト・案をまとめましょう。

もし自分で開発したサービスで収益を得たい、と考えているのであればここはとても大事です!多くのユーザに使われること、収益化が図れることが大前提になります。

一方であくまで趣味の範囲内であればどんなものでも構いません。強いて言えば、自分が好きなものに関わるサービスがいいでしょう。もしマンガが好きなら、「マンガの新着をプッシュ通知が送られるサービス」とか。

ここで大事なのは、あなたがそのサービスを本当に作りたいかどうか?です。開発途中に情熱を失うことはしょっちゅうあります。2,3ヶ月ずっとそれを開発しても苦ではないものを考えましょう。

モック作成にあたっては様々なツールがあります。Adobe XDやfigma、zeplinなどなど。でも最初は手書きの紙でいいと思います。ここではツールの技術習得に時間をかける必要はありません。

早速つくってみる

さあ、早速開発を始めましょう!

…と言っても何をすればいいのか分からないですよね。

ゼロからサービス開発をする場合、まずはじめに「設計」を行います。ただ今回はプログラミング初学者も対象としているので、詳しいことは話しません。

一般的な設計思想は置いておいて、開発の手順を明確化します。

・やることはなにか
・テーブル(DB)設計
・必要な画面はいくつか
・それぞれでどのようなアクションを行うか
・それらのアクションをcontrollerでどう定義できそうか
・抽象化できそうなものはないか

そしてある程度のまとまりになったら、早速アプリケーションを作っていきましょう。

RailsチュートリアルではCloud9を使っていますが、なるべくlocal開発環境を構築するようにしましょう。初めは難しいかもしれませんが、今回はRubyとRails、Frontの最低限のパッケージで十分です。

一旦手を止めてFirebaseにあげてみよう

テーブル、view(TOPページ)あたりを作ったら一度Firebaseへのデプロイに挑戦しましょう。

firebaseデプロイについて

FirebaseはGoogleが開発しているmBaaSのサービスで、端的に言えば「インフラ、サーバサイドを簡単に実装できるもの」です。このFirebaseにアプリケーションをアップロードすることで、ものの数分で公開することができます。料金は基本無料で、使用量に応じて課金されます。しかし、何千、何万人が使わない限り無料で済むので、積極的に使っていきましょう。

Firebaseからプッシュ通知を送る、ということもできます。2,3年前くらいから話題の「PWA」などで、まるでスマホアプリのようにAndroid端末へプッシュ通知を送ることもできます。

firebaseプッシュ通知について

Firebaseへのデプロイに関しては、Firebase CLIというものを使うだけです。もしドメインを取るのであれば、好きなところから適当なドメインを月額数百円程度で取得することもできます。

デプロイが完了したら、自分が実装したview(TOPページ)が正しく表示されるか確認しましょう。もし変更を加えたとしても、CLIから変更差分含めてデプロイすることができます。

CRUDを実装していこう

CRUDとはCreate, Read, Update, Deleteをまとめた用語で、アプリケーションやソフトウェアがもつ基本機能のことです。これを実装していきます。

初めに考えた「やること」に沿ってCRUDを実装していきましょう。ここはRailsチュートリアルで学習したこととほとんど同じだと思います。

もし「やること」に対して実装方法が分からなければTeratailやStock Overflowなどで質問してみましょう。あるいは、あなたのやりたいことはすでにgemやパッケージになっているケースもあります。探してみましょう!

ここで重要なことは「あまりデザインに凝りすぎないこと」です。デザインは実装していてとても楽しいのですが、まずは骨組みを作らないとここで余計な時間を食うことになります…。

テストを書こう

ある程度骨組み(model, controller)ができあがったら、テストを書いていきましょう。オススメはRSpecかMinitestです。好きな方を選びましょう。

テストはなんのために書くのか?というと、「動くことを保証するため」です。

一人で書いているときはそんなものいらん!と思うでしょう。でもチームで開発するとなると、他の人の実装に対して知らないうちに破壊的変更を加えている場合があります。

それを防ぐために「動くことを保証する」ためのちゃんとしたテストが必要です。

もしJavaScriptの部分も書いていれば、frontのテストも追加しましょう。

最低限の骨組みができたらデザインを凝ってみる

ここまででアプリケーションとしての最低限の骨組み + テストができたと思います。

そして最後にデザインを加えます。すでに使われているアプリケーションのデザインやUIを参考にすると良いです。これに関しては以下の記事を参考にしましょう!

UI/UXデザインの参考になる海外アプリ事例まとめサイト10選

よくある勘違いなのですが、「デザイン = フォトショやイラレ」と考えがちですが、そんなことはありません。画像やフリーのもので十分です。ここでも余計な知識インプットは避けましょう。

UIやUXに関してもいろんな書籍があります。どれか一つを参考にして進めてみると、普段自分たちが使っているサービスも意識して使うようになります。そして今後自分のサービス開発にも活きてくるはずです。

最後に色んな人に使ってもらう

ここまでである程度ユーザに使ってもらえる状態になったと思います。もちろん完璧、ではないかもしれません。

でも、一旦Twitterなどで全体に公開してみましょう。

そしてユーザや友人などの反応をみて、足りないところを改修したり、デザインを修正していきます。すると、自分でも気づかなかったようなバグや改善点がきっと見つかるはずです。

 

一点注意すべきはセキュリティ面です。

ユーザー情報を保持するようなサービスの場合、最低限のセキュリティチェック(CSRF対策やXSS対策など)はしたうえでデプロイ・リリースしましょう。もし決済機能をもっていたらなおさらです。

サービス開発経験は仕事獲得にも役立つ

最後に、サービス開発をリリースまで行う経験や知識は就職、フリーランスとして活躍するためにも役立ちます。

フロントやサーバのある程度の知識をもっていることの保証になりますし、それに関連するインフラ周りの知識も仕事で役立ちます。最近だとGCPやdockerなど様々なサービスがでてきており、これらをある程度使えることで差別化を図ることができます。フリーランスのなかにはこうしたインフラ周りを専門に案件獲得している人もいるくらいです。

これを機に自分のサービス開発を始めてみましょう!

 

人気記事【未経験あり】いまWEBエンジニアに人気転職サイト4選

人気記事【2019年最新版】Twitterで評価の高いスクール5選