2019/02/17

TypeScript (8) ここまでのまとめ

ここまでのまとめをしておきます。

Small Basic Online がオープンソースとして公開され、TypeScript で書かれていたため本連載を始めました。TypeScript についても、開発方法についてもほとんど何も知らなかったのですが、手探り状態でスタートし、一通りの開発手順について試しながら、解説することができました。

・Small Basic Online(TypeScript 版)の起動方法
・Git と GitHub によるバージョン管理方法
・Visual Studio Code の使い方
・デバッグ方法

などをお伝えしました。そして、Small Basic Online の TypeScript 版は開発が中止され、C# 版に移行しました。

オープンソースの開発はインターネット上で世界中の人々が協力しながらやっていくものです。したがって、このようなことも時にはあると思います。ただそこにきちんと関わった経験は決して無駄にはならないと思います。

この連載はここで一旦中断する予定です。続きは C# 版で改めてスタートしますが、こちらも一部は TypeScript が使われているようです。その解説はこの続きとして書こうと思います。

TypeScript そのものについてはほとんど触れられなかったので、そこに期待された方にはお詫びを申し上げます。

このシリーズの目次をこちらに作成してありますのでご活用ください。

ここまで読んでくださりありがとうございました。

| | コメント (0) | トラックバック (0)

TypeScript (7) リポジトリの更新

今回は前回修正したソースファイルをリポジトリに登録します。

まずローカルリポジトリの更新ですが、まず変更したソースファイルをステージングエリアに追加します。Visual Studio の枝分かれアイコンでソース管理サイドバーを表示し、変更されたファイルリストの中の ellipse.ts にマウスを乗せるとメニューが表示されます。その中の+マーク「変更のステージング」をクリックします。すると下図のようにステージングエリアが「ステージング済みの変更」として表示されます。

Ellipse_git_add

このとき左下の小さな枝分かれアイコンの右側が blog となっていることに注意してください。第5回のときに作ったブランチです。後でリモートのリポジトリを更新するときに master 直接更新するのではなく、別のブランチにしておいて変更箇所のレビュー後に承認してもらうためです。

今回全部で7個の変更ファイルが表示されています。この中で実際に直したのは ellipse.ts と launch.json(「Launch Chrome」のデバッグオプションを追加するため)だったので、この2つのみ更新します。変更の理由が別の場合、記録上分けたほうがいいので、まずは ellipse.ts のみ登録します。ローカルリポジトリを書き換えるにはステージングされたファイルに対してコミットします。そのときメッセージを残すことができます。

上図の「Message (press Ctrl+Enter to commit)」と書いてある入力欄に変更理由を書き込みます。今回は Small Basic Desktop との差異があるということで「parity #1 fix」と書いておきます。#1 は issue (イシュー:問題点)番号で、リモートリポジトリにあらかじめ登録しておいた issue の番号です。そして、Ctrl+Enter を押します。これでコミットが完了し、ステージング済みの変更欄が消えます。同様に launch.json も「added Launch Chrome」というメッセージとともにコミットします。

これでローカルリポジトリの更新が終わったので、今度はそれをリモートリポジトリに反映します。ソース管理サイドバーの右上に「…」と書かれたメニューがあるのでクリックし「プッシュ先」を選びます。「リモートを選んで、ブランチ 'blog' を次に公開します:」と出るので、「origin https://github.com/nonkit/SmallBasic-Online.git/」をクリックします。GitHub の Username と Password を聞いてくるので入力します。これでローカルリポジトリの変更がリモートリポジトリにプッシュされました。

GitHub のリモートリポジトリをブラウザで表示すると、下図のように「Your recently pushed branches:」としてブランチ blog が表示されます。

Ellipse_github

その右側にある緑の [Compare & pull request] というボタンを押してみます。すると blog というブランチの内容を master に反映する プルリクエストを作成することができます。デフォルトでは反映先は私が作ったリモートリポジトリではなく、フォーク元のオリジナルのリモートリポジトリになっています。この設定は変更することができますが、今回はフォーク元の開発が中止になってしまったので、これ以上は進めないことにします。

