[Jochun] FullStack Knowledge Tree

1. Setup & Environment

Mac Initial Setup

• [SetUp][Mac][Homebrew] 開発用Macの初期設定

Development Environment Design

• [Mac] ローカル開発環境のディレクトリ構成
• [Development Environment] ビルドツールとは_Vite, Webpack, Babel
• [React] Create React App(CRA)を使用したReactプロジェクトのフォルダ構成
• [React] Create React App（CRA）またはViteを使用したプロジェクトの作成方法
• [Python] フレームワーク
• [TypeScript] フレームワーク

Directory Structure

• [FE] フロントエンドのディレクトリ設計

2. Architecture & Design

System Architecture

• [Architecture][JavaScript][L1] UIファースト・データファースト・ロジックファーストの違いと設計フロー
• [Architecture][JavaScript][L2] 3層アーキテクチャに基づくFE/BE分離の考え方

Frontend Architecture (Presentation Layer)

• [Architecture][JavaScript] Vanilla JSにおける宣言的UIと命令的UIの構造の違い
  
• [Architecture][JavaScript][React] 動的UIを持つFEアプリケーションの基本構造 (宣言的、命令的)
• [Architecture] Webアプリ設計パターン10選 (宣言的、命令的)

Backend Architecture (Business Logic Layer)

Data Architecture (Data Access Layer)

3. Frontend Development

HTML / CSS

• [CSS] CSSセレクタについて
• [CSS][React] スタイル一覧
• [CSS] stylesheetの指定方法
• [CSS][React] テンプレートリテラルを用いた２つのクラスを付与する方法

JavaScript / TypeScript

Execution Model & Runtime

• [JavaScript][Synchronous / Asynchronous] 非同期処理はなぜ起きるのか
• [JavaScript][Synchronous / Asynchronous] 同期・非同期処理について
• [JavaScript][Synchronous / Asynchronous] 非同期処理の雛形

Fundamentals

• [JavaScript] 変数
• [JavaScript] 関数宣言 vs 関数呼び出
• [JavaScript] 演算子とは
• [JavaScript] データ型とリテラル
• [JavaScript] オブジェクトへのアクセス方法_ドット記法、ブラケット記法
  
• [JavaScript] JSONファイルのプロパティへのアクセス方法 (fetch / import)_Foundation
• [JavaScript] APIから取得したJSONの扱い方 (fetch / axios)_Foundation
• [JavaScript] APIから取得したJSONの扱い方 (fetch / axios)_Intermediate
• [JavaScript] クロージャ (Closure) とは
• [JavaScript][React] クロージャ（Closure）のReact関数コンポーネントでの活用
• [JavaScript] for, for...of, for...in とは
• [JavaScript] 分割代入 (オブジェクト, 配列 → 新たな変数)
• [JavaScript] 分割代入 (オブジェクト, 配列 → 新たな変数)_v2
• [JavaScript] コールバック関数とは
• [JavaScript] コールバック関数とは_v2
• [JavaScript] DOM
• [JavaScript] DOM/ Node/ Element の違い
• [JavaScript] モジュールバンドラー

Object-Oriented

• [JavaScript] オブジェクトの分類（組み込み / ブラウザAPI / 構造化 / ユーザー定義）

• [JavaScript] newが使える組み込みオブジェクト / 使えない組み込みオブジェクト

• [JavaScript] newが使える組み込みオブジェクト / 使えない組み込みオブジェクトの内部構造

• [JavaScript] メソッドの分類（オブジェクト / プロトタイプ / インスタンス / スタティック）

• [JavaScript] 関数の分類（宣言関数 / 関数式 / アロー関数 / コンストラクタ関数）

• [JavaScript] オブジェクト、プロパティ、メソッドについて

• [JavaScript] クラス、コンストラクタ、プロパティ、メソッドについて

• [JavaScript] オブジェクトリテラル、コンストラクタ関数、クラス構文の違い

• [JavaScript][Property] textContent / innerText / innerHTMLの違い

Object Methods

• [JavaScript][Object Methods] Objectメソッドとは
• [JavaScript][Object Methods] Objectメソッドとは_Applied (コンストラクタ関数, new, this)
• [JavaScript][Object Methods] Mathオブジェクトのメソッドとは

Instance Methods

• [JavaScript][Instance Methods] インスタンスメソッド
• [JavaScript][Instance Methods] toString, String, parseInt, Numberメソッドとは (数字→文字列, 文字列→数字)

Array - Iteration (Non-Mutating)

