プログラミングツールの利用方法

はじめてのプログラミング では p5.js のプログラミングが準備作業無しで体験できる p5.js Web Editor を使いました。 ここでは、これから本格的に演習を進めるために用いるツールの準備や使い方について説明します。 他の授業で準備した内容と重なっているところもあると思いますが、一通り確認はするようにしてください。

目次

  1. どのテキストエディタを使うか
  2. Visual Studio Code を使う
  3. GitHub を使う
  4. ウェブブラウザを使いこなす
  5. 演習：プログラムを提出する

どのテキストエディタを使うか

プログラミングをするのにどのテキストエディタを使うかというのは実はちょっとセンシティブな話題です 参考リンク

その他、特定用途に特化したもの（IDE: 統合開発環境）なども含めると無数にあります。

プログラミング基礎演習では Visual Studio Code の使用を推奨します。

Visual Studio Code をインストールする

Visual Studio Code は Extension と呼ばれる追加プログラムをインストールすることで、 いろいろな用途向けにカスタマイズして使うことができる汎用的なテキストエディタです。 プログラマには圧倒的人気を誇ります。 自分のパソコンにインストールされていない場合は、リンク先の Download ボタンからインストーラプログラムを入手し、インストールしてください。

Extension "Live Server" をインストールする

  1. Visual Studio Code を起動する
  2. Extension の設定画面を開く（以下のいずれか好きな方法で）
  3. 検索ボックスに Live Server と入力すると、たぶん一番上に表示されるのでクリック
  4. Install ボタンをクリック

これでテキストエディタは準備OKです。

GitHub を使う

GitHub はプログラミングする人たちのためのSNSのようなWebサイトで、 作ったプログラムを公開したり、他のプログラマと共同で開発したりする仕組みが備わっています。 この演習では課題プログラムのひな型配布と提出に GitHub を使います。 GitHub のアカウントを持っていない人はリンク先から作ってきてください。 重要：アカウント名はよく考えてつけてください。 誰がどのアカウントなのかは別途教えていただきますので、学籍番号や本名をアカウント名にして公開する必要はありません。 ちなみに私は本名でやっています。

GitHub Desktop をインストールする

次に GitHub Desktop をインストールしましょう。 GitHub は Git というコマンドラインツール（コマンド入力で使うツール）を基盤として作られたサイトですが、 GitHub Desktop を使うと、コマンド入力無しで GitHub を使うことができるので初学者にはお勧めです。 自分のパソコンにインストールされていない場合は、リンク先にある Download ボタンからインストーラプログラムを入手し、インストールしてください。 インストール後、先に作っておいた GitHub アカウントでログインしておきましょう。

GitHub 上でひな型プログラムのクローンを作る

続いて、この演習で利用する課題プログラムのひな型を入手しましょう。 GitHub にログインした状態で招待リンク（※神戸大学LMSに記載）を開いてください。 しばらく待つと（リロードすると）"Your assignment repository has been created" と表示されますので、その下に表示されるリンクを開いてください。 これで GitHub 上にみなさんがこれから書き換えていくプログラムのひな型が用意されました。 GitHub ではプログラム置き場のことを「リポジトリ」と呼びます。

ページを閉じてしまったりして自分のリポジトリのリンクが見つからなくなってしまった場合は。 GitHub にログインすると表示される Repositories や Activity の中に見つけられると思います。

GitHub Pages の設定をする

作成した JavaScript のプログラムは GitHub 上で公開動作させることが可能です。そのための GitHub Pages の設定を行います。 提出されたプログラムを GitHub 上で動作確認する場合がありますので、必ずこの設定は行ってください。

  1. ブラウザで自分のリポジトリのページを開きます。
  2. 上部にある Settings ボタンをクリックして、設定ページに移動します。 注：ウィンドウの横幅が狭いと Settings ボタンが隠れていることがあります。
  3. 左側にあるリストから Pages の設定ページを開きます。
  4. Source を "Deploy from a branch" に、 Branch を "main" に変更し、Save ボタンを押します。
  5. ページが再読み込みされるので、Your site is live at (URL) とあるのを確認します。

公開サイトの URL は Pages の設定ページに表示されますが、 Save ボタンを押してから実際に公開されるまでに少し時間がかかることがあるようです。 少し経ってから確認してみてください。

自分の PC 上にひな型プログラムのクローンを作る

次に、GitHub にあるリポジトリのクローンを自分のパソコンに作って、自分のパソコン上で編集できるようにします。 自分のリポジトリのページに緑色の Code というボタンがあるはずです。 これをクリックして、表示されるメニューから Open with GitHub Desktop を実行してください。 GitHub Desktop を開く許可が求められるので許可してください。

GitHub Desktop で Clone a repository というダイアログが開きます。

Local path が自分のパソコン上でのプログラム保存場所になります。 Local path の文字列に漢字やひらがななどの全角文字が含まれていると後々問題が生じる場合があります。 Windows のユーザ名に日本語文字を使っていると初期設定で Local path に日本語文字が入ってしまいます。 その場合はたとえば C: 直下に programming など適当な名前のフォルダを作り、 Local path でそのフォルダを選ぶといった回避方法があります。

Local path を適切に設定したら Clone ボタンを押してください。これでひな型の入手は完了です。

ひな型プログラムを Visual Studio Code で開く

