太子プログラミングクラブ第3期（2025年9月）～自己紹介文を例にHTML構造を理解する～
太子プログラミングクラブは、WEBデザインに挑戦中です。まずは、9月もHTMLを学習していきます。
Contents
タイピング練習は欠かしません
WEBデザインでも、タッチタイピングは欠かしません。「コードを書く」という機会は減ってきつつありますが、表示すべきコンテンツは自分で書かないといけません。成果が目に見えて伸びていくので、メンバーもやる気に繋がっているようです。
使うツールは変わりません。
- 無料タイピング
https://manabi.benesse.ne.jp/gakushu/typing/ - 寿司打
https://sushida.net
HTMLと直接関係はないけれど、アルゴロジックもすすめます。はじめの20分くらいは、ウォーミングアップで、頭と指の体操です。
生成AIで自己紹介のテンプレートを作らせてみる
生成AIで自己紹介文を作る練習をします。
生成AIに完成品を作らせるのではなくて、思考をサポートする使い方をします。生成AIの答えは、だれでも答えられそうな内容であることが多いのです。そこで、自分なりのアレンジをするわけですが、アレンジをしやすいように例文を作ってもらいます。
生成AIを使うことは、これから先の未来では避けられないでしょう。だれもが生成AIを使うようになったとき、差がつくのはこういうところです。AIに使われるのではなくて、AIを使うのです。
自己紹介テンプレートをHTMLでWEBページにする
出てきた自己紹介文を、HTMLに落とし込みます。今回大切な概念は、タグです。
コンピューターはお馬鹿なので、人間なら書かれている内容を読んでタイトルと理解するのと同じことが出来ません。では、どのようにタイトルや本文を見分けるかというと、タグによって見分けるのです。
今の世の中、便利なツールがあります。例えば、WordPress何かを使えば、タグを理解しなくてもWEBページは作れます。
しかし、タグを理解することで、WEBページの作り方の質が大きく向上し、さらには別の分野への応用ができます。例えば、SEOとかスクレイピングとかです。
スクレイピングを体験する
せっかくのプログラミングクラブなので、幅広い見方、応用力がつくことをしたいと思います。次は、「HTMLがきちんと書かれることで、pythonによるスクレイピングで目次を簡単に作れる」というのを体験してみましょう。
スクレイピングとは、WEBページから特定の情報を抜き出してくるプログラミング技術をいいます。まずは写経します。
写経の内容はこちら。たったこれだけです。
from bs4 import BeautifulSoup
# sample.htmlを読み込む
with open("sample.html", "r", encoding="utf-8") as f:
html = f.read()
# BeautifulSoupで解析
soup = BeautifulSoup(html, "html.parser")
# h2タグのテキストをすべて抜き出す
h2_texts = [h2.get_text(strip=True) for h2 in soup.find_all("h2")]
# 抜き出したテキストをファイルに保存
with open("contents.txt", "w", encoding="utf-8") as f:
for text in h2_texts:
f.write(text + "\n")で、これが動かないのも織り込み済みです。
まず、モジュールエラーです。これは、bs4がインストールされていないので置きます。
次によくあるのが、文法エラーです。コンマやセミコロンが抜けているのがよくあるパターン。
そして、スペルミス。よく見て入力しましょう。
それから、自分で作った「sample.html」ファイルの命名ミス。プログラムが処理をする対象も適切に命名されている必要があります。
ここから想定外の連続
ここまではある程度予測していました。ここからは想定外のトラブルの連続です。
- VSCodeで「Python scraping.py」で動かすつもりが動かない。
→原因究明の時間がないので、Thonnyで動かす。 - モジュールインストールで、bs4を探しても見つからない。
→シェルを起動して、「pip install bs4」で個別対応。
てんやわんやで、なんとかスクレイピング体験はできました。早くできたメンバーが、できていないメンバーのサポートをしてくれたので、助かりました。誰かに教えると、上達が早くなります。いい経験になったのではないでしょうか。
本格的なプログラミングの障壁は環境設定
プログラミング学習を進めるうえで一番挫折しやすいのが、環境設定でうまくいかずプログラムが動かない場面です。環境設定とは、プログラムを動かすための準備段階です。とても大事なのに、プログラムの書籍にはあまり丁寧に書かれていないことが多いです。わたしは、何度も何度も環境設定で挫折しました。
書籍に情報がないというのは、個別具体的な事案過ぎて書けないという事情があります。ここは経験値に頼るしかありません。学校や近くにメンターがいるなら問題ないけれど、はじめから完全自走するなら覚悟しておいてください。
今回は、いい経験になりました。
さて次月は？
今月取り組んだスクレイピング自体は、単体では何ら役に立ちません。まあ、プログラムのアルゴリズムは、大体単独で役立つものはありません。
小学校の漢字ドリルみたいなもので、取り組んでいる最中は何の意味があるのかわからないものです。しかし、小説や新聞を読んだり、または逆に文章を書いたりするときに、ドリルの意味がわかってきます。わたしは、書道をやっているときにドリルで練習した書き順が大切だと感じました。
スクレイピングも一緒で、ほかのテクニックと組み合わせることで価値が出てきます。「なにか不便があってプログラムを書きたい」と思ったときに、引き出しが多いほど優れたプログラムを書けます。このあたり、まだAIが追いついていません。
さて、10月はCSSに触れようと思います。
