夏休みの自由研究。子供にプログラミングを教えてみる1日目

この記事を書いたひと: @t4traw 2019年8月7日

上の娘が小学2年生になりました。まだ自由研究という宿題はないのですが、かねてより「プログラミングがやりたい」と言っているので、ちょっぴり夜ふかしのできる夏休みにプログラミングを教える事にしました。

娘のレベルは、僕が普段Macを触っているので興味半分にローマ字入力をやっているけど、まだ「eって文字は何?」って感じで聞くくらい。ちょっと前にScratchを少しだけ触った事がある程度です。

で、Scratch触らせてる時に思ったんですけど、「これ、やる気のある子&教えられる人いるなら、もう実際のコード書かせた方が良くない? キーボードと英語の練習になるし」と思っていました。娘も僕が仕事でプログラムを書く時は黒い画面で文字をかいている事を知っています。

というわけで、夏休みのプログラミング体験はhtml+css+javascriptでポケモンクイズを作ってみることにしました😁

僕が隣について「こう書くんだよ」という説明&写経をやってもらおうと思います。そんな中で「こんなことできるんだ!」「自分で書いたものが動く!」という楽しさを覚えてほしいなと。

まずはhtmlで画面を作れるという事を覚えてもらい、jsで動きを造り、最後にcssでデザインを作ろうと思います。

ポケモンのデータに関しては、いくつかAPIがあるのでデータ自体は問題なさそうです(すばらしきポケモンエコシステム⚡️ - Qiita)。問題は図鑑の説明文がサクっとAPIで見つからない……ので、公式サイトからスクレイピングしてjsonにしちゃいました。

require 'faraday'
require 'oga'

(1..809).each do |i|
  num = i.to_s.rjust(3, '0')
  url = "https://www.pokemon.jp/zukan/detail/#{num}.html"
  res = Faraday.get url
  parse = Oga.parse_html(res.body)
  text = parse.xpath('//*[@id="tab1"]/p').text
  dic << {
    id: i,
    desc: text.force_encoding("UTF-8")
  }
end

File.open("pokedic.json","w") do |text|
  text.puts(JSON.generate(dic))
end

あと、人気ランキングなども必要なので、それもスクレイピングさせていただきました。

t4traw/pokedic

オンラインでアクセス可能なAPIにすると色々問題がありそうですが、スクレイプしてローカルで使う分だったら問題ないでしょう。

シルエットもあとで画像データからいっきに作ってしまおうと思います。

というわけで、また制作の過程を記事にしたいと思います。

それでは。