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

プログラミング問題集 - 厳選7ステージ21問

新感覚のプログラミング問題集「文鳥メソッド」 与えられたHTMLとCSSに対して問題の指示にしたがいjavascriptを書き足していく形式。 HTMLの書き換えや四則演算レベルから始まり、ループや条件分岐はもちろん、canvasを使ったグラフィック作成の基礎、マウスの動きへの対応、 シンプルなゲーム制作まで、楽しみながら実践的コードを学べる厳選7ステージ21問のプログラミング問題集です。

【ステージ#1】 テキスト書き換えに関するプログラミング問題

《難易度★☆☆》innerHTMLを使ったHTMLの書き換えをテーマにした基礎的なスキルを試すプログラミング問題です。querySelectorを使った要素の取得や、ボタンを押すことで動作するようにイベントリスナーの理解も試せます。

【ステージ#2】 計算に関するプログラミング問題

《難易度★☆☆》JavaScriptでの四則演算をはじめ基礎的な計算を使うスキルを試します。querySelectorやイベントリスナーについてはステージ#1の復習になるでしょう。

【ステージ#3】 乱数と色指定に関するプログラミング問題

《難易度★★☆》JavaScriptによるスタイルの書き換えを試すプログラミング問題です。乱数と色指定を扱いますが、RGBだけでなくHSLによる色指定も含みます。

【ステージ#4】 繰り返しと条件分岐に関するプログラミング問題

《難易度★★☆》for文による反復処理、if分による条件分岐処理の基礎的な理解とスキルを試すプログラミング問題です。また、canvasを使ったグラフィックの描画も扱います。

【ステージ#5】 三角関数の活用に関するプログラミング問題

《難易度★★★》三角関数を使って「円形に並べる」プログラミング問題です。関数を少しずつ変更することで、楕円や螺旋などの形も作れるようになります。

【ステージ#6】 マウス操作に関するプログラミング問題

《難易度★★★》マウスに反応した動作をさせるスキルを試すプログラミング問題です。あわせて一定時間ごとに処理させることによるアニメーションも扱います。

【ステージ#7】 ゲーム作りに関するプログラミング問題

《難易度★★★》さまざまなテクニックを組み合わせて簡単なゲームを作るスキルを試すプログラミング問題です。

プログラミング問題集の構成 

1ステージごとに3問の問題が用意されています。各ステージごとにすでにベースになる要素や背景を作るためのHTMLやCSS、また途中までですがJavaScriptが書いてあります。

各問題ごとに「解説(発想のしかた)」が書いてあります。これが重要です。単に解答例を覚えるだけでは、その後の応用が効きません。


プログラミング問題集の使い方

どの問題もCodePenを利用して掲載されています。これを上手に使うことで、問題のHTML,CSS,JavaScriptに自分のコードを追加し、何度でも実行結果を確認することができます。


なぜ、プログラミング問題集が必要なのか?

初心者は「お題」を求めてる!

作りたいものがあって初めてプログラミングは上達する、とよくいいますが、実は明確に作りたいものがある人のほうが少ないようです。むしろ誰かが「お題」を提示してくれた方がチャレンジをする意欲が出てくるのです。問題集はまさにそのようなニーズに応えるものです。


プログラミング問題集ならゼロから書くよりは断然取り組みやすい

プログラミング上達のコツは、人の書いたコードを真似すること、それから少しだけそれを変更して実行結果がどう変化するかを楽しみながら学ぶこと。そういうとき普通は書籍に書いてあるコードを自分ですべて入力し直す必要があります。これはこれで勉強になるのですが、なかなかハードルが高いものです。

このプログラミング問題集では、あらかじめCodePenに必要なHTML,CSS,JavaScriptのベースが用意されているので、問題を解くために自分のJavaScriptを書くことに集中できるのです。