実はプログラミング初心者でも少ない準備で「今すぐゲーム開発を始める」効率的な学習方法があります!

プログラミング学習者プログラミング学習者

プログラミングでゲームを作りたいけど、難しそう

プログラミング志望者プログラミング志望者

プログラミングでゲームを作りたいけど、特に作りたいものがない

というお悩みはありませんか?

この記事では現役プログラマーが、JavaScriptを使ったゲーム制作を始めるための

  • 効率的な学習方法
  • 目標成果物の見つけ方

をご紹介します。

4分くらいで読めますし、ゲーム制作を開始するまでの効率的な学習方法を習得できますので、まずはご一読を!



作りたいゲームはつくれる?JavaScriptを徹底解説

作りたいゲームはつくれる?JavaScriptを徹底解説
「プログラミングでゲームを制作したい!でも使用言語は本当にJavaScriptで大丈夫なのかな」と悩んでいませんか?

実はJavaScriptの特徴がしっかり掴めれば学習前の不安を解決できます!

この章では、JavaScriptの性質・特徴から制作できるゲームまで幅広くご紹介します。

そもそもJavaScriptとは?

JavaScriptは、Webサイトに動作をつけるためのプログラミング言語です。

JavaScriptを使用することで、「文章や写真だけのシンプルなWebサイト」から「動きのあるWebサイト」へ変化させることが可能です

具体的には

  • ユーザーのアクションに応じたコンテンツの表示
  • 地図やアニメーションの表示
  • 画像の拡大表示

です。

したがって、JavaScriptはWebサイトのデザイン性・利便性・快適さを向上させます。

JavaScriptでできること

JavaScriptを使用してプログラミングすることで、

  • スマホアプリ(iOS・Android用)
  • ゲーム
  • Webアプリ
  • Webサイト
  • Webブラウザ(Chrome・Firefox)の拡張機能

を開発できます。

JavaScript VS C系統言語 どちらを選ぶべき?

JavaScript、C系言語どちらの言語を選ぶべきかは、制作したいゲームの種類によって変わります。

  • JavaScriptはブラウザゲーム開発
  • C系統の言語はコンシューマーゲーム開発

でよく使われます。

