よんなーハウス

はじめに、ITサークルMakaniAizuとは

沖縄県うるま市西原(イリバル)にある「よんなーハウス」を拠点とするボランティア団体です。

活動内容

サークルメンバーにはまずHPの作成から公開までを学んでいただきます。

その後にそのスキルを使い近隣のボランティア団体や公民館のHPをボランティアで制作することで、地域社会との結びつきを体感していただきます。

そして更なるスキルアップを行うことで、仕事へと結びつければと考えています。

作成するHPの形は

MakaniAizuで作成するHPは、いま最も普及しているCMSのWordPressとほぼ同じか、よりシンプルなものです。

中長期的に変化のない情報(団体の紹介等)を発信するページをもち、日々の活動報告やイベント情報を扱う短期的に変化していくページがあり、且つ防災情報等の緊急性のある情報を表示するパートも存在するようなHPです。

ただしMakaniAizuでは上記のページをWordPressでは作成せずに、それに比べて比較的新しい技術であるヘッドレスCMSとJavaScriptフレームワークを用いて作成していきます。

その理由はWordPressでは、そのシステムをメンテナンス更新する者がいなくて長いあいだ放っておかせた場合、システムにセキュリティ上の問題が起きたり、最悪の場合はページが表示されなくなる危険があるからです。

だからといってWordPressのようにブログ記事を手軽に更新できるCMS機能は捨てがたく、故にWordPressからデータベースとその管理画面を独立させた、ヘッドレスCMSというものを使います。

ユーザーであるボランティア団体や公民館の方が、そのヘッドレスCMSに記事を入力すると、Webhookという技術で、すでにJavaScriptフレームワーク(SvelteKit)を使いテンプレートの用意されてあるGitHubに通知がいき、そこで自動的にサイトが再構築され、最終的に静的サイトとしてAzure Static Web Appsにデプロイされます。

この方法のメリットは、ヘッドレスCMSとStatic Web Apps側で無料枠を使うことで料金が抑えられることです。またサイトにアクセスしたときの表示スピードが速いこともメリットです。

この方法のデメリットは、ヘッドレスCMSに記事を入力してからそれが公開されているサイトに反映されるまで数分かかることです。しかしボランティア団体や公民館ではブログ記事を時間単位で更新することはないと思うので、このデメリットはあまり気にならないかと思います。

必要になるスキル

以上のようなHPをMakaniAizuで制作する上で必要となるスキルは以下の通りです。

1. HTML/CSS

　HPの見た目を作るのに必要な言語になります。

　Figmaというツールを使いデザインしたページと同じものを、HTML/CSSを使いブラウザで表示できるようにします。

2. JavaScript

ブラウザでデータを表示したり、ヘッドレスCMSからAPIでデータを取得するのにJavaScriptが使われます。letやconstを使った変数定義から、モジュールやasync awaitを使った非同期処理まで学びます。バックエンドでJavaScriptを使用するためのNode.jsもここに含まれます。

3. TypeScript

JavaScriptは簡単に利用できるように設計されていて、それがあだとなって複雑なコードを書くときに間違いが入り込む危険があります。そのために複雑なコードにはTypeScriptを使用するのが一般的です。TypeScriptはJavaScriptに型で制約をかけ、間違いを極力抑えるように作られています。 コードはTypeScriptで書きますが、それを動かすときにはコードはTypeScriptをコンパイルしてJavaScriptになっています。なのでTypeScriptの前にJavaScriptを学ぶようにします。

4. SvelteKit

JavaScriptフレームワークのひとつです。SvelteよりもVueやReactのほうが有名ですが、MakaniAizuではSvelteKitを使用します。

5. ESLint

プログラミングコードを静的にチェックするツールです。エディタに組み込まれているのでそう意識しなくていいかもしれません。

6. Vitest

コードを実際に動かしてみてテストするツールです。これを書くにはJavaScriptやTypeScriptについての網羅的な知識が必要になるため最初から無理して学習する必要はありません。それよりも最初はclassでのオブジェクト設計の仕方や、関数を値としてやり取りしたり型付けする感覚をまずは身につけていくほうがよいと思います。

7. Git

コードの管理を行うツールです。公式なバージョンのコードを保管してあるメインブランチがあり、それを保守または更新する場合は新たにブランチを切り、最終的に上のESLintとVitestを通してエラーがなければ、メインブランチにマージし、それを新しい公式とします。複数人で開発する場合にはリモートのGitHubというサービスを使い、他の人と競合しない使い方を考えないといけませんが、最初はローカルでGitを使い、GitHubはバックアップように考えればよいかと思います。慣れるにしたがいGitやGitHubの機能には驚くと思います。

他にもGitHub Actions、ヘッドレスCMSのAPI、継続的インテグレーションや継続的デプロイなどありますが既に情報過多になってると思いますので、ここまでにします。