【dev.toで話題】フロントエンドエンジニアとして、働くまでに作るべき5つのポートフォリオ

# はじめに
今回はdev.toで話題の[5 Javascript Projects You Should Build as Junior Frontend Developer](https://dev.to/slawomirkolodziej/5-javascript-projects-you-should-build-as-junior-frontend-developer-4gm3)を紹介します！

この記事では、自身のスキルを示すために作ると良いポートフォリオについて紹介しています。

HTML/CSSの知識をフル活用して作るもの、React/Vue/Angularなどのフレームワークを使って作るもの、外部APIとうまく連携させて作るもの、セッション管理を考えたり、NoSQLを使って作るものなど幅広い種類のアプリを作りながら、スキルの棚卸しができます。


# YouTube動画
動画で確認したい方はこちらをどうぞ！
[【YouTube動画】 フロントエンドエンジニアとして、働くまでに作るべき5つのポートフォリオ](https://youtu.be/nGt7utxF8OY)
[![フロントエンドエンジニアとして、働くまでに作るべき5つのポートフォリオ【JavaScript】【ポートフォリオ】](https://img.youtube.com/vi/nGt7utxF8OY/0.jpg)](https://youtu.be/nGt7utxF8OY)

# HTMLとCSSでブログテンプレートを作る
[こちら](https://symu.co/freebies/templates-4/blog-psd-template/)でテンプレートをみることができます。

フロントエンド技術を学び始めたばかりの頃はHTML/CSSの知識が非常に大切になってきます。
プログテンプレート作成で、それらのスキルを身に付けることができるので、オススメです。
![スクリーンショット 2020-11-29 21.10.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/37b29f48-9361-e9c2-078d-076e7a5ce3e0.png)

## 試して欲しいこと、必要なスキル
- ホームページ、投稿ページ、問合せページを作る
- CSSのGridを使ってみる
- ウィンドウ幅で見た目が変わるレスポンシブサイトにしてみる

## +α
- サイドバーも付けてみる
- 記事の内容もきちんと書く



# ○×ゲームをJavaScriptで作る
ブラウザゲーム作成はJavaScriptのスキルを確かめるのに役立ちます。
ユーザーイベントの検知やDOMの扱い、ゲームデータの保存方法を身に付けることができます。
また、開発できたら同僚や家族に見せて遊んでもらうこともできます！
![スクリーンショット 2020-11-29 21.19.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/9aae5d5a-a679-7ede-e810-5fae2b6dfdfc.png)

## 試して欲しいこと、必要なスキル
- プレイヤー名を入力して、表示できること
- クリックを認識して○×を付けること
- 勝ち負けをきちんと判断すること

## +α
- 得点をローカルストレージで保存して表示すること
- アルゴリズムを組んで、コンピュータと対戦できるようにすること

# 位置情報共有サイトをJavaScriptとマップサービスで作る
友達と位置情報を共有できるサービスは、自身も使うことができる便利なツールになります。
このアプリはJavaScriptとGoogle MapsやOpenStreetMapなどの外部サービスのAPIを使って実装します。
![スクリーンショット 2020-11-29 21.19.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/874681c3-5dec-2d13-f1b5-5df2d5ed95a5.png)


## 試して欲しいこと、必要なスキル
- 現在地をマップに表示させること
- シェアボタンを押すと、自分の現在地を示すリンクが生成されること
- 上記のリンクをクリックすると、現在地が表示されること

## +α
- Firebaseなどを使って、リアルタイムに現在地を表示すること
- Webページにアクセスした人、それぞれの位置情報をリアルタイムで表示すること

# TV情報まとめサイトを作る (React, Vue, Angularを利用)
このアプリはテレビ好きが情報収集するのに役立ちます。
使い慣れているJavaScriptフレームワークを使用する良い機会になります！
![スクリーンショット 2020-11-29 21.19.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/25eb4a24-11e5-175b-9dfd-6658a2746279.png)

## 試して欲しいこと、必要なスキル
- 外部APIを使ってTV情報を取得すること (海外だとTVMaze APIなど)
- 好きなTV番組をお気に入りに登録でき、最新話をトップページに表示すること
- TV番組の概要ページが見れること
- お気に入りをローカルストレージに保存すること

## +α
- 最新話が来たら、メールやプッシュ通知でお知らせすること

# 家計簿アプリを作る (React, Vue, Angularを利用)
家計簿アプリを作成することは、ジュニアフロントエンド開発にとって、究極とも言えるスキルチェックになります！
フォームを作成したり、様々な情報を保存したり、グラフを描画したりする技術が必要です。
また、このアプリを開発できれば、自身の節約にも役立ちます。
![スクリーンショット 2020-11-29 21.19.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/793a0814-336a-7581-c443-652b9a5f52bd.png)

## 試して欲しいこと、必要なスキル
- カテゴリ機能を入れること
- 購入した商品の名前、数、値段を入力できること
- 月、カテゴリごとに費用を算出できること
- Firebaseなどを使って集計データを保存できること

## +α
- サインアップ/サインイン機能を実装し、ユーザー管理できるようにする

# おわりに
今回はフロントエンドエンジニアに絞って、働くまでに作ると良いポートフォリオを紹介しました。
元記事のSławek Kołodziejさんは他にも興味深い記事を書かれているので、興味のある方はそちらもご確認ください！
https://slawkolodziej.com

また、dev.toの[コメント欄](https://dev.to/nopito/comment/17bho)を見てみると、以下のリポジトリも学習にもってこいとのことでした。
力試しにいかがでしょうか？
https://github.com/florinpop17/app-ideas