使ってみよう

オンラインプログラムング学習環境であるBit Arrow（ビットアロー）の画面を開き、最初のプログラムを記述し、実行するところまでを学びます。またわざとエラーとなるプログラムを作成し、エラーメッセージの見方について学びます。

1.1　画面を開こう

Bit Arrow（ビットアロー）の画面を開いてみましょう。Bit Arrowはオンラインのプログラミング学習環境でので、パソコンやスマートフォンがインターネットにつながっていれば、ブラウザブラウザを利用してC言語の学習を始めることができます。

ビットアローを開くにはブラウザを起動し、Googleなどの検索エンジンを開き、検索キーワードに「Bit Arrow」または「ビットアロー」と入力し検索します。検索結果の上の方にでてくる「オンラインプログラミング環境ビットアロー（Bit Arrow）」のリンクをクリックします。

Bit Arrowのトップページに移動すると次のように表示されます。

ブラウザーのアドレス欄に、インターネット上の住所に相当する文字列であるURLを入力することでBit Arrowのページを直接開くこともできます。URLを入力後、エンターキーを押すことでBit Arrowのページに移動できます。

Bit ArrowのページへのURLは次のとおりです。* http://bitarrow.eplang.jp

どのブラウザを使うとよいか

Bit Arrowはブラウザ上で実行されるためブラウザの種類によって動作が異なる可能性があります。ブラウザは最新のバージョンで使うようにしましょう。どのブラウザを使ってよいかわからない場合はGoogle ChromeかFirefoxというブラウザを使うようにしてみてください。

Bit Arrowの対応ブラウザは次のとおりです。* 対応ブラウザ: Google Chrome , Internet Explorer（10以降） , Firefox , Safari

対応ブラウザをインストールできない場合は

学校内のPCなど、アプリケーションのインストールが制限されている環境では、対応ブラウザをインストールできない場合があります。そのような場合は、USBメモリなどから起動できるように配布されている、Google Chrome PortableやFirefox Portableを利用してみましょう。

初めに表示されるBit Arrowのトップページから、Bit Arrowを起動したり、Bit Arrowの使い方を見たりできます。Bit ArrowのトップページからBit Arrowを起動するには、画面左上にある「Bit Arrowを起動」のリンクをクリックします。

まだBit Arrowにログインしていない場合は、次のような確認ダイアログボックスが表示され、「OK」をクリックすると、ログイン画面に移動します。

学校の授業でBit Arrowを利用する場合はクラスIDを入力する必要があります。クラスID欄には先生より指定のあったクラスIDを入力します。またユーザ名には学籍番号など先生より指示のあった形式で入力しましょう。　　

自宅など授業以外でBit Arrowを利用する場合は、クラスIDに「guest」と入力し、ユーザ名に任意の文字列を入力します。たとえば、ユーザ名は「氏名誕生日」の形式で入力すると他の人とログイン情報が重ならず自分だけのBit Arrowとして利用できます。「山田太郎さん、2月18日生まれ」なら次のようになります。

自宅での利用する場合のクラスIDとユーザ名の指定方法* クラスID：guest* ユーザ名：yamadataro0218

クラスIDとユーザ名が入力できたら「OK」ボタンをクリックします。すると次のようなBit Arrowのホーム画面に移動します。

Bit Arrowのホーム画面には「新規プロジェクト」と「サンプルプロジェクト」の2つのボタンがあります。プロジェクトとはいくつかのプログラムが集まった箱（フォルダー）のようなものです。Bit Arrowでプログラミングの学習をはじめるにはプロジェクトの作成を行う必要があります。

「新規プロジェクト」のボタンをクリックすると、次のような入力領域であるダイアログボックスが表示されます。

プロジェクト名に「project001」と入力し、プログラミング言語の「言語を選択してください」をクリックし「C」を選択します。プロジェクト名には半角の英数字と_（アンダースコア・アンダーバー）を利用できます。

プロジェクト名の付け方

本書では「project001」などのように「project3桁の数字」という形式でプロジェクト名を付けています。授業などでBit Arrowを利用する場合で、先生よりプロジェクト名の指示があった場合は、指示のあったプロジェクト名をつけるようにしましょう。プロジェクト名はたとえば次ような付け方があります。

