いちから伝えるwebシステム開発① 計画・概要編
もしある日、「〇〇さん、今度来る新人さんの教育担当お願いしたいんだけど」・・・と言われたら自分ならどうするかなーという妄想のメモ。
前提・想定ケース
🔰 研修対象者
- 研修対象者は実務未経験・プログラミング未経験とする
- 研修対象者は事前学習でHTML・CSSのマークアップ言語の基礎は身についているものとする
💻 業務環境
- 小〜中規模受託案件を1人〜3人程度が担当する
- 先輩・上司エンジニアはフロントエンド〜サーバーサイド〜一部インフラ管理までをほぼ1人で担当可能とする
- webデザインとインフラ関連は教育のスコープ外とする
- 研修期間は仮に3ヶ月とする
目的・目標
🔰 研修対象者向け
- 実務未経験の状態から、基本的なwebアプリケーション作成に必要な知識・技術を身に付けること
- 実務でのチーム開発で留意すべき点について理解・認識すること、それを他メンバーと全体で共有すること
- 分からないことは早めに質問することの重要性を理解・実践出来るようになること
- 研修生同士で不明点を話し合う・教え合うことの重要性を理解・実践出来るようになること
🤓 メンター・教育担当者向け
- 基本的なwebアプリケーション作成に必要な知識の再確認を行い 「他者に教えることで自分自身の勉強になる」 という意識を持って取り組むこと
- 研修後の実務では、先輩等の補助付きで開発可能なスキルレベルに対象者を育てること
- 担当者一人が教育を一手に引き受けるのではなく、チーム全員が研修対象者の課題・困りごとを認識・共有して全員の関心事として扱うこと
→担当者以外のメンバーが質問の専門領域外の場合だとしても、問題解決方法を一緒に考えることはできる(自分ならこういうキーワードで検索する・ここの公式リファレンスにヒントがあるかも、等) - テキストチャット上での質問回答のやりとりを行うことで、他のメンバーの学びの場にもなる。そういう時に絵文字スタンプを押す・自分も勉強になりました！などコメントで意思表明出来るととても理想的⭕️
必要な知識・技術(ハードスキル)
プログラミング言語・ミドルウェア・OSについて
※フレームワーク・ライブラリについて
実務ではそういった技術を使って効率的に開発を進めるものなんだな、程度の理解でOK。実際に触ってもらうのはもっと後。
-
HTML
- 基本的なタグの使い方〜インライン要素/ブロック要素の概念理解
- HTMLとCSSの役割分担についての理解(HTMLに無闇にstyle属性を当てない等)
- セマンティックマークアップの概念についての理解
- <発展課題>アクセシビリティの概念についての理解
-
CSS
- セレクタの基本的な使い方の理解
- id, classの命名の重要性の理解・・・BEM, OOCSS, SMACSS, FLOCSS, tailwindcssなどの命名規約の概念など
- 及びそのフレームワークの最低限の理解・・・vuetify, tailwindcss, bootstrapなど
-
JavaScript
- 基本的な文法の理解
- データ型の種類と概念についての理解
- フロントエンドにおけるJavaScriptの役割についての理解
- 及びそのフレームワーク, ライブラリの最低限の理解・・・React, Vue.js, jQueryなど
-
PHP
- 基本的な文法の理解
- データ型の種類と概念についての理解
- サーバーサイドにおけるPHPの役割についての理解
- 及びそのフレームワーク・・・Laravelなど
-
MySQL
- 基本的なSQL文の理解
- データ型の種類と概念についての理解
- 主キー(PK)・外部キー(FK)概念についての理解
- データーベースの役割・出来ることについての理解
-
HTTP通信
- HTTPリクエストの種類についての理解
- HTTPステータスの種類と特徴についての理解
-
Apache
- ミドルウェアの役割・出来ることについての理解
- Basic認証についての理解
- <発展課題>httpd.confの設定について最低限の理解
-
webセキュリティ
- 実装時に注意するべきセキュリティホールとその対処についての理解(XSS・CSRF・SQLインジェクションなど)
-
仮想環境
- VirtualBoxによる環境の基礎理解(windowsとは開発環境に違いがあること)
-
Linux
- 基本的なコマンド操作についての理解
- windowsのコマンドプロンプトとの違いについての理解
-
ソースコードのバージョン管理
- バージョン管理のやり方とその重要性について
- Gitの概要についての理解
-
テキストエディタ(Visual Studio Code等、統一した方が知見の共有が捗りそう)
開発フロー(開発工程)
※今回はアジャイル型開発ではなくウォーターフォール型開発の例で説明する
要望ヒアリング 〜営業活動・受注時の打ち合わせ(SEがやる場合もあれば営業がやる場合もある)
↓
要件定義 〜クライアントとの外部レビュー
↓
基本設計 〜クライアントとの外部レビュー・内部レビュー
↓
結合テスト設計 〜内部レビュー
↓
詳細設計 〜内部レビュー
↓
単体テスト設計 〜内部レビュー
↓
実装 〜内部レビュー
↓
単体テスト 〜内部レビュー
↓
内部結合テスト 〜内部レビュー
↓
外部結合テスト 〜内部レビュー(外部API連携が必要であれば状況に応じて行う)
↓
ユーザーテスト・動作検証 〜クライアントとのレビュー・不具合あれば修正対応
↓
本番リリース
↓
リリース後運用・保守・改修 〜要望ヒアリング・障害対応
課題制作物のテーマ ~ユーザー管理画面を作る~
主な仕様について
- ログイン/ログアウト機能
- ユーザー一覧表示機能
→ ページャーあり
※ 今回はPDF出力が必要になるため一般的なCSSグリッドレイアウトではなく、テーブルレイアウトを採用する- ユーザー検索機能
- ユーザー詳細表示機能
- ユーザー登録機能
→ 郵便番号検索機能(JavaScript非同期通信ライブラリで実装)
→ 画像アップロード機能(保存先はローカル環境を指定し、AWS S3やファイルサーバー等は使用しない)- ユーザー更新機能
- ユーザー削除機能(論理削除とする)
- ログファイル表示機能(最新10件表示)
- ログファイル出力機能(ファイル形式はcsvとする)
- ユーザー一覧csvファイル出力機能
- ユーザー一覧pdfファイル出力機能(TCPDFを採用)
ページャー(フレームワークなし)とPDF出力は難易度高めなので、他の機能を一通り作ってから追加で機能を増やすイメージで進めるのが良さそう🤔
開発環境・バージョン情報
- 開発マシン
Windows10
(WSL2/Dockerは使用しない) - 仮想環境
VurtualBox6.1.36 - 言語・ライブラリ
PHP8.2
jQuery3.6.3
node.js18.14(LTS)
npm9.3.1(LTS) - DB
MySQL8.0 - ミドルウェア
Apache2.4 - Linuxのディストリビューション
Debian11.6
プログラミングの基礎理解が目的なので、フレームワークは使用しない・ライブラリの使用は最小限とします
検討事項
jQueryをどこまで学習してもらうべきか
どこで何をしていて・どのように動いていて、どのようにソースに手を入れるべきか、最低限の理解は必要となるでしょう(リリース済みの過去の案件で古いjQueryが動いているケースを想定)
とはいえ新規開発・新たに機能改修する場合で積極的にjQueryを書くべきかと言われれば、プレーンなjavaScript・最新のECMAScriptの仕様に基づいて実装するべきというのが自分の考えです[1]
参考図書について
セキュリティ関連・HTTP通信関連
体系的に学ぶ 安全なWebアプリケーションの作り方 第2版
3分間HTTP＆メールプロトコル基礎講座
設計・実装時の基本的ルール関連
プリンシプル オブ プログラミング 3年目までに身につけたい 一生役立つ101の原理原則
良いコード／悪いコードで学ぶ設計入門―保守しやすい 成長し続けるコードの書き方
読みやすいコードのガイドライン―持続可能なソフトウェア開発のために
WEB+DB PRESS Vol.110 特集: 名前付け大全
DB・SQL関連
SQLアンチパターン
次回予告
次回はいわゆる「ソフトスキル」についてのお話をしたいと思います。
専門的な技術や知識ももちろん大切ですが、仕事をうまく進める上でソフトスキルを意識してやるのとやらないのとでは大きな違いがあります。
当たり前のことも書き連ねていきますが、ご一読いただければ幸いです🙏
-
今なお本番環境でInternetExplorer(IE)の使用を余儀なくされる場合はその限りではありませんが・・・それでも変数定義ではconstが使用できるなど、一部使用可能な機能もあります
Internet Explorer のサポートは 2022 年 6 月 15 日に終了しました。 Internet Explorer 11 は、特定のバージョンのWindows 10の Microsoft Edge 更新プログラムを通じて完全に無効になっています。
https://support.microsoft.com/ja-jp/windows/internet-explorer-のダウンロード-d49e1f0d-571c-9a7b-d97e-be248806ca70 より ↩︎
Discussion