GitHub Desktop から Visual Studio Code を開くように設定しておくのが一番便利です。 GitHub Desktop の設定画面 (メニュー File > Options) の Integrations にテキストエディタの設定項目 (External Editor) がありますので、Visual Studio Code を選択しましょう。 この設定がされている状態で、メニュー Repository > Open in Visual Studio Code を使うと、ひな型プログラムが Visual Studio Code で開きます。

GitHub Desktop を Visual Studio Code より先にインストールしていると上記の設定で選べない場合があります。 その場合は GitHub Desktop を一回閉じてから開きなおすと解決します。

Visual Studio Code の左側にフォルダ中のファイル一覧が表示されるので、1つ1つのファイルはそこから開くことができます。 表示されない場合は、メニュー「View > Explorer」で開いておきましょう。

フォルダの中にある sectionN-N という感じの名前のフォルダの1つ1つに p5.js のプログラムのファイルがあります。 index.html と sketch.js です。 基本的には index.html は編集しません。主に編集するのは sketch.js の方になります。

ウェブブラウザを使いこなす

JavaScript のプログラムを動かすにはウェブブラウザを使います。 どのブラウザを使うかもテキストエディタと同様にセンシティブな話題ですが、 コンソールに出力される JavaScript のエラーメッセージがわかりやすいので Chrome か Edge を使うことをお勧めします。

Edge(Windows), Safari(Mac) で開くように初期設定されていることが多いと思います。 Edge と Chrome は中身はだいたい同じなので、最初から入っている Edge を使うのでいいと思います。 Mac で Safari を使いたい人はそれでいいと思いますが、 Edge や Chrome とは違う部分も多いので注意が必要です。

ひな型プログラムをブラウザで開く

今回は先ほどインストールしておいた Live Server を使います。 Live Server は自分の PC 上で自分専用のウェブサーバーを起動するもので、 プログラムを書き換えて保存したときに自動的にブラウザで再読み込みされるなどちょっと便利にプログラミングできます。

  1. ウィンドウの下の方にある横に細長い青いバーの "Go Live" をクリック
  2. 自動的に http://127.0.0.1:5500/ がブラウザ上で開きます。

デベロッパーツールを使う

ウェブブラウザには、プログラムの動作を詳細に観察するためのデベロッパーツールが搭載されています。 プログラミングの勉強に大変役立ちますので早めに慣れておきましょう。

  1. 開いているページの上で右クリックして、メニューから「開発者ツールで調査する (Edge)」「検証 (Chrome)」を実行します。表示されたのがデベロッパーツールです。
  2. デベロッパーツールの Console タブを開くと、エラーメッセージや console.log(...) で出力したメッセージを見ることができます。
  3. Console には直接 JavaScript のプログラムを入力して実行することもできます。試しに 1 + 1 と入力して Enter で実行してみてください。

デベロッパーツールでプログラムの動作を観察する

続いて、デバッグ機能を使ってみましょう。 プログラムは普通、すごい速さで実行されてしまうのですが、 デバッグ機能を使うと実行を止めたり、ゆっくり一歩ずつ実行したりすることができます。 講義テキストに含まれるプログラムを予習するときにもぜひ使ってください。

  1. デベロッパーツールの Sources タブから sketch.js を開きます。
  2. プログラム中で「ここで1回止まってほしい」と思うところの 行数の数字をクリック します。目印が付きます。
  3. プログラムを最初からもう一度実行するために、ページを再読み込みします。
  4. デベロッパーツールのボタン を駆使して、途中で止まったプログラムの続きを少しずつ実行していきます。
  5. 壊れたりしませんので細かいことは体で覚えてください。よくわからなくなったら再読み込みしてやりなおせばOKです。
デバッグ機能でプログラムを少しずつ実行しても、描画が少しずつ進んでいく様子を見ることはできません。 これは p5.js が描画を効率化するために描画処理をあとでまとめて実行するようにしているからです。 （わかりやすさを優先して少しだけ不正確な説明になっています） 変数に代入された値が変化していく様子、プログラムの繰り返し文が実行される様子などを観察することはできますので、用途を選んで活用してください。

演習: GitHub へプログラムを提出する

自分のパソコン上でプログラムを編集したら、GitHub Desktop を使って、変更内容を GitHub 上に反映させましょう。 この講義では毎回この方法で課題等を提出していただくことになります。

  1. section1-1/sketch.js を Visual Studio Code で開いて、プログラムを編集します。提出方法を確認するだけなのでちょっと変えただけでOKです。
  2. GitHub Desktop を開きます。
  3. Changes に変更が列挙されますので確認します。各ファイルをクリックすると変更箇所を確認することができます。
  4. Changes の下 Summary (必須) と Description を入力します。Summary は Change section1-1 などわかりやすい名前にしてほしいです（切実）。Description はなくてもOKです。
  5. その下にある Commit to main ボタンを押します。まだ終わりじゃないですよ！ ここまでで自分のPC内にあるリポジトリに更新が記録されました。
  6. 青い Push origin ボタンを押すと、変更が GitHub 上のリポジトリに送信されます。これで完了です。 Push Origin ボタンは PC, GitHub の2リポジトリの内容に差があるときだけ表示されます。
なにかお題がほしい人は こちらのロゴ になるように編集してみるのはいかがでしょうか。