• [JavaScript][Instance Methods] forEachメソッドとは (配列→各要素の処理実行→値)
• [JavaScript][Instance Methods] mapメソッドとは (配列→各要素の処理実行→配列)
• [JavaScript][Instance Methods] filterメソッドとは (配列→条件抽出→配列)
• [JavaScript][Instance Methods] filterメソッドとは (配列→条件抽出→配列)_v2
• [JavaScript][Instance Methods] filterメソッドとは (配列→条件抽出→配列)_v3
• [JavaScript][Instance Methods] findメソッドとは (配列→条件抽出→最初の要素)
• [JavaScript][Instance Methods] reduceメソッドとは (配列→集約→値)
  

Array - Extraction (Non-Mutating)

• [JavaScript][Instance Methods] filterメソッドとは (配列→条件抽出→配列)
• [JavaScript][Instance Methods] filterメソッドとは (配列→条件抽出→配列)_v2
• [JavaScript][Instance Methods] filterメソッドとは (配列→条件抽出→配列)_v3
• [JavaScript][Instance Methods] findメソッドとは (配列→条件抽出→最初の要素)
• [JavaScript][Instance Methods] sliceメソッドとは (配列、文字列→範囲抽出)
• [JavaScript][Instance Methods] split, joinメソッドとは (文字列→配列, 配列→文字列)

Array - Transformation (Non-Mutating)

• [JavaScript][Instance Methods] mapメソッドとは (配列→各要素の処理実行→配列)
• [JavaScript][Instance Methods] reduceメソッドとは (配列→集約→値)
  

Array - Manipulation (Mutating)

• [JavaScript][Instance Methods] push, pop, unshift, shiftとは (配列→各要素の追加・削除)
• [JavaScript][Instance Methods] push, concatメソッドとは (数字, 文字列, 配列→配列追加)
• [JavaScript][Instance Methods] spliceとは (配列→各要素の追加・削除・置換)

String - Iteration (Non-Mutating)

String - Extraction (Non-Mutating)

• [JavaScript][Instance Methods] split, joinメソッドとは (文字列→配列, 配列→文字列)

String - Transformation (Non-Mutating)

String - Manipulation (Mutating)

• [JavaScript][Instance Methods] sliceメソッドとは (配列、文字列→範囲抽出)
• [JavaScript][Instance Methods] repeat, replaceメソッドとは (文字列→繰返し、文字列→置換)

Static Methods

Applied - Application

ToDoApp

• [JavaScript][L1] テキストボックスのコンテンツ(div)を別コンテンツ(div)に転記(生成)する
• [JavaScript][L2] ボタン押下によりコンテンツ(div>ul>li)を削除する
• [JavaScript][L3] ボタン押下によりコンテンツ(div>ul>li)を別コンテンツ(div>ul>li)に移動(生成)する
• [JavaScript][L4] コンテンツ(div>ul>li)の生成機能を共通化する
• [JavaScript][L5] ボタン押下によりコンテンツ(div>ul>li)を別コンテンツ(div>ul>li)に移動(生成)する ([L4]で作成したコンポーネントを活用)

BookLibraryApp

• [Architecture][JavaScript] UIファースト・データファースト・ロジックファーストの違いと設計フロー
• [Architecture][JavaScript] 3層アーキテクチャに基づくFE/BE分離の考え方

Applied - Testing

• [JavaScript][Jest] インスタンスを用いたテストコード

React

Basics

• [JavaScript][React] クロージャ（Closure）のReact関数コンポーネントでの活用
• [React][L1] 画面要素を関数で出力する
• [React][L2] Eventの設定方法
• [React][L3] Styleの設定方法
• [React][L4] Props
• [React] JSXとは
• [React] JSX プロパティ（属性）について
• [React][TypeScript] Reactアプリの処理フロー完全解説 (npm start から描画まで)
• [React] Create React App（CRA）またはViteを使用したプロジェクトの作成方法
• [React] コンポーネントを用いたレンダリング
• [React][JavaScript][L8] default exportとnamed export
• [React] 関数コンポーネントの基本構造

Rendering

• [React] 再レンダリングの条件
• [React][L7] useEffect, ||, &&

Event Handling

• [React] イベントハンドラの注意点

Hooks

• [React][Hooks] useState の使い方
• [React][Hooks] useEffect + fetch の使い方
• [React][Hooks] useEffect + setTimeout + clearTimeout の使い方
• [React][Hooks] useRef の使い方
• [React][Hooks] useRef の使い方_2
• [React][Hooks] useMemo の使い方
• [React][Hooks] Custom Hooks useFetch の使い方
• [React][Hooks] Custom Hooks useCardAnimation の作り方
• [React][Hooks] Custom Hooks useCardAnimation の使い方

Router

• [React] React Router の超基礎
• [React] React Router の基礎

Storybook

• [Storybook][React][TypeScript] Storybookの導入手順
• [Docker][Storybook] DockerでStorybookを起動する

Applied

