福野泰介の一日一創

新型コロナウイルス対策で注目集めるシビックテック、高専生が初心者向けの貢献の仕方をとっても丁寧な記事にしてくれ、うれしい限り！

東京都 新型コロナウイルス対策サイトへの貢献方法を解説 [Git] on @Qiita https://t.co/jj5Q5dMhss

— フレキシブル基板😱 (@FPC_COMMUNITY) March 10, 2020

春休み、新しいことを始めるいいチャンス。「VS COVID-19」をセルフフォークして、JavaScriptでwebアプリをつくるフレームワーク、Angular版を作りかけてみました。

「VS COVID-19 Angular ver.」(src on GitHub)

初めてのAngular、バージョンによっていろいろ変わるので、公式「Angular 日本語ドキュメンテーション」の「セットアップ」からスタート！

サーバーとの通信方法は、fetchとasync/awaitを使って書きたいけど、ちょっとややこしい。「Angular 日本語ドキュメンテーション - HttpClient」を参考に実装（list.component.ts）。

シンプルに実装するため、Google SpreadSheetからJSONで取得する部分はAPI化したので、表示コンポーネント部分はすっきり！（おまけに、表示順をランダム順にするシャッフルを追加しています）
https://app.sabae.cc/api/googlespreadsheet.json?key=2PACX-1vSFMNp5HcRNOF5MrAujEUWR1dIoX2mncMEWTbPlVAaJqKWiq831-6gnCyI7n_G8YfPqNQXrfwyVjyHL
（APIで、民間支援情報をJSONで取得するURL）

静的ファイル群にビルドして、ひとまずGitHub pagesで公開！

ng build

注意点、aタグのhref属性をダブルクォートなどで囲わない横着スタイルは怒られました。きちんと書くようにしたいと思います。

気になる新技術で、いろいろ創ってみましょう！

links
- 立ち上がろう高専生、今すぐできる技術貢献、日本政府xシビックテック、民間支援情報ナビプロジェクト「VS COVID19」経産省＆総務省から発表！ウイルス対策サイト福井版も