スマホで始めるプログラミング
初心者向けのプログラミング学習のアプリです。スマホで使用できます。プログラミング学習をタイピングゲームで行えます。
プログラミング学習の進め方
二章で構成しています。第一章の(1)~(20)の項ではプログラミングの基礎について学びます。第二章の(21)~(27)の項ではカップ麺タイマーを作ります。
各ミッションの画面の見方は次の通りです。

- (1)はミッションのナンバーです。
- (2)はタイトルです。
- (3)は攻略者のリストです。
- (4)は書式などの説明です。
- (5)は課題のプログラムのソースです。
- (6)は判定エリアです。
- (7)は現在記入しているプログラムです。
- (8)はスタートボタンです。
- (9)はスマホ用のキーボードです。
- (10)は制限時間です。
- (11)は実行結果の表示エリアです。
ミッションを攻略すると次のように画面が変わります。(11)の実行結果の表示エリアに、記述したプログラムの実行結果が表示されます。

ミッションに失敗すると次のように画面が変わります。そのままの状態で再挑戦できます。

これから作成するプログラム
カップ麺の出来上がりを知らせてくれるアプリ『カップ麺タイマー』を作ります。
完成まで 03:00:000 |
![]() |
![]() |
第一章
プログラミングの基礎を学ぶ
第一章ではプログラミングの基礎について学びます。最初のミッションは『ページに文字を書き出す』です。リファレンスにはその項目で重要になる知識や考え方が書かれています。
Mission1
ページに文字を書き出す

ページに文字を書き出します。
ページに文字を書くにはdocument.write("☆");を使います。
☆の部分に書きたいことを記入します。
document.write("おはよう");
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
プログラムの実行結果が表示されます。
実行結果の欄に「成功」と出ればミッションクリアです。下のリンクは第一章で勉強する残りの19項目です。新しいページが開きます。続けて課題を攻略して行きましょう。
- 半角文字で記述
- 文字列の作り方
- 変数とは?
- 文字列の連結の仕方
- 計算式の使い方
- 配列とは?
- 乱数を生成する
- 配列の要素数の調べ方
- 条件による処理の分け方
- 繰り返し処理の仕方
- for文のiとは?
- 関数の作り方
- webページの作り方
- <div>タグの書き方
- ページの内容を書き換えるには?
- 画像を表示させるには?
- 画像を張り替える
- ボタンの作り方
- ボタンを押して関数を実行する
第二章
カップ麺タイマーを作ろう!
第二章では基礎学習を基に実際にアプリを作ります。下のリンクは第二章で勉強する7項目です。
プログラムのサンプル集
趣味のプログラミングでもちょっとしたアイデアで誰かが使ってくれるようなアプリが作れます。このページもその一つです。