JavaScriptC#C++
制作物
  • ブラウザゲーム(フロント部分)
  • スマホゲーム(Android / iOS)
  • 家庭用ゲーム
  • PCゲーム
  • ブラウザゲーム
  • スマホゲーム(Android / iOS)
  • ソーシャルゲーム
  • 家庭用ゲーム
  • PCゲーム
  • アーケードゲーム
  • ソーシャルゲーム
    学習難易度★★★ 易しい★★☆ やや難☆☆☆ 難
    JavaScriptは難易度が比較的低く学びやすい言語です。

    したがって、

    • プログラミングで今すぐゲームを作りたい
    • ブラウザ上で動くゲームが作りたい

    におすすめ。

    一方、C系統の言語は難易度が高く初心者には少しハードで家庭用ゲーム機などの大規模開発に最適な言語です。

    エンジニアエンジニア

    ですので「時間がかかってもコンシューマーゲームを作りたい!」という目標がある方におすすめです。

    JavaScriptでプログラムされたゲーム例

    JavaScriptを使用して制作されたゲームは、

    • シューティングゲーム
    • アクションゲーム
    • RPGゲーム
    • テトリス
    • ブロック崩しゲーム
    • <2Dゲーム
    • タイピングゲーム

    以上のような事例があります。

    JavaScriptでゲームを制作する3つのメリット

    JavaScriptでゲームを制作するメリット

    JavaScriptでゲームを制作することで、どのようなメリットがあるのでしょうか。

    JavaScriptでなくてもいいのでは?と感じる方もいると思いますが、

    実は初心者こそ大きなメリットを得られます!

    この章では、JavaScriptでゲームを制作することで得られるメリットを3つご紹介します。

    1. プログラミングの専用ソフトが必要ない

    JavaScriptは、プログラミングの環境構築が非常に簡単で面倒な準備が一切ありません。

    他の言語と異なり専用ソフトをインストール・ダウンロードする必要がなく、テキストエディタとWebブラウザの2点さえ準備すればよいためです。

    したがって、JavaScriptは他言語と比べて初心者でも環境構築で挫折することなく簡単に環境を構築できます。

    2. 解決方法を見つけやすい

    JavaScriptは、世界的にメジャーな言語のため情報が豊富でトラブルの解決方法を見つけることが比較的簡単です。

    世界中のエンジニアが初心者向けのトラブルシューティングサイト・ブログを無料で公開しているほか、オンライン上での学習環境も充実しているためです。

    例えばコードでエラーメッセージが現れた場合、「JavaScript␣エラーメッセージ」でGoogle検索をおこなえばトラブルシューティングサイト・ブログを多数発見できます。

    したがって、疑問が生じたとき公開された情報から疑問を簡単に解消できます。

    3. 言語の難易度が比較的易しい

    JavaScriptは、他の言語に比べて言語の難易度が低いです。

    難易度が低い理由は、

    • プログラムの基本文法が、他のプログラミング言語と重なる部分が多いため
    • プログラムの構文がシンプルなため

    です。

    例えばコンピュータへ命令を出すとき、JavaScruptでは命令を順番に記述するだけなのでシンプルな文法・記述で操作できます。

    一方、C系統の言語ではソースコードを、関連するデータごとにまとめる必要があり複雑です。

    したがって、JavaScruptは複雑な構文を書く必要がないため覚えることも少なく難易度が易しいです。

    JavaScriptでゲームを制作するまでの学習ステップ

    JavaScriptでゲームを制作するまでの学習ステップ
    この章では、JavaScriptでゲームを制作するまでの学習ステップについてご紹介します。

    プログラミングジャパンプログラミングジャパン

    ご紹介する学習方法は、「ゲーム制作を開始することに注力した学習方法」のためすぐにゲームを制作できるようになります

    学習の攻略方法を知り、効率的に学習しましょう!

    【ステップ①:エディタを準備する】

    JavaScriptを使うためには、エディタWebブラウザの2点が必要です。

    まずはエディタをインストールして準備します。

    エディタをインストールするべき理由は、インストールすると「プレビュー」や「校正」など便利な機能が使用可能となるためです。

    エンジニアエンジニア

    エディタは標準搭載されているメモ帳を使用しても問題ありませんが、インストールしたエディタを使用したほうが便利です。

    早速、インストールすべきおすすめのエディタをご紹介します。

    おすすめ①:Sublime Text

    おすすめ①:Sublime Text
    画像引用元:Sublime Text公式サイト

    Sublime Textは、世界中のWeb制作者に愛用されているエディタです。

    価格無償・有償あり
    対応Windows/mac/Linux
    サイトURLSublime Textダウンロードはこちら

    動作が軽いことから、ストレスを感じずサクサク操作できます。

    さらに

    • 機能やプラグインが豊富で自分好みのエディタにカスタマイズできる点
    • 操作画面の美しさ・デザイン性の高さ

    が多くのユーザーを魅了しています。

    おすすめ②:Visual Studio Code

    おすすめ②:Visual Studio Code
    画像引用元:Visual Studio Code公式サイト

    Visual Studio Codeとは、マイクロソフト社によって開発されたエディタです。

    価格無償
    対応OSWindows/mac/Linux
    サイトURLVisual Studio Codeダウンロードはこちら

    充実した拡張機能が完全無料で利用できる点が魅力です。

    具体的には、

    • ハイライト機能
    • 拡張機能
    • インテリセンス(コードの自動補完)機能
    • デバッグ機能

    があります。

    拡張機能は記述する際の負担を減らしてくれるほか、起動や動作も軽快なためストレスなく利用できます。

    おすすめ③:サクラエディタ

    おすすめ③:サクラエディタ
    画像引用元:サクラエディタ公式サイト

    サクラエディタとは、エンジニアの多くがインストールしているスタンダードなエディタです。

    価格無償
    対応OSWindows
    サイトURLサクラエディタ ダウンロードはこちら

    サクラエディタは機能が充実しており、使いやすさ・小回りの良さが評価されています。

    基本的な編集ならばサクラエディタで困ることはありません。

    【ステップ②:HTMLの基礎を学習する】

    JavaScriptはHTMLとの関連性が非常に強い言語です。

    そのため、学習教材などに記載された説明はHTMLやCSSの基礎知識を踏まえたうえで話が展開される傾向があります。

    プログラマー志望者プログラマー志望者

    今回の場合、自分でゴリゴリにコードを書けるほど勉強する必要はありませんが、意味を理解しているレベルは必要です。

    早速、具体的な学習方法・教材をご紹介します。

    おすすめの学習方法

    おすすめの学習は、1つの教材を素早く一通り流し見て理解する学習です。

    サンプル模写は模写であり、テストではありません。

    したがってコードを自力で書けるほどの深く学習する必要はなく、文法をみたときにどのような操作をしているのか口頭説明ができるまで1つの教材を何周も繰り返し確認しましょう。

    HTMLの文法を読んで意味が取れるレベルまでの学習が終わったら次のステップへ行きましょう。



    おすすめ教材①:Udemy

    おすすめ教材①:Udemy
    画像引用元:Udemy for Business公式サイト

    Udemyは、100,000以上の講座から自分好みの講義を購入してプログラミング・IT技術・ビジネスと幅広い学習ができるオンライン学習プラットフォームです。

    ◎こんな方におすすめ!

    • 要点がわからない方
    • 最初の方で学習が止まる方
    • 同じ単元をループしている方
    手を動かして学習すると膨大な時間がかかりますが、Udemyは講義を視聴しながら学習するため短い決まった時間内で効率よくHTMLの概要を理解できます。

    さらにプロにより厳選された知識を濃縮した講義は、要点をおさえた効率的な学習を可能にします。

    おすすめ教材②:しまぶーのIT大学

    元Yahoo! JAPANエンジニアのしまぶーさんが解説します。

    有料級動画を豊富に配信しています。

    実際の操作画面を映しながら非常にわかりやすい解説してくれるため、動画を視聴することでコードがどのような意味を持つのかを直感的に理解できます。
    プログラミングジャパンプログラミングジャパン

    「基礎からちゃんと学ぶ HTML入門!」は2020年にアップロードされており情報が新しいため、これから学習をはじめる方にも安心です。

    【ステップ③:JavaScriptの基礎を学習する】

    本格的なゲームを作成するための事前準備として基本的な文法知識を習得することは必須です。

    JavaScriptで特定の操作を実行したいと考えたとき、どんな文法を使うべきかが分かるレベルは必要です。

    早速、具体的な学習方法・教材をご紹介します。

    おすすめの学習方法

    おすすめの学習は、基礎文法とコードを書く練習を中心とした学習です。

    したがって、「文法を暗記するのでなく感覚的に覚えやすい」かつ「コードを書く練習がしやすい」学習教材を使うことをおすすめします。

    ある程度文法とコードの書き方を理解したら次のステップへ進みましょう。

    おすすめ教材①:Progate

    おすすめ教材①:Progate
    画像引用元:Progate公式サイト

    Progateは、Web上でプログラミングを学べる学習サイトです。

    スライドの解説から知識を習得したあと、実践問題に取り組み文法の意味・使い方を定着させるスタイルが特徴の学習教材です。

    学んだ内容を「理解→活用」することを章ごとに繰り返すため基礎文法が自然と身に付きます。

    おすすめ教材②:キノコード/プログラミング学習チャンネル

    わかりやすく美しい解説が特徴的なYoutubeチャンネルです。

    プログラミングジャパンプログラミングジャパン

    初心者がコードを書きやすいように工夫されています。

    開発環境の準備から解説があるため、初心者が陥りがちな問題・挫折の心配もありません。

    動画内では「演算子・条件分岐・繰り返し」というサンプル模写で重要となる基礎文法を図解で丁寧に解説してくれます。

    【ステップ④:サンプル模写をして初心者でも本格ゲームを制作!】

      ステップ1~3の学習が完了したら、早速サンプル模写をして本格ゲームの制作をはじめます。

      サンプルとは?

      サンプルとは制作物をつくるためのプログラミングレシピです。

      したがってシューティングゲームを作りたい場合、サンプルにはシューティングゲームを作るために必要な手順とプログラミング方法が記載されています。

      サンプル模写を通して

      • 短期間での本格的なゲーム制作
      • ゲーム制作におけるJavaScriptの基礎的なコードの構成要素・考え方の学習

      ができます。

      基礎文法を理解し少し発展した制作に挑戦したい方にオススメです。

      サンプル模写とは?方法と得られるメリット

      サンプル模写の方法は、ひたすら「サンプルを書き写す→画面を確認する→訂正する」を繰り返します。

      サンプル模写によって考え方や動作方法を理解することで、ひとりでゼロからゲームを制作するときに必要な考え方・要素を習得できるメリットがあります。

      本当に初心者でも本格ゲームが作れるのか?

      初心者でも本格的なゲームが作れます。

      理由は、サンプルをなぞるだけで実装できるためです。

      ゼロからゲームの構成を考えてコードを書きおこすことは、初心者にとって非常に難しいことです。

      しかし、サンプル模写では設計・コードがあらかじめ用意されているため模写するだけで簡単にゲームが作れます。

      プログラミングをはじめるなら
      スマホアプリ開発』が未経験者にはおすすめ!
      その理由をLINE@で配信しています。

      厳選9選!JavaScriptの良質サンプルが手に入る情報源まとめ

      おまけ:厳選9選!JavaScriptの良質サンプルが手に入る情報源まとめ

      「いざ、サンプル模写をはじめよう!」と思ってもサンプルの情報量が多すぎてどれが良質なのか分からないとお悩みではありませんか?。

      この章では、JavaScriptの良質サンプルが手に入る情報源を9つご紹介します。

      厳選5選!おすすめYoutubeチャンネル

      Youtubeはサンプルの宝庫です。

      「JavaScript ゲーム」または「JavaScript game」で検索すると日本だけでなく世界中のサンプルを無料で収集できます。

      しかし、難易度も動画ごとに異なるほかサンプルにエラーが生じる場合もあります。

      動画のサンプルを実装する前にコメント欄からサンプルの難易度・信頼できるものかを確認することをおすすめします。

      おすすめYoutubeチャンネル①:Akichonプログラミング講座

      レトロゲームの作り方をプログラミング実況してくれるチュートリアル動画です。

      難易度★★★★☆ 易
      作成できるゲーム
      • シューティングゲーム
      • 神経衰弱
      • テトリス
      • マリオのキャラクター描画

      パソコン初心者の方にも解るように、

      • ファイルの作成方法から解説
      • よく使う要素や覚えておくべきポイントについて強調して解説

      するなどの工夫があるためサンプル模写がしやすいです。

      方針の提示・確認を細かく行ってくれるため、「どこで模写を間違えたのかわからない」という現象も起こりにくい特徴があります。

      おすすめYoutubeチャンネル②:T Umezawa

      ファミコン風ゲームの作り方をプログラミング実況してくれるチュートリアル動画です。

      難易度★★☆☆☆ やや難
      作成できるゲーム
      • ブロック崩し
      • シューティングゲーム
      • 避けゲーム
      • RPG

      制作に必要な要素(画像やコード)が一式まるまる用意してあるため、ダウンロードのみで本格的なゲームを制作できます。

      難易度は若干高めですが、実践的なゲームロジックを学習できます。

      おすすめYoutubeチャンネル③:JavaScript Fun

      初心者でもわかりやすい非常に丁寧な解説が魅力です。

      • ゲーム画面の準備
      • 概要欄にサンプルが掲載されている

      ように、初心者にとってサンプル模写しやすい工夫がいたるところにちりばめられています。

      おすすめYoutubeチャンネル④:直也テック

      海外で公開されているサンプルを、ユーモアあふれるチャンネル主「直也さん」がプログラミング実況してくれるチュートリアル動画です。

      難易度★★★★★ 易
      作成できるゲーム
      • バイクゲーム
      • ピンポンゲーム
      • ブロック崩しゲーム
      • ノベルゲーム
      • 動体視力テスト

      途中、数学の話もでてきますがわかりやすい図解や補充説明があるため数学の得意・不得意に関係なくバイクゲームを制作できます。

      おすすめYoutubeチャンネル⑤:ゲヱム道館Gamedokan

      誰もがきいたことのある超人気ゲームの作り方を、プログラミング実況しながら攻略していくゲーム制作のたのしさを実感できるチュートリアル動画です。

      難易度☆☆☆☆☆ 難
      作成できるゲーム
      • パックマン
      • ドラクエ
      • パズドラ
      • オセロ

      視聴者と同時進行で攻略していくため、効率的かつ美しいコードを模写することには適していません

      ある程度学習がすすんでから視聴することで、自分で考えたコードの答え合わせをする感覚でサンプル模写ができるでしょう。

      厳選2選!おすすめオンライン講座

      「ドットインストール JavaScript ゲーム」というように「学習サイト名␣JavaScript␣ゲーム」でGoogle検索することで、サイト内のゲームサンプルを入手できます。

      • 基礎的な文法から説明してくれる点
      • サンプルコードにミスが少ない点

      から人気があります。

      無償版と有償版があるため注意しましょう。

      以下の記事では無料学習サイトを解説しているため、「学習サイト名」にお悩みの方は以下記事を参考にすることをおすすめします!

      【独学もok】無料でアプリ開発が学べるプログラミング学習サイト比較【5選】

      おすすめオンライン講座①:ドットインストール

      ①ドットインストール
      画像引用元:ドットインストール公式サイト

      ドットインストールは、3分ほどの短い動画を複数本まとめたオンライン講座です。

      難易度★★★★☆ 易
      作成できるゲーム
      • 神経衰弱
      • ビンゴゲーム
      • タイピングゲーム
      • ピンポンゲーム
      • 宝探しゲーム
      • ハイアンドローゲーム(カードゲーム)
      • スロットマシン
      • 迷路

      一本あたりの動画時間が短いため、隙間時間でコツコツゲームを開発できます。

      またゲームサンプルの種類がかなり豊富で、単純なゲームから複雑なゲームまで幅広いジャンルを扱っており初心者でも楽しんでゲーム制作ができます。



      おすすめオンライン講座②:Schoo

      ②Schoo
      画像引用元:Schoo公式サイト

      Schooはラジオのように毎日、現役エンジニアによる授業・講座を生配信しているオンライン講座です。

      難易度★★★★☆ 易
      作成できるゲーム
      • スロットアプリ
      • 性格診断ゲーム
      • タイピングゲーム
      • 写真共有アプリ

      生放送の授業では、

      • チャットで先生に質問する
      • 受講者どうしでチャット交流
      • 議論

      ができるため、程よい緊張感の中で人と一緒に学習できる環境が整っています。



      厳選2選!おすすめ書籍

      書籍にサンプルコードが記載されているため書籍を購入するだけでサンプルが入手できます。

      例えば、「ゲームで学ぶJavaScrupt入門」では1冊購入することで13本のサンプルが手に入ります。

      サンプルは書籍に基づいたプログラミングがされているため一貫性がありおすすめです。

      書籍を手に取り、書かれたプログラムが自分にとってわかりやすいかを確認したうえで購入しましょう。

      おすすめ書籍①:ゲームで学ぶJavaScript入門

      ゲームで学ぶJavaScript入門は、「より面白く」「見栄え良く」をモットーにしたシンプルでわかりやすいゲームプログラミングが学習できる書籍です。

      難易度★★☆☆☆ やや難 
      作成できるゲーム
      • パズルゲーム
      • ダンジョンゲーム
      • アクションゲーム
      • クイズゲーム

      書籍にはサンプル13本が記載されており、様々なタイプのゲームを作ることでゲーム制作の基本的な考え方がしっかり身につきます。

      おすすめ書籍②:14歳からはじめるHTML5 & JavaScript

      「14歳からはじめるHTML5 & JavaScript」では、HTMLの学習経験が浅い初心者に向けて書かれたイラストが豊富な学習書です。

      ◎初心者にとって理解しやすい理由

      • 専門用語に読み方がふってある
      • HTMLやJavaScriptの書き方の学習から開始できる
      難易度
      ★★★☆☆ 普通
      作成できるゲーム
      • シルクハット並べゲーム
      • アドベンチャーゲーム
      • バグ消しパズル

      開発環境は新しいエディタをインストールする必要がなく、テキストファイルのみで構築できます。

      まとめ

      今回はプログラミング初心者がJavaScriptでゲーム制作を開始するまでの効率的な学習方法をご紹介しました。

      学習ステップをおさらいすると、

      1. 【準備】エディタをインストール
      2. 【学習】HTMLの基礎文法の意味を理解するまで学習
      3. 【学習】JavaScriptの基礎文法を理解・書けるまで学習
      4. 【制作】つくりたいゲームのサンプルを模写

      でした。

      JavaScriptはプログラミング初心者にやさしく想像よりも簡単&迅速にゲームを制作できるプログラミング言語です。

      ご紹介した学習ステップを参考に短期間で「ゲーム制作者デビュー」を果たしましょう!