このページでは、この教材の使い方や進め方について説明をします。
各ページの画面は「1. テキスト部分」、「2. 可視化部分」の2つの部分から構成されています。
教材では、
という流れで学習を進めていきます。
可視化部分は、プログラムの実行を可視化するための領域です。可視化部分では、各ステップにおける変数の値を確認することが出来ます。プログラムの動きを理解する際に、必要に応じてテキスト部分と合わせて利用してください（必ずしもすべてのプログラムで可視化を利用しないと次に進めないわけではありませんので、自分の理解に合わせて利用してください）。
テキストの中にはしばしばプログラムの概念を説明するために例題のプログラムが掲載されています。これらの例題のプログラムを実行することで、プログラムの動きを確認することができます。
可視化したいプログラム自体をクリックするか、可視化部分上部のタブから問題を選んでクリックすることで、プログラムの実行を可視化することができます。なお、タイトル（プログラム上部にある、黒い下線の引かれた文字列）のついていないプログラムは可視化の対象外ですので、ご注意ください。
今回は以下の「例題１」のプログラムを可視化してみましょう。
name = "Kevin"
print(name)
print(f"Hello! I'm {name}.")プログラムは基本的に1行ずつ処理が進みます。この教材ではこの処理を「ステップ」と呼びます。 画面右半分、可視化部分下部 のボタンを押すことで、実行を１ステップずつ進めることができます。実行の様子を確認しながら、プログラムの動きを理解していきましょう。
１つ進む」：プログラムを１ステップ進めます。１つ戻る」：プログラムを１ステップ戻します。|<」：プログラムを最初の状態に戻します。>|」：プログラムを最後の状態まで進めます。プログラム上には、現在実行中の行が灰色の点線の枠で表示されます。枠の左側には現在の実行ステップ数が表示されます。
なお、処理は1行単位で進みますが、必ずしも上から下に順に進むわけではないことに注意しましょう。プログラムによっては、行を飛ばしたり、一度処理した行に戻ることがあります。
また、画面右の可視化部分には、現在実行中のステップにおける変数（変数については、次のページで詳しく説明します）の、「変数名」と「変数が所持している値」のペア が表の形式で表示されます。
print(表示したい値)とすることで、表示したい値を出力することができます。出力はプログラムの途中経過や、変数の値を確認する際に利用します。本教材では、print関数に応じて、プログラムの下部に値を出力して表示します。
例題１の3行目のように、print(表示したい値)の表示したい値の先頭にfをつけた文字列を入れることで、変数の値を{}で埋め込んで表示することができます。 変数や文字列については、次のページで詳しく説明します。
変数の値の埋め込みの違い：
fをつけた場合（print(f"Hello! I'm {name}.")）の出力 → Hello I'm Kevin.fをつけない場合（print("Hello! I'm {name}.")）の出力 → Hello I'm {name}.教材は、取り扱う内容ごとにページが分かれています。ページは全部で8つあります。順番に進めていくことで、プログラミングの基礎を段階的に学ぶことができます。
各ページの最後には、次のページ・前のページへ進むボタンがあります。次のページへ進む際には、今までのページで学んだ内容をしっかり理解した上で進むようにしましょう。また、必要に応じて一度学習したページに戻って内容を確認し直しても構いません。
テキスト中のコードは、グレー背景に赤文字で表示されます。各章では選択式の問題が出題されます。選択肢を選んで「回答する」というボタンを押して回答してください。間違えても何度も繰り返し解くことができますので、チャレンジしてみてください。必ず問題を解いてから次のページに進むようにしてください。
この教材で学習するプログラミング言語はどれでしょうか？
答え：Python
問題に正解すると、回答と解説を見ることができます。
一部の可視化部分は、問題に正解した後でしか確認することができないので、注意して下さい。正解する前に確認しようとすると、アラートダイアログが出ます。