日付（例：20180218）：いつ学習したか分かりやすい。
章番号（例：Section01）：どこを学習しているか分かりやすい。
プログラムの内容（例：HelloWorld）：何を学習したか分かりやすい。

その後、「OK」ボタンをクリックします。すると次のようなプログラミング学習画面になります。

上部には「Bit Arrow」「ファイル」「実行」「保存」「設定」「使用方法」の黒いボタンが並んでいます。各ボタンの意味は次のとおりです。

それではプログラミングを行うために、ファイルを追加してみましょう。ファイルボタンをクリックし「新規」を選択します。

すると次のようにダイアログボックスが表示されます。名前の部分に「Main001」と入力し「OK」をクリックしましょう。

ファイルが新規に作成されると、左側にファイル名が表示され、右側にファイルの中身が行番号とともに表示され編集可能となります。

ファイル名の付け方

Bit Arrowでは半角英数字と_（アンダースコアー）を利用してファイル名をつけることができます。ファイル名の先頭の文字は大文字にするという決まりになっています。

本書ではMain001のようにMain+連番とファイル名を付けていきます。

C言語の文法の説明は今後詳細に行うとして、まずは最小限のプログラムを記述し、プログラムを実行するところまでをやってみましょう。半角モードに切り替え、次のようにプログラムを入力します。

入力の際は、初の状態で入力されている「// C」は削除してかまいません。また「1：」などは行番号なので入力の必要はありません。左余白（インデント）も意識して入力してみましょう。

リスト1.1: 初めてのプログラム

 1: #include <stdio.h>
 2: 
 3: int main(void) {
 4:   printf("HELLO");
 5: }

入力後は次のように記述したプログラムの上部に「変更あり」という表示がでます。「保存」ボタンをクリックすることで変更を確定し保存できます。　

保存後、「実行」ボタンをクリックすることで、作成したプログラムを実行できます。

実行結果が大きく表示される場合は、実行画面ダイアログの境界にマウスカーソルを合わせると、マウスカーソルの形が斜めの矢印のように変わります。この状態でドラッグすることで実行画面ダイアログの大きさを変できます。

実行画面ダイアログを見やすい大きさに変更してみましょう。また「実行画面ダイアログ」と書かれている部分をドラッグ&ドロップすることで任意の位置に移動できます。見やすい位置に移動してみましょう。

このように実行結果画面は自分で見やすいように、実行結果の画面大きさを工夫して実行していってください。また、実行した際に次のようなダイアログボックスが表示された場合は、文法上のエラーがあったことを示しています。

このようにエラーが表示された場合はプログラムを見直して再度実行しましょう。エラーメッセージの見方については次節にて学習します。

1.2　エラーをわざと起こしてみよう

プログラミングを学習していく際は、テキストをみてプログラムを入力し、実行をして動作を確認していくという流れを取ります。

その際、入力にミスがあった場合は、文法エラーということでプログラムの実行ができません。プログラムの実行ができなかった場合は、テキストと自分が入力したプログラムを見返し、入力ミスを探すという作業を行います。

このとき、テキストのプログラムが合っているという前提でプログラムを見直すことになると思いますが、テキストのプログラムが間違っている、もしくはプログラムは正しいのに環境が異なるために思ったような結果にならないといったことが起こることがあります。

また、実際にゲームや自分のプログラムを作成するときは、正解となるプログラムは事前には存在せず、これから自分が作っていくプログラムが試行錯誤の末、正解になっていくのです。

そのように考えると、初の学習時はテキストを見ながらプログラムを入力することは仕方がないとしても、エラーが起きた場合に、テキストと自分のプログラムを見比べてプログラムを修正するのではなく、他の方法でプログラムを修正し動く形に持ってくるスキルが必要とされます。

このようなプログラムを修正することをデバッグといい、そのスキルをデバッグスキルと読んでいます。

デバッグスキルを養うためにはいくつかのポイントがありますが、まずはエラー時に出力されてるエラーメッセージを読みこなすことが重要です。

ここではいくつかのよくある文法エラーのパターンをわざと起こして、そのエラーメッセージを見ていきましょう。

第1章 使ってみよう

1.1 画面を開こう