Basical App

• [React] 超基本構造 EmailSender ( useState, event.currentTarget.value)
• [React] 超基本構造 EmailSender ( useState, event.currentTarget.value, <form>)
• [React] 超基本構造 PictureProvider ( useState, useEffect, fetchAPI)

ToDoApp

• [React][L1] コンテンツ(li)を出力する
• [React][L2] テキストボックスの内容を保持する
• [React][L3] テキストボックスの内容を出力する
• [React][L4] リストの項目をボタンで削除する
• [React][L5] リストの項目をボタンで削除・出力する
• [React][L6] リストの項目をボタンで削除・出力する2
• [React][L7] コンポーネン化する(Propsの利用)

i18n

• [React] Reactアプリの多言語対応 (i18n)_Docker, Storybookを使用

Recharts

• [React][Recharts] Recharts を使用したReactプロジェクトのディレクトリ構成
• [React][Recharts] Recharts の使い方 (パターン① : 保存型 (FE + BE + DB))_Sequelize
• [React][Recharts] Recharts の使い方 (パターン① : 保存型 (FE + BE + DB))_Prisma

PowerBI

• [React] [PowerBI] ReactアプリにPowerBIを埋め込む

Applied - Testing

4. Backend Development

Node.js

• [Node.js][nodebrew] [Mac] nodebrewを使用してMacにNode.jsをインストールする
• [Node.js][Jest] Jestでテストを行う
• [Node.js][Jest] 単体テストにおける jest.spyOn の使い方
• [Node.js][winston][library] ロギングライブラリ(winston)の使い方

Express

• [JavaScript][Express] client から server にリクエストする雛形（GET / POST / PUT / DELETE）
• [JavaScript][Express] client が server のデータを受け取る方法（GET）
• [JavaScript][Express] server から client にレスポンスする雛形（GET / POST / PUT / DELETE）

.NET

• [.NET Framework/.NET].NET Frameworkと.NETの違い

npm / Package Management

• [Package Manager]パッケージマネージャとは

ORMapper (Prisma / Sequelize)

• [ORMapper] ORMapperについて

API Design

RESTful API

• [API] RESTfulなAPIとは
• [API] WebAPIの分類_TreeDiagram

API Gateway / BFF

• [API] API Gateway と BFF の違い

Cloud Integration

• [API] HTTPメソッドとCRUD
• [Cloud][IaaS][FaaS][API Gateway] クラウドサービスとAPI Gatewayについて

Logging & Error Handling

5. Database & Data Management

MySQL

• [MySQL] [HeidiSQL] [Azure] HediSQLからAzure Datebase for MySQL フレキシブルサーバに接続する
• [MySQL] [PowerBI] MySQLの情報をPowerBIで出力する
• [MySQL] exitとquitの違い
• [MySQL][Docker] DockerでMySQLを動かす

Data Management Tools

• [Date Management] データ管理ツールの概論（特徴、分類、類似性）
• [Date Management][Design] アーキテクチャデザイン
• [API] HTTPメソッドとCRUD

CRUD Design

• [API] HTTPメソッドとCRUD

6. DevOps & Deployment

Git / GitHub

• [GitHub] GitHub CLI をインストールする
• [GitHub] GitHub CLI コマンド一覧
• [Git/GitHub] Git-flow と GitHub-flow の違い
• [GitHub] GitHub初回デプロイの手順

CI/CD

Docker

• [Docker] Docker Desktopのインストール手順まとめ（Homebrewあり/なし）
• [Docker][React] Docker環境の基礎
• [Docker][React] DockerでReactプロジェクトを起動する
• [Docker][Storybook] DockerでStorybookを起動する

Virtualization (Vagrant / VirtualBox)

• [Virtual Architectute] ハイパーバイザ型、ホストOS型、コンテナ型とは
• [VirtualBox / Vagrant] VirtualBoxとVagrantとは
• [Vagrant][VirtualBox][Mac] Mac環境でVagrantからVirtualBoxを起動する
• [Vagrant][VirtualBox][Mac] Mac環境でVagrantからVirtualBoxを起動する_2
• [VirtualBox][Mac] Mac環境で仮想マシンファイルからVirtualBoxを起動する

Cloud

Azure

• [Azure AD] Azure AD(Microsoft Entra)とテナントとサブスクリプション
• [Azure AD] Azure B2B/B2C の違い
• [Azure][CronJob][ScheduledJob] Azure環境におけるCronJob (定期実行ジョブ)

AWS

Serverless (Lambda / Azure Functions)

• [Serverless Computing Service][Managed Service] サーバーレスコンピューティングサービスとマネージドサービスの違い
• [Serverless Computing Service][Azure][Azure Functions] Azure Functionsとそのアーキテクト
• [Serverless Computing Service][AWS][AWS Lambda] AWS Lambdaとそのアーキテクト

