BUNCHO METHOD コードを楽しむプログラミング情報メディア

プログラミング教材 - 10回完結で基本が身につく

文鳥メソッドは初心者向けでありながら「コードを書く」ことを重視したプログラミング教材です。重要かつ実用的なプログラミング知識やテクニックをたった10回分のレッスンにまとめました。独学でプログラミングを身に着けたい方も、学校や家庭で生徒や子どもにプログラミングを教えたい先生や親御さんにもおすすめのプログラミング教材です。

【レッスン#1】 「JavaScriptの学習環境」を学ぶプログラミング教材

JavaScriptでプログラミングするとはどういうことなのか、その基本をじっくり解説します。ちょっと長めですが難しくはありません。学習環境CodePenの使い方も覚えます。

【レッスン#2】 「HTML要素の書き換え」を学ぶプログラミング教材

プログラミング教材#2ではinnerHTMLを使ってJavaScriptでHTMLを書き換える方法を学びます。これができるとウェブページの表示内容を自由に操れるようになります。

【レッスン#3】 「変数と演算の基本」を学ぶプログラミング教材

プログラミング教材#3では変数や演算子を使って簡単な計算をする方法を学びます。また文字列の結合についても扱います。

【レッスン#4】 「乱数の使い方」を学ぶプログラミング教材

プログラミング教材#4では組み込み関数Mathを使って乱数を生成する方法を学びます。任意の範囲の整数に整える実用パターンも扱います。

【レッスン#5】 「繰り返し処理」を学ぶプログラミング教材

プログラミング教材#5ではfor文を使って同じ作業を繰り返し実行する方法を学びます。繰り返しはプログラミングの重要なポイントです。

【レッスン#6】 「条件分岐」を学ぶプログラミング教材

プログラミング教材#6ではif文を使って条件によって処理を変えることができるようになることを目指します。

【レッスン#7】 「配列の使い方」を学ぶプログラミング

プログラミング教材#7では「配列」を使って同じ名前の変数でたくさんの種類の値を管理する方法を学びます。

【レッスン#8】 「グラフィックの描画」を学ぶプログラミング教材

プログラミング教材#8ではJavaScriptでグラフィックを描画する方法を学びます。テキストのみによる表現を抜け出しアクションの幅を広げることができるようになります。

【レッスン#9】 「マウスイベント」を学ぶプログラミング教材

プログラミング教材#9ではユーザーのマウス操作に反応する処理を学びます。マウスをトリガーとした処理を覚えることでゲームやアートなど様々な可能性が広がります。

【レッスン#10】 「タイマー処理」を学ぶプログラミング教材

プログラミング教材#10では一定時間ごとに指定した処理を実行する方法を学びます。これによりアニメーション表現などができるようになります。

一般的なプログラミング教材との違い

英語の文法と英会話、初心者はどちらを先に学びたいか?

はじめに、おそらくプログラミングよりなじみの深そうな「英語の勉強」で考えてみましょう。中学校の教科書など多くの教材はだいたい(1)be動詞、(2)一般動詞、(3)疑問文、(4)否定文…のような章立てで進みます。文法を学ぶという発想ですね。

一方で「海外旅行で役立つ英会話」のような教材もあります。「空港に行くにはどのバスにのればいいですか?」みたいな実用的な英語例文がたくさん掲載されている教材です。

プログラミング教材にも文法系と実用例文系があります

多くの人は後者のような英会話の教材のほうが学習意欲がわくのではないでしょうか。覚えた例文をさっそく旅行中に使ってみと、「英語うまいね」と褒められたりする。気分がよくなってもっと勉強してみようと思う。文法の理解を極めることはできないかもしれませんが、英語を使えるようになるという意味ではこちらの方がおすすめな学び方かもしれません。

プログラミング教材についても同じです。文法や言語体系を重視する多くのプログラミング教材では、(1)変数、(2)データ型、(3)演算子、(4)制御構文…のような章立てで進みます。プログラミング初心者は(1)から真面目にがんばって読み始めるのですが、すぐに「何のためにこれを読んでるんだろう?」というもやもやに包まれるものです。プログラミング言語の本質を体系的に深く学ぶことは本来非常に重要ですが、プログラミング初心者の多くはこの学習手順のために挫折してしまうことが多いように思います。

「文鳥メソッド」は実用例文系プログラミング教材です

文鳥メソッドは初心者にこそ最短で「プログラミングができるようになった」という達成感とさらに詳しく学びたくなるモチベーションを向上させるために、学習項目の並び順(カリキュラム)や詳しさのレベルを熟慮し、実用的な例文(サンプルコード)を多様した新発想のプログラミング教材です。

プログラミング教材「文鳥メソッド」で最初に学ぶべきポイント

一般的なプログラミング教材では実はあまり紹介されていませんが、ゲームを作るにしても、業務用アプリを作るにしても、JavaScriptのプログラムを書くときにポイントとなる考え方の軸となるのはたったひとつの基本パターンです。

************
JavaScriptプログラミングの基本パターン!
************
① トリガーを仕掛ける(イベントリスナーの設置)
② アクションを仕込む(ユーザー定義関数の用意)

①のトリガーは「ボタンをクリックされたら」とか「5秒たったら」などプログラムが動作するきっかけになる条件のことです。②のアクションは例えば「表示されているテキストを変える」とか「画像をひとまわり大きくする」などプログラムの動作、アウトプットにあたる部分。ちょっと意外かもしれませんが、ゲームやツールなど実用的なプログラムのほとんどはこの基本パターンの組み合わせで作ることができます。

プログラミング教材「文鳥メソッド」はプログラミング初心者にいち早くこのパターンの重要性を理解し、使いこなせるようになってもらうことを第一に考えて作られたプログラミング教材なのです。