またこの画面の下のほうには変更箇所が色付きで示されています。緑の部分が追加した行、ピンクの部分が削除した行になります。

その上にはローカルリポジトリへのコミットの履歴が表示されます。「parity #1 fix」の「#1」というところにマウスを置くと、「#1, Add infrastructure for building/testing/publishing the application.」と表示されます。実はこれはフォーク元の sb/SmallBasic-Online の issue 番号で、私は自分のリモートリポジトリ nonkit/SmallBasic-Online の issue 番号のつもりで書いたものです。これは混乱の元になるので、本来フォーク先には Issues は利用せず、フォーク元の Issues に直接書いたほうがいいでしょう。今回はフォーク元がクローズしていたので仕方がありませんでした。

これで、一連の作業について一通りの説明が終わりました。最後に今回の取り組みについてまとめる予定です。

(つづく)

| | コメント (0) | トラックバック (0)

TypeScript (6) デバッグ

今回は Visual Studio Code から TypeScript で書かれた Small Basic Online をデバッグする方法についてお伝えします。

まず、Visual Studio Code の「ターミナル」を立ち上げて、以下のコマンドを入力し、Small Basic Online を立ち上げてみます。

npm i
npm run gulp watch-source

以下の図は上記の2行目のコマンドで [Enter] を押す直前です。

Vscode_npm

上記のコマンドを実行後、ブラウザから http://localhost:8080 を開くと Small Basic Online が表示されます。

今回は Shapes.Ellipse 操作の表示がおかしいので、それを直してみたいと思います。プログラム SXD340 を Small Basic Desktop で実行すると次のようになります。

Ellipse_desktop

ところがこのプログラムを Small Basic Online にコピーして実行すると次のようになります。円が若干左上にずれているのが分かります。(図をクリックすると拡大します。)

Ellipse_parity

ここで、デバッガを起動してみます。最初に一度だけ Debugger for Chrome のための設定として次の操作を行います。Visual Studio Code の左側にある虫のアイコンをクリックしデバッグサイドバーを表示します。Debug Tests と表示されている下向きの三角形をクリックし「構成の追加」を選びます。launch.json の編集画面にメニューが表示されるので、「{ } Crhome: Launch」を選びます。すると先程の下向きの三角形をクリックして「Launch Chrome」が選べるようになるので、これを選びます。

Visual Studio Code の左側にあるファイルのアイコンをクリックしエクスプローラサイドバーを起動し、以下のファイルを開きます。

src\app\components\common\shapes\ellipse.ts

move メソッドの中の1行目にブレークポイントを設定してみます。行番号の左側をクリックすると赤い丸が表示されるので、それがブレークポイントが設定されたという表示です。これでデバッグを開始するとブレークポイントの行の実行直前にプログラムが一時停止します。

ブレークポイントが設定できたらデバッグサイドバーの「Launch Chrome」と表示された左の緑の三角をクリックしデバッグを開始します。Chrome ブラウザが起動され Small Basic Online のエディターが表示されます。ここに上記の SXD340 を貼り付け [Run] ボタンを押すと、ブレークポイントで停止し、次のような画面が表示されます。

Ellipse_break_point

このとき Small Basic Online の画面はこうなります。

Ellipse_debug

Visual Studio Code の上のほうにデバッグのためのコントロールが表示されています。左から、「続行」「ステップ オーバー」「ステップ インする」「ステップ アウト」「再起動」「停止」となっており、「ステップ~」は1行ずつ実行します。そのときソースコードの変数名の上にカーソルを置くと変数の内容が表示されます。「続行」を押してプログラムを続行させることができます。「停止」でデバッグを終了します。

エクスプローラサイドバーから ellipse.ts を開き、10, 11, 28, 29行で strokeWidth / 2 だけ右下に楕円をずらします。編集後エディターの右上に「変更を開く」ための矢印が回転しているアイコンがあるのでこれクリックして変更した箇所を確認します。

