未経験エンジニアが作るべきポートフォリオとは?
見出し画像

未経験エンジニアが作るべきポートフォリオとは?

この記事は下記の超大作の出版記念投稿記事となります。

SESのメリデメ、多重構造になる理由、中間搾取の裏側、営業の必要性、そしてボクのこれまでの現場経験。15年の全てを100個のQ&Aで曝け出すノートだよ

この記事は未経験エンジニアが陥りがちな「どんなポートフォリオ作ったら良いのか全然わかんない!」というトラップを突破することを目的に執筆しております。

経験者の方は、是非ご意見を持って未経験の方へのご助力を頂けたらと思います。


マジックナンバーセブンとは

 マジックナンバーセブンという言葉をご存知でしょうか。諸説ありますが、まぁ簡単に言うと人が短期記憶で覚えることの出来る数のことです。

ではWEB開発に置けるマジックナンバーセブンとは何でしょうか?

・テキストボックス
・テキストエリア
・プルダウン
・ラジオボタン
・チェックボックス
・ファイルアップロード
・ボタン

この7つの要素だとボクは考えています。

この7つの要素を使えるようになればWEB画面は作れるのです。もっと端的に言うとボクらエンジニアはこれしか使っていません。あとは何とでもなります。


画面を形成するのは、このたった7つの要素だ

画像1

 まずこの画面を見てください。それっぽい個人情報の入力画面だと思います。実際にメイプルの自社サービスの管理画面ですが、要素としてはマジックナンバーセブンのうち、テキストボックス、テキストエリア、プルダウン、チェックボックス、ラジオボタンが使われています。

 これだけで5つの要素を網羅していますね。では次の画面を見てください。どんな要素があるでしょうか。

画像2

 ほら、ファイルアップロードとボタンが出てきました。これでマジックナンバーセブンが勢揃いしました。


この要素にバリデーション(入力制限)が付くだけだ

・必須入力チェック
・最小文字数チェック
・最大文字数チェック
・メールアドレス構文チェック
・未選択チェック
・ファイル種類チェック
・文字種チェック

 管理画面で必要なチェックはこんなものでしょうか。こちらも7つです。ユーザーが使う画面であれば、もっと制御は必要になります。例えばSQLインジェクション対策などなど。

 しかし管理画面については内部の関係者が使うことが多いため「運用でカバー」という裏技が使えます。未経験者に多くは求めません。

 まずは「マジックナンバーセブンとこのバリデーションを覚えましょう」


どんなポートフォリオを作れば良いの?

 管理画面を作れるようになって下さい。と言うのも、どんなサービスにも裏側の管理画面は存在しています。しかもレイアウトは複雑ではなく、データをとにかく入れることが出来るのが最優先です。レイアウトや複雑な入力制限があるから難しくなるのです。未経験者は少なくとも管理画面は作れます!というのが最初の一歩と考えて良いでしょう。

 ボクが新人のときに最初に任せてもらったのはマスタメンテ画面でした。マスタとはサービス内で使われる基本データと考えてもらって良いです。

 簡単な例で言えば、資格マスタメンテナンス画面です。新しい資格が追加出来て、編集出来て、一覧から選べて、詳細が見れて、削除出来る。

 このデータの一連の流れをメンテナンス出来る画面を作るのは、未経験者が任される最初の仕事なのではないでしょうか。


まずは登録画面を作ろう

先ほどの画面になります。

画像3

 こんな登録画面にボタンを付けてデータの登録が出来る画面を作りましょう。まずはデータの登録です。これが出来ればデータを一覧で出すことが出来るようになります。


次に一覧画面を作ろう

画像4

 登録した経歴書は氏名を元に一覧で表示されるように出来ます。この画面には検索機能やフィルタリング機能が付いていますが、最初の段階では必要ありません。ページングも必要ありません。ズラッと全データが表示されるものをまずは目指しましょう。一覧画面には画面右上に置いてあるような、新規登録画面へのリンクがあると便利ですね。

 この一覧画面はマスタメンテ画面などでも他画面への起点となることが多いです。新規登録画面、詳細表示画面、編集画面への導線は一覧画面にあります。


一覧画面から遷移した先の詳細画面を作ろう

画像5

 ちょっと余計な情報も載っています。経歴書に紐付いた職歴まで載っていますが割愛ください。先ほどの一覧画面から経歴書詳細画面が表示されるものが作れれば問題ありません。

 この詳細画面から削除画面(削除ボタン)があったりします。

 一覧画面から詳細画面へ遷移することが出来れば、登録画面で登録した内容が確認出来ますね。これで登録、一覧、詳細の出来上がりです。


さてあとは編集画面です

画像6

 と言っても、新規登録画面と同じものです。初期表示の際に既に入力項目が埋まっているくらいですね。しかし新規登録時に選択したラジオボタンやチェックボックスが選択状態になっていること。編集画面を開いてそのまま保存しても新規登録時と同じデータになっていること。データが複製されないことなどをチェックしましょう。


未経験者が作るべきポートフォリオはこれくらいで良いんです。

 いや、ほんとよ。変にフロント画面こだわったものとか、ツイッターもどきとか、本棚サービスとか作ってくるよりも、管理画面を完璧に作ってくる未経験者のほうが重宝されます。

 突飛なものを作れる必要はありません。最初に未経験者が任されるであろう業務は何なのか。それを考えた上で作るべきは管理画面なのです。

 今回はこれくらいで記事を締めますが、何か質問があればボクへのDMでも構わないので質問ください。それでは!

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
Motcii (もっち〜) @ 逆張り経営社長 & 「iU」客員教授
望月祐介。株式会社メイプルシステムズ代表取締役。済済黌高校卒。九工大電気工学科卒。東京大学工学部システム創成学科研究生。2020年04月から情報経営イノベーション専門職大学(iU)で客員教授。成長と卒業は表裏一体。会社は踏み台にしていけ!ボクの発言は会社としての発言です。