初心者ツクラーの為のJavaScript入門


要約

JavaScript、難しいと思いませんか? プログラミングなんて、やったことがない。難しくて分からない。そんな人の為に書きました。

01はじめに

この記事は、ツクールMVに適したJavaScript入門を紹介します。主に以下の人が対象です。

  • プログラミングって何だか分からない。if文? for文?? 何ですかそれは???
  • これからJavaScriptを学ぼうと思っている
  • ツクールMVでJavaScriptプラグインを作ってみたい
  • でも、何を揃えれば良いのか、踏み出し方がわからない

ツクールMVでJavaScriptプラグインに触れるにあたり、いちばん簡単な説明書のつもりで書きました。JavaScriptプログラミング学習前の、必要な前提知識・ツール・書籍を紹介します。

02奥深きJavaScript界への第一歩

RPGツクールMVには、JavaScriptプラグイン機構が搭載されました。これにより、ツクールMVの標準機能を越えた、高度な機能を追加できます。
JavaScriptは古くからあるプログラミング言語のひとつで、ウェブサイトをはじめとする多くの場所で使われています。とはいえ、修得の一歩目は大変です。初心者ツクラーやプログラミング未経験者にとって、魔術語に思えるでしょう。

しかし、これを期にプログラミングを勉強するのも、面白いんじゃないでしょうか。JavaScriptはプロの現場でも使われる奥深い世界です。ウェブサイト制作・スマホアプリ開発・デスクトップソフトウェア開発もできます。JavaScriptプラグインを読み書きする事で、仕事や趣味が広がるかもしれません。

03JavaScriptで何ができるのか

プラグインを使う事で、たとえば次のような事が実現できます。

  • 戦闘システムの変更
  • 操作ボタンやキーの拡張
  • 画面表示の変更
  • 新しいステータスの追加

一例となるプラグインを紹介します。

戦闘システム高速化プラグイン

戦闘高速化プラグイン。デバッグやテスト時に重宝します。

作者名
坂本昌一郎
作者ウェブサイト
sound sepher – 商業・同人音楽制作|坂本昌一郎(Jun.A)
プラグイン名
戦闘速度高速化 ver2.00
配布先
作者サイトsound sepherの[Game]→[RPGツクールMV用プラグイン]→[戦闘速度高速化 ver.2.00]からダウンロード
マニュアル・解説先
Battle High Speed Mode Plugin – RPG Maker Forums
RPGmaker MV / RPGツクールMV / 戦闘高速化プラグインアップデート YEP ActiveTimeBattle対応 – YouTube
ライセンスと注意事項
利用時は競合を避けるため、必ずYanflyEngineの後に読み込んでください。
サポートは行いませんので、自己責任でご利用ください。
できればtxtやクレジットに、前述の著作権表記を掲載して頂けたら嬉しいです。

スマホタッチ用プラグイン

タブレット/スマートフォン用にタッチボタンを表示するプラグイン。操作性向上に繋がります。

作者名
uchuzine@カニ
作者ウェブサイト
スマホ用ボタン追加プラグイン DEMO
プラグイン名
UCHU_MobileOperation.js ver1.1.4
配布先
スマホ用ボタン追加プラグイン DEMO
マニュアル・解説先
RPGツクールMVのスマホ操作にボタンを追加してみた – YouTube
RPGツクールMVのスマホUIを考える – Qiita
ライセンス
MITライセンス

フェイスチャット補助プラグイン

画面上の会話表現をテイルズオブファンタジア風グラフィカルに表現するプラグイン。

