IT1-CODE-POCKET
IT1-CODE-POCKET は、共通テスト「情報Ⅰ」第3問（プログラミングアルゴリズム）の対策に特化した学習クイズ Web アプリです。
Python モードと DNCL（どんくり）モードを選び、難易度・問題数を設定して、スマートフォンや PC のブラウザからすぐに練習できます。
このアプリについて
- 名称: IT1-CODE-POCKET
- URL: https://it1-code-pocket.com/
- 対象: 共通テスト「情報Ⅰ」第3問を攻略したい高校生
- 形式: Webアプリ（ブラウザで利用）
アルゴリズムの考え方をクイズ形式で反復し、本番のプログラム表記にも慣れることを目的としています。
なぜ作ったのか — 開発の背景
情報Ⅰが共通テストに加わり、多くの高校生がプログラミングの得点力を求められるようになりました。しかし指導の現場を見ていて強く感じたのは、学校や塾の情報Ⅰ対策だけでは、プログラミング分野を満足に攻略しきれていないという課題です。
プログラミング教室であれば、手を動かしながらこの力をじっくり伸ばせます。ですが、学校の授業と塾に加えて、さらにプログラミング教室にも通うのは、時間的にも費用的にも現実的ではありません。
そこで、プログラミング（第3問）だけに特化した対策アプリが必要だと確信し、IT1-CODE-POCKET を開発しました。
なぜ Python と DNCL の両モードなのか
共通テスト本番で使われるのは DNCL（どんくり） という、共通テスト独自の擬似言語です。DNCL は特定の実在言語に縛られないため、本アプリでも言語による有利・不利が出ないよう、難易度を等しく設計しています。
一方、情報Ⅰの教科書は出版社によって扱う言語が分かれ、多くは Python または JavaScript を採用しています。ただし教科書は文法を詳細まで踏み込んで解説していないことが多く、教科書だけでは共通テスト対策として不十分だと感じています。
この現実に合わせ、本番形式の DNCL と、教科書や実務でも使う Python の 両モードを切り替えて練習できる ようにしました。
できること
- 言語モードの切り替え
- Python モード
- DNCL（どんくり）モード
- 難易度の選択: 基礎 / 標準 / 発展
- 問題数の選択: 5問 / 10問 / 20問 / 40問
- 重要アルゴリズムの解説 をアプリ内で確認
- 共通テスト用プログラム表記の解説 をアプリ内で確認
- 解説を見ながら、1問ずつ進める学習フロー
設計で大切にしたこと — 「第3問で20点」に絞る
このアプリの目標は明確で、共通テスト情報Ⅰ 第3問（25点満点）で 20点を取れるようにすること です。満点や難問対応を狙うのではなく、この得点ラインを確実に超えることに設計を集中させました。
そのため、対象はプログラミングの初心者〜基礎習得者に置いています。用語（知識）の暗記確認ではなく、文法を軸にした「コードの読み取り」と「穴埋め」 を中心に据え、プログラミングに触れる回数をできるだけ多く確保する構成にしました。20点を超えるのに必要なコード理解が、解いているうちに自然と身につくことを狙っています。
知識問題を並べるのは簡単ですが、この「読む・埋める」を軸にした学習の仕組みをどう組み立てるかは、設計で最も苦労した部分でした。
使用技術
IT1-CODE-POCKET は、HTML / CSS / JavaScript を中心に作られた実用的な学習Webアプリです。フレームワークを前提にしなくても、ブラウザで動くアプリを作り、公開・運用まで進められる例として参考にできます。
画面を作る技術
| 技術 | このアプリでの役割 |
|---|---|
| HTML5 | 画面の構造、ボタン、選択肢、解説エリアなどを作る |
| CSS3 | レイアウト、余白、色、スマホ対応などの見た目を整える |
| Tailwind CSS CDN | デザイン用のクラスを使い、UIを素早く整える |
動きを作る技術
| 技術 | このアプリでの役割 |
|---|---|
| JavaScript | 出題、採点、モード切り替え、問題数管理などを動かす |
| Vanilla JavaScript | Reactなどを使わず、素のJavaScriptで画面操作や状態管理を行う |
| localStorage | ブラウザ内に設定や進捗などを保存する |
公開・運用に使うサービス
| サービス | このアプリでの役割 |
|---|---|
| GitHub Pages | Webアプリを静的サイトとして公開する |
| Cloudflare | 独自ドメインやDNSを管理する |
| Google Search Console | 検索結果での見え方やインデックス状況を確認する |
| Google AdSense | 広告掲載・収益化に使う |
| Google Forms | 問い合わせやフィードバック受付に使う |
開発でつまずいたこと
最大の難所は スマートフォンでのコード表示 でした。本アプリはスマホでの利用を前提にしているため、プログラムコードを画面幅の狭い端末でも 表記崩れなく表示する 必要があります。ここは実機で何度も確認と調整を重ね、ようやく安定して表示できるようになりました。
もう一つ苦労したのは、学習アプリでありながら 「プログラミングらしい・ITらしい」雰囲気 を画面から感じてもらう表現の作り込みです。堅すぎず、それでいて本格的に見えるバランスを探るのに、細かな試行錯誤が必要でした。
HTML / CSS / JavaScript の実用例として見る
このアプリは、学習者にとって「HTML / CSS / JavaScript を学ぶと何が作れるのか」をイメージしやすい例です。
| 技術 | 学べる考え方 |
|---|---|
| HTML | クイズ画面、選択肢、解説、設定画面などの構造を作る |
| CSS | スマホでも押しやすく、読みやすい画面に整える |
| JavaScript | ユーザー操作に反応し、問題データを切り替え、採点結果を表示する |
| localStorage | ユーザーの設定や状態をブラウザに保存する |
特にJavaScriptでは、配列やオブジェクトで問題データを扱い、クリックイベントに応じて画面を書き換える考え方が重要になります。これは、クイズアプリ、チェックリスト、暗記カード、診断ツールなどにも応用できます。
こんな人におすすめ
- 共通テスト「情報Ⅰ」第3問の点数を上げたい人
- アルゴリズムをクイズで短時間に復習したい人
- Python と DNCL の両方で表記に慣れたい人
- スマホで手軽に何度も解き直したい人
Code Recipe とのつながり
IT1-CODE-POCKET で扱うアルゴリズムの考え方は、Code Recipe の解説ページでも学べます。クイズで「引っかかったテーマ」を、次のページで深く理解する使い方がおすすめです。
- アルゴリズム一覧
- AOJ攻略ロードマップ — さらに実装力を伸ばしたいとき
- HTML / CSS / JavaScript — Webアプリの作り方を学びたいとき
- 技術選定ガイド — なぜこの構成で作るのかを考えたいとき
モバイルアプリ版について
IT1-CODE-POCKET は現在 Web アプリ として公開しています。学習のしやすさを高めるため、モバイルアプリ版の開発・公開を検討中です。
- Webアプリ: 公開中
- モバイルアプリ: 開発・公開を検討中（時期未定）