TL;DR
技術書プラットフォーム「Yoliau」に、技術書の学習順序を可視化するロードマップ機能を実装しました。
解決したい課題
「どの技術書をどの順番で読めばいいか分からない」
実装内容
- React Flowでドラッグ&ドロップ可能なビジュアルエディタ
- Dagreによる自動整列機能
- 技術書をノードとして配置し、学習パスを線で接続
- 公開/非公開設定、ドラフト保存対応
技術書学習でよくある課題
1. 学習順序が分からない
- React を学びたいけど、どの本から始めればいいの？
- 基礎から応用まで、どういう順番で読み進めるべき？
- 前提知識として何を学んでおく必要がある？
2. 学習計画が立てにくい
- 体系的な学習プランがない
- 資格取得のために、どの技術書をどの順番で読むべきか分からない
3. 情報が散在している
- おすすめの技術書リストはあるけど、関連性が見えない
- ブログや記事で個別の本は紹介されているが、全体像が掴めない
- 学習パスが可視化されていない
解決したいこと
技術書を使った効率的な学習パスを可視化し、誰でも体系的に学習できるようにしたい
具体的には、
学習順序の明確化：どの本をどの順番で読むべきかを視覚的に表示
知識の体系化：関連する技術書同士の繋がりを可視化
共有・参考：他の人が作成したロードマップを参考にできる
ロードマップ作成機能について
機能概要
技術書を学習ノードとして配置し、それらを線で繋いで学習の順序を視覚的に作成できる機能です。
多くの方が慣れ親しんでいる draw.io と同様の操作感を目指して開発しており、フローチャートを作る感覚で学習計画を立てることができます。
スマホでも手軽にロードマップを作成できるよう、レスポンシブ対応も実施しています。
ステップ間でノードの解説などを入れたい場合には、ラベルを追加して解説を入れることができます。
想定される使用シーン
🚀 個人の学習計画
「インフラエンジニア向け技術書パス」
「AWS 認定資格取得のための学習ロードマップ」
「情報処理技術者試験対策読書プラン」
🌟 コミュニティでの共有
経験豊富なエンジニアが作成した学習パスの共有
特定技術領域の専門家による推奨ルート
学習者同士での情報交換
ロードマップ作成の実装
使用技術スタック
| 技術 | 用途 | 選定理由 |
|---|---|---|
| React Flow | フローチャート描画 | 豊富な機能と柔軟なカスタマイズ性 |
| Dagre | 自動レイアウト | 階層的グラフの美しい配置アルゴリズム |
| shadcn/ui | UIコンポーネント | 統一されたデザインシステム |
各機能の実装について
ビジュアルなロードマップ作成
ドラッグ&ドロップによる書籍追加
書籍検索パネルから直接キャンバスにドラッグして追加
自動整列機能（Dagreライブラリ活用）
複雑になったロードマップを一括で整列
カスタムノードコンポーネント
書籍情報を表示するカスタムノード
エッジ（接続線）のカスタマイズ
学習パスの説明をエッジラベルで表現
今後の展望
現在のロードマップ機能は技術書に特化していますが、より包括的な学習プラットフォームへと進化させていく予定です。
技術記事の統合
Zenn、Qiita、Izanamiなどの技術記事をノードとして追加可能に
技術書と記事を組み合わせた、より柔軟な学習パスの構築
無料コンテンツと有料コンテンツを組み合わせた最適な学習ルート
動画教材・オンラインコースの追加
Udemy、YouTubeなどの動画教材との連携
書籍→記事→動画といった段階的な学習フローの実現
学習進捗の可視化
各ノード（書籍・記事）の読了状態の管理
進捗率の表示とダッシュボード機能
学習時間の記録と統計表示
マイルストーン設定
目標期限の設定
リマインダー機能
達成バッジの付与
ロードマップの相互評価
いいね・コメント機能
フォーク機能（他の人のロードマップをベースに自分用にカスタマイズ）
ロードマップランキング
これらの機能を段階的に実装することで、Yoliauでエンジニアの継続的な成長をサポートしていきたいと考えています。
さいごに
Yoliau は「今の自分にあった最適な技術書を見つけることができる場所」を提供することを目指しています。
特に、若手エンジニアが上級者の評価や経験を参考にして技術書を選択できるプラットフォームとして機能したいと考えています。
この学習ロードマップ機能は、その理念をさらに一歩進めて、
単なる書籍情報の提供から、学習プランの提案へ
個別の書籍評価から、体系的な学習パスの共有へ
受動的な情報収集から、能動的な学習計画の立案へ
技術書選びを通して、エンジニアの皆さんのスキルアップをより効果的にサポートしたいと思っています。
この学習ロードマップ機能が、そんな悩みを解決し、より効率的で楽しい技術書学習体験を提供できることを願っています。
Yoliau あなたにぴったりの技術書が見つかる場所
