HTML5/CSS3のみのコーダーがMEAN環境でゲームを作るまでの話(序)


自己紹介

こんにちは!ちゃばこと、くぅじやすまさです。
このエントリは技術エントリではないのでタグはつけてないんですけどQittaって開発日記みたいなのも投稿していいんですか。プログラミングはクソ稚魚なんですけど…

Qittaに登録した理由はエントリタイトルの通りです。
自分は2006年ごろからHTMLとCSSに触れて、それからメモ帳でコードをベタ書きしながらサイトを作ってきた化石です(WordPressに触れてPHPをかじったときでさえベタ書きでした)。恩師に化石って言われたので化石です。

数年前からbracketやCodaを使いはじめて、今は身なりだけは文明人です。でもgitを使いこなせていないのでやっぱり化石かもしれません…『稚魚の化石』に改名しろ。

ともあれ。そんな化石さんには目標があります。
それは…

MEAN環境でゲームを作ること!


……
おいおいHTMLとCSSと本当にちょっとのPHPしかできないクソ稚魚コーダーがプログラマーになろうだなんて無謀すぎないか?

無謀すぎるだろ。無謀だと思います。あなたは正しい。

でもものづくりがしたい!(ものづくりマニア)
創作仲間や創作が好きな人たちが遊べるうちのこゲームがつくりたーい!
なんでLAMP環境じゃないかというと、JavaScriptひとつで開発が済むからですね!

この軽はずみな言動を化石は激しく後悔することになるのだった…

どんなゲームを作りたいのか?

作れるかどうかはともかく、ぼんやりした構想をはっきりとさせておきましょう。
設計はけっこう単純で、1日に1回行動ポイントが配られ、ポイントの範囲内で冒険に出て結果を得る。それだけです。
診断メーカーでこういうものはけっこう作ってきたのですが、ログインしてユーザー情報を作成・保存し、毎日の行動をマイページに記録するといったシステムになります。
それにダイスを振ることのできる掲示板を併設して、他のプレイヤーとの交流を楽しんでもらう…こんなところでしょうか。
いわゆる、地図マップの上をキャラクターが移動したりシューティングなゲームではないですね。なのできっと、簡単に作れる…と信じたい!

このあまりに楽観的すぎる言動を化石は激しく後悔することになるのだった…

MEANスタックとは?

化石がMEANスタックという言葉を知ったのは、行きつけのゲームチャットの管理人さんのつぶやきでした。チャットシステムをMEAN環境で構築する準備を進めていたそうです。気になって調べてみると、JavaScriptで全ての開発を行う環境らしいではないですか。これは!と思って飛びついたのです。

MEANスタックとは、〈MongoDB+Express+Angular+Node.jsでWebアプリケーション開発を行うシステム構成〉のこと。

化・ω・石「MongoDBとAngularとNode.jsは聞いたことがあるぞ!(聞いたことがあるだけ)」

マジで聞いたことがあるだけなので救いようがない。助けてネット集合知!

MongoDBとは?

名前だけは聞いたことあるんですけど。
集合知によればこれは…「ドキュメント指向データベース」のひとつ!

化・ω・石「ドキュメント指向データベース?」

そこからかよ…

MySQLなどに代表されるリレーショナルデータベースは表形式でデータを保存しますが、MongoDBなどのドキュメント指向データベースは、表形式で保存できないデータなどを列指向で保存します。さまざまなデータ構造のドキュメントを混在して保存できるんですね。

それスパゲッティ構造にならないかという心配はありますが多分化石だから秘伝ソースになるんだと思う。世のプログラマーたちは化石より頭がSmartなのでそんなことにはならない。

MongoDBはJSONを元にした、BSONというバイナリ形式でデータを保存するNoSQLデータベース。データ結合には向いていないので、データ結合を頻繁に行う際はリレーショナルデータベースが良いでしょう…なるほどね。

Expressとは?

化・ω・石「これは…はじめて聞いたぞ!」
そうですか。集合知!

ExpressとはNode.js上で動くWebアプリ用フレームワークで、npmモジュールでインストールできます。

なるほどね!フレームワークなんですね!(それはわかる)
サーバサイドはNode.js+Expressというわけです。

Angularとは?

化・ω・石「聞いたことあるぞ!ブラウザゲー作ろうと思った時に出てきた」
そんな理解でいいのか。

AngularはフロントエンドのMVWフレームワーク。ver1.xのAngularJSとver2.xのAngular2ではだいぶ仕様が違うようなので、参考書は慎重に選びたいところです。

Node.jsとは?

化・ω・石「知ってる!(知っているとは言わない)」

ノンブロッキングI/OのJavaScriptサーバサイド実行環境ですね。npm使える。それくらいしか知らないんですけどそれでいいのだろうか。

ここで問題が発生

Node.jsをインストールするにはレンタルサーバーを卒業しなければいけません。
化石、VPSサーバの知識が0。

馬鹿じゃないの!?

馬鹿じゃないの…(絶望)

このままサーバーを立てたら乗っ取り踏み台され放題です!
ローカルでいろいろする方法もありますが、最終的にはVPSサーバ保守の勉強もしないといけません。

いやそれよりもまず…JavaScriptのお勉強です。
なにせJavaScriptといえばjQueryライブラリをインポートしてわちゃわちゃするくらいでコードをまともに読んだことがありません!要は何も書けないも同様。これではいけません。

そこで!

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

デン!狩野先生のヤツ!
これでJavaScriptの基礎を勉強していきたいと思います。

開発環境

Macユーザーなのですが、絵描くにも小説を書くにもiPadに移行してしまって置き物ストレージになっている昨今。MacBookも持っていないのでiPadで開発できないだろうか。Codaで出来るかな。せっかく買ったしな。というわけで。

  • iPad(iOS 13.1.3)
  • Coda(もしくはtextastic)
  • working copy(git連携)

こんな感じで開発していきたいと思います。
まずはJavaScriptをマスターするところからだ!