はじめに
「Linuxコマンドを練習したいけど、自分のPCを壊すのが怖い」「Cisco機器の設定を試したいけど、実機もPacket Tracerも面倒」——そんな課題を解決したくて、ブラウザだけで完結する学習サイト プロ道(prodou.net) を個人開発しました。
現在、全44カテゴリ・4,319レッスンまで育っています。この記事では、個人開発としての技術的な設計判断を中心に紹介します。
作ったもの
- プログラミング言語(Python, JavaScript, Go, Rustなど)をブラウザ内で実行して学べる
- Linux・Git・Docker・AWS・Terraform・Ciscoネットワーク機器・BIG-IPなどのコマンド操作を疑似ターミナルで練習できる
- 会員登録不要、インストール不要、完全無料
- PWA対応でホーム画面に追加可能、学習リマインドのプッシュ通知あり
なぜ「疑似ターミナル」にしたのか
一番のこだわりは、サーバーにもユーザーにも負荷をかけない設計です。
Cisco機器やBIG-IPのようなネットワーク/インフラ機器の学習教材は、実機かGNS3/EVE-NGのようなエミュレータを使うのが一般的です。しかしこれらは、
- 環境構築だけで挫折する初心者が多い
- サーバー側でVMを起動する場合、同時アクセス数に限界がある
という課題があります。そこで、本物のコンパイラ/実機に接続するのではなく、あらかじめ用意したシナリオに沿って「打ったコマンドに対して、それらしい応答を返す」疑似ターミナルを実装しました。
$ enable
$ configure terminal
$ interface gigabitEthernet 0/1
$ ip address 192.168.1.1 255.255.255.0
このようなコマンド列を打つと、疑似的な機器の状態が更新され、show running-configで反映結果が確認できる、という作りです。サーバーへの通信は一切発生しないため、理論上何人が同時にアクセスしても負荷はゼロです。
実行系はPyodideを採用
Python・JavaScript・SQLなど「実際にコードを実行できる」と明記しているカテゴリは、PyodideのようなWebAssembly版の言語ランタイムをブラウザ内で動かしています。サーバーにコードを送信する処理はゼロで、実行結果もローカルで完結します。
一方、C/Java/Goなど、WebAssembly化のコストが高い言語については、「お手本コードと入力が一致しているか」を判定する方式を採用し、無理に本物のコンパイラを積まない設計にしています。技術的な誠実さとして、各レッスンにその旨を明記しています。
学習継続の仕組み
-
localStorageで学習進捗を保存し、「前回の続きから」を表示 - Web Push APIで学習リマインド通知
- PWA化(
manifest.json)でアプリのようにインストール可能
これらはすべてクライアントサイドで完結しており、サーバー側にユーザーデータを保存する仕組みは持っていません。
SEO・構造化の工夫
- 全カテゴリをJSON-LD(
ItemList)でマークアップし、検索エンジンにサイト構造を伝達 - hreflangタグで日本語・英語・スペイン語・ポルトガル語・インドネシア語・ベトナム語に対応
- OGP/Twitter Card画像を用意し、SNSシェア時の見え方も統一
今後の展望
- PC→ルーター→サーバーのようなエンドツーエンド構成を組んで、実務に近い「切り分け」の練習ができるインフララボを拡充中
- MCP・Ollamaなど、AI開発系の実践ガイド(AI開発の実践ガイド)も拡張中
おわりに
個人開発でここまでのボリュームを継続するのはなかなか大変ですが、「環境構築の壁」で挫折する人を1人でも減らせればと思い、地道に続けています。もしよければ覗いてみてください。