この記事の要点
- JavaScriptは、記述したものを直接読み込んで動かす「インプリタ型言語」
- Webサイトに動きを加えたり、ゲームを開発したり、動的な処理を中心に使われている
- 学習と共に自身で実際にゲームやツールを作ってみると言語の習得が早くなる
JavaScriptという言語は、汎用性の高いプログラミング言語として世界中で使われています。
しかし、プログラミング言語を学び始めた初心者の方からすると「JavaScriptの仕組みが今一つ理解できない」「どのようなものが作れるのかイメージしにくい」と感じている人も多いのではないでしょうか。
学習を効率よく進めるためには、実際にどのようなゲームやツールが作れるのかを見ることが重要です。
本記事では、初心者でも動画を見ながら作れるJavaScriptのゲームやツールを紹介していきます。
また、JavaScriptの基本的な知識や記述方法も解説しています。ぜひ参考にしてみてください。
目次
JavaScriptとは
JavaScriptとは、ホームページなどに様々な動きや機能を追加できるプログラミング言語の一種です。
JavaScriptは、サーバーでの処理を行わなくてもブラウザ上で処理できるのが特徴です。
また、私たちの身近なところでもよく使われており、たとえばユーザー登録の際にメールアドレスが正確に入力されているかを調べたり、ページ遷移の際にローディング画像を表示したり、幅広い処理を行えます。
JavaScriptの強みとできること
JavaScriptは、サーバー側での処理とフロントサイドでの処理どちらも行えるのも特徴です。
汎用性が高いため多くの人が利用しており、Webサイトに動きを加えたり、ゲームを開発したり、様々な目的で使われています。
サーバーサイドでできること
JavaScriptは、端末側とサーバー側のプログラムをどちらも操作することで便利な仕組みを構築できます。
たとえば、フォームに郵便番号を入力してジュ所を自動で表示させたり、検索窓に文字や単語を入力して検索候補を一覧として表示させたり、私たちが日常的に使っている機能を作ることも可能です。
フロントサイドでできること
JavaScriptは、Webサイトに動的な要素を追加することもできます。
たとえば、画像のスライドショーを一定間隔の秒数で表示させたり、フォーム画面においてリアルタイムに入力エラーの画面を表示させたり、Webサイト上でよく見られる動きはJavaScriptを駆使して作られているケースがほとんどです。
Webサイトに動きやアクションがあることで、ユーザーの視認性を高められる、伝えたい情報が目に留まりやすくなる等の効果があるため、Webサイトに動的な要素を追加する企業は多いです。
押さえておきたいJavaScriptの基本の記述方法
JavaScriptは、記述したものを直接読み込んで動かす「インプリタ型言語」の一つです。
基本的には、下記の例のようにscriptタグの中に記述します。
(例)
<script> // ここに処理内容を記述する </script>
また、ファイルを読み込む際には、scriptタグにsrc属性をつけてその間にファイルのパスを記述します。
JavaScriptのファイルの拡張子は「js」です。
(例)
<script src=”ファイル名.js”></script>
JavaScriptの記述する場所は、「head要素の中」「body要素の中」「bodyタグの閉じタグの直前」など、HTML中のどの場所で書いても問題ありません。
ただし、コーティング作業を共同で行うことや他人から見て視認性が高い状態にするために、「bodyタグの閉じタグの直前」に記述するのが暗黙のルール・作法となっています。
動画を見ながら初心者でも作れるJavaScriptゲームやツール
ここでは、JavaScriptで開発したプログラムの例を紹介します。
テトリス
最初に紹介するのは「テトリス」です。
テトリスを作る工程・手順は、下記のとおりです。
- クラス名・変数名を付ける
- ブロックとフィールドを記述する
- テトラミノの回転の処理を記述する(右回転・左回転)
- ゲームロジックを作る
- テトラミノとフィールドの衝突判定
- テトラミノの落下・回転の処理を記述する
- 消去判定の処理を記述する
ポイントは、処理を記述する際の関数を最低限にすることです。
また、JavaScriptの知識はもちろん、数学や物理の基本的な知識(衝突や落下など)も必要となります。
1度聞いた後にすぐに同じように作るのは難しいので、動画の解説を繰り返し聞いて、理解を深めていきましょう。
占いゲーム
次に紹介するのは「占いゲーム」です。
占いゲームを作る工程・手順は、下記のとおりです。
- コードを記載する準備を行う(index.htmlの作成やVScodeの準備)
- htmlの作成(占いゲームの大枠、表示される文字などの記述)
- cssの記述(色や表示位置の調整、ボタンの設定など)
注意点としては、コードを記述しつつも、保存とブラウザ上での確認も併せて行う点です。
タイピングミスなどできちんと反映されないこともあるので、ある程度記述したら確認しましょう。
htmlとcssで見た目を整えたらJavaScriptで動きを加えていきます。
コードは何回も繰り返し記述する中で、コードの意味や仕組みが理解できるようになります。
動画を参照しながら、自身でも記述していきましょう。
〇×ゲーム
よくある〇×ゲームも、JavaScriptで作れます。
〇×ゲームを実装するために、必要となる主な要素は下記のとおりです。
- 3×3のマス目
- 「〇の番！」「×の番！」の表示
- クリックすると〇 が表示される仕組み
- マス目に〇が入ったら「×の番！」という表示に切り替わる仕組み
- マス目に×が入ったら「〇の番！」という表示に切り替わる仕組み
- 三つ並んだら「〇(×)の勝ち！」という表示が出るようにする
- 「もう一度遊ぶ」をクリックすると入力した〇 or ×がリセットされる仕組み
ゲームを実装するためには、コードを記述する前に「ゲームを実現するためにどんな表示や要素が必要になるのか」「どのように動かしたいのか」など、詳細に設計する必要があります。
この動画ではゲームを構成に必要となる要素を分かりやすく解説しているので、ぜひ参考にしてみてください。
JavaScriptのおすすめ学習方法
JavaScriptを学ぶ方法は非常に多いですが、大きく書籍か学習サイトに分けられます。
ここでは、JavaScriptを学ぶためにおすすめの書籍や学習サイトを紹介します。
しまぶーのIT大学
はじめに紹介するのは「しまぶーのIT大学」です。
「しまぶーのIT大学」とは、Yahoo! JAPAN出身のエンジニアであるしまぶーさんが、初心者向けにプログラミング言語を教える講座です。
非常に分かりやすく解説で人気があり、動画を参照しながら自身でコードを記述することができます。
#今日の積み上げ
プログラミング学習52日目✅しまぶーさん(@shimabu_it )のYouTube JS
✅忍者CODEさん(@ninjacodeee )のJS 中級編しまぶーさんの動画見てから中級編やったら昨日よりも理解できました！
この動画めっちゃオススメです✋#駆け出しエンジニアとつながりたい #プログラミング学習— さとし@Reactエンジニア (@nskwsatoshi_061) April 3, 2020
実際にこのような口コミがTwitter上でたくさんあり、主にIT初心者が学習で利用することが多いです。
3ステップでしっかり学ぶJavaScript入門
次に紹介するのは「3ステップでしっかり学ぶJavaScript入門」です。
「3ステップでしっかり学ぶJavaScript入門」はフルーカラーで図やイラストが豊富なのが特徴です。
「予習」→「実践」→「復習」の3ステップでJavaScriptの基礎を徹底して学べます。
また通勤時間など、隙間時間での学習にも適しているでしょう。
確かな力が身につくJavaScript「超」入門 第2版
最後に紹介するのは、「確かな力が身につくJavaScript「超」入門 第2版」です。
「確かな力が身につくJavaScript「超」入門 第2版」は、JavaScriptのサンプルコードが豊富に紹介されている書籍です。
本を参照しながらコードの記述を行ったり、解説を参考にしたり、使い勝手の良い1冊だと言えます。
まとめ
今回は、JavaScriptで作れるゲームやツールについて詳しく解説しました。
JavaScriptを学ぶには基礎的な学習も大切ですが、学習と共に自身で実際にゲームやツールを作ってみると言語の習得が早くなります。
インプットとアウトプットを相互に繰り返しながら、JavaScriptの習得に励んでみてください。
そして、JavaScriptを習得したら、どのような案件をどのくらいの相場で受けられるのか気になる方もいるかもしれません。
学習した先に、どのような案件があるのかイメージできていれば、効率よく技術を習得できますね。