Ellipse_diff

すでに Small Basic Online の最新版が起動していると思うのでさきほどのプログラムを走らせると下図のように円の位置が正しくなっていることが確認できると思います。

Ellipse_parity_fixed

今回の内容はここまでとします。次回は修正したソースを GitHub に反映する方法を紹介します。

(つづく)

| | コメント (0) | トラックバック (0)

2019/02/14

TypeScript (5) Visual Studio Code

今回は、TypeScript ベースの Small Basic Online v1.0 を開発するための開発環境について解説します。開発には Visual Studio Code が便利なので、これを使います。Visual Studio というとマイクロソフトの統合開発環境 (IDE: Integrated Development Environment) ですが、Visual Studio Code はそれとはまったく関係のないマイクロソフトがオープンソースとして公開しているエディタ(編集用ソフト)です。

Visual Studio Code は https://code.visualstudio.com/ からダウンロードできます。

また拡張機能として以下の3つをインストールしました。


  • Debugger for Chrome 4.11.2

  • ftp-sync 0.3.9 (Small Basic Online とは直接関係ないですがウェブサイトをアップロードできます)

  • Japanese Language Pack for Visual Studio Code 1.31.4

再度、GitHub から Small Basic Online のソースをクローン(リモートリポジトリからローカルリポジトリへのコピー)します。Visual Studio Code にはこのメニューがないので、ターミナルを開いて以下のコマンドを実行します。


cd \
git clone https://github.com/nonkit/SmallBasic-Online.git/ \SmallBasic-Online

これで C:\SmallBasic-Online フォルダにローカルリポジトリができます。「ファイル」「フォルダを開く」でこのフォルダを開きます。src\app\components\common\shapes\ellipse.ts を開いてみます。このファイルをちょっと直してみたいのですが、その前に画面左下の master と書いてあるところをクリックし、ブランチを作成します。ブランチは複数のメンバーで並行してソースに手を入れるためにリポジトリを枝分かれさせる機能です。下図は、ブランチ名を blog とし、ソース管理 (git) で差分を表示したところです。

Vscode

今回はここまでとします。次回は変更したコードを走らせてデバッグします。

(つづく)

| | コメント (0) | トラックバック (0)

2019/02/12

TypeScript (4) Git と GitHub

今回はソースコードのバージョンを管理するツール Git と GitHub について説明します。

Git はオープンなオペレーティングシステム Linux の生みの親であるリーナス・トーバルズ氏が開発したバージョン管理システムです。リポジトリと呼ばれるアーカイブにソースコードの差分を登録し、変更箇所を比較したり、元の版に戻したりすることができます。一連の変更に対するコメントも残せます。

Git はもともとはコマンド形式でしたが、今はさまざまなツールから呼び出せるようになっています。このシリーズでは次回 Visual Studio Code の中から使ってみる予定です。

Git ではローカルフォルダにあるソースコードから管理対象を選んでローカルのリポジトリにある時点のソースコードを登録します。その際にいくつかの手順があります。ざっくり言うと、まずステージングエリアに変更したソースを追加します。この状態で、リポジトリにある以前の版と今回ローカルに編集した版の差分を確認できます。関連するソースコードをステージングしたところで、コミットというコマンドによりリポジトリに差分情報を書き込みます。

そして、GitHub というツールはオンライン上でリポジトリを管理するシステムで、これにより世界中の人たちがソースコードのさまざまなバージョンを共有できるようになりました。オープンソースを支えているシステムだと言えるのではないでしょうか。

最近、たまたま本屋さんで『いちばんやさしい Git & GitHub の教本』という本を見かけたので購入しました。イラスト入りで Git や GitHub のちょっとややこしい手順が分かりやすく解説されているほか、Visual Studio Code についても触れられているので、ホームページのソースを管理したい方にもオススメです。

