5374.jpのNuxt.js版、その名も「5374nuxt」を開発しました！
https://github.com/codeforkanazawa-org/5374nuxt
私は大学で「情報デザイン」という講義を持っています。JavaScriptやデータのビジュアライゼーション、そしてオープンデータについての講義です。
5374.jpは講義の中のラスボス的位置付け！これまでに学習した内容を利用して、各地域のゴミの日データから5374.jp形式のデータを作成し、最終的には独自改造した5374.jpを作成するというもの。オープンデータを理解し、JavaScriptを学習してもらう目的です。2014年から５３７４.jpを講義に取り入れて今年で7年目！
７年経つと技術周りの状況はだいぶ変わります。5374.jpのメイン技術はjQuery。jQueryは素晴らしいライブラリですが、だんだんと役目を終えつつあります。私も講義で用いるライブラリをjQueryから変えたいと思い始めていました。そこで、Code for Kanazawaの福島さんに相談し、Code for Kanazawa & Code for Shiogamaの共同プロジェクトとしてVue.js & Nuxt.jsを利用した「5374nuxt」を立ち上げた次第です。
まだ、たたき台レベルの完成度だと思います。みなさんぜひissueやプルリク、そしてコミッターとしてもご協力いただけるとありがたいです！
何より「どういう機能が追加されたんですか？」と質問されても、機能やビジュアルは何も追加されていませんｗ あえて言えば、Webサーバに上げずともローカルのみで確認ができたり、変更がリアルタイムで反映されるのでデバッグもやりやすくなっているというNuxt.jsならではのメリットのところですね。
jQueryをTypeScript & Vue.js & Nuxt.jsに変更しているので、いろいろ作りにも変更は出ています。
オリジナルの5374.jpは、HTMLはindex.htmlのみで、JavaScriptは設定以外は全てscript.jsというファイルにまとまっています。5374nuxtでは、せっかくNuxt.jsなのでコンポーネントを分割、JavaScriptの記述も対応する場所に分割し、共通するクラス定義をscript.tsというファイルにしました。
ソースの可読性もなるべく上げようと努力はしています！今後みなさんからフィードバックも得ながら改善していきたいなと。
まだまだこれから。みなさん今後もぜひご期待ください！ねばぎば！
