プログラミングの独学期間を短縮するには?方法をまとめてみた

こんにちは、マルユメ@ブロガーです。

本記事では、

[chat face=”chara1.png” align=”left” border=”gray” bg=”gray” style=”maru”]プログラミングの独学期間を短縮したい![/chat]

このような人に向けて下記の内容を解説します。

[box03 title=”目次【記事の内容】”]

  1. プログラミングの独学期間を短縮するには?

[/box03]

実際にプログラミングを独学で1年以上勉強してきた経験をもとに、プログラミングの独学期間を短縮する方法を解説します。

この記事を読めば、プログラミングの独学期間を短縮する方法がわかり、より効率的に勉強できるようになります。

1. プログラミングの独学期間を短縮するには?

プログラミングの独学期間を短縮するには?方法をまとめてみた

方法は、以下の通りです。

[jin-iconbox12]

  1. プログラミングスクール → 独学
  2. 作りながら学ぶ

[/jin-iconbox12]
詳しく説明していきます。

プログラミングスクール→独学

一つ目の方法は、「一度プログラミングスクールに通ってから独学を始める」という方法です。

プログラミングを独学しようとしている方の中には、そもそもどうやって勉強したらいいかわからないという方も多いでしょう。

実際、私も最初はそうでした。私がプログラミングを始めた時は、「JavaScript」という言語を独学していましたが、当時はブラウザの使い方がわからなくて挫折したこともありました。(^-^;

私のように、やり方がわからない状態で独学を始めてもストレスが溜まるし続かないので、そのような方は一度プログラミングスクールに通うことをおすすめします。お金を使いたくない場合は無料体験に参加するという選択肢もありますよ。
[jin-iconbox12]

[/jin-iconbox12]

作りながら学ぶ

二つ目の方法は、「実際にアプリやゲームを作りながら学んでいく」という方法です。

普通に勉強する場合は、インプット(知識を貯める) → アウトプット(開発する)が普通ですが、この方法だと、アウトプットの際に、「あんなに勉強したのに全然わからない!もうやめるわ」となる可能性が高いです。

なぜなら、何かを作ろうと思ったときに、自分の頭の中の知識だけで完成させることは難しいからです。アウトプットの際にはその都度インプットが必要になります。

そのため、ここでは実際に作りながら学ぶという方法をおすすめしています。

といっても、一から作るというのは効率的ではないので、ここでは「すでに完成されたコードを使う」という方法を紹介します。

例として、JavaScriptでゲームを作るという状況を想定します。

ネット上でコードを探す

まずは、ネット上でコードを探します。

といっても、ネットに公開されているコードは膨大なので、わたしがオススメするコードを紹介します。

一つ目は、MDNの「そのままのJavaScriptを使ったブロックくずしゲーム」です。

これは、Googleで「javascript ゲーム」と検索すると、一番最初に出てきます。

上記で紹介したページでは、JavaScriptでブロック崩しゲームを作る方法を解説しています。

プログラミングの独学期間を短縮するには?方法をまとめてみた

では、そのブロック崩しゲームのコードはどこにあるかというと、そのページ内の「レッスン詳細」という見出しの「GitHubで入手可能」というリンク先にあります。

プログラミングの独学期間を短縮するには?方法をまとめてみた

リンク先に飛んだら、右側に「Clone or Download」という緑色のボタンがあるので、それを押してください。

それを押すと、さらにウインドウが出てくるので、「Download Zip」を押してください。

プログラミングの独学期間を短縮するには?方法をまとめてみた

これで、ブロック崩しゲームのコードを入手できました。

二つ目のコードは、ゲームプログラミングの解説本に付属しているコードです。

一冊目は、主に2DゲームをJavaScriptで作ることを目的とした本で、二冊目は、3Dゲームを作るのが目的の本です。

どちらも本を購入しなくてもコードをダウンロードできます。しかし、コードの解説に関しては本にしか載っていないので、解説を読みたい人は本を買う必要があります。

どちらの本も様々なゲームを作りながらコードを解説するというスタイルで、かつネット上でコードをダウンロードできるので、実際にコードを動かしながら解説を読めば理解が深まるかと思います。

コードのダウンロード方法はまず、こちらのサイトにアクセスしてください。

そして、下の方にスクロールしていくと、「主な著書」という見出しのところで本の表紙の下に「DOWNLOAD」というボタンがあるので、上記で紹介した本のコードをダウンロードしてください。

プログラミングの独学期間を短縮するには?方法をまとめてみた

コードを分析

ここまでで、三つのzipファイルをダウンロードできたと思います。

ではここからは、そのコードを分析する方法を解説します。ここからは、GoogleChromeを使っていることを前提とします。

ここでは、一番最初に紹介したブロック崩しゲームを例にとって解説します。

まずは、zipファイルを解凍してください。

zipファイルを解凍したら、ファイル内に「lesson10.html」というファイルがあると思います。それが、完成しているブロック崩しゲームのコードとなります。

lesson10.htmlを開くと、ブラウザ上でブロック崩しが始まると思います。では、このコードを見るにはどうしたらいいかというと、まずlesson10.html上で右クリックを押してください。

すると、「検証」という文字が見つかるので、それを押してください。

プログラミングの独学期間を短縮するには?方法をまとめてみた

すると、新しいウインドウが出てきたと思います。これは、「デベロッパツール」と呼ばれるもので、これを使うことでさっきのlesson10.htmlファイルのコードをいじれるようになります。

lesson10.htmlのコードに変更を加えるには、もう少しやることがあります。それは、lesson10.htmlファイルを、デベロッパツールのワークスペースに入れることです。

といっても、やることは簡単なので、順番に説明していきます。

まず、ツールの右側の三つの点が縦に並んだところをクリックします。

プログラミングの独学期間を短縮するには?方法をまとめてみた

すると、その中に「Settings」という項目があるので、クリックしてください。

プログラミングの独学期間を短縮するには?方法をまとめてみた

クリックすると、「Workspace」という項目があるので、そこをクリックします。

そして、「Add folder」をクリックしたら、解凍したファイルをまるごと選択してください。

プログラミングの独学期間を短縮するには?方法をまとめてみた

すると、ブラウザの上の方にポップアップが表示されるので、「許可」を押してください。

プログラミングの独学期間を短縮するには?方法をまとめてみた

ここまできたら、Settings画面を閉じて、デベロッパツールの「Sources」の項目を選択してください。

右側にある「Filesystem」を選択すると、さっき追加したファイルが表示されていると思います。

プログラミングの独学期間を短縮するには?方法をまとめてみた

これで、lesson10.htmlファイルの編集が可能になりました。

この状態でコードを編集し、コード内で右クリックを押して「Save as…」で保存すると、その変更がすぐに適用されてその変更内容をすぐに確認できます。

試しに、コードを少し変更してみたいと思います。

152行目の、「alert(“GAME OVER”);」の部分を、「alert(“You died”);」に変更します。

すると、ゲームオーバーになった時に、変更前は

プログラミングの独学期間を短縮するには?方法をまとめてみた

だったのが、変更後は、

プログラミングの独学期間を短縮するには?方法をまとめてみた

になっているのがわかります。

このようにして、少しづつ処理を変えていき、オリジナルのゲームを作成していきます。

以上で、完成されたゲームのコードに変更を加えながら学ぶ方法を紹介しました。

RELATED POSTS

COMMENT FORM

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です