初めてのポートフォリオ作り方【考え方編】

#自己紹介
初めまして、レンです。Qiita初投稿なので、簡単に、まず自己紹介からしていきます。
現在は、都内にあるIT企業の営業職として働いる社会人2年目です。

そこでの経験を通じて「価値を販売」するではなく「価値を作る」側になりたいと考え、
WEBエンジニアを転身することに決めました。と...小難しいこと書きましたが、
単純に作ることが好きなので、それをITを使って貢献できたらなというのが本音です。

#スキルセット
まだ現場経験がないので、実務レベルではないですが、簡単にスキルセットを書いていきます。
マークアップ、ライブラリも含めると6つ。

• PHP
• MYSQL
• JapaScript
• JQuery
• CSS
• HTML

サーバサイド言語とフロントエンド言語が混じっているのは、自分がどっちに向いているか判断
できなかったので両方やってみたって感じです。

正直なところ、現段階では適正とかは判断できなかったのですが、直感的な書きやすいのは
フロント系かなという印象です。

#学習の過程
ちょうど3ヶ月まえ、今年(2019年）の2月末からプログラミング学習開始。
最初は「ドットインストール」という動画学習支援サービスを見ながら、
簡単のWEBサイト作りました。

参考までにリンクを貼っておきます。
ポートフォリオ

クオリティについては、あまり触れないでください...
その後に、皆さんお馴染みの「Progate」でHTML、CSS、JavaScript、JQuery、
PHP、MYSQL、コマンドライン、Gitのコースを一通りやりました。レベルでいうと150ぐらいです。

学びの総仕上げとして、技術書の数冊購入しJavaScriptでフォトギャラりー、PHPでメモアプリ、掲示板
を作りました。Progateからの移行で環境構築やセッション、クッキーの理解で苦戦しましたが、そこは省きます。

#WEBアプリ考え方
やっと本題です。正直まだWEBアプリを作成してはいないですが、
コード書く前にアイデア出しのところで、苦戦する人多いんじゃないのかと思い、記事を書いています。
正直、自分の考えを整理したいというのもありますが...

##考える順番
大きく、ステップは5つ

1. 考え方の記事を読む
2. 世の中の課題を考える
3. 解決策を考える
4. 機能を考える
5. 簡単な実装イメージを考える

順番に詳細を解説していきます。
1.最初に、自力で考えるのハードルが高いので、ネットに落ちている記事を読み漁りましょう。
ここでの、ポイントはアイデアをパクるのではなく、考え方を真似することです。

僕が読んだもの中で、特に役にたった記事を参考までに、リンクを貼っておきます。
Web サービスを自力で作る上で大事な考え方

2.課題というよりも、「周りの人や自分はどんな悩みがあるかな〜」と考えると思いつきやすくなります。
現段階でも「何も思いつかないよ〜」という方は日常生活の中で、友達や自分が困ったことをメモする癖を
付けておくと良いです。

僕の場合は、

• いつも、最後まで読む前に挫折してしまう
• 読んでない本が家にたくさん飾ってある
  などの悩みをもっている友人がいたので、「脱積読」をテーマに考えました。
  正直ところ、僕も積読気味なところもあります...

上の二つの課題を深掘ると

• ネットの記事よりも文字数が多い
• 現在地がわかりづらい
• 同時に複数の本を買ってしまう

解決すべき課題が明確になってきます。

3.課題を解決するために何が大切かを抽象度の高い言葉でくくる。
上の課題で共通していることは、「モチベーション維持」です。
この共通点について、施策を考えていきます。

モチベーション維持するためには、

• 現在地の見える化
• 専用チャットグループ
• 同時に、一冊しか本を登録できない
• 応援メッセージ
• 読書ログ

が効果的であることが考えつきます。パッと答えが見つからない人は、
課題の頭に入れて散歩してみると良いです。

4.解決策を実現するために具体的に何が必要かを考えます。
ランダムで良いので、まずは思いつくままに書き出していきます。

登録

• 本の登録ができる
• ページ数の登録ができる

表示

• %で現在地を表示できる
• 読書数を表示できる
• 画像を表示できる
• ページを表示できる
• 達成度に応じて、自動でコメントを表示できる
• 読書ログを表示できる

＋α

• 同じ本を登録している人のチャットグループ参加できる
  　- メッセージの表示ができる
  　- 進捗状況をシェアできる

上では、わかりやすいように「登録」「表示」「+α」の3つに分けましたが、
最初はそこは気にせず後からラベルを付けていくイメージです。

あと、語尾を「できる」で統一しているのは、「本の登録」のような曖昧な機能にならない、
語尾を考えという余計な負担を減らしてくれます。これは、「よくわかるPHP」という技術書に
書いていたので、参考にして見ると良いです。

5.最後ですが、ここは自力では思いつかない方が多いと思うので、今まで学習の中で
「〇〇と〇〇を組み合わせたらいいんじゃないかな」ぐらいに置いといて、あとはググりながら
情報収集していった方が早いです。

僕の場合のざっくりな例をあげると

• 登録フォーム
• ログイン画面
• データベース設計
• AmazonのAPI
• LINEのAPI

などが考えられます。
正直ここは、僕もあまり自信がないので、これから検索するなりして情報収集して実装していく予定です。

以上でこの記事で紹介したかったことは終わりです。
最後まで、読んでいただいた方、本当にありがとうございます。
また、自作アプリが完成したら、Qiitaで公開するので、よろしくお願いします！

もし、今回の記事で紹介した内容で、ここは〇〇した方がもっと良くなるな〜
という指摘、アドバイスなどありましたら、ぜひコメントお願いします。
楽しみにお待ちしております！