【元記事をASCII.jpで読む】

　何年も前から騒がれていたように、いよいよ小学校の義務教育にプログラミング学習が取り入れられ、今年はその初年度となることになっていました。しかし、新型コロナの影響で、プログラミング学習どころか、学校そのものがなかなか始まらない状況が続いています。プログラミング学習を楽しみにしていた人も、逆に恐れていた人も、なんだか肩透かしを食ったような感じでしょう。

　この連載では、そんな状況にはお構いなく、プログラミングなどというものは、学びたい人が、いつでも勝手に自分で学べばいいのだ、というスタンスで、プログラミングへの入口となるような記事を始めます。最初は、とりあえず3回ほどで、プログラミングの面白さに気付いてもらえるような内容をお届けしたいと考えています。もしその3回で、多くの読者の支持が得られれば、その続きも考えています。

　プログラミングの面白さが分かるためには、まずプログラミングという行為に慣れ、ストレスなく実行できるようになる必要があるでしょう。そのうえで、自分のアイディアをプログラムとして表現し、実際に動かして結果を確認できるようになれば、その後は、次から次へと自然に好奇心が湧いてくるはずです。

使用する環境について

　ひとくちにプログラミングと言っても、その形態はさまざまです。パソコン上でプログラミングができるような環境にも、星の数ほどの種類があります。自分でプログラミングを学ぼうと考えた場合、まず立ちはだかる大問題は、その学習環境として何を選ぶか、ということでしょう。

　ここで「環境」と言っているのは、パソコン上で動くプログラミングのためのツールのことでもあり、プログラミング言語そのもののことでもあります。それらについて、あーでもない、こーでもないと語りだすと、それだけで、軽く今回は終わってしまい、それでも足りないくらいです。なので、この連載では、そこは一本釣りで、最初に1つに決めてしまうことにしました。

　まずツールとしては、iPadOS、またはmacOSの上で動く「Swift Playgrounds」を使います。アップルが提供している無償で使えるアプリ形式のプログラミング学習ツールです。そうするとプログラミング言語も、自動的にSwiftに決まってしまいます。

　この環境は、iPad上では3年以上の実績がありますが、macOS版は、今年の2月に出たばかりのホヤホヤです。ちょっと紛らわしいのは、プロ用のアップル製品のアプリ開発ツール「Xcode」でも、「Playground」(こちらは最後に「s」が付かない)というプログラミング環境が使えることです。これは、macOS上で動くもので、もう6年近く前からありました。

　iPad上のSwift PlaygroundsもこのXcode上のPlaygroundを元にしたものですが、ツールとしての規模はまったく違います。Xcodeはダウンロードサイズで8GBを超えていて、macOSにインストールすると最低でも15GBくらいのスペースを専有します。ちょっとしたOS並ですね。このままではとてもiPadで動かせるような代物ではありませんし、macOS用の環境としても、本格的なアプリ開発に携わる人以外は、導入に二の足を踏んでしまうでしょう。

　iPad上のSwift Playgroundsは、ダウンロードサイズで約390MBです。iPad用アプリとしては、かなり大きい方ですが、Xcodeに比べれば何十分の1ですし、最近のiPadであれば十分に許容範囲でしょう。新たに登場したmacOS用のSwift Playgroundsは、ダウンロードサイズで155MBしかなくインストールしても350MB程度で、macOS用アプリとしては、なんでもない大きさです。

　もちろん、プログラムサイズが手軽なことが、Swift Playgroundsを選んだ第一の理由ではありません。あくまで私個人の感想ですが、このSwift Playgroundsは現在地球上で利用可能なプログラミングの学習環境として、文句なく最高のものです。実際に使っていると、ちょっとバグっぽいところもあって、時々環境自体が落ちてしまったりすることもあるのは事実です。しかし、それを差し引いても、総合的に考えて、これ以上プログラミング学習に適した環境は、ちょっと思いつきません。それはプログラミング言語としてのSwiftの将来性、応用範囲、先進性、教材としての適合性なども含めた評価です。

　すでに述べたように、現状ではSwift Playgroundsには、iPadOS用とmacOS用の2種類があります。逆に言えば、それ以外の環境では使えません。残念ながら、iPadとMacのいずれも持っていない人は、この連載の読者対象からはずれてしまいます。とりあえずSwiftというプログラミング言語に興味のある人は、そのいずれかを持っている可能性は高いと思いますが、WindowsやChrome OS環境しかないという人は、ツールとしてのSwift Playgroundsは、今のところ動かす手立てはなさそうです。ただし、そうしたOSでSwift自体が使えないわけではありません。少なくともウェブ上で、Swiftが試せる、一種のプレイグラウンドがあるからです。いくつか挙げておきましょう。

