スニーク・ピーク (ビデオバージョン)

これは、字幕と翻訳の作業を簡易化するためのトーク・スルー（対話方式）でコーディングを行なっているスクリーン集です。こちらから私たちのトーク・スルーをご覧ください：
https://www.khanacademy.org/cs/programming/

それではまず、プログラムを作ってみましょう

まったく何もないところから始めますが

最後にはミニお絵かきプログラムのようにすごくカッコイイものになります

はじめの数レッスンは、つむじ風の旅のように考えてみてください

まずは何が実現可能であるかという感覚を掴んでください

今は細かいところまで理解をしようとする必要はありません

まずはあなたに、何が起きるのかという感覚と、あなたが作ることができるプログラムを紹介していきます

それではまず、ここに何もなくてちょっとつまらないですね

なので何か描いてみましょう

ひとつ楕円形を描いてみましょう。丸のようなものですね

あとで詳しく説明しますが、こんな風にして描くんです

そしたら、ほら。ちょっと魔法みたいですよね

この仕掛けは、カーン・アカデミーの特別な学習環境にあるんです

ラッキーなことに、楕円形もその一つなんです

ここでの数字の意味については心配しないでください

これから「お絵描きのイントロ」としてこれらを学びます

でも、こっそりプレビューしてみますよ

ここで数字を変えると、この最初の数字は基本的に、どれだけ遠く左右に位置させることができるか、を意味します

この二番目の数字は基本的に、どれだけ高く上下に位置させることができるか

この三番目に数字は、どれだけ大きく左右に丸を膨らませるかで、

最後の数字はどれだけ上下に膨らませるか

繰り返しますが、いまここでこのすべてを理解する必要はありません

でももし自分で試してみたかったら、いつでも一時停止して実践してみてください

全ての細かい内容は、これからのレッスンで学んでいきますよ

いまここで一番大切なことは、コントロールによってどう形が変わっていくのかということです

はい、ここまでいいですね。でもそんなに感動的でないですね

なので、ちょっとだけ複雑な操作をして

さっき書いた楕円形のコードを中に入れてみます

はい、何も変わってないですね

まだ感動的でもないでしょう

では、ここでこう操作してみると、結果はすこしは感動的でしょう

このプログラムをアニメーション化してみます

そうするとご覧のように、たくさんの丸が出てきて

実は私のマウスの動きを追ってるんです

ここで一時停止して、あなたのマウスで試してみてもいいですよ

これは一体どうやって起こってるのでしょう？

このすべての丸は一体どこからやってきたのでしょう？

あとの「お絵描きのイントロ」でこの全てのことを学習しますが

簡単に何が起こってるかというと

コンピューターが何度も何度も、描いて描いて描いて描いて！と自動的にプログラムに司令をしてるんです

プログラムが描き疲れちゃうと思うかもしれませんが

それでもこの魔法”お絵描き”の中で描き続けることが出来るんです

なのでこんな風に、楕円・楕円・楕円と描き続けるんです

これがマウスを動かしてる舞台の裏で起こってることなんです

こんなにたくさんの楕円形を描くために

たとえ一度だけこれを書いたとしても

では、どうやってプログラムは楕円形を描く場所が分かるんでしょう？

たとえば、どうやってマウスを追うことを知るんでしょう？

それはあとの「マウス・インタラクション」の中で学びます

ただ、コンピューターがマウスの場所を毎回プログラムに教えるというざっくりしたアイディアについては、この二つの特別なマウス言語を使うんです

「マウスX」と「マウスY」です

いまこれらについて知る必要はありませんが

マウスXはどれだけ左右遠くにマウスがあるかということで、

マウスYは、どれだけ上下の幅でマウスが位置しているかということです

なので要するに、この楕円を作ったとき、一番目の司令はマウスが左右に動くのと同じように楕円を描きなさい

二番目の司令は、マウスが上下に動くのと同じように楕円を描きなさい

ここでつまるところ、ひとつの楕円形をマウスがある場所と全く同じ場所に描いたりする、それを私たちはそれを「draw」といいます

そしてそれから最後のふたつの値は、楕円形がどんなサイズかを示します

繰り返しますが、いまは細かいことは心配しないでください

この後のレッスンの中で、この意味がしっくり分かると思います

ここで、ご覧のように、少し散らかってきました

この「Restart」ボタンをクリックすることで、ブランクの画面からプログラムを何度もやり直すことができます

一時停止して自由に操作してみてください

ご自分で遊んでみてください。そしたらどんなことが起きるのか分かるでしょう

ではここで少し面白いことをしてみましょう

何が出来るでしょうか？

そうですね、この丸はすこし不格好かもしれません

ただの白ですし

たとえば、色を塗ってみたらどうなるでしょう？

あとに「カラーリングのイントロ」というチュートリアルで、そこでカラーについての全てのことが学ぶけれど

