制作実績の一覧へ

キャリア診断

AIキャリアルート

AIキャリアルートは、開発経験者が自分の経験とAI関連職種の接点を整理する静的サイトである。技術と仕事の進め方を合わせた9軸の入力を職種データとブラウザ内で照合し、実務経験、学習中、未経験、未回答を分けて表示する。職種比較はURLから再現できる。

公開サイトを見る (新しいタブ)
AIキャリアルートの画面

技術スタック

AIキャリアルートで使用する技術と役割
技術このサイトでの役割
Astro職種一覧、職種ごとの解説、経験チェック、比較ページを静的に生成する。サーバーでの個人入力処理は持たない。
TypeScript9軸の入力値を正規化し、職種に関連する経験を段階ごとに分類して表示する。比較対象の識別子も検証する。
URLSearchParams比較する職種の識別子をURLの検索条件へ記録し、再訪時に同じ比較対象を読み取って画面に選択、表示する。
Cloudflare Workers Static AssetsAstroが生成したdistの静的ファイルを配信する。職種データと画面の処理は配信ファイルに含める。

処理の流れ

  1. 経験を9軸で入力

    技術6軸と仕事の進め方3軸について、実務経験、学習中、未経験、未回答の状態を画面から受け取る。

  2. 職種と照合

    各職種に設定した関連スキルと入力値を照合し、経験段階ごとに分類して関連経験がある職種を並べる。

  3. 職種を比較

    選んだ職種の仕事内容、成果、必要経験の例などを並べ、比較対象の識別子をURLの検索条件に保持する。

実装の工夫

経験の段階を分けて表示

関連スキルを実務経験、学習中、未経験、未回答の四つに分類する。実務経験と学習中の項目がある職種だけを結果に出し、その件数で並べるため、単一の点数で適職を断定する表示にはしていない。

参照情報の状態を保持

職種データの参照先には確認日と、募集中、参考情報、掲載終了の状態を持たせている。画面でも状態と確認日を表示するため、過去の求人例を現在も募集中の案件として読まないための手掛かりになる。

比較対象をURLで復元

比較画面は職種の識別子を検索条件から読み、既知の識別子だけを最大3件まで採用する。選択を変えるとURLも更新するので、同じ職種の組み合わせをリンクとして共有し、後日の再訪時にも開ける。

構成と制約

実装確認:

制作実績の一覧へ戻る