作者名
Naoya
作者ウェブサイト
ここからリスポーン
プラグイン名
フェイスチャット補助 Ver1.14(2016年1月4日時点)
配布先
Dropbox
マニュアル・解説先
フェイスチャット補助 概要 – ここからリスポーン
フェイスチャット補助 リファレンス – ここからリスポーン
フェイスチャット補助プラグイン – ツクマテ
フェイスチャット補助プラグイン – YouTube
ライセンス(Readme.txtより抜粋)
改変・再配布は自由です。
フリー・商用問わずご利用いただけます。ただし素材そのままのものを販売する行為はお控え下さい。
クレジット表記は不要ですが、ご厚意でしていただける場合は以下をご利用下さい。作者:Naoya, サイト:ここからリスポーン(http://respawnfromhere.blog.fc2.com/)

このように、ゲームにあたらしい体験を追加したり、デバッグテストを効率化できます。プラグインの力は絶大です。反面、ツクールMVの標準機能に満足しているなら、プラグインに頼る必要はありません。プラグイン機能を使う前に、ツクールMVの標準機能で実現できないか調べると良いでしょう。

04プログラムとは何か

プラグインはJavaScriptで書かれています。JavaScriptとは、プログラミング言語の一種です。では、プログラミングやプラグインとはそもそも何者なのでしょうか。

プログラム(Program)

プログラムとは言語的には、“プロ”と“グラム”に分けられます。
プロとはギリシア語の前置詞で、「あらかじめ」「最初に」を意味します。現代語では「プロフェッショナル(あらかじめ誓いを立てる人)」や「プロテクター(あらかじめ覆うもの)」も同じ語源です。
グラムはラテン語に由来し「書かれたもの」を意味します。現代語の「グラフ(図)」に通じます。

すなわちプログラムとは「あらかじめ + 書かれたもの」という意味です。プログラムの本質とは、コンピュータの動き方を最初に書いておいて、人間の操作に対応して様々な動作を行うもの。という事がわかります。

プラグイン(Plug-in)

プラグインとは、電源プラグやUSB機器のようなものです。たとえばパソコンにUSB機器を繋げると、プリンタやキーボードが使えるようになります。しかし、USBケーブルを抜けば、動きません(当たり前ですね)。パソコン自体が印刷能力や文字入力能力を獲得したわけではありません。ここでのポイントは、取り外し可能であるという事実です。

プラグインの性質も同じです。様々なプラグインをインストールする事で、機能が増やす事ができます。しかしそれはいつでも取り外し可能で、削除すれば元に戻ります。プラグインとは着脱可能の装備品です。自分のゲームにあったプラグインを装備することで、ゲームに新たなシステムを搭載できます。

05JavaScriptプラグインの導入とミニ改造

4分で分かるプラグインのインストールと改造方法(初心者向け)

実際にプラグインのインストールと、ちょっとした改造を行ってみましょう。トリアコンタンさんが公開するタイトル変更プラグインTitleNewGameOnly.jsのインストールと、文字サイズ変更を行いました。

ニューゲームオンリープラグイン

作者名
トリアコンタン
作者ウェブサイト
Delusional Field
プラグイン名
TitleNewGameOnly.js
配布先
triacontane / RPGMakerMV – Github
マニュアル・解説先
ニューゲームオンリープラグイン – Delusional Field
ライセンス
MITライセンス
当プラグインはMITライセンスのもとで公開されています。作者に無断で改変、再配布が可能で、利用形態(商用、18禁利用等)についても制限はありません。ただし、ヘッダのライセンス表示は残してください。

05JavaScriptエディタで楽に書こう

プログラミングはWindowsのメモ帳やMacのテキストエディットでも可能です。しかしそれは大変な根気を必要とします。JavaScriptエディタの補助機能を使う事で、楽ができます。プログラムをカラフルに装飾し、見やすくなります。さらに入力補完機能により、ミスタイプを減らせます。好みのエディタを見つける事も、プログラミング習熟のステップです。

Notepad++

Notepad++はDon Ho氏によって開発されたエディタです。

Notepad++ノートパッド プラス プラスWindows専用のエディタです。ウェブサイトは英語ですが、インストール後に自動で日本語化されます。

タブ型のエディタで、画面インターフェースが分かりやすい印象を持ちました。2000年代に数多く登場したエディタのデザインと似た気風があります。

Brackets

BracketsはAdobe社がサポートするエディタで、画像周りに強いです。

Bracketsブラケッツは、Windows/Mac OSX/Linuxに対応しています。ウェブサイトは英語ですが、インストール後に自動で日本語化されます。

Adobe Systemsが開発している事もあり、画像周りの独自機能が充実しています。特にPhotoshopのPSDファイルを読み込み、連携させる機能は便利です。レイヤーごとに分けられたパーツを参照できます。Bracketsのプラグイン機能を使う事により、ユーザが開発した拡張機能が追加できます。画面のインターフェースは少し独特ですが、初期設定はシンプルです。迷う事は少ないでしょう。

ATOM

ATOMはGitHub社が開発する多機能エディタです。

ATOMアトムはWindows/Mac OSX/Linuxに対応しています。インストール直後は英語ですが、プラグインにより日本語化が可能です。

ATOMは2015年に最も勢いづいたエディタのひとつです。プラグインが充実しており、多数の開発者により日々新しい機能が量産されています。プラグイン配布サイトが整備されているのも、他エディタにはない特徴です。

多数のプラグインを導入する傾向にある為、プラグイン同士の依存関係やキーバインドには留意する必要があります。エディタに合わせてプラグインもアップデートが激しい傾向にあります。

Visual Studio Community

Visual Studio CommunityはMicrosoft社が開発する統合開発環境です。

Visual Studio Communityビジュアル スタジオ コミュニティは、Microsoft社が開発する無料の統合開発環境IDEです。JavaScriptだけでなく、あらゆるプログラミング言語を網羅しており、他の3エディタに比べ、できる事が圧倒的に多いです。しかし動作が重たく、Windows専用です。

ツクールMVのプラグインを開発するだけなら、ちょっとオーバースペックです。多機能ゆえに使いこなすまで何年もかかります。しかし、プロになるレベルまで学習したいと考えるなら、Visual Studio Communityは良いチョイスです。

特筆すべき機能は、デバッグとインテリセンスです。使いこなすのは大変ですが、覚えれば高い効率性を追求できます。

06オススメJavaScript入門書

(新)JavaScriptワークブック―ステップ30

(新)JavaScriptワークブック―ステップ30 (相澤裕介 著,カットシステム)

大学の講義でも採用されている書籍です。この本の利点は、短いプログラムを打って覚える実践形式な点です。多くの書籍は座学や理論に偏りがちです。理屈は重要ですが、プログラムとは実際に書いて覚えるものです。本書は小難しい話は置いておいて、手を動かす事から始まります。しかし凄いのは、手さえ動かせば誰でも理解できるほどにミニマムなこと。情報がひとくちサイズに凝縮されていて、プログラミング写経だけで段階的に学べます。文章も平易で、まさに教科書。安価な点も魅力です。弱点は、やや情報が古い事です。(864円 2016年1月3日 Amazon調べ)

確かな力が身につくJavaScript「超」入門

確かな力が身につくJavaScript「超」入門 (狩野祐東 著, ソフトバンククリエイティブ)

フルカラーで可愛らしいイラストが特徴の本書。解説は非常に丁寧で、スクリーンショットが多めです。第6章からjQueryも登場しますが、基本的にはHTML/CSS/JavaScriptの基礎的内容です。コード入力とデバッグを繰り返して学習する、実学志向タイプの書籍です。最終章ではInstagram APIを使ったギャラリーサイトの制作まで書かれており、終始実践的です。(2678円 2016年1月3日 Amazon調べ)

JavaScript Web開発パーフェクトマスター

JavaScript Web開発パーフェクトマスター(金城俊哉 著, 秀和システム)

ガッチリと学びたい人向け。対話形式で進む内容です。2015年最新のJavaScript情勢も触れられており、網羅的です。鈍器レベルの分厚さで、フルカラーなのに、安価。じつにコストパフォーマンスが良いです。ほか2冊に比べると、やや理論的な内容です。全体的なJavaScript仕様を抑えたいならばオススメです。Mozila Developer Networkとあわせ読みつつ、学習を進めると良いでしょう。(3672円 2016年1月3日 Amazon調べ)

オススメ書籍総括

(新)JavaScriptワークブック―ステップ30は、ひとくちサイズの課題をたくさんクリアする形態。
確かな力が身につくJavaScript「超」入門は、問題サイズは大きくなるものの、じっくり丁寧にプログラミングとデバッグを繰り返すタイプ。
JavaScript Web開発パーフェクトマスターは理論寄りで、JavaScriptの基本仕様を理解するスタイル。

それぞれ性格の違う書籍ですから、3冊を同時に購入しても損はしないと思います。もちろん1冊から初めても大丈夫。上記以外にもたくさんのJavaScript本が発売されているので、書店で手に取って、あなたのお気に入り教科書を探してみてください。

07入門書選びの注意点

オライリー本とjQuery本には要注意

紹介した以外にも、たくさんのJavaScript書籍が販売されています。プログラミング初学者が入門書を探す上での注意点を記します。

オライリー本を避けよう

動物マークの表紙が目印です。オライリー本は職業プログラマーが読む本で、高価で、分厚く、イラストも少なく、難しいです。技術的な正しさが光る、素晴らしい書物です。しかしアマチュアには敷居が高く、オススメできません。

熱烈なファンをかかえた信頼のある出版社なので、「プログラミングを勉強したいんだけれど、何が良いかな?」と識者に聞くと、低くない確率で「サイ本」「オライリー本」という答えが返ってきます。しかしオライリー本を初心者に勧める人は、初心を忘れてしまっていると思います。小学1年生に中学数学の教科書を渡すようなものです。初心者がオライリー本を手に取った結果、楽しく順序立ててプログラミングを理解できない可能性があります。

学習と理解には、段階があります。本当の入門書を終えてから、オライリー本に触れると良いでしょう。名著である事は確かです。

jQuery本は避けよう

jQueryとは、JavaScriptを使いやすく拡張した命令セットです。主にウェブサイト制作でスライドショーやメニューボタンを実装する為に使われます。しかし、jQueryとJavaScriptはイコールではありません。そしてjQueryはツクールMVには搭載されていないため、jQuery本は全く役に立ちません。

いくつかの書籍は、タイトルにはJavaScriptと書かれているのに、中身はjQueryばかりです。そのような本はAmazonレビューで指摘されているので、チェックして避けるようにしましょう。

古い本を避けよう

プログラミングの世界は日進月歩。特にJavaScriptは流れの早い言語です。書籍購入時は必ず出版年月をチェックしましょう。3年以上前に出版された本を購入する理由は少ないと思って下さい。書籍の内容通りに作っても、正しく動作しない可能性があります。

ゲーム系JavaScript本は少数派

JavaScriptは幅広い場所で使われる言語ですが、出版物の8割がウェブ制作向けです。ゲーム制作に関する本は片手で数える程しかありません。ツクールMVはJavaScript界において、少数派の方言なのです。いかなるJavaScript本を購入しても、内容の全てがツクールMVに繋がるわけではありません。標準語から田舎訛りに置き換えるように、書かれた内容をうまく読み替えて、ツクールMVゲーム開発に活かす必要があります。

08JavaScript学習に役立つウェブサイト紹介

ドットインストール

ドットインストールでは、プログラミング学習の為の3分動画が公開されています。

ドットインストールは、3分動画でプログラミングを学べるサイトです。

1動画3分程度なので、ちょっとした合間に勉強できます。全5回程度の「JavaScriptで作る○○系動画」は特にオススメです。ライブコーディング風に開発を追体験できます。無料利用でも見切れない程の動画で勉強できます。有料サービスに加入すると、動画書き起こしや、動画内のJavaScriptコードの閲覧ができます。

Schoo

様々な60分講座動画を公開するSchoo

Schooスクーは動画でプログラミングを学べるサイトです。

様々な講座が開講されており、プログラミング動画は特に人気です。1動画3分のドットインストールに比べ、Schooは1動画1時間です。ちょっとしたテクニックや小話が差し込まれるのもSchooの魅力です。じっくり取り組みたい人に向きです。

CodeCombat

JavaScriptでキャラクターを操作するダンジョン攻略RPG

CodeCombatコード コンバットは、JavaScriptで敵と闘うRPGです。

JavaScriptの命令でキャラクターを操作し、ダンジョンを攻略していきます。所々英語ですが、平易なので問題はありません。統計によると、利用者のほとんどは10代です。JavaScriptの他にPythonやCoffeeScriptも学べます。テイストはゲーム風ですが、ストーリーらしきものはありません。しかしキャラクターが細やかに動く事で、独特の魅力が生まれています。マルチプレイ対戦も可能です。海外のサービスゆえか、ときどき回線遅延を感じるものの、非常によく出来た遊びに仕上がっています。

Mozila Developer Network

ウェブ技術の逆引き辞典、Mozila Developer Network(通称MDN)

Mozila Developer Networkモジラ デベロッパー ネットワークは、ウェブ技術の情報ポータルサイトです。FirefoxThunderbirdを開発するMozila財団と、コミュニティの力で運営されています。

JavaScriptガイド入門は、とても丁寧に書かれた指南書です。技術的な正確さを重視した文章なので、本当の初心者は専門用語に驚くかもしれません。他のプログラミング言語を触れた人なら、MDNの難易度はちょうど良い思います。リファレンスも充実しており、Mozilaコミュニティの強さを実感させられます。

jsdo.it

HTML/CSS/JavaScriptのコードをすぐ試せる、jsdo.it

jsdo.itは面白法人カヤックが運営するウェブエディター and コードコミュニティです。

jsdo.itにHTML/CSS/JavaScriptをソースコードを登録すると、すぐに画面上で実行できます。手軽にプログラミングの実験や改造ができるサービスです。他人のソースコードもすぐ読めるので、研究が捗ります。
通常のJavaScript学習では、画面表現を学ぶ機会が少なくなりがちです。jsdo.itでは、映像表現を追求した作品も多く投稿されている為、グラフィカルな表現を模索するのに役立ちます。

09さらなるステップへ

入門段階をクリアしたなら、すぐさま作りたいものを作るべきです。プログラミング言語は、何かを作るためにあります。いつまでも座学に溺れず、実現したいゲームやソフトの開発に時間をかけるべきです。ここまで記した内容を抑えれば、ツクールMVでJavaScriptプラグインを作るのに十分な地力がつきます。

とはいえ、いろいろなニュースや情報を見ることは良いことです。新しい刺激が、新たな創作に繋がるかも。初学をクリアした後の情報収集方法について紹介します。

JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック

JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック (クジラ飛行机 著, ソシム)

ツクールMVのゲーム開発からは、やや離れてしまいますが、オススメの書籍です。JavaScriptとNode.jsを使い、ウェブサービスを構築する手法を紹介しています。Electronを用いたSingle Page Applicationシングル ページ アプリケーションNode.jsを使った処理の構造は、ツクールMVゲームにも通じるものがあります。2015年出版当時のモダンな開発環境も記述されており、文章も明瞭です。JavaScriptを用いたWEBサービス開発について俯瞰的に学びたいなら適した書籍です。

オライリー出版の書籍

プログラマー御用達の出版社、オライリー社

オライリー出版の書籍はテーマを深掘りしており、クォリティは確かです。初心者には難しいですが、長期的に勉強したい人や、ちょっと背伸びしてみたいなら、触れてみると良いでしょう。

日本語版より英語版の方が、早く出版される傾向にあります。電子書籍版も充実しており、PDF/ePubでダウンロードが可能です。英語版の電子書籍は割引キャンペーンも多いので、私も幾つかは紙書籍と電子書籍の両方を入手しています。

オライリー出版によるJavaScript関連の書籍は、たとえば以下が公開されています。

Qiita JavaScriptタグ

幅広いプログラミング記事の宝庫、Qiita

Qiitaはプログラマの為の知見共有サービスです。

2016年1月3日現在、JavaScriptのタグがつけられた投稿は8049件あります。Qiitaには「最新技術を使ってみた系」「無名のニッチな技術を使ってみた系」が流れる傾向があるので、アンテナを立てておくと新しい発見があります。

dots.

プログラマ向けのイベント情報サイトdots.

dots.はエンジニアの為の、勉強会・イベント情報サイトです。

IT界隈で働くエンジニアが多く利用しています。毎日のように様々なイベントが開催されており、その情報を集約しています。またdots.自体も渋谷でイベント会場を運営しており、勉強会場所として利用されています。

IT系勉強会を告知するサイトは、dots.の他にも多数あります。イベント情報サービスは乱立しており、情報も分散している印象があります。リアルな交流による刺激を求める人には良いと思います。

10おわりに

今のツクールMVは、JavaScriptプラグインが注目され過ぎている気がします。本来のツクールの良さは、プログラミングが出来なくてもゲームが作れる点です。今は発売直後ゆえのアツさがありますが、おそらく1年も経つ頃には、あらゆるプラグインが出揃い、だんだん熱も収まると思います。逆に言うなら、いまプラグイン作者になるなら、誰もが使うメジャープラグイン作家になれるかもしれません。プログラミング初心者でもアイデア次第で注目されるチャンスがあります。

ツクールMVはプログラミング入門に適しています。小難しい事を覚えなくても、書いたら動く、シンプルさがあります。書く→テストプレイ→修正→テストプレイのループを繰り返せば、自然とプログラミングが身につきます。あるいは、他人のプラグイン素材を読んだり、簡単な修正をするだけでも、勉強になります。

JavaScriptはプログラミング学習の良い選択肢であり、将来的にも食いっぱぐれのない言語だと思います。
当記事をきっかけに、プログラミングの一歩目を、踏み出してはいかがでしょうか😉。

Cコメント

間違いの指摘、タレコミ、感想、批判などなど。なんでも気軽に投稿してください(∩´∀`)∩
直接のご連絡は、メッセージフォームからどうぞ。

  • トシ重 より:

    「MVからはJavaスクリプトです!」って言われて途方にくれていた一人なのですが、光明を見出すことができました。どうやって勉強しようか悩んでいるときに、こういう記事はありがたいですね。いろいろな勉強方法(アプローチ)が段階的にかつ簡潔にまとめられているので、迷わずブックマークさせていただきました。すばらしい記事をありがとうございます。

    • トモタカ より:

      メッセージありがとうございます。お役に立てたのならば、嬉しいです。Abyss-Diver#2 は JavaScript で凄いシステムがぎゅんぎゅん動く感じですかね😁。2016年もご活躍を楽しみにしています。