まえちゃんろぐ

日々の生活の中での気付き、学んだこと、体験したことをアウトプットするブログ(雑記多めです)| プログラミング 本 ワークアウト 茶道

Webサービスの個人開発から得た教訓、気付きをまとめてみる

time 2017/09/27

Webサービスの個人開発から得た教訓、気付きをまとめてみる

ここ最近、Webサービスを個人で開発する機会が増えてきました。嬉しいことなのかはさておき、これを通して得た教訓があるので共有します。

Webサービス開発に興味がある、Webサービスを一から作ったことがない方の参考になれば幸いです。

sponsored link

Webサービス開発に使用ししているツール

Webサービス開発に使用しているツールは以下になります。

  • アプリケーションフレームワーク:Ruby on Rails5
  • DB:PostgreSQL
  • ビューテンプレート:Slim
  • JS:CoffeeScript, jQuey
  • インフラ:AWS or Heroku
  • ローカル開発環境:Vagrant + Docker
  • エディタ:Atom

個人開発の一つのポイントとして参考文献などが少ないツールは選択しないことです。

理由は、詰まった場合相談できる人が限られる、又はいない場合もあるためです。真新しいツールはあまり利用しないことをお勧めします。

それを意識すると大体こんな構成に落ち着きました(選定理由を簡単に書くと、Ruby on Railsは日本語文献が多いため、PostgreSQLはHerokuとの互換性が高いため、インフラは後述)。

開発の流れ

Webサービス開発の流れをざっと書くとこんな感じです。人によりけり、項目や順序は変わってくるでしょうが大体こんな感じかなと。

  1. サービスの概要・仕様確認
  2. サービスを運用していくインフラ環境を選定
  3. サービスの基本的なフローを確認
  4. メインとなる機能のモデル設計
  5. 必要なビューの洗い出し
  6. がっつりモデル設計
  7. メイン機能の技術選定
  8. 実装

1. サービスの概要・仕様確認

作っていくサービスにはどんな機能があるかをここで確認します。

ログイン機能は必要か、メインとなる機能は何か、管理画面は必要か、通知系はどう集約させるか etc…

ここではサービスの特徴を掴むことが目的です。

2. サービスを運用していくインフラ環境を選定

サービスを利用するユーザ数、1日にどれくらい使われることを想定しているか。これだけ聞けば大体良いでしょう。

あとは定番のサービスから選定します。有名どころのサービスだと「AWS」「さくらのVPS」「Heroku」ですね。

サービス利用者が少ない、ベータ版的な位置付けの場合は Heroku、それ以外は AWS か さくらのVPS で問題ないでしょう。Heroku である程度まで頑張るのも勉強になりそう。

サービスの特徴、グロースフローなどから選定する高度な技術は私にはまだ無いためこれに落ち着いてます。

3. サービスの基本的な利用フローを確認

「1. サービスの概要・仕様確認」で得た情報を元に、ユーザーがサービスをどう利用するかを確認します。

ここでざっくりと頭の中でも良いので必要なコントローラーやビューの数などを想像します。

4. メインとなる機能のモデル設計

サービスフローが確認できたらWebサービスの肝となる「モデル設計」です。

ここはサービスのコアになる部分なので気合を入れて。

5. 必要なビューの洗い出し

サービスに必要なビューを選定します。

ノートに手書きでも良いので画面遷移図を書いてみるのもアリです。

6. がっつりモデル設計

「4. メインとなる機能のモデル設計」で漏れた残りのモデル設計をここで行います。ビューの洗い出し作業から、さらに必要なモデルが出てくる場合もあるためです。

7. サービスの機能の技術選定

ここは要はライブラリやプラグインの選定です。

例えば、ログイン機能であればRailsなら「Device Gem」を使うか、カレンダー機能であればJavaScriptなら「Fullcalendar」を使うかなど。

8. 実装

エディタ開いてコード書いていきましょう。黙々と書いていきましょう。鬼のような形相で。

コードを書いている最中でも今までやった項目(ビューの洗い出しやモデル設計 etc)をまた行う場合も出てきます。というか必ず出てきます。ここは慣れですね。私は全く慣れる気配がしてないのは秘密です。

ここまで来れば、ある程度サービスの土台はできているので、機能を付ける取ってを繰り返す、そんな作業が続いていきます。

あとは、その作業をしながらゴールまでひたすら走るだけ。

実装はどこから手を付けるか

これは初心者の方は悩む部分かなと思います。

実装ではじめに手をつけるところは、

ユーザーのサービス利用フローに沿って開発する。

はじめにそこを土台として作り、そこに必要な機能やページを肉付けしていくイメージですね。サービスの利用フローを沿っていくと必ずメインの機能も触れることにもなります。メイン機能を早い段階で実装できるのは精神的に優しい。

ちなみに、Aboutページや利用規約などは最後の実装で全く問題ないです。