OS & Shell

Linux

• [Linux] システム、プロセス、デーモン、シェル、コマンド、スクリプト、プログラムの違い
• [Linux][directory] ディレクトリ一覧
• [Linux][directory] デバイスファイルと設定ファイル_/dev, /etc, /bot, /proc
• [Linux][quotation mark][command] 引用符_', ", `
• [Linux][RegularExpression] 正規表現
• [Linux][code]改行コードとは_CRLF, CR, LF, \r\n, \r, \n
• [Linux] Linuxディストリビューションとは
• [Linux] パス=環境変数（$PATH）を通すとは

MacOS

• [Mac] ハードディスクのアイコンがFinderに表示されない
• [Mac] System File (usr, bin, local) について
• [Mac] [Terminal] cdコマンドの使い方
• [Mac] error 79 (zipファイルが解凍できない)

7. Network & Security

Network Fundamentals (DNS, Proxy, WAF)

• [DNS] DNSとは

Cryptography & Authentication

Risk & Compliance

Security Standards

• [Cryptosystem] 共通鍵暗号方式、公開鍵暗号方式、デジタル署名について
• [Cryptosystem] デジタル証明書の失効情報
• [Cryptosystem] 暗号文とハッシュ値の違い
• [Security] プロキシ
• [Security] WAF, TLSアクセラレーター
• [Security] セキュリティ対策製品
• [Security of Mail Service] メールサービスのセキュリティ
• [Authentication] Challenge and Response Authentication
• [Authentication] SSO
• [Security] PasswordCrack
• [Security] CyberAttack
• [Risk Assessment] リスクアセスメント
• [Standard] セキュリティ評価の標準化

8. Data Science & Analytics

Data Analytics

• [Python] 教師あり学習、教師なし学習、強化学習
• [Python] ライブラリ概観_前処理、計算、ファイリング、可視化
• [Python][Equations] 方程式の種類とそのユースケース

Data Visualization - PowerBI

• [PowerBI Desktpo] 列内の文字列（データ）の分割
• [PowerBI Desktpo] 視覚化タブのX, Y軸にデータをドラッグ＆ドロップ出来ない時の対処法
• [PowerBI Desktpo] 散布図を用いてポジションマッピングを行う
• [PowerBI service] 組織内のメンバーへのアクセス許可
• [PowerBI] PowerBI Serviceのデータを更新する

Financial / Energy Modeling

• [Python][Financial Engineering] 金融モデリングにおける教師あり学習、教師なし学習、強化学習
• [Python][Financial Engineering][Fluid Mechanics] 金融工学と流体力学の類似性
• [Python][Financial Engineering][Fluid Mechanics] 線形PDEと非線形PDE
• [Python][Financial Engineering] 金融モデリングとは
• [Python][Financial Engineering][Energy Engineering] 金融モデリングとエネルギーモデリングの違い

9. Project Management

Documentation & Artifacts

• [PM] プロジェクト必要資料一覧

10. Tools & Utilities

Common Tools (mermaid, JMeter, etc.)

• [mermaid] mermaidの記法
• [Jmeter] Jmeterの使用方法
• [CodeSandbox] consoleの表示方法

Shortcuts (Keyboard, Browser, Excel)

• [Edge] Microsoft Edge Policiesについて
• [Keyboard][ShortCut][Mac] Finderでfile作成, folder作成
• [US Keyboard] 言語切替
• [Keyboard][ShortCut][Mac][Windows][Chrome] URLコピー+貼り付け
• [Keyboard][ShortCut][Mac][Windows][Chrome] 開発者ツール
• [Keyboard][ShortCut][Mac] ウィンドウのタイル表示 / Split View
• [Keyboard][ShortCut][Browser] ブラウザショートカット
• [Keyboard][ShortCut][Excel] エクセルショートカット

VSCode

• [VSCode] Terminalの表示・非表示・追加
• [VSCode][React] React関数コンポーネントの雛形を生成するスニペット
• [VSCode][Python] 一括コメントアウト

Sandbox / IDE Tips

Hardware

• [Memory] メモリの種類
• [Memory] 大容量記憶装置（Mass Storage Device）について

11. Certifications & Study

IPA / LPIC / Azure

• [Certification] IPA AP
• [Certification] LSM
• [Certification] LPIC 101
• [Certification] LPIC 102

Statistical Tests

• [Certification] Japan Statistical Society Certificate 2nd
• [Certification] Japan Statistical Society Certificate Pre-1st

Financial & Quant Certifications

• [FRM] FRM Part1

CodeWars

• [CodeWars] Collections

参考リンク

• [Jochun] FullStack