コンピュータとプログラミング

コンピュータに何かを任せるには、装置の役割を知り、処理できる形で手順や条件を表す必要がある。この区分では、機械の構成から数値と論理の表現、アルゴリズム、プログラム、モデルを用いた検証までをつなげて学ぶ。小さな例から、動作を追いかけよう。

ナビのひとこと

動いたら終わり、ではないよ。「なぜこの結果になるのか」も説明してみよう。

学習の見取り図

段階	主な内容	学びを確かめる視点
しくみと表現	ハードウェア、OS、言語、論理回路、整数・小数の内部表現	命令や値はどこで、どのように扱われるか
手順の設計	入出力、基本制御構造、トレース、停止条件	問題に合った答えを出し、必ず終わるか
実装と検証	変数、分岐、反復、配列、関数、探索・整列	境界、空の記録、処理量を説明できるか
表現と応用	疑似コード、DNCL、モデル化、シミュレーション	表記やモデルの前提が変わっても意味を保てるか

教材一覧

1. 01コンピュータの構成とハードウェア五大装置と命令実行の流れから、CPU・主記憶・補助記憶の役割と性能の見方を学ぶ。→
2. 02ソフトウェアとプログラミング言語OS・アプリケーション・言語処理系を区別し、プログラムの作成から実行と改善までを捉える。→
3. 03論理演算と論理回路真理値表を使ってAND・OR・NOT・XORと条件の組合せを理解し、半加算器までつなげる。→
4. 04数値の内部表現と演算誤差二進数・補数・浮動小数点数を通じて、表現範囲と丸め、桁落ち、情報落ちの違いを学ぶ。→
5. 05アルゴリズムの設計と検証入力・出力・停止条件を定め、手順を分解し、トレースとテストで正しさを確かめる。→
6. 06順次・分岐・反復架空の工作材料の予算を題材に、JavaScriptの変数、順次・分岐・反復を学ぶ。ループの回数と変数の変化を追って確かめる。→
7. 07変数・データ型・代入値と名前、型と演算の関係を、在庫の更新と値の交換を通じて学ぶ。→
8. 08条件分岐と境界値比較・論理演算を用いて分岐を設計し、範囲の漏れと重なりを境界値で確かめる。→
9. 09反復・累積・終了条件forとwhileを使い分け、回数、累積値、停止の根拠をトレースして確かめる。→
10. 10配列とデータの一括処理添字と要素数を区別し、集計・更新・二次元配列の操作を範囲の確認とともに学ぶ。→
11. 11関数・引数・戻り値処理を関数へ分け、入力と出力の約束、スコープ、副作用を意識して再利用とテストを行う。→
12. 12探索・整列と処理量線形探索・二分探索・選択整列・交換による整列を、前提と比較回数から考える。→
13. 13疑似コードとDNCLの読み方言語に依存しない手順の表現を学び、代入、添字、反復の規則を確認してJavaScriptへ対応させる。→
14. 14モデル化とシミュレーション架空の給水タンクを題材に、モデルの前提を決め、JavaScriptで変化を計算する。結果と現実の違いを検討する大切さを学ぶ。→

「順次・分岐・反復」で全体像を確かめてから、各構造の教材へ戻って学んでもよい。探索・整列は配列と反復、関数の学習後がおすすめである。シミュレーションでは計算結果だけでなく、取り入れた条件と現実との違いも検討する。

コードの使い方

実行例はJavaScriptを使い、疑似コードは実行用ではないプレーンテキストで示す。各JavaScriptブロックは独立しているので、一つずつ実行し、まず自分で予想した出力と比べよう。同じ名前の宣言をまとめて貼り付けると再宣言のエラーになることがある。

言語ごとに書き方は違っても、処理の流れを分けて考える視点は共通する。コードを一か所ずつ変更し、予想と実際の結果を比べよう。

JSFiddleでコードを試す

JSFiddleは、ブラウザーでHTML・CSS・JavaScriptを入力して実行できるサービスです。短い動作確認から始められます。

1. 新しい編集画面を開きます。JavaScriptは通常のJavaScriptを選び、外部ライブラリは追加しません。
2. HTML欄にはページの本文、CSS欄には見た目、JavaScript欄には処理を書きます。HTML欄に<html>や<body>は不要です。JavaScript欄に<script>は付けません。
3. DOMを使う例では、JavaScriptの実行タイミングを「On Load」「On DOM Ready」または「No wrap - bottom of body」にします。
4. 「Run」を押してResult欄を確認します。書き換えたら再びRunを押します。

console.logの結果は通常、ページではなく開発者ツールのコンソールに出ます。このサイトの計算例をResult欄で読みたいときは、HTML欄に次を入れます。

<pre id="output"></pre>

JavaScript欄には次を入れ、console.log(2 + 3);の行を、試したいコード一つに置き換えます。独立した例を複数まとめて貼らないでください。

{
  const output = document.getElementById("output");
  const console = {
    log(...values) {
      output.textContent += values.join(" ") + "\n";
    }
  };
  console.log(2 + 3);
}

Runを押すと「5」と表示されます。外側の波括弧の中だけで表示用のconsoleを用意しているため、ブラウザー本来のコンソールは変更しません。

HTMLとJavaScriptの両方を載せた実習例は、この表示用コードで囲まず、それぞれの欄へ分けて貼り付けます。保存・共有時は公開範囲を確認し、個人情報やパスワードを入力しないでください。コードは手元にも残しましょう。

NAS・GitHub・CodePenなど、作業環境の選び方

HTMLと組み合わせて動かす

ボタンや画像を動かしながら学びたいときは、番外編：HTML・JavaScript実習へ進もう。作業環境の選び方から、変数・分岐・反復・配列を使った画面づくりまでを扱う。

参考

• 文部科学省：情報科の学習指導要領