# 自己評価資料

# 目次
- [今後の学習計画](#今後の学習計画)
- [基本情報](#基本情報)
- [スキルセットの評価](#スキルセットの評価)
- [開発レベルに対する評価](#開発レベルに対する評価)
- [プロジェクト実績](#プロジェクト実績)
- [エンジニアとしての強み](#エンジニアとしての強み)
- [現在の課題](#現在の課題)

# 今後の学習計画
::: Udemy
>:: [GraphQL](https://www.udemy.com/course/graphql-with-react-course/?couponCode=SKILLS4SALEJP) (9月２１日修了予定)
>
>
>:: [NestJS](https://www.udemy.com/course/nestjs-the-complete-developers-guide/?couponCode=SKILLS4SALEJP) (11月末頃修了予定)

::: 本
>:: [フロントエンド開発のためのテスト入門](https://www.amazon.co.jp/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E9%96%8B%E7%99%BA%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%83%86%E3%82%B9%E3%83%88%E5%85%A5%E9%96%80-%E4%BB%8A%E3%81%8B%E3%82%89%E3%81%A7%E3%82%82%E7%9F%A5%E3%81%A3%E3%81%A6%E3%81%8A%E3%81%8D%E3%81%9F%E3%81%84%E8%87%AA%E5%8B%95%E3%83%86%E3%82%B9%E3%83%88%E6%88%A6%E7%95%A5%E3%81%AE%E5%BF%85%E9%A0%88%E7%9F%A5%E8%AD%98-%E5%90%89%E4%BA%95-%E5%81%A5%E6%96%87/dp/4798178187) (10月末修了予定)
>
>:: [フロントエンド開発のためのセキュリティ入門](https://www.amazon.co.jp/%E5%B9%B3%E9%87%8E-%E6%98%8C%E5%A3%AB-ebook/dp/B0BQM1KMBG/ref=sr_1_1?crid=1Z3PIGH2XM5M4&keywords=%E3%82%A8%E3%83%B3%E3%83%89+%E3%82%A8%E3%83%B3%E3%83%89&qid=1676731991&sprefix=%2Caps%2C164&sr=8-1)(１２月末修了予定)

::: コーディングテスト対策
>:: leetcode週７問（mediumは２問換算）
>
>:: html,cssのUI構築練習 　　　<-　**量と内容を検討**

::: Twitterクローン
座学で学んだ内容をこのプロジェクトに集結させていく。
>- 実装したい内容
>:: 基本的なUI実装
>:: postサービス（９月〜）
>:: GraphQLの導入（１０月〜）
>:: Cypressなどの自動テストツールの導入（１１月〜）
>- 注意点
>　基本的なUI実装で時間を使ってはもったいないので積極的にIssueを考え、話せるネタを増やしていく。
>　実装した機能についてアピールポイントをまとめておく

# 基本情報
志望職種: Webフロントエンドエンジニア

# 目指すエンジニア像
フルスタック対応型フロントエンドエンジニア
- 理由
> - フロントエンドエンジニアとして堅牢なUIを実装できる事は必須
> - 技術導入の際にシステム全体への影響を見通した上で導入を検討できる
> - バックエンドとの円滑なコミュニケーションが可能となる。

# スキルセットの評価
- Udemy講座受講
>- [x] [React - The Complete Guide 2024 (incl. Next.js, Redux)](https://www.udemy.com/course/react-the-complete-guide-incl-redux/?couponCode=SKILLS4SALEJP)
>- [x] [The Complete Git Guide: Understand and master Git and GitHub](https://www.udemy.com/course/git-and-github-complete-guide/?couponCode=SKILLS4SALEJP)
>- [x] [SQL and PostgreSQL: The Complete Developer's Guide](https://www.udemy.com/course/sql-and-postgresql/?couponCode=SKILLS4SALEJP)
>- [x] [Microservices with Node JS and React](https://www.udemy.com/course/microservices-with-node-js-and-react/?couponCode=SKILLS4SALEJP)
>- [x] [Next.js Projects - 5 NextJS 14 projects (Instagram, Google.)](https://www.udemy.com/course/react-js-tutorial/?couponCode=SKILLS4SALEJP)
>- [ ] [GraphQL with React: The Complete Developers Guide](https://www.udemy.com/course/graphql-with-react-course/?couponCode=SKILLS4SALEJP)
>- [ ] [NestJS: The Complete Developer's Guide](https://www.udemy.com/course/nestjs-the-complete-developers-guide/?couponCode=SKILLS4SALEJP)

# 開発レベルに対する評価
::: Design Doc（Level１）
> :: Level0: 基本的なUI/UX設計と構造定義
意図したWebアプリケーションの最低限必要なUI要素とユーザーフローを定義できる。
> - 基本的なページ構造とナビゲーションフローを設計できる
> - 主要なUIコンポーネントのリストアップが可能
> - シンプルなユーザーフローの設計ができる
>
> :: Level1: 応用的なUI/UX設計とフロントエンドアーキテクチャ
導入するアーキテクチャやフレームワークを適切に選択することができる：
> - 技術選定を正しく行い、適切なアーキテクチャを選択できる
> - 比較するそれぞれの手法について理解し、優劣をつけることができる
> - コンポーネントの再利用性を考慮した設計
>
> :: Level2: 発展的なUI/UX設計とフロントエンドアーキテクチャの技術選定
アーキテクチャへの深い理解と実装レベルでの比較が行える：
> - システム全体への影響を考慮した技術選定が行える
> - 様々なフレームワークやアーキテクチャについての深い理解を持っている

::: Implementation（Level１）
>:: Level0: 基本的な実装スキル
>- 基本的なHTMLとCSSを使用してシンプルなWebページを作成できる
>- JavaScriptの基本的な構文を理解し、簡単な動的機能を実装できる
>- 簡単なフォームの入力値の取得と基本的なバリデーションができる
>- コンソールを使用してデバッグの基礎ができる
>
>:: Level1: 応用的な実装スキルとフレームワークの活用
>- フレームワークを使用してコンポーネントベースの開発ができる
>- エラーハンドリングと例外処理を適切に実装できる
>- API通信を実装し、非同期処理を適切に扱える
>
>:: Level2: 高度な実装スキルとパフォーマンス最適化
>- サーバーサイドレンダリング（SSR）やスタティックサイトジェネレーション（SSG）の実装ができる
>- パフォーマンス最適化技術（コード分割、レイジーローディング、メモ化など）を適切に適用できる
>- 並行処理や分散システムにより計算量などのPerformanceを考慮した実装ができる
>- CI/CDパイプラインの構築と自動化テストの導入ができる

::: Test（level0）
> UIとコードのチェックのみでテストが行われていないため、今後以下のような実装が必要である。
> - ツイート取得などの APIテスト
> - 大量のツイート投稿時のシステム応答
> - セキュリティテスト等

::: Review
> Reviewしてもらう際に気を付けている点は？
> - コードの自己レビューを行い、明らかな問題を事前に修正する
> - プルリクエストの説明を詳細に書く（目的、変更点など）
> - スクリーンショットや動画を添付し、UI変更を視覚的に示す
> - 技術的な決定は適切な技術選定を行い理由を説明する
> - 自ら改善点を考えIssueを提案する

# プロジェクト実績

::: X-clone(個人開発)
- 概要: Twitterライクなソーシャルメディアプラットフォームのクローン
- 使用技術: React, Tailwind CSS, Firebase, Google Cloud
- 実装機能:
- 投稿機能
- コメント機能
- いいね機能
- アピールポイント:
> - Google Cloudを用いたデータベース管理により、スケーラブルなバックエンド構築
> - Firebaseを活用し、認証やリアルタイムデータ同期を効率的に実装
> - Tailwind CSSによる迅速かつレスポンシブなUI開発
> - Gitを用いた効果的なバージョン管理と協業

::: Microservice（個人開発）
- 概要: マイクロサービスアーキテクチャを採用したWebアプリケーション
- 使用技術: Next.js（フロントエンド）
- アピールポイント:
> - バックエンド技術を中心としたマイクロサービスアーキテクチャの理解
> - Next.jsを用いたフロントエンド実装により、サーバーサイドレンダリングの基礎を習得

::: X-clone(集団開発)
> - 概要: Twitterライクなソーシャルメディアプラットフォームのクローン
- 役割: フロントエンド開発者
- 使用言語: Typescript
>選定理由(.jsxと比較)
> - 静的型付け言語であり、型のチェックがあるため
　コードの品質を高く保てる
> - 保守性が高い
> - エラーチェックがあるため開発初期からエラーを防ぐことができる。
- フレームワーク: React
- UIコンポーネント: chakra-UI
> Tailwind CSSなどと比較
> - UIコンポーネントがシンプルで実用的なAPIを提供している
> - 直感的なスタイリングモデルでプロップ名も非常に理解しやすい
> - オーバーライドが容易である

- 追加予定機能:
- 検索機能
- 通知機能
- その他のSNS機能拡張
- プロジェクト管理:
> - 自発的にサービスに必要なIssueを立案・管理
> - GitHub Projectsを活用したタスク管理と進捗の可視化
> - 現役エンジニアによるコードレビューとフィードバックの積極的な取り入れ
- 開発プロセス:
> - Gitのブランチ戦略を活用した開発
> - プルリクエストを通じたコード品質の維持と知識共有
- 学習と成長:
> - 現役エンジニアからのフィードバックを通じた実践的スキルの向上
> - コードレビューを通じたベストプラクティスの習得
> - 技術選定や設計決定におけるトレードオフの考慮

# エンジニアとしての強み
- フロントエンドからバックエンドまでの幅広い技術理解:
> X-cloneプロジェクトを通じて、フロントエンドだけでなくFirebaseやGoogle Cloudといったバックエンド技術も習得。フルスタックな視点でのアプリケーション開発が可能。
- モダンなフロントエンド技術への適応力:
> React, Tailwind CSS, Chakra UIなど、モダンなフロントエンド技術を積極的に学習し、実プロジェクトで活用。

# 現在の課題
プロジェクトでのIssueが基本的なUI実装ばかりで、就活のアピールになるような技術を取り入れられていない。基本的な機能を早急に実装し、デザインドックのネタになるような実装を行う必要がある。
将来的には、バックエンドと連携した開発を進めていきたい