この本にも詳しく書いてありますが、Git は https://git-scm.com/ からダウンロードしインストールできます。GitHub は https://github.com/ でアカウントを登録して利用します。ちなみに私のアカウントは https://github.com/nonkit です。すでに Small Basic Online v1.0 をフォークという機能で複製したものが、https://github.com/nonkit/SmallBasic-Online です。

今回の Git と GitHub についての説明はここまでとします。

さて、ここで読者のみなさまにお詫びがあります。実は上記の Small Basic Online v1.0 は全面的な方針の変更があり、TypeScript ベースではなく、C# ベースで開発されることになりました。したがって、この連載も見直しをせざるを得ない状況となりました。

そこで、C# ベースの Small Basic Online については新たな連載を始めます。この連載では TypeScript ベースの Small Basic Online で多少の修正をして動作確認するところまでをあと何回かに掲載してひとまず終了したいと思います。新しいコードベースでも一部 TypeScript が使われているので、その話をこちらにまたちょこっと書くかもしれません。

とはいえ、今回の Git / GitHub や次回予定の Visual Studio Code などは知っていて損のない情報だと思いますで、引き続き読んでいただけると嬉しいです。

(つづく)

| | コメント (0) | トラックバック (0)

2019/02/04

TypeScript (3) Small Basic Online とは

開発のあれこれに入る前に、まず開発の対象である Small Basic Online v1.0(開発中)を使ってみましょう。使い方はごく簡単に GitHub にも掲載されていますが、マイクロソフトのITプロフェッショナル向けの情報サイト TechNet Wiki に詳しくまとめましたので、そちらを参考にインストール、実行してみて下さい。

インストールはまずサーバ側で JavaScript を実行するためのシステムである Node.js のインストールを行います。このとき同時に npm (Node.js Package Manager) と呼ばれるパッケージ管理ツールもインストールします。次に、npm を使って Small Basic Online をインストールします。Small Basic Online は Node.js のパッケージとして作られているようです。インストール後、npm を使ってローカルPC上で Small Basic Online を実行するウェブサーバを起動し、ブラウザから利用します。

Smallbasiconline
【Small Basic Online v1.0】

上図が Small Basic Online v1.0 の起動画面です。

Small Basic v1.2 や Small Basic v1.3 に比べるとまだオブジェクトが Array、Clock、Math、Program、Shapes、Stack と TextWindow の7つしか用意されていません。これらのオブジェクトにはまだバグがあるようで、その修正やまだないオブジェクトの作りこみ(実装)がこのプロジェクトの作業になっていきます。

バグについてですが、現時点で例えば、Shapes.AddEllipse() 操作で作成した楕円の図形を Shapes.Move() で移動しようとしても移動しないことが判っています。また Shapes.AddRectangle() や Shapes.AddEllipse() で作成した長方形や楕円のサイズが Small Basic v1.2 や v1.3 に比べて小さいことも判っています。

まずはその辺りを直してみるということを行ってみたいと思います。

(つづく)

| | コメント (0) | トラックバック (0)

TypeScript (2) 何から手をつければ?

新しいことを始めるとき、何から手をつければいいか迷いますね。

今回 Small Basic Online の開発に取り組むと決めてから、最初は途方に暮れていました。

まず、取り組むと決めることは重要だと思います。

その後は、少しずつ情報を集めてどうすればいいのかに迫っていくしかありません。今回の最初の手がかりは公開されているソースコード https://github.com/sb/SmallBasic-Online でした。

GitHub(ギットハブ)はオープンソースのソフトウェアのソースコードを管理するシステムです。場合によっては、ここにドキュメントがあり、どのように貢献すればよいかがまとめられていることもあります。Small Basic Online に関してはドキュメントは今のところ、Readme に Small Basic Online の使い方、Code of Conduct に参加者の行動規範、Issues のページに問題点などがまとめられていますが、開発に関する文書はないようです。