まずはここで、その秘密を少し明かしながらカラーの仕方をお見せしましょう

ジャジャーン！いい感じ！

これで赤い丸がマウスの動きを追うことになります

ただこれは赤であることはありません。なぜなら、あなたがここをクリックし操作によって表示されるように、

どんな色でもあなたが好きな色を選ぶことができるのです

このレインボーな色とりどりの中から

では・・このきれいな紫はどうでしょう？

カラーがどのようにこんな風に変えられるかについては「カラーリングのイントロ」の中で学びます

ではもう一度「Restart」してみましょう・・いいですね！これで紫の丸だけになりました

そして次に、あなたはこう思い出すかもしれません。

マウスを動かすときいつでも紫の丸が描けるのはいいけれど

時々描ける方が便利かもしれない。たとえば、マウスを押しているときだけ

それをどうやるかお見せしましょう

論理的には難しいことではないんです

私たちが指示すべきことは、「もしマウスを押したら丸を描け、でなければ何もするな」ということ

ということで、これがコードに書くべきことです

if と書いて、それで丸かっこ。いまは深く気にしないでいいですよ

If (mouseIsPressed) と書きました。それで、私たちが何をマウスが押されたときしたいかというと

楕円形を描くこと、ですよね

そうでなければ、何もしてほしくないですよね。なので、ここの部分は何もせず空白にしておきましょう

これで試してみましょう。いまマウスを動かしてみてますが、何も起こりませんね

でもマウスを押してみた時

描くことができますね！

紫色で

文字も描けるし、絵も描けるし、ほとんど何でも思ったように描けます。ちょっと面白いですね

だって数行のコードだけで、ちょっとしたお絵描きプログラムが出来ちゃったんですから

そしてこれが if ステートメントのイントロでもあります

あとでこのコードでどんなことが出来るのか、その全てを学びますが、それはまさにいま私たちが書いたとおり

そしてこんなふうに実行されるのが分かったので、すでに大体のアイディアは掴めたんじゃないかと思います

コードが意味していることの全ては、「もしマウスが押されたときこれをしろ、そうでなければ・・

もしマウスが押されていなければ、何もするな」ということなんです

いいですね。これは私たちの思考と全く同じ論理なんです

ただ、いまはコードを書いただけで

それで、気付いてるかもしれないんですが、丸のまわりの不格好なアウトラインどう思いますか？

それをどうコントロールするかはすぐに学習する予定なんですが、それを太くしたり細くしたり、あるいは違う色に変えたり

ただここでは、きれいに取り除いてしまいたいと思います

この一番上に noStroke と書いて、なぜならアウトラインはストロークという名前なので

それでまた「Restart」してみると

ほら！アウトラインが全く無くなりました

完璧ですね！こっちの方が、より本物のお絵描きプログラムに見えます

ではここで、さっと一歩下がって考えてみましょう

あなたはちょっと疑問に思ってるかもしれません。これらの魔法の能力がどこから来るのか？

たとえば "If" とか "ellipse"とか "draw" とか

これらの便利なコマンドはカーン・アカデミーに組み込まれているんです

私たちが組み込んだんですけれど

面白いのは、それらをどう組み合わせてプログラムに投入するかなんです

もし興味があるようであれば、私たちは JavaScript という言語をカーン・アカデミーで使っています

JavaScript はプログラムを書くのに世界中で人気のある言語のひとつです

とくにインターネットにおいて

なので、あなたはとってもいい環境で学んでいます

私たちがこのお絵描きプログラムを作ったんですが、まだ完結したわけではないんです

あなたが好きなようにカスタマイズすることも出来るんです

丸のサイズを変えたり、色を変えたり

ここに「Save as a spin-off」ボタンを作ったので、あなたの作品を見せたい人全員に見せることができます

やっていくうちにプログラムをもっと良くするための沢山の方法を思いつくと思います

ただまだそれに気付いていないだけで

色やサイズを変える以上のことを

もしかしたら、あなたはペンギンのかっこいいアニメを作りたいかもしれないし、

それか、面白いゲームとか

それか、家族や友達に何かステキなものとか

ここはそれを実現させる正しい場所です

なぜなら私たちと学んでいけば、それをどうやって作りあげるか、コード以上のことが分かるでしょう

あなたにもこれが面白いものだと思ってもらえたら嬉しいです

もしそう感じたら、いろいろ試してみてください

お絵描きプログラムを作るには、ほんの数分で出来ます

でもコードについてもっといろいろ学んでいきますよ

次のいくつかのレッスンでもっと深く探っていきます

私たちがそこで一体何を仕掛けたのかを学んでいきます

それが分かればそんなにミステリアスでもないでしょう

まっさらな状態から始めて、基礎を作り上げて、少しづつ進んでいく

信じるかは別として、そんなに難しいことではないんです

こつこつ学んでいけば、あなたもすぐに小さいプログラム以上のものが作れるようになります