　ここでは、それぞれの使い方などは示しませんが、Swiftに興味があって、アップル純正のSwift Playgroundsが動かせないという人は、試してみるとよいでしょう。ここでは、いちばん上のOnLine Swift Playgroundsで、最初から記述されている簡単なプログラムを実行する例だけを示しておきます。

　こうした環境を試してみてSwiftという言語に興味が湧き、Swiftのプログラミングに本格的に取り組んでみたいと感じたら、iPadかMacを購入してSwift Playgroundsをインストールしてから、この連載にお付き合いいただければと思います。

　とりあえず、この連載の3回の予定を明らかにしておきましょう。第1回目の今回は、すでに始まっていますが、この連載の概要を述べた後は、実際に使っていくプログラミング環境、Swift Playgroundsについて少し詳しく述べることにします。インストールしてからこの連載での実習に使う環境を整え、実際に動かしてみるところまでを解説します。

　本格的なプログラミングは次回以降となります。まず次回、2回目では、基本的なグラフィックの描き方を紹介し、画面のタッチ操作によって、ごくごく簡単なお絵かきアプリのようなものを作ってみることにしましょう。その次の3回目では、特にユーザーが操作しなくても勝手に画面が動くアニメーションの表示を試してみるつもりです。そこまでできれば、ゲームを実現するのも、あと一歩というところまで行くはずです。そして、もしそれ以降もこの連載が続くようであれば、第3回目までの成果を利用して、4回目以降で実際に遊べる簡単なゲームを作っていきたいと考えています。

iPadやMacでSwift Playgroundsを動かそう

　前置きが長くなりました。すでに始めたくてうずうずしている人もいるかもしれません。上でも述べましたが、Swift Playgroundsは、iPadOSやmacOSにとっては単なる1つのアプリなので、インストールして使うのも簡単です。それぞれのApp Storeで「Swift Playgrounds」を検索すれば、すぐに見つかるので、そのままインストールしてください。念のために、両方のURLを以下に示します。これらのページをブラウザーで開けば、そこからそれぞれのApp Storeに飛ぶことができます。

　iPadOS:https://apps.apple.com/jp/app/swift-playgrounds/id908519492

　macOS:https://apps.apple.com/jp/app/id1496833156

　ここから先は、特に断りのない限りiPad版のSwift Playgroundsの画面を示しながら進めることにします。macOS版での表示や操作も、だいたいは同じです。もし、大きく異る部分がある場合には、その都度、注記することにします。また、画面操作はiPadOSでは「タップ」が、macOSでは「クリック」が中心となりますが、ここではそれらを「タップ」と呼ぶことにします。macOSで動かす方は、「クリック」と読み替えてください。

　インストールしたSwift Playgroundsを起動すると、最初は「マイプレイグラウンド」という画面が表示されるでしょう。内容は、まったく同じではないかもしれませんが、これに近いほぼ白紙の画面となるはずです。

　ここで、ちょっとだけ寄り道になりますが、画面の底辺近くにある「その他のプレイグラウンド」の領域の右端にある「すべてを見る」をタップしてみましょう。すると、「その他のプレイグラウンド」というページに切り替わり、「テンプレート」、「コードを学ぼう」、「チャレンジ」といったカテゴリーごとに、何種類かのプレイグラウンドを作成するためのテンプレートが表示されます。

　このうち、「コード学ぼう」のカテゴリーにあるテンプレートは、非常に凝った作りのゲームのようなもので、楽しみながらプログラミングに親しむことを狙った、いかにもアップルらしいSwift Playgroundsならではのものです。しかし、この連載では使いません。これらはゲーム的、あるいはパズル的要素が強く、ゼロからプログラミングを学ぶのに、それほど適しているとは思えないからです。

　ここで使うのは、「テンプレート」のカテゴリーにある「図形」です。この、「図形」という名前の部分をタップして開いてみましょう。「入手」ボタンではありません。すると、「図形」というテンプレートの説明が表示されます。

　これをざっと見ると、円、四角形、三角形、線などの図形が、簡単に描けるプレイグラウンドのようだということ分かります。実は、このようなグラフィックを表示してみることは、基礎的なプログラミング学習にとって非常に有効な教材となります。

　ここにある「入手」ボタンをタップして、「図形」テンプレートからプレイグラウンドを作成しましょう。実は、最初に開いた「マイプレイグラウンド」のページの「その他のプレイグラウンド」にも「図形」があったことにお気づきでしょうか。つまり、わざわざ「すべてを見る」をタップして「その他のプレイグラウンド」を開かなくても、そこで「図形」をタップしてもよかったのです。まあこれは、このアプリの可能性をちょっと探ってみたというところです。

