早押しゲームをプレイする。
たいしたゲームじゃありませんが、ちょっと興味のある方はコチラからプレイしてみてください。
リスタートボタンは作っていないので、繰り返しプレイするときは、「F5」とかでリロードしていただけたら・・・とm(_ _)m
プログラミングが高度な技術だという錯覚はなぜ生まれるのか
ボクのプログラミングチャンネル(YouTube)の中のシリーズで「JavaScript」を扱ったものがあります。
このシリーズは、未経験者でもテトリス程度のゲームは自作できるようになるというのをコンセプトとしています。しかも、一か月もあれば期間的には十分だと思っていたりします。
動画シリーズへのリンクはコチラ
プログラミングに触れたことのない人は「そんなの無理だ」と思うかもしれませんが、実はプログラミングなんてその程度の簡単なものなんです。
プログラミングをすでにできる人の中には、それをさも難しいことであるかのように、自分はすごいんだと言わんばかりに語る人がいます。あるいはきちんと理解できていない人が、スクールの講師として教えていたりするから、そうすると本来シンプルで簡単なプログラミングが、難しいこととして世に広まってしまったりします。
ちょっと余談ですが、これは学校や学習塾なんかでも同じことが言えますね。勉強って難しいものだと思っていませんか。教える人間がよくわかっていないままに指導するとこういう不幸の連鎖が生まれます。そう、これは連鎖するんですね。モグリの指導者に学んだ生徒が成長して指導者になれば、これはかなりの確率でモグリの指導者になります。
大事なのは、正しく学ぶことなのです。
JavaScript入門シリーズ
この記事では、ボクのJavaScritシリーズ第６話で作った「早押しゲーム」のコードを公開しています。
動画と合わせて、コードの確認などプログラミング学習に役立てていただきたいと思っています。
このコードは「HTML」ファイル内に直接スクリプトを記述していますので、PCの適当な場所(どこでもいいです)にカラの「.html」ファイルを新規作成していただいて、そこに以下のコードを貼り付け＆保存してもらえれば、ブラウザ上で動作します(・・・するはずです)。ブラウザを立ち上げて、ブラウザウインドウ上にドラッグ＆ドロップでもしてやってください。
そのあたりの実演は、このシリーズ動画「第１話」をご覧いただくとイイです。
動画シリーズへのリンクはコチラ
ただし・・・たいしたゲームではありません。
プログラミングの学習用ですから。
<!DOCTYPE html> <!-- 最新バージョンのHTMLですよという宣言 -->
<html lang="ja"> <!-- ここからHTML要素 -->
<head> <!-- ここからHTML要素の中のhead要素 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fast Hit</title>
<style> /* styleを要素として書くときはhead要素の中に書く */
#startButton{ /* idで指定するときは「#+id」 */
width: 250px;
height: 40px;
font-size: 25px;
color: blue;
}
button{ /* タグでの指定は何もつけずにタグ名 */
width: 50px;
height: 50px;
font-size: 30px;
}
</style>
</head>
<body> <!-- ここからHTML要素の中のbody要素 -->
<div style="font-size:40px; color:gold; "> <!-- ゲームのタイトル -->
Fast Hit !!!
</div>
<div id="field"> <!-- 各種ボタンを配置する「field」という名のid -->
<button id="startButton" onClick="start()">START</button> <!-- スタートボタンを設置 -->
</div>
<script> // ここからHTML要素内の、body要素内の、script要素
let arrayChoice = []; // 5つの数(問題)を格納する配列
let startTime; // ゲーム開始時刻を格納する変数
// スタートボタンクリックで呼び出される関数(イベントハンドラー)
function start(){
document.getElementsByTagName("button")[0].remove(); // スタートボタン削除
for (let i=0; i<5; i++){ // 整数2桁の乱数を5回発生させて格納するforループ
let num = Math.floor(Math.random()*90)+10;
arrayChoice.push(num);
}
for (let i=0; i<5; i++){ // 格納した整数で5つのボタンを設置するforループ
let newBtn = document.createElement("button"); // 新しいbuttonエレメントを作るオブジェクトを宣言(ここではnewBtn)
newBtn.textContent = arrayChoice[i]; // newBtnのtextContentプロパティにarrayChoiceに格納した整数を設定
newBtn.onclick = btnClick; // newBtnのonclickプロパティにbtnClick関数を設定
field.appendChild(newBtn); // field内に新しいbuttonエレメント(newBtn)を設置する
}
arrayChoice.sort();
startTime = new Date();
}
// 数字ボタンクリック時のイベントハンドラー
function btnClick(e){ // 引数eは発生したイベントオブジェクト(慣習的にeventの「e」を使う)
let pushNum = e.target.textContent; // e.targetでイベントオブジェクトの要素を取得(ここでは更にその中のtextContentを取得)
if (pushNum!=arrayChoice[0]){ // イベント発生ボタンのtextContentが最も小さい数でなければ
return; // returnで何もせずに関数を抜ける
}
e.target.style.backgroundColor = "gray"; // 最小数字と一致ならボタン色を灰色に変更
arrayChoice.splice(0,1); // さらに最小値の整数を削除(これで2番目だった値が最小値となる)
if (arrayChoice.length==0){ // 整数を格納しているarrayChoiceがカラになればゲームクリアなので、以下その処理
let now = new Date();
let clearTime = (now-startTime)/1000;
window.alert("おめでとう\n" + clearTime + "秒でクリア");
}
}
</script>
</body>
</html>JavaScriptとは
せっかくなので、JavaScriptについて簡単に紹介しておきますね。
JavaScript最大の特徴
JavaScriptは、Webブラウザ上で動作するプログラミング言語です。Webページをつくるには、HTMLでマークアップして、CSSで装飾を施すというやり方をしますが、それだけでは文字と画像をただ表示するだけのつまらないページになってしまいそうですよね。
そこでJavaScriptの出番となります。JavaScriptを用いることで、画像や文字に拡大や縮小などの動きをつけたり、ユーザーからの入力を受け付けたりと、様々な動きをつけることができます。
それらの動作をブラウザ上で・・・というところがJavaScriptの最大の特徴で、他の言語と大きく異なる部分です。もう少し正しく言うと、現在PCを購入するとたいがいは何らかのブラウザが入ってますよね。で、そのブラウザにはどれにでもJavaScriptが既に組み込まれている・・・ということなんです。JavaScript以外の言語でもWebページに動きをつけることはできますが、それはサーバー側にその言語がインストールされていたり、あるいはその言語をインストールしてあるマシンでのみ動作するというような形で、JavaScriptとは根本的に動作の仕組みが違うんですね。
つまり・・・プログラミング学習という点でいうと、JavaScriptはとってもお手軽に始められる言語なんですね。
JavaScriptはどんな場面で使われているの？
JavaScriptは主にWebシステムの構築に用いられます。
ユーザーが見ているWebコンテンツに動きをつけたり、入力情報をチェックしたり、Webブラウザ上とWebサービスとを結びつけるフロントエンド言語として使われます。
ちなみに、サーバー側での処理・・・ユーザーの目に触れない(？)裏側での処理系統はバックエンドと呼ばれます。多分、フロントエンドを処理する言語って、JavaScriptだけです。だからかつては、フロントエンド＝JavaScript って感じだったんですけど、今ではなんだかJavaScriptでバックエンドの処理もやっちまうんだとか。
ますます無敵の「JavaScript」。
JavaScriptとJavaは違う言語ですよ
名前は似ていますが、JavaScriptとJavaは全く異なるプログラミング言語です。開発者も全くの別です。つまり、この２つの言語には何ら関係はありません。
というか、JavaScriptって正式にはECMAScriptって言います。
小耳にはさんだ話では、当時大流行の波に乗っていた「Java」にあやかって「JavaScript」と名乗ったんだとか。
働き・・・というか得意分野も全く異なっていて、主にWebページ上でのプログラムを開発するJavaScriptに対し、Javaは業務システムやスマートフォン向けアプリなど、環境に依存しないプログラムを開発することに用いられます。また、JavaScriptはコンパイル不要ですが、Javaは実行するのにコンパイルが必要です。
JavaScriptはなぜ人気なのか
もはや今では、Webシステムを開発するための言語はJavaScript一択なんですね。だから、この点でそもそも他の選択肢はありません。
そしてさらに、JavaScriptは開発環境の構築がほぼ不要なんですね。これはさっき話した「ブラウザに組み込まれている」から。こういう言語は他にはありません。もし、プログラミングを勉強しようと思ったら、準備不要ですぐに始められるという手軽さなのです。
今、この記事を読んでいて、始めてみようと思った方は、まずボクの動画を見てみましょうm(_ _)m
PCだけあれば、準備は不要です。
そしてね。
ここは重要なところなんですが、一旦バズッたプログラミング言語は・・・強いんです。
今やJavaScriptは世界中で多くの人に利用されています。フロントエンド開発に他の手段がないんだからそりゃ当然です。かつては他にも選択肢はあったのですが、時代の流れとともに淘汰されていきました。
で、まぁ・・・いずれにしても、利用者が増えれば情報も増える。何かわからないことが出てきてもググればたいがい答えが出てきます。言語的に優れているかどうかは別として、利用者が多いことはそれ自体が大きなメリットになるんですね。優れたライブラリーなんかもどんどん開発されていきますし・・・。
まさに。
勝てば官軍なんですね。
JavaScriptが苦手とするもの
JavaScriptがあんまり無敵の言語みたいに伝わるといけないので、JavaScriptでの開発が難しいものについても書いておきますね。
まぁ、Webブラウザを介さないアプリケーションや業務システムの開発には向きません。大規模なシステム開発なんかはむしろJavaですかね。もはや化石のような言語だけれど、ボクたちの周りは、すでにいたるところでJavaが働いてますからね。これを根こそぎ置き換えるのは中々難しいし、時間もかかりますね。
でもね。
ともかく、今からプログラミング学習を始めようという人には、そういうの関係ないです。
どの言語から始めるのがいいですか？
と問われれば、ボクは・・・・
「なんでもいいです。」
ときっぱり答えます。
まずは、コード実行の順序を制御する構文とか、学習のスタートはそういうところからです。正直、どの言語でもたいして変わりやしません。
結論です
ボクは、JavaScriptからの回し者ではないけれど、何も準備がいらないのだから、軽い気持ちで初めてみて、ダメならやめればいいだけじゃん。
そんな風に思います。
もちろん、他の言語でもいいんですよ。
※ボクのプログラミングチャンネルでは、他の言語を扱った動画もありますよ。