具体例を使ってパターンを確認

具体例として以下のようなプログラミング問題があったとしましょう。

【例題】以下のサンプルのように、ボタンを押すと"Hello world!"が表示されるプログラムを書きなさい。

とくに面白みもないサンプルですが、改めて「これを作りなさい」といわれとき、頭の中でどのような発想をする必要があるか考えてみます。

先ほどの基本パターンにあてはめてみましょう。

①のトリガーにあたるのは「ボタンが押されたら」
②のアクションにあたるのは「"Hello world!"を表示する」 ですね。

コードの詳しい中身については本編で説明するのでここでは省略しますが、まず①のコードを書いてみます。addEventListenerを使って次のようになります。

btn.addEventListener("click", sayHello);

次に②をコードで書いてみます。functionを使って次のように書きます。

function sayHello() {
  msg.innerHTML = "Hello world!";
}

実はこれで今回作りたいプログラムの「主役」は準備完了です。もちろんこれだけでは動きませんが、あとは必要に応じて「脇役」のコードを少し追加するだけで完成できるのです。

参考までに上記サンプルのコード全体を載せておきます。興味のある方は確認してみてください。

See the Pen 「はじめての方へ」で示す例 by programmingbird (@programmingbird) on CodePen.

※ 上のようなコードと実行結果の表示形式(CodePen)について詳しく知りたい方はプログラミング教材#1 はじめてのJavaScriptをご確認ください。

プログラミング初心者にこそ全体像を意識する習慣を

プログラミング教材「文鳥メソッド」はプログラミング初心者にこそ細部ではなく全体像を意識してコードを書く習慣を身に着けてもらいたいと考えています。サンプルコードによる学習や練習問題にチャレンジする中でこの基本パターンが何度も出てくるようにプログラミング教材を構成しています。「あ、またこのパターンだ」という体験を通して、プログラミングのコツを最短で体得してもらえることと思います。

プログラミング教材の分類

テキスト言語系のプログラミング教材

この文鳥メソッドのようにテキストベースコードを書いてプログラミングを学ぶプログラミング教材です。実際に使われるウェブサイトやアプリを作るにはほとんどの場合コードを書いて作ることを考えると、最も実用的で本来あるべきプログラミング教材の姿だとも言えます。一方で、プログラミング言語のほとんどは英語ベースになっているため英語に拒否反応がある人や子供には理解しづらいと考える人もいるようですが、おそらくそう考える人はプログラミングをやってことのない人なのでしょう。英語がわからなくてもコードは十分に使いこなせます。また、子供は大人以上に新しいスキルの吸収が早く、タイピングも上手になりますのでテキスト言語系のプログラミング教材が避けられる理由は教える側の経験不足や逃げ口上なのかもしれません。※あくまで個人の感想です。

ビジュアル言語系のプログラミング教材

簡単に言うと「プログラミング学習用の特殊なゲームアプリ」です。アプリ上にでてくるキャラクターやブロックがコードのパーツの代用品になっていて、それを画面上で動かして並べ替えることで間接的にコードを完成させてプログラムを実行する仕組みです。これを利用して学習させるプログラミング教材が多く出回っています。子供が興味を持ちやすいアプリですが、子供にもいろいろな趣向があるのでこの手のインターフェースを子供だましや幼稚と感じる子供もいることでしょう。間接的とは言えプログラムを書くことにはなるのでそのロジックパターンを学習するには有意義です。実際、これらを使って高度なゲームを作っている人も多いです。また、多くのビジュアル言語系プログラミング教材では自分の作ったプログラム(作品)を他のユーザーたちに公開する環境も用意されています。これは素晴らしいことですね。難点はここで作ったプログラムはあくまでこの専用アプリ(やウェブサービス)上でしか動かせません。どんなにビジュアル言語を習得したとしても、そのまま実用できることはないでしょう。

アンプラグド系のプログラミング教材

ビジュアル言語系で例えた「特殊なゲームアプリ」がコンピュータを一切使用しない「かるた」になったようなプログラミング教材です。もはやプログラミングと言ってよいのかも疑問です。何しろ実行できないのですから。「かるた」をならべながらプログラミングのロジックだけストイックに練習するプログラミング教材です。これを選択する教師はPC等の環境を一切用意できなかったかよほどコンピュータに自信がない人だと思われます。どんなに教科書を読んでも自転車に乗れるようにはならないのと同じくらい、実用性のない教材と言えるでしょう。子供たちが「論理的思考を学べる」という話ですがこれほど抽象的な作業に興味や達成感を感じる子供はごく一握りの超優秀層だけなのではないかと思います。そういう意味では、ある程度プログラミングの実戦経験を積んだ上で、より無駄なく美しいコードを書きたいと思えるレベルに来た人には、逆にPCやデジタル機器から離れて「アンプラグド」な環境でプログラミングを構想したりするのはとても良さそうです。紙やホワイトボードに手描きでアイデアをまとめることを好むプログラマーは多いものです。

ロボット系のプログラミング教材

ロボット系プログラミング教材の特徴はなんと言ってもアウトプットがロボットなどの「実体」であることです。これはとてもいいですね。通常のプログラミングはほとんどの場合どれだけ高度なプログラミングを書いても実行結果は画面上でしか表現できません。ロボット系の場合は、自分が書いたプログラム通りにロボットが右へ左へ動いたり光ったり音を出したり、また各種センサーを通じて現実の環境(温度や照度や音など)をインプットすることもできます。肝心のプログラムをどう書くのかは教材によります。テキスト言語系で書くものもあれば、前述のビジュアル言語系である場合もあります。