はじめに
本記事では Web フロントエンドに関連する技術を中心に各技術の私自身の習熟度を詳細に記しております。
ここでは各技術の習熟度の目安として、自分なりに定義した以下の指標を用いることにします。 （なおこの指標に適さない項目ではこの指標を使用しておりません。）
| 記号 | どの程度の習熟度か |
|---|---|
| S | その技術の最も正確な情報源を参照し、読み解き、活用することができる。その技術の責任の範囲や思想、仕様を深く理解している。 感覚ではなく確かな根拠を持って活用できる。 |
| A | その技術の最も正確な情報源の情報をある程度理解できるが、分からないことも多々ある。基本的な機能については理解しており、ほとんどドキュメントなどを見ずに活用することができる。感覚で使用している部分も多い。 |
| B | ある程度活用できるが感覚で使用していることが多い。基本的な機能も調べながら使うことが多い。 |
| C | それなりにまとまった情報（公式ドキュメントや書籍、講義など）を用いて勉強したことがある。一度勉強してからかなりの時間が経過している。 |
| D | 触れたことがある。わからないことが出てきたらその都度検索するのみであり腰を据えて勉強したことはない。もしくは勉強してからほぼ触っていないので忘れている。 |
具体的な作品にてスキルを確認されたい方は以下のリポジトリおよび記事をご覧ください。
Web フロントエンド技術全般のスキルを確認できます（2026/1/13現在、使用しているAPIサーバーが停止されたため作品は完全には動作しません）。
UI デザインに対する考え方を確認できます。
スキル
TypeScript
習熟度: A
- 公式ドキュメントを一通り読んだことがあります。
- アプリの作成に使用した経験があり、実践的な使用経験は数多くあります。
- 複雑ではない用意された型を読み、使い方を理解することができます。
- 再帰的な型定義を読み解くことで、ある型変数が何に推論されているのかデバッグのために確認したことがあります。
- 基本の型からオブジェクト型、関数の型、型推論の挙動、型の絞り込み、ジェネリクス、型変数、ユニオン型、インターセクション型、部分型関係、関数の型における反変・共変、mapped type、conditional types、タグ付きユニオンなどについての知識が一通りあり、もしわからなくなったら適宜調べることができます。
- 完全に使いこなすにはまだ練習や型システムに対する深い知識が足りていないように感じます。
- 型に関する基礎理論を勉強したことがありません。
- type-challengesの中級レベルに挑戦中です。
- 現在は型をよりよく使うための勉強をおこなったり、新たなバージョンで実装される機能などを積極的に追うようにしています。
主に使用した学習リソース
- TypeScript Documentation
- microsoft/TypeScript
- りあクト！ TypeScript で始めるつらくない React 開発 第 3.1 版【Ⅰ. 言語・環境編】
- プロを目指す人のための TypeScript 入門 安全なコードの書き方から高度な型の使い方まで
- type-challenges
JavaScript
習熟度: A
- TypeScript を通して JavaScript を使用することがほとんどです。文法は最新のものを利用するようにしています。
- const による変数宣言や map、fliter、reduce、flatMap といった高階関数、スプレッド構文など関数型プログラミング的なプログラミング手法で多用される書き方にも慣れ親しんでいます。
- 可読性やテストの容易性のため宣言的なプログラミングを意識してコードを書くことができます。
- 現在は ECMAScript 仕様書を読んで勉強しています。
- 使用頻度の少ない機能などについてはカバーできていない部分もあります。たとえば WeakMap や Iterator などはまだ意識して学習し、使用したことがありません。
- 使用可能な API、組み込みオブジェクトなどを増やしていく段階でもあります。
主に使用した学習リソース
- JavaScript Primer
- MDN Web Docs Learn web development
- ECMA-262
- Mastering JavaScript Function Programming
HTML
習熟度: A
- 基本的な要素のセマンティクスは理解しており概ね正確なマークアップができます。
- 現在は主に HTML Living Standard を読みより正確にマークアップができるように勉強しています。
- WCAG などのアクセシビリティ基準を考慮したマークアップにはまだ慣れていません。
主に使用した学習リソース
CSS
習熟度: A
- フレックスレイアウト、グリッドレイアウト、ロジカルプロパティなどを使用することができます。レスポンシブデザインを実装することができます。
主に使用した学習リソース
React
習熟度: A
- アプリを作成するときによく使用します。
- "React docs beta"の頃から現在の公式ドキュメントを読み込んでいます。
- 主に React 16.8 以降の書き方に慣れ親しんでおり、Hooks を用いた関数コンポーネントを中心にコードを読み書きすることができます。
memo、useCallback、useMemo、コンテキストの使用、state の局所化などによりレンダリング回数を削減するなどパフォーマンスに注意して設計することができます。- 一部の state 更新をトランジションとしてマークするなど UX の向上に留意しながらコードを書くことができます（React 18.0 以降）。
- コンポーネントの責任範囲に注意しながらインターフェイスを設計することができます。
- 現在は主に公式ドキュメントの復習や facebook/react、reactjs/rfcs、reactwg/react-18 などを用い学習をおこなっています。
主に使用した学習リソース
- りあクト！ TypeScript で始めるつらくない React 開発 第 3.1 版【Ⅰ. 言語・環境編】
- りあクト！ TypeScript で始めるつらくない React 開発 第 3.1 版【Ⅱ. React 基礎編】
- りあクト！ TypeScript で始めるつらくない React 開発 第 3.1 版【Ⅲ. React 応用編】
- React Docs
- React Docs beta
- facebook/react
- reactjs/rfcs
- reactwg/react-18
アルゴリズム
| AtCoder Algorithm レーティング | 最高値 639 （2023/9/16） |
| Paiza ランク | A |
- AtCoder のアカウント
- 複雑な時間計算量、空間計算量の見積もりや複雑なアルゴリズムを組むことはできません。
- アルゴリズムによって大きくパフォーマンスが変化する可能性があることに注意してプログラミングすることができます。
- 目安としては ABC の B 問題であれば 10-30 分、C 問題であれば 20-60 分程度で解くことができます。
- どの程度の問題を解くことができるのかは AtCoder Problemsにて確認することができます。
主に使用した学習リソース
- AtCoder Begginer Contest の問題
UI デザイン
- アフォーダンス、シグニファイア、発見可能性、対応づけ、制約、フィードバック、概念モデルなど UI デザインに関する基礎的な概念について学習済みです。
- 以上のような知識に基づき UI を工夫することができます（参考として拙著『個人開発アプリとその UI デザイン』をご覧ください）。
- 定量的に UI を評価した経験はありません。
主に使用した学習リソース
Git
習熟度: A
- 基本的なコマンド操作（
init、branch、add、commit、stashなど）を用いバージョンを管理することができます。 - コミットを小さくかつどのコミットにおいてもエラーがない状態（アトミック）になるよう意識して作成することができます。
git rebase -iを使用してコミットの編集・整理ができます。- git-flow や trunk based development などを意識しながら開発を行った経験がありますが個人開発における経験に留まります。
主に使用した学習リソース
- Pro Git
- The Missing Semester of Your CS Education: Version Control (Git)
- Write Better Commits, Build Better Projects
その他学習経験、使用経験がある技術
| 技術 | 習熟度 | 学習リソースなど | 備考 |
|---|---|---|---|
| Neovim | A | 現在主に使用しているテキストエディタです。 | |
| Next.js | A | アプリ制作に使用したことがあります。 | |
| Rust | B | The Rust Programming Language | 公式ドキュメントを一通り読んでいます。簡単なCLIアプリを作成したことがあります。 |
| Electron | B | アプリ制作に使用したことがあります。 | |
| Prettier | B | 同上 | |
| ESLint | B | 同上 | |
| CSSModule | B | 同上 | |
| Zod | B | 同上 | |
| Vite | B | 同上 | |
| Emotion | B | 同上 | |
| Recoil | B | 同上 | |
| Stitches | B | 同上。stitches 公式サイトへのリンク | |
| VSCode | B | 以前主に使用していたテキストエディタ。 | |
| Webpack | B | 自分で一からバンドルの設定を行った経験があります。 | |
| Babel | B | プリセットを設定したことがある程度です。 | |
| C++ | B | C++入門 AtCoder Programming Guide for beginners | 競技プログラミングでよく使用するライブラリなどは使用したことがあります。 |
| storybook | C | アプリ制作に使用したことがあります。 | |
| Mock Service Worker | C | 同上 | |
| Vitest | C | 同上 | |
| React Tesing Library | C | 同上 | |
| Prisma | C | 同上 | |
| Python | C | 一時期競技プログラミングに使用していました。 | |
| C | C | 苦しんで覚える C 言語 | ポインタやメモリの割り当てと解放の概念を知りました |
| Haskell | C | すごい Haskell たのしく学ぼう! | 関数型のプログラミングの考え方について勉強になりました。 |
| firebase | D | アプリ制作に使用したことがあります。 | |
| SQLite3 | D | アプリ制作に使用しましたが Prisma から操作したため直接触ったことはありません。 |
現在取り組んでいること
- プログラミング能力の停滞を感じており基礎に立ち返った勉強を行うつもりです。
- アルゴリズムやハードウェアに近い低レベルなシステムについて学んでおります。