Quantcast
Viewing all articles
Browse latest Browse all 21

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

はじめに

今回はdev.toで話題の5 Javascript Projects You Should Build as Junior Frontend Developerを紹介します!

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

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

YouTube動画

動画で確認したい方はこちらをどうぞ!
【YouTube動画】 フロントエンドエンジニアとして、働くまでに作るべき5つのポートフォリオ
Image may be NSFW.
Clik here to view.
フロントエンドエンジニアとして、働くまでに作るべき5つのポートフォリオ【JavaScript】【ポートフォリオ】

HTMLとCSSでブログテンプレートを作る

こちらでテンプレートをみることができます。

フロントエンド技術を学び始めたばかりの頃はHTML/CSSの知識が非常に大切になってきます。
プログテンプレート作成で、それらのスキルを身に付けることができるので、オススメです。
Image may be NSFW.
Clik here to view.
スクリーンショット 2020-11-29 21.10.47.png

試して欲しいこと、必要なスキル

  • ホームページ、投稿ページ、問合せページを作る
  • CSSのGridを使ってみる
  • ウィンドウ幅で見た目が変わるレスポンシブサイトにしてみる

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

○×ゲームをJavaScriptで作る

ブラウザゲーム作成はJavaScriptのスキルを確かめるのに役立ちます。
ユーザーイベントの検知やDOMの扱い、ゲームデータの保存方法を身に付けることができます。
また、開発できたら同僚や家族に見せて遊んでもらうこともできます!
Image may be NSFW.
Clik here to view.
スクリーンショット 2020-11-29 21.19.31.png

試して欲しいこと、必要なスキル

  • プレイヤー名を入力して、表示できること
  • クリックを認識して○×を付けること
  • 勝ち負けをきちんと判断すること

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

位置情報共有サイトをJavaScriptとマップサービスで作る

友達と位置情報を共有できるサービスは、自身も使うことができる便利なツールになります。
このアプリはJavaScriptとGoogle MapsやOpenStreetMapなどの外部サービスのAPIを使って実装します。
Image may be NSFW.
Clik here to view.
スクリーンショット 2020-11-29 21.19.37.png

試して欲しいこと、必要なスキル

  • 現在地をマップに表示させること
  • シェアボタンを押すと、自分の現在地を示すリンクが生成されること
  • 上記のリンクをクリックすると、現在地が表示されること

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

TV情報まとめサイトを作る (React, Vue, Angularを利用)

このアプリはテレビ好きが情報収集するのに役立ちます。
使い慣れているJavaScriptフレームワークを使用する良い機会になります!
Image may be NSFW.
Clik here to view.
スクリーンショット 2020-11-29 21.19.44.png

試して欲しいこと、必要なスキル

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

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

家計簿アプリを作る (React, Vue, Angularを利用)

家計簿アプリを作成することは、ジュニアフロントエンド開発にとって、究極とも言えるスキルチェックになります!
フォームを作成したり、様々な情報を保存したり、グラフを描画したりする技術が必要です。
また、このアプリを開発できれば、自身の節約にも役立ちます。
Image may be NSFW.
Clik here to view.
スクリーンショット 2020-11-29 21.19.50.png

試して欲しいこと、必要なスキル

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

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

おわりに

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

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


Viewing all articles
Browse latest Browse all 21

Trending Articles