初JSでコロナ(札幌)の表を 作ってみた (新年の抱負 超LT会- vol.2)

Transcript

1. 初JSでコロナ(札幌)の表を 作ってみた ～この発表自体が今年の抱負～ akie_mmm(あきえ)
2. akie_mmm(あきえ) 普段はＷＥＢ制作の パートをしております。 特にＨＴＭＬ/ＣＳＳ、ワードプレスの 子テーマ操作、 Illustratorを使用しての仕事が中心です。 Twitter名（あきえ）:@akie_mmm
3. 以前のLT会(エンジニアの勉強法ハック LT- vol.3)にて、勉強には 「アウトプットが大事！」という話をうかがい ました。 今年は「アウトプットする」の抱負のもと、 発表していきます！
4. 今回何を作ったか 今回は札幌の1日ごとのコロナウイルスの 人数表を作りました。 人数と年代別をカウントする表を作りました。 ウェブサイトには 1日分しか表示されないので数日間分のデータがあったら （私が把握するのに）便利と思って作成しておりました。 データはここにあります（札幌市：新型コロナウイルス感染症の市内発生状況 ） https://www.city.sapporo.jp/hokenjo/f1kansen/2019n-covhassei.html（1/16以降最新） ※2月以降は更新されます https://www.city.sapporo.jp/hokenjo/f1kansen/2021n-covhassei_1.html（1/15以前）
5. javascriptの構文の前準備（後でゆっくりご覧ください） 1. 札幌市の新型コロナウイルス感染症の市内発生状況を表からコピーします。 https://www.city.sapporo.jp/hokenjo/f1kansen/2019n-covhassei.html（1/16以降最新） ※2月以降は更新されますのでご注意ください。 https://www.city.sapporo.jp/hokenjo/f1kansen/2021n-covhassei_1.html（15日以前） 2. 一度googleスプレッドシートに貼り付けます （「16日以降」と「15日まで」の表のの境目をつなぎ合わせて） 3. googleスプレッドシートからツール→「スクリプトエディタ」を使ってJSON形式に変 換します。 詳しい変換方法はこちら　 https://qiita.com/takatama/items/7aa1097aac453fff1d53 （Qiitaに掲載されている@takatamaさんの記事を参考にしました。すごい！） 4. JavaScriptでJSONのデータを元に、カウントします。
6. まず、「getJSONData」関数にまとめます。 関数内に、jsonファイルを呼ぶための「new XMLHttpRequest」インスタンスの定数を つくります。 インスタンスをaddEventListener（イベントリスナー）で呼び出し、JSON.parseしてオブ ジェクト化します。数を数える変数も用意。
7. ほんの一部です
8. mapオブジェクトで対応したキーの値を取り出します。 switch文で合致した値に、++を行い、更にネストして年代別も行います。 最後にその日全体のカウントも 行います。※テストのため 18日 時点のものです。 ※18日分が「Jan 17」となっているのは 「アメリカ」の時間帯として jsonが 取り出されるからです
9. ほんの一部です
10. openとsendで関数を締めくくって 最後に作った関数を呼び出します。 インスタンスした XMLHttpRequest（json） を初期化し（.open）、 サーバーに送信する処理を 行う…までが関数の内容 となります（.send）。 最後にjsonファイルを 引数とした「getJSONData」 関数を呼び出すことも忘れずに
11. このような表が表示されます。 リンクもあります！ https://akiemunakata.net/covid19/ エクセルやスプレッドシートで作ったほうがはやry
12. 気づき • いきなりプログラムを作るのは難しいから、 一歩ずつ簡単な構文から動かすことが大事！ • 構文を覚えても、動かしてみなきゃわからない。 コードを書き出しているうちに効率的なやり方がひらめく！ • アウトプットしようとしたら、いつの間にか調べている！ 調べる力もめきめきつく！ • いきなりポートフォリオなんて作ろうとしない まずは小さなアウトプットをたくさん作ることの重要性！！ • 作りたいものを見つけるのが実は一番大変だけど、 小さいところから始めてみよう！
13. この構文ひとつに大量のサイトを参考にしました。 • @takatamaさんの記事（スプレッドからJSON形式への変換） https://qiita.com/takatama/items/7aa1097aac453fff1d53 • @shuichiさんの記事（配列の中にオブジェクトが入っている場合のvalue 値の取得方法二次元配列） https://qiita.com/shuichi0712/items/cf966ad8bae9e610ea32 • あーりーさん（ふとんでぬくぬく）JavaScript　連想配列のキーは全角文 字でもOK https://3.ariken.info/archives/9118 ※基本構文は「JavaScript本格入門」「JavaScriptコードレシピ集」あたりから参照
14. 今年の抱負： これからもアウトプットします…！ ご清聴いただきありがとうございました！！