Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
初JSでコロナ(札幌)の表を 作ってみた (新年の抱負 超LT会- vol.2)
Search
akiemmm
January 26, 2021
Programming
0
260
初JSでコロナ(札幌)の表を 作ってみた (新年の抱負 超LT会- vol.2)
akiemmm
January 26, 2021
Tweet
Share
Other Decks in Programming
See All in Programming
PostmanでAPIの動作確認が楽になった話
h455h1
0
140
StreamlitとTerraformでデータカタログを作った話
gussan0223
0
310
サイコロで理解する統計的仮説検定の考え方
tatamiya
2
230
Designing for tomorrow's programming workflows
honnibal
PRO
2
110
Hanami and htmx
bkuhlmann
0
200
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
3
800
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
220
Site Reliability Engineering for GMO
pyama86
7
980
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
260
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
230
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
22
3.9k
Designing with Data
zakiwarfel
95
4.8k
Product Roadmaps are Hard
iamctodd
43
9.7k
How to name files
jennybc
64
92k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
GraphQLとの向き合い方2022年版
quramy
31
12k
Embracing the Ebb and Flow
colly
79
4.1k
Faster Mobile Websites
deanohume
297
30k
Docker and Python
trallard
33
2.7k
Side Projects
sachag
451
41k
Web development in the modern age
philhawksworth
202
10k
RailsConf 2023
tenderlove
2
530
Transcript
初JSでコロナ(札幌)の表を 作ってみた ~この発表自体が今年の抱負~ akie_mmm(あきえ)
akie_mmm(あきえ) 普段はWEB制作の パートをしております。 特にHTML/CSS、ワードプレスの 子テーマ操作、 Illustratorを使用しての仕事が中心です。 Twitter名(あきえ):@akie_mmm
以前のLT会(エンジニアの勉強法ハック LT- vol.3)にて、勉強には 「アウトプットが大事!」という話をうかがい ました。 今年は「アウトプットする」の抱負のもと、 発表していきます!
今回何を作ったか 今回は札幌の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以前)
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のデータを元に、カウントします。
まず、「getJSONData」関数にまとめます。 関数内に、jsonファイルを呼ぶための「new XMLHttpRequest」インスタンスの定数を つくります。 インスタンスをaddEventListener(イベントリスナー)で呼び出し、JSON.parseしてオブ ジェクト化します。数を数える変数も用意。
ほんの一部です
mapオブジェクトで対応したキーの値を取り出します。 switch文で合致した値に、++を行い、更にネストして年代別も行います。 最後にその日全体のカウントも 行います。※テストのため 18日 時点のものです。 ※18日分が「Jan 17」となっているのは 「アメリカ」の時間帯として jsonが
取り出されるからです
ほんの一部です
openとsendで関数を締めくくって 最後に作った関数を呼び出します。 インスタンスした XMLHttpRequest(json) を初期化し(.open)、 サーバーに送信する処理を 行う…までが関数の内容 となります(.send)。 最後にjsonファイルを 引数とした「getJSONData」
関数を呼び出すことも忘れずに
このような表が表示されます。 リンクもあります! https://akiemunakata.net/covid19/ エクセルやスプレッドシートで作ったほうがはやry
気づき • いきなりプログラムを作るのは難しいから、 一歩ずつ簡単な構文から動かすことが大事! • 構文を覚えても、動かしてみなきゃわからない。 コードを書き出しているうちに効率的なやり方がひらめく! • アウトプットしようとしたら、いつの間にか調べている! 調べる力もめきめきつく!
• いきなりポートフォリオなんて作ろうとしない まずは小さなアウトプットをたくさん作ることの重要性!! • 作りたいものを見つけるのが実は一番大変だけど、 小さいところから始めてみよう!
この構文ひとつに大量のサイトを参考にしました。 • @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コードレシピ集」あたりから参照
今年の抱負: これからもアウトプットします…! ご清聴いただきありがとうございました!!