静的サイトジェネレータでプログラミングの学習サイトを作った話

2020年4月13日 16:47

こんにちは、けんにぃです。ナビタイムジャパンで公共交通の時刻表を使ったサービス開発やリリースフローの改善を担当しています。

今回は新卒や若手のエンジニア向けにプログラミングの学習サイトを作った話をしようと思います。

実際に作成したサイト

C++ 向けのサイトと Python 向けのサイトを作成しました。

Go のライブラリや Vim プラグインの開発で活躍されている mattn さんにもツイートしていただきました。

“ゼロから学ぶ C++” https://t.co/9Mj84PiFfG
— mattn (@mattn_jp) April 9, 2020

プログラミングの学習は参考書を買って行うことが多いのではないかと思います。私も昔は参考書を買って勉強をしていましたが、参考書だと以下のような気になる点がありました。

たとえプログラムの言語仕様がアップデートされても本の内容は古いままです。新版が出ることもありますが、そのたびに買い換えるのはコストも掛かります。

特に C++ は他の言語に比べてそれほど頻繁に書籍が出ないため、古い情報のままであることも多く、最新の情報をキャッチアップするのに苦労した経験があります。

どの参考書を買おうか色々悩んで買ったのに、結局ほとんど読まずに終わってしまったという経験はないでしょうか？参考書を買うこと自体が目的になってしまうパターンです。

お金をかけなくてもインターネットに無料の学習サイトがあればとりあえず勉強を始められるため、それにより勉強に取り組むための敷居が低くなり、手を付けやすくなるのではないかと考えました。

それでも物足りないと感じたときに参考書を買うというスタンスの方が私はいいかなと思っています。

新卒の場合、研修で学んだことを家や電車の中でも復習したいと考えている人が多いです。最近だとコロナの影響でテレワークを実施している企業も多いと思います。弊社も現在はテレワークを行っていますが、このような状況で会社にいないとプログラミングの勉強ができないというのは新卒にとっても不安なことだと思います。

以上のことから、インターネットで学習できるサイトを作ろうと思いました。

サイトのデザインがオシャレだと読んでみようという気持ちが向上するので、オシャレになるようにマテリアルデザインを採用しました。

テーマカラーはプログラミング言語をイメージしやすいものにしようと、ロゴの色に合わせて選びました（C++ はインディゴ、Python はオレンジ）。姉妹サイトだとわかるように、どちらのサイトもレイアウトに統一感を持たせています。

またスマホでもちゃんと読めるようにレスポンシブウェブデザインになっています。

サイト作成にあたっては Material for MkDocs を使用しました。

これは MkDocs という Python 製の静的サイトジェネレータの拡張機能として提供されており、Markdown から簡単にマテリアルデザインのサイトが作成できるツールです。

インストールは pip で行います。

$ pip install mkdocs-material

新規サイトを作成するには下記コマンドを実行します。

$ mkdocs new PROJECT_DIRECTORY

PROJECT_DIRECTORY 配下に docs/index.md とmkdocs.yml が生成されます。mkdocs.yml は MkDocs の設定ファイルになっています。このファイルを次のように編集します。

site_name: My Docs

theme:
 name: material

Material for MkDocs はたくさんの拡張機能を持っており、その機能を有効にするには他にも設定の追加が必要になります。詳細は下記のページと私が使用している設定ファイルを参考にしてください。

ここまでできたら PROJECT_DIRECTORY 配下で下記コマンドを実行すると Web ページが作成できます。

$ cd PROJECT_DIRECTORY
$ mkdocs serve

http://localhost:8000 にアクセスすると Web ページにアクセスできます。HTML を手元に残す場合は下記コマンドを実行します。

$ mkdocs build

コマンドを実行すると site ディレクト配下に HTML が生成されます。

GitHub には gh-pages という名前のブランチに HTML をプッシュしておくと、自動で http://<user>.github.io/<repository> が Web ページになる仕組みがあるので、これを利用して Web ページを公開することができます。

MkDocs は gh-pages に HTML をプッシュする機能を持っているため、下記コマンドで簡単に行うことができます。

$ mkdocs gh-deploy

C++, Python の勉強を始めたい方はぜひご活用ください。Material for MkDocs も手軽で便利なのでドキュメント作成にご利用ください。