　「図形」テンプレートから作成したプレイグラウンドは、とりあえず「マイプレイグラウンド」のページに表示されます。

　iPadの場合には、この「図形」のアイコンをタップして開きます。Macの場合には、クリックしただけでは開きません。ダブルクリックして開きましょう。

「図形」テンプレートの「キャンバス」を動かしてみよう

　いずれにしても、「図形」のテンプレートから作成した新しいプレイグラウンドが開くと、最初のページ「キャンバス」が表示されます。

　ここで扱っているプレイグラウンドは、一般的なmacOSなどのアプリのドキュメントに相当するものなので、どんなふうにいじっても構いません。でたらめなプログラムを入力したり、最初から書かれているプログラムを消してしまっても、いっこうに構いません。元の「図形」テンプレートは、ユーザーには手を出せない安全な場所に保管されているので、またいつでも初期状態の「図形」テンプレートから、新しいプレイグラウンドを作って始めることができます。

　さて、この最初のページは、何やら、真ん中で左右2つに分かれています。これは、どんなプレイグラウンドにとっても標準的な形です。その左側の最上部には「キャンバス」と書かれています。これは、このページの名前です。実はプレイグラウンドは、複数のページを持つことができます。このプレイグラウンドにも4つのページがありますが、この「キャンバス」が、その最初のページなのです。

　その下には、何やらプログラムらしきものが、あらかじめ2行だけ入力されています。この画面の左側は、プログラムを入力する領域です。そして右半分は、左半分に入力したプログラムの実行結果が表示される領域となっています。右半分の最下部には「コードを実行」というボタンが配置されています。これをタップするすると、プログラムが動き出し、うまく動けば結果が表示されます。さっそくタップしてみましょう。

　これによって、画面の右半分には、この2行のプログラムの実行結果として、青い小さめの円が、右半分の真ん中に表示されます。周囲には何やらグラデーションの背景が付いていますが、これは入力したプログラムとは関係なく、Swift Playgrounds自体が勝手に付けているものです。とりあえず気にしないことにしましょう。

　今回は、プログラムの意味は説明しませんが、「Circle」という文字が見えるので、おそらく円を描くものであろうことは想像できたかもしれません。果たして結果も、その通りになりました。また2行目には「draggable」という文字が見えるので、たぶんこの円はドラッグできるのだろうとも想像できるでしょう。本当にそうか、試してみてください。

「Canvas」のプログラムにちょっとだけ追加してみよう

　最初から書いてあるプログラムを実行してみただけでもつまらないので、ちょっとだけプログラムを書き加えて、結果がどうなるのか、確かめてみることにしましょう。

　まず、上の円の色は、なぜか青になっていました。なぜ何も指定していないのに青いのかと、疑問に思われた方もいるでしょう。そうした疑問を持つことは、非常に良いことです。どしどし疑問を持ってください。このテンプレートの場合、色を何も指定しない場合は青になると、見えないところで設定されているのです。もちろん色は変えられます。上のプログラムにならって、ちょっと試してみます。

　まず、3行目に、

　とタイプしてみてください。すべて半角の英文字で入力します。「circle」と「color」の間の点は半角ピリオド「.」です。また「=」の前後には、やはり半角のスペースが１つずつ必要です。すると、画面のいちばん下の変換候補のような横長のウィンドウの中に、候補の1つとして「□」のようなマークが表示されます。それをタップしてプログラムに入力します。

　のようなプログラムになります。その後、このプログラム上の□マークをタップすると、そこに設定可能な色のパレットが表示されます。

　ここでは、パレットの中の好きな色をタップして選ぶことができます。ここでは、ちょっとハデめの赤を選んでみました。

　さらにその下には、4行目として、

　と入力しましょう。

　これは、答えを先に言ってしまうと、円の半径を設定するものです。元のプログラムでは、円の大きさはまったく指定していないのに、なぜ適当な小さめの円が描けるのか、と疑問に思った人もいるでしょう。その疑問に対する答えは、色と同じで、見えないところで、勝手に設定されているのです。そこで、ここでは、それを自分で20.0という数字で指定してみたわけです。

　ここまで入力したら実行してみましょう。

　こんどは、設定した通りの赤い円が表示されました。大きさについては、半径を20.0に設定すると、だいたいこれだけの大きさになるということが分かりました。これは、この「図形」というプレイグラウンドの、いわばローカルルールで、どんな場合でも、このようになるとは限りません。

　色や半径以外にも、いろいろと勝手に決められている円の性質があります。もちろん円以外の図形を描くのも簡単です。そうしたことも含めて、次回も、この「図形」を使って、プログラミングを進めていきましょう。