また、CSSでの装飾も後からでOKです。開発中はデザインに関してはあまり意識しないことです。CSS以外実装完了ってとこまで引っ張っても良いくらいです。白い背景に黒文字、大いに結構。

とりあえず手を動かすはあまりお勧めしない

コードを書き出す前にしっかりと土台を作ってから。

ヒアリング、仕様確認、必要なビュー洗い出し、モデル設計 etc…

サービス開発は「7割設計3割プログラミング」これが鉄則。

初心者であればプログラミングやサービス開発に便利なツールに慣れるために、とりあえず手を動かすのは良いでしょう。ですが初心者でなければそれはお勧めしません。

実際に作ってみないと分からない部分も当然出てきます。それ以外の話です。折角書いたコードの出戻りはモチベーションを下げる原因になります。設計したものがそのままスムーズに進めば優越感に浸れます。考えて行動し大人な開発を意識することをお勧めします。

はじめは上手くいかないんですけどね。

ソースコードの管理

プロジェクトの管理は昔から好んで「Bitbucket」を使っています。

ソースコード管理サービスは「Bitbucket」の他にも「GitLab」や最近リリースされた「Cloud Source Repositories」があります。

個人開発ならどのソースコード管理サービスを選んでもいいですね。お好みで。

ちなみにプロジェクトのソースコード管理は早めに行った方が良いです。プロジェクトをローカルだけで管理するのは精神的によろしくないです。Gitコマンドの練習にもなります。

ワイヤーフレーム or モックは作った方が良かった

1、2ページで完結するようなアプリなら必要ないのですが、ページ数が多かったりページ遷移が複雑または複数ある場合はまとめておいた方が開発は楽です。

クライアントは思いつきや妄想レベルでサービスのアイディアや機能の提案をしてくることがあります。クライアントにサービスのイメージを掴んでもらい、お互いの意識の擦り合わせを行うことができるというメリットがあります。

モデルの作り方

基本的にビューにあるデータがテーブルのデータと紐づきます。

ユーザが使うビューを思い浮かべ、そこから必要なカラムやテーブル同士のアソシエーションを導き出します。

はじめは慣れないと思いますが、慣れたら鬼に金棒、虎に翼、木村拓哉に月9ドラマばりに強くなります。

モデルの操作は頻繁に発生する

カラムの追加・削除、オプションの追加・削除・変更はかなり行います。

モデルの操作方法をメモしておくと効率よく開発できます。

はじめはモデルと睨めっこ

モデル、ビュー、コントローラーの中ではじめに手を付けるべき箇所は、モデルです。

モデルを先に作り、ビューとコントローラーは並行して作成しながら進めていきました。

はじめから全ての機能やフローを把握することは難しい

コードを書く前にサービスの隅々まで把握することは難しいです。

特にサービスオペレーションと関連した機能などは書きながらでないと気付きにくいことが多いです。

メイン機能、サービスフローを意識しながら、まずは全体の5割くらいを作る気持ちで取り組むことをお勧めします。

私はサービスの仕様などを隅々まで決めて開発を行ったことは数える程しかないので、走りながら仕様把握していきながらの開発の方が性に合っています。育った環境のせいにしちゃおう。

おわり

私がWebサービス開発で意識していることを書きました。個人開発はまだ経験が浅いため、気づいていない部分はまだまだありそうですね。

Webサービスを開発していると気づくのは、Webサービスはモデルが命。

ただこのモデルはWebサービス開発で抽象度の高い部分でもあるので、実際に作らないと分からないこともあり、割と習得まで時間がかかります。そこは頑張るしかないです。大丈夫、僕がついてるよ。

何はともあれ、この記事が一人でも多くの方のWebサービス開発の助けになればと思います。

いやあ、インターネットって難しいですね。

こちらからは以上です。

記事内画像

Mia Baker – Unsplash

販売中チケット

プログラミング、Webサービスの作り方教えます

自分のスキルを販売しております。お困りの方はご遠慮なくご連絡頂ければと思います。

コメント

  • こういうこと、せきららに語られるのあまりみたことなく、すごく参考になりました!

    by tkwanjp €2017/12/14 14:07

    • tkwanjpさん
      お役に立てて良かったです!今後もこういった情報をどんどん発信していきます。お楽しみいただければ幸いです。

      by maechan €2017/12/14 14:55

down

コメントする




スポンサードリンク

書いてる人

maechan

maechan

ベンチャー企業、フリーランス、スタートアップを経験。開発業務、人事業務に従事していました。現在は農業系スタートアップ企業でエンジニアとして働いています。リモートワークをしているノマドサラリーマンです。詳しいプロフィールはこちら。 [詳細]

販売中チケット

プログラミング、Webサービスの作り方教えます 一人で悩まず!お気軽にご相談ください!

その他のチケットはこちら

Instagram