ソースコード自体は有力な情報源になります。.ts という拡張子のファイルがあるので、TypeScript 言語が使われているだろうということが分かります。TypeScript はマイクロソフトが JavaScript に対して変数のデータ型を指定できるようにした言語です。JavaScript では変数の型が決まっていないので(Small Basic もそうですね)、大規模なプログラムを作るときにはバグを発生させやすいという面があります。これを回避するために TypeScript では変数の型を導入したようです。TypeScript の文法は JavaScript を拡張したもので、さらに Java や C 言語と同様の記法が使われています。いずれかの言語の経験があれば、気軽に覚えていけそうです。

開発環境をどうするのか、マイクロソフトの製品だから Visual Studio かと思いきや、どうやら Visual Studio Code というエディタを使う場合が多いようです。この辺はインターネットで検索して把握できました。Visual Studio Code (VSCodeとも)もオープンソースで、GitHub にソースコードが公開されています。

今回の取り組みの大きな前提として、このオープンソースのソフトウェアを開発する枠組みを理解しておく必要がありそうです。

ここまでのところをちょっとまとめておきましょう。

・オープンソースのソフトウェア開発(共同開発)
・言語は TypeScript
・エディタとして Visual Studio Code を利用
・ソースの管理は GitHub を利用

それぞれについて、インターネットや本で調べることも必要になってくるでしょう。どのような本に出会えるか、プログラミング人生において、結構重要なことだと思います。

私自身は、TypeScript は全く初めてなのですが、Visual Studio Code はホームページの作成と公開に使ったり、GitHub は Small Basic のソースを公開するために使ったりしています。TypeScript も初めてですが、JavaScript については囲碁のプログラムを作ったり、ホームページのちょっとした動作のために使ったりしているので、なんとかなる感覚はあります。初めての場合は、インターネットや本の情報をもとに実際に手を動かして使いながら覚えていくのがいいと思います。

ただ、やみくもにインターネットや本を探していると得られるものもある一方、時間がかかってしまうこともあるでしょう。よく知っている人に話を聞くのも大切かもしれません。今回私の場合は、Small Basic コミュニティを長年いっしょに支えているメンバから開発環境について教えていただくことができました。昨日試してみて、Visual Studio Code とブラウザの Chrome を使って Small Basic Online のデバッグができることを確認できました。

順を追って説明していきたいと思います。

(つづく)

| | コメント (0) | トラックバック (0)

2019/02/02

TypeScript (1) 新たな連載のねらい

長年にわたり Microsoft Small Basic のユーザとしてさまざまなプログラムを作ってきました。今後も続ける予定でいます。一方でマイクロソフトは昨年 Small Basic のオンライン版 Small Basic Online をオープンソースとすることを発表しました。これまで Small Basic はデスクトップ版がメインで、オンラインに発行した場合は IE (Internet Explorer) に Silverlight というプラグインを加えた環境で動作するものの、Silverlight のサポートが 2021年までで終了してしまうという状況でした。

Small Basic はマイクロソフト社内のボランティアによって維持されていますが、なかなかメンバも時間が取れず開発が進んでいませんでした。私自身は Small Basic に深く携わってきたので仕様についても細かく理解しているつもりであり、先日オープンソースの取り組みに参加を表明しました。

とはいえ、実はその Small Basic Online の開発言語である TypeScript についてもその開発環境についても全く何も知らないのが現状です。

そこで今回の連載では開発言語についても開発環境についても全く分からない状態から、どのようにそれらを掌握し、オープンソースのプロジェクトに参加していくのか、という実況をお伝えしていこうと思います。

Small Basic の連載では中学生を対象と考えていましたが、今回は高校生以上を対象に進めていきたいと思います。

この連載で扱う内容は現在のところ以下のようになると考えています。

・TypeScript というプログラミング言語について
・Small Basic Online のための開発環境について
・オープンソースの開発について

開発環境についてはまだ確定していませんが、エディタとして Visual Studio Code、TypeScript (JavaScript) のライブラリ Node.js、オープンソフトのソースを管理する GitHub などを扱うことになると思います。


(つづく)

| | コメント (1) | トラックバック (0)