ShogoTagami【初心者向け】WEBサービス開発のステップを詳しく解説する自分でWEBサービスを開発してみたい!でもどうやって進めればいいのか分からない...という人へ向けて、この記事ではWEBサービス開発のはじめの一歩をカンタンに解説します。React.jsで開発をするという前提で書いていきます。その他のFW(フレームワーク)でも共通する部分はありますので、是非参考にしてください。この記事をお読みいただくことで、WEBサービス開発のために必要な最低限のスキルや知識がわかるそれらを学習するための方法やツール、サイトがわかる基礎を卒業してアウトプットできるように書いています。結論、この3つをやっていきましょう最低限ググりながら書ける状態を目指すまずはCRUDの枠組を作ってfirebaseへデプロイしようUIデザインを凝るためにデザイン例を参考にしようこれらをすべて達成すれば、超初心者から初心者になれるといったところです。未経験エンジニアとして会社に就職できるかな?という最低限のラインです。発展」という流れで進めていきます。こちらでは詳しいところは解説しませんが、それぞれのステップで何を参照しながら進めればいいのか?は分かるようになると思います。未経験エンジニアとして重要なことは「自分でなんとかする力」です!プログラミング学習はもちろん、仕事をするなかでも、わからないことを自分一人でなんとかしようとすること、はとても大事です。Railsチュートリアルを完走しようWEBサービス開発に必要なエッセンスはRailsチュートリアルにつまっています。RailsチュートリアルRailsチュートリアルで学ぶべきは以下です。Railsでの基本的なアプリーケーションのつくりかたHerokuへのデプロイ方法gitの使い方gemの使い方DB設計これらはすべてWEBサービス開発の基礎として知っておくべきものです。就職後のチーム開発では必ず使うような知識です。頭に入れておきましょう!もしRailsチュートリアルの完走が難しい...という方はポテパンキャンプの受講をオススメします。オープンクラスなら先着順でとてもリーズナブルな料金でRailsのカリキュラムを受けられます!ポテパンキャンプをみるサービスのコンセプトを決めるインプットが完了したら、サービス開発のコンセプト・案をまとめましょう。自分で開発したサービスで収益を得たい、と考えているのであればここはとても大事です!多くのユーザに使われること、収益化が図れることが大前提になります。一方であくまで趣味の範囲内であればどんなものでも構いません。言えば、自分が好きなものに関わるサービスがいいでしょう。マンガが好きなら、「マンガの新着をプッシュ通知が送られるサービス」とか。ここで大事なのは、あなたがそのサービスを本当に作りたいかどうか?です。開発途中に情熱を失うことはしょっちゅうあります。2,3ヶ月ずっとそれを開発しても苦ではないものを考えましょう。モック作成にあたっては様々なツールがあります。XDやfigma、zeplinなどなど。最初は手書きの紙でいいと思います。ここではツールの技術習得に時間をかける必要はありません。つくってみるさあ、早速開発を始めましょう!...と言っても何をすればいいのか分からないですよね。ゼロからサービス開発をする場合、まずはじめに「設計」を行います。今回はプログラミング初学者も対象としているので、詳しいことは話しません。一般的な設計思想は置いておいて、開発の手順を明確化します。・必要な画面はいくつか・それぞれでどのようなアクションを行うか・それらのアクションをcontrollerでどう定義できそうか・抽象化できそうなものはないかそしてある程度のまとまりになったら、早速アプリケーションを作っていきましょう。RailsチュートリアルではCloud9を使っていますが、なるべくlocal開発環境を構築するようにしましょう。初めは難しいかもしれませんが、今回はRubyとRails、Frontの最低限のパッケージで十分です。手を止めてFirebaseにあげてみようテーブル、view(TOPページ)あたりを作ったら一度Firebaseへのデプロイに挑戦しましょう。firebaseデプロイについてFirebaseはGoogleが開発しているmBaaSのサービスで、端的に言えば「インフラ、サーバサイドを簡単に実装できるもの」です。このFirebaseにアプリケーションをアップロードすることで、ものの数分で公開することができます。料金は基本無料で、使用量に応じて課金されます。何千、何万人が使わない限り無料で済むので、積極的に使っていきましょう。Firebaseからプッシュ通知を送る、ということもできます。2,3年前くらいから話題の「PWA」などで、まるでスマホアプリのようにAndroid端末へプッシュ通知を送ることもできます。CLIというものを使うだけです。ドメインを取るのであれば、好きなところから適当なドメインを月額数百円程度で取得することもできます。デプロイが完了したら、自分が実装したview(TOPページ)が正しく表示されるか確認しましょう。変更を加えたとしても、CLIから変更差分含めてデプロイすることができます。Deleteをまとめた用語で、アプリケーションやソフトウェアがもつ基本機能のことです。これを実装していきます。初めに考えた「やること」に沿ってCRUDを実装していきましょう。ここはRailsチュートリアルで学習したこととほとんど同じだと思います。Overflowなどで質問してみましょう。あなたのやりたいことはすでにgemやパッケージになっているケースもあります。探してみましょう!ここで重要なことは「あまりデザインに凝りすぎないこと」です。デザインは実装していてとても楽しいのですが、まずは骨組みを作らないとここで余計な時間を食うことになります...。controller)ができあがったら、テストを書いていきましょう。オススメはRSpecかMinitestです。好きな方を選びましょう。テストはなんのために書くのか?というと、「動くことを保証するため」です。一人で書いているときはそんなものいらん!と思うでしょう。チームで開発するとなると、他の人の実装に対して知らないうちに破壊的変更を加えている場合があります。それを防ぐために「動くことを保証する」ためのちゃんとしたテストが必要です。JavaScriptの部分も書いていれば、frontのテストも追加しましょう。テストができたと思います。最後にデザインを加えます。使われているアプリケーションのデザインやUIを参考にすると良いです。フォトショやイラレ」と考えがちですが、そんなことはありません。画像やフリーのもので十分です。ここでも余計な知識インプットは避けましょう。UIやUXに関してもいろんな書籍があります。どれか一つを参考にして進めてみると、普段自分たちが使っているサービスも意識して使うようになります。今後自分のサービス開発にも活きてくるはずです。最後に色んな人に使ってもらうここまでである程度ユーザに使ってもらえる状態になったと思います。完璧、ではないかもしれません。Twitterなどで全体に公開してみましょう。ユーザや友人などの反応をみて、足りないところを改修したり、デザインを修正していきます。すると、自分でも気づかなかったようなバグや改善点がきっと見つかるはずです。一点注意すべきはセキュリティ面です。ユーザー情報を保持するようなサービスの場合、最低限のセキュリティチェック(CSRF対策やXSS対策など)はしたうえでデプロイ・リリースしましょう。決済機能をもっていたらなおさらです。サービス開発経験は仕事獲得にも役立つ最後に、サービス開発をリリースまで行う経験や知識は就職、フリーランスとして活躍するためにも役立ちます。フロントやサーバのある程度の知識をもっていることの保証になりますし、それに関連するインフラ周りの知識も仕事で役立ちます。最近だとGCPやdockerなど様々なサービスがでてきており、これらをある程度使えることで差別化を図ることができます。フリーランスのなかにはこうしたインフラ周りを専門に案件獲得している人もいるくらいです。人気記事【2019年最新版】Twitterで評価の高いスクール5選まだプログラミングスクール選びで悩んでませんか?現役エンジニア、フリーランスエンジニア、個人事業主が語る、プログラミング初心者〜エンジニア就職のアドバイスをまとめました。いう方へオススメする、最強の転職法は以下よりお読みいただけます!未経験からエンジニアになる方法をみるプログラミングスクールをでてもエンジニアにはなれません!残念ながら、プログラミングスクールを出れば誰でもエンジニアになれるわけではありません。【回答あり】ProEnginner・プログラマカレッジに30代は通えないの?【回答あり】ポテパンキャンプの就職先ってどんなところ?RECOMMENDこちらの記事も人気です。ひびのあおい(WEBエンジニア)本ブログメディアを運営しているWEBエンジニアです。短大卒からブラック企業に入ってしまい、うつ状態...。そこからプログラミングにハマってエンジニアとして自社開発企業にジョイン。