記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
突然ですが

高校で学ぶ情報Ⅱの内容ってすごいんです!
2022年度から高校で必修化された「情報1」科。そのさらに発展内容を学ぶ「情報Ⅱ」では、より専門的かつ最新の項目が掲載されています。
- 大人に聞いても「知らない」ような知識
- 近年の技術の進化によってビジネスシーンでも聞くようになった語句
といったものがふんだんに盛り込まれており、
その難しさは、国家資格である「ITパスポート」(ITに関する基礎知識を問う試験)よりも少し上のレベルです。
▶︎こちらの記事でも詳しく紹介しています。

高校の「情報」の授業では、手を動かしながら学ぶ、ハンズオン形式の実技に充てる時間が多いですが、実際に「情報II」の実技・実践編ではどのようなものにトライするのでしょうか。
そこで今回は筆者が「情報II」の実技・実践項目に掲載されいてる「掲示板システム」を実際に作成してみました。

いまでは高校でここまで実践的なことを学ぶんだ…
と知るきっかけになれば嬉しいです。ぜひ最後まで読んでみてください!
今回の記事で紹介する実践項目は教科書「情報II」(東京書籍)に掲載されています。

目次

掲示板システムとは、
- ユーザーが名前と書き込みたい内容を入力し「投稿」ボタンを押すと、別画面で投稿内容が表示される
- これまで投稿された内容も一覧表示される
このような機能を持ったWebアプリケーションのことです。
クライアント・サーバーシステムに則って設計しています。

プログラミングスクールでもWebアプリを作成するので、授業がもはやそのレベルに近いとも言えます
なお、今回の実践では
- Pythonの標準ライブラリ
- ローカルWebサーバ
を使ってクライアント側とサーバー側を体験することが目的となっています。

ここからは具体的な手順を紹介します。
具体的なコードを掲載することは教科書内容を掲載することになるのでできないのが悔しいところです。
今回の実践におけるWebアプリケーションを実行するまでの手順はわずか4つです。
まずは、投稿画面をHTMLで作成します。
投稿画面では
- <form>タグ
- <input>タグ (投稿者名を入力するためのテキストボックス)
- <textarea>タグ (投稿内容を入力するためのテキストボックス)
を使って実装します。

<form>タグに含まれる「投稿」ボタンを押すと、後述するPythonのプログラムファイルが呼び出される仕組みになっています。
2つ目のステップではPythonでプログラムファイルを作成します。
このプログラムでは
- HTML(投稿画面)の<form>エリアで入力された内容を取得
- 取得した内容をテキストファイルに保存
- その後、テキストファイルの内容を読み込みブラウザに表示させる
という処理を実行しています。
プログラムのコード記述量はおよそ20行ほどです。


プログラムコードは教科書に載っているので写すことで学んでいきます
必要なファイルはStep2までで完成していますので、ここからは実行環境を整えます。
アプリケーションを動かすにはローカルWebサーバーが必要となりますので、コマンドプロンプトから起動させます。

コマンドプロンプトで入力するコマンドも載っているので安心ですね
Step3でローカルWebサーバーを起動させたら、実際にStep1で作成したHTMLファイルをブラウザで表示させます。
ブラウザに表示されたテキストボックスに任意に入力し、投稿ボタンを押すと、遷移後の画面に投稿した内容が表示されていることを確認します。

これで完成です。
完成したWebアプリケーションの挙動はこんな感じです。
ユーザー画面の装飾面は無機質というか味気ない感じではありますが、アプリケーションの機能としてはしっかりしたものになっています。
情報IIで学ぶ実践内容のひとつ「掲示板システム」を筆者が実際に作成してみました。
Webアプリケーションはプログラミングスクールでも学ぶので、もはや「情報II」の授業はプログラミングスクールのレベルに近いと言えるかもしれません。
情報IIでは
- X-Tech
- ブロックチェーン
- IaaS PaaS など
といった最新の語句を学ぶことはもちろん、実践編では他にも
- パワーポイントでプロジェクションマッピング
- ARでの顔検出
といったこともラインナップされています。
プログラミング内容の本格度で言ったら国家資格「ITパスポート」よりも少し上のレベル。
これらのことを学んで高校生がこれから社会に出てくるのだと考えれば大人もアプデしないと負けてしまいますね…。
最後まで読んでいただきありがとうございました。
この記事が少しでも参考になれば幸いです。
それではまたここで会いましょう!

ブログ村に参加中です。上のバナーをクリックいただくだけで当ブログにポイントが入ります。いつも応援クリックありがとうございます。
Twitter やってます。
新着記事のお知らせをしていますのでぜひフォローしてください!人気の記事
この記事を読んだ人はこちらの記事も読んでいます。
▶︎「【塾長分析】大学入学共通テスト2025「情報」まとめ【難易度・対策】」

▶︎「【最新】(情報1)共通テスト試作問題 難易度と3つの対策」

スポンサーリンク