WEBエンジニアの実務を紹介！！【新規開発案件のパターン】 2020 7/31 IT 実務 フリーランス 2020年7月31日2022年1月5日 URLをコピーしました！ フリーランスエンジニアの雄貴です！ 今回は新規開発案件に参画した際にどんな感じで業務をしているか、私の経験した事例ではありますがお話ししようと思います！ 私自身がフロントエンドをメインに活動していますので、その観点での話が多いですが、全体の流れはバックエンドも共通していますので、ぜひご覧いただけると幸いです。 Youtubeではエンジニアの単価が上がる情報発信しています！ 毎週木曜日の21時から、ライブ配信やってますので、気軽にお越しください😁 </noscript><iframe width="560" height="315" data-src="https://www.youtube.com/embed/mG1EKhbU3LM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" class="lazyload" > 目次案件の内容 自社サービスの新規開発案件で、SPAのWEBサービスを開発します。 SPAについてはこちらをご覧ください。 あわせて読みたい SPA(シングルページアプリケーション)とは？【モダンフロントの技術を紹介！】 フリーランスエンジニアの雄貴です！ 近年、WEBサービス開発でモダンな技術として採用されているSPA Vue.jsやReactなどのモダンフロントの技術を使用しているのは分かる... フロントエンド には「Nuxt.js」を使用し、バックエンドには「Ruby on Rails」を選定しています。 私はフロントエンドエンジニアとして参画したので、Nuxt.jsの開発を主体的に実施していました。 プロジェクトの体制 メンバーは以下のようになっています。 プロジェクトマネージャー(PM)： ２名デザイナー： １名フロントエンドエンジニア： ２名バックエンドエンジニア： ３名 また開発の流れは大枠はウォーターフォールで実施しますが、ドキュメントなどは最低限の仕様のみチーム内で共有できる程度でガッツリとしたものは残しません。 開発フェーズに入った際には部分的にアジャイル形式になるなど、臨機応変に最適な体制をとる方針でした。 一般的なtoBやtoC向けのサービス開発であれば融通が効きやすいので、割と自由に動くことができます。 あわせて読みたい 【WEBサービスの開発手法】ウォーターフォールモデルについて フリーランスエンジニアの雄貴です！ 皆さん、WEBサービスの開発はどの様な流れで実施されるかご存知でしょうか？ 開発手法には大きく分けて、以下の3種類存在します。 ... あわせて読みたい アジャイル開発ってどんな感じなの？ フリーランスエンジニアの雄貴です！ 以前の記事でWEBサービスの開発手法に「スパイラルモデル」という方法があることをお話ししました。 https://read-engineer.com/20... 開発の流れ 要件定義 こちらはPMが顧客からヒアリングして要件をまとめます。 このフェーズではエンジニアが参画することはあまりないので、要件がある程度固まってきてからチームを編成していくことになります。 設計 画面設計 要件がある程度固まってくると、PMとデザイナーとで要件のすり合わせを実施し、デザイナーがサービスの画面デザインを作成します。 この時ワイヤーフレーム(WF)と呼ばれる最低限の機能やUIのみを記載した画面デザインを作成します。 具体的には以下のような項目を記載します。 各画面の大まかなレイアウト、機能 画面導線 (どの画面からどの画面に遷移するか？の導線) WFが完成した後に、チーム全体でレビューを実施します。 その際以下のような観点でレビューし、課題を洗い出します。 UI/UXの検討 開発の観点での懸念事項 要件漏れ、矛盾のある機能になっていないか テーブル設計 画面設計にてWFがおおよそ固まってきたら、テーブル設計を並行して実施していきます。 こちらはバックエンドエンジニアメインで設計し、その後、PMとバックエンドエンジニア、そしてバックエンドのリードエンジニアでレビューを実施します。 画面操作などUIに関わることがあればフロントエンドもレビューに参加します。 そのレビューが完了した後に、決定したテーブル設計をチーム内に共有する流れになります。 詳細設計 画面設計、テーブル設計のレビューがある程度完了したら、詳細設計を実施していきます。 と言ってもドキュメントにガッツリ細かく記載することはなく、ザックリ方針を決めたりするのみです。 私はフロントエンドなので以下の観点の方針を決めました。 コンポーネント設計 ストア設計 共通機能の設計 テスト観点の洗い出し インフラ構成 コンポーネント設計やストア設計はSPA開発を実施する上で必要になってくる設計です。 コンポーネントとは画面を構成するレイアウトを細かいパーツに分割したものです。 設計方針に「atomic design」を採用しているので、こちらのサイトをご覧になるとイメージできるかと思います。 DeNA Design Atomic Design を分かったつもりになる - DeNA Design DeNAのデザイナー・エンジニアによるブログです。DeNAのUI/UXデザイン設計やフロントエンドのノウハウなどを、余すところなく掲載しています。 - DeNA DESIGN | 株式会社デ... ストアについては少し説明が長くなるので、大まかに言うとJavaScriptで保持するデータ構造をどうするか？を設計することです。 共通機能ですが、これはどの画面でも共通して使用する機能をどう設計するか？を決めます。 具体的には、ユーザーのログイン認証処理や認可処理、またサーバーサイドとの非同期処理などを指します。 この辺りはサーバーサイドとも密接に関わる部分なので、すり合わせをしつつ進めます。 またどのテスト観点で実施していくかも大まかに方針を決めます。 重点的に品質を担保したい部分をテストコードで確認していく観点ですね。 この案件ではビジネスロジックやバリデーションなど、重要でかつ膨大なテストケースになりそうな部分を観点としました。 全てを単体テストで担保するのが理想ですが、今回は納期も厳しい状況でしたので、選定した箇所のみに絞りました。 またインフラ構成もこの段階で検討します。 実際にインフラチームとサーバーサイドエンジニアとすり合わせをしてどのような構成にしていくかを決定します。 インフラ構成によって、フロント側で実装する内容も大きく変わってくるので、早い段階で決めておく必要があります。 工数見積もり・WBS化 詳細設計と並行して、工数見積もりとWBS化してスケジューリングしていきます。 WFで定義された各画面の機能を細かいタスクに分割し、それらに対して工数を見積もっていきます。 この工数見積もりが一番難しい。。 私はPERT法と呼ばれる算出方法を良く使用しており、完了すると思われる時間に対してバッファを設けるようにしています。 それでも正しい算出は難しいので、見積もり算出後はチームメンバーとレビューし合って、無理のない工数を算出していきます。 株式会社LIG(リグ)｜DX支援・シス... 想定する見積をより正確に！工数見積の誤差を減らすPERT手法とは | 株式会社LIG(リグ)｜DX支援・システム開... こんにちは、たまです。 そしてその工数をWBSと呼ばれるスケジュールに落としていきます。 その際にどのタスクから完了させて行った方が効率が良いか？を考慮した上で構築します。 こちらも完成したらメンバー同士でレビューを実施します。 Backlogブログ WBSとは？ガントチャートとの違いとWBSの作り方を解説 | Backlogブログ システム開発のプロジェクトでよく使われるWBS（Work Breakdown Structure：作業分解構成図）を“正しく”理解できていますか？WBSはプロジェクトマネジメントで必須のスキル... 開発 設計が完了したら、いよいよ開発です。 ただ完全に設計が全て完了してから開発すると言うわけではなく、「設計できた機能からドンドン開発していく」というスタンスでやっています。 あくまで効率重視に実施していくところですね。 機能が開発できたら開発者が単体テストを実施します。 サーバーサイドであれば単体テストをほぼ全てのコードに実施していくのですが、フロント側でそれをやると効率が落ちてしまうので、ロジックを含まない画面レイアウト作成程度であれば、画面上の動作確認ですましています。 ただ、「スナップショットテスト」と呼ばれる、各コンポーネントで変更点がないか？の確認は毎回実施するようにしています。 タロスカイ株式会社 Jest を使ってスナップショットテストを行う Jest は Facebook が中心になって開発している人気の JavaScript のテスティングフレームワークです。この記事では、 Jest の特徴的な機能であるスナップショットテストに... そしてテストが完了したらプルリクエストを出してメンバーにレビューしてもらいます。 今回はフロントエンド のテストとして「E2E」と呼ばれるテストは実施していませんが、途中の仕様変更があまりない案件であれば、開発の段階でE2Eを実施していることも多いです。 テスト こちらのテストフェーズは、開発者が実施するテストではなく、QAと呼ばれる品質管理をメインとしたチームに確認を依頼します。 実施する内容は結合テストですね。 シナリオは開発側が作成しチームでレビューしたものを実施してもらう方針でした。 その際に不具合があった場合は、エンジニアがその都度修正していくという流れになります。 リリース テストフェーズにて品質が確認できたらいよいよリリース作業に入ります。 基本的にはインフラチームが主として実施するのですが、不具合があった場合には開発側も即座に対応できるように待機します。 このフェーズが一番ハラハラして、心臓に悪いんですよねw 一番大事なこと 一番大事なこと、メンバーと協力して開発していくことです。 大きなシステムだと1人のエンジニアがどれだけハイパフォーマンスでもできることには限りがあります。 そして自分自身も技術的にも知らないことも多いので、メンバーの協力は必要になってきます。 技術的に分からない点や他メンバーが困っている内容などを共有して解決する場を設けて、助け合える環境づくりを一番意識しています。 一緒に作り上げる仲間ですので、相手の気持ちを考えて関わっていくように努めています。 最後に 以上、 WEBエンジニアの新規開発案件での実務内容について私の経験を元にお話ししました！ 意外に思われるかもしれませんが、プログラミング開発をする時間よりも、仕様を固めて設計し、工数を算出し計画する段階に一番時間を欠けているんですよね。 そして何よりチームとして活躍できるように意識して臨むことが大事だと考えています。 技術や経験も様々なので、助け合って開発していけるチーム作りが大事ですね！ Youtubeではエンジニアの単価が上がる情報発信しています！ 毎週木曜日の21時から、ライブ配信やってますので、気軽にお越しください😁 </noscript><iframe width="560" height="315" data-src="https://www.youtube.com/embed/mG1EKhbU3LM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" class="lazyload" > 引用：Freepik – jp.freepik.com によって作成された technology ベクトル ーーーーーーーーーーーーーーーーーーーー 僕は月商にして120万円を稼いでいますが、 エンジニアで月100万以上稼いでいるというと、 怪しいですよね。 お前は元々仕事できた、才能やセンスがあったんだろ？ともよく言われます。 ですが僕は最初からプログラミングが得意だったわけでもなければ、 仕事が得意だったわけでも 交渉や戦略も得意だったわけではありません。 そんな僕でも自信を得ることができて エンジニアとして月100万以上頂ける程 実力をつけることができました。 経済的にも精神的にも豊かになってます。 結局正しい方向で努力するだけなんですよね。 誰だって稼げますし。 正しい方向で学べば誰でも自信を持って エンジニアとして稼ぐことができる 僕雄貴がポンコツエンジニアから、月120万を稼げるようになった過程を下記の記事では公開しています。 >未経験から月商120万になれた雄貴の行動理念 ーーーーーーーーーーーーーーーーーーーー 【下記画像をクリックして、エンジニアのロードマップをGET！！】 >>詳細が気になる方はこちらをクリック<< IT 実務 フリーランス よかったらシェアしてね！ URLをコピーしました！ URLをコピーしました！ SPA(シングルページアプリケーション)とは？【モダンフロントの技術を紹介！】 「控除」を知らないと損！！ 【義務教育で教えてくれないお金の話】 この記事を書いた人 雄貴 フリーランスエンジニア 【エンジニアの単価が上がる情報を発信中】 27歳未経験からIT業界へ→経験2年半で月商80万達成 React案件で初回契約月105万を実現 この著者の記事一覧へ 関連記事 弱小エンジニアでも企業からオファーもらいまくるようになる戦略の話 2024年2月25日 未経験エンジニアが1年半で年収1000万円を達成するキャリアプラン 2024年2月18日 一生懸命やってるけど、成果が出ない人が見落としがちなポイント 2024年1月15日 伸び悩んでるならまず学ぼう。世の中知ってるだけで一瞬で解決できる問題が多すぎる 2024年1月4日 今年こそは変わりたい人へ～見違えるくらい変わる目標達成のために重要なこと～ 2024年1月2日 独学でエンジニアとして稼げる人の特徴。自力でできる人とできない人の差はなんなのか？ 2023年12月30日 【成功者インタビュー②】4ヶ月で月収40万円アップさせたエンジニア。〜ブラック企業から抜け出せなかったエンジニアが、経験３年でなぜ月収100万円を超えられたのか？〜 2023年12月30日 【成功者インタビュー①】月収105万円達成したエンジニア 〜月収20万円のオペレーターが0から2年半で月100万越えになぜなれたのか？〜 2023年12月22日 コメント コメントする コメントをキャンセルコメント ※ 名前 ※ メール ※ サイト 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。 Δ
弱小エンジニアでも企業からオファーもらいまくるようになる戦略の話
コメント