Help us understand the problem. What is going on with this article?

ReactでテールスピンRPGを作るっ!Day#01

More than 1 year has passed since last update.

はじめに

フロントエンドにReact.js+Material-UI、API&WebSocketのサーバにExpress、データベースにMongoDBを利用してテールスピンRPGを創る過程をストーリー仕立てでお送りします!

「テールスピンRPG」とは

Tale Spinning Role Playing Game。
誰かの作ったシナリオをなぞる冒険ではなく、
自分が行動し体験したことを物語に紡ぎ他のプレイヤーと共有するタイプのRPG。
筆者による造語。

登場人物

  • 福元望愛(のあ) 33歳男。営業職から転身した現役プログラマ。神の啓示を受けテールスピンRPGを作ることを決意した。 プレイヤーネームは「ノア」。

noah.png

  • ロジカエル ノアを助けるために遣わされた神の御使い。なぜかカエルの姿をとっている。愛称は「ロジカ」。

logica.png

ここまでのお話

どうしてノアとロジカがテールスピンRPGを作ることになったのか?
知りたい方はこちらから!(アプリ本体へのリンクです)
テールスピンRPG『TOLDOT〜Another Noah's Chronicle〜』

Reactをインストールする

「Node.jsのインストールも完了ケロね。続けてReactに行くケロ。」

「OK。Reactのインストール、と何々・・・Reactの開発環境を作るにはReact本体に加えて、Babel、webpack、Browserify...など色々入れなきゃならないものがあって面倒・・・。なんか大変そうだね。出だしから心折れそう・・・」

「そうケロ。でもそんな人向けに最近は便利なツールも用意されているみたいケロよ。」

「え、ほんとだ。『コマンド一発でReactをインストール!』だって。なになに・・・create-react-appコマンドモジュールを使えば全部入れてくれる・・・おお、便利!コレ使おう。
まずnpmでモジュールをグローバルにインストール、と。」

$ npm install -g create-react-app

「グローバルにインストールするとコマンドラインでどこからでも実行できるようモジュールがインストールされるケロ。」

「なるほど。じゃ、次はこのコマンドを使ってアプリの雛形を作成だね。アプリ名は・・・」

「とりあえず仮でもいいケロが、ゲームの名前は決まっているケロか?」

「うん、ちょっと考えたのが『もう一人のノアから始まる年代記』を英語にして『Another Noah's Chronicle』ってのはどうだろう。」

「AnotherもChronicleも使い古されたワードケロねぇ・・・まあ意味は外していないのでいいとしても、ちょっと長いケロね。サブタイトルとしてはいいケロが、タイトルは短くて覚えやすいのがベストケロ。」

「う〜ん。あ、じゃあ『TOLDOT(トルドット)』ってどうかな。最近デボーションガイドで覚えた言葉なんだけど、ヘブル語で『歴史』とか『経緯』っていう意味なんだって。」

「そうケロね、ゲームにぴったりかというと微妙だけど、短いのは気に入ったケロ!」

「えと、じゃあタイトルは『TOLDOT〜Another Noah's Chronicle〜』で行くね。」

「了解ケロ。続けてアプリの雛形を作って行くケロが、ディレクトリ名は『toldot』でいいケロね。」

「じゃReactアプリの雛形作るよ。」

$ create-react-app toldot

「お、なにやらインストールらしき作業が始まったぞ。・・・なかなか終わらないね・・・。」

「1,200以上モジュールをインストールしているので時間がかかるケロ。気長に待つケロ。」

「わかったよ。
ところでロジカは御使いなのに、最先端のIT情報に長けているね。意外だよ。」

「神の使いケロからな。神様はあらゆることをご存知ケロ。神の使いも必要な情報は神から来るケロ。」

「へぇ、そういうシステムなんだ・・・。あ、そろそろ終わったみたい。」

「じゃ早速動作確認するケロ。『toldot』ディレクトリが作られているのでそこに移動して『npm start』ケロ。」

「オーライ!」

$ cd toldot
$ npm start

「何かが動きだしたようだけど・・・うわっいきなりブラウザが出てきたっ!」

ss001.png

「WEBサーバが起動して、作成されたReactアプリの雛形のページが表示された状態ケロ。裏で動いている開発環境用のモジュールが自動的にブラウザを起動させページを表示したケロ。
ちなみにデフォルトで3000ポートで接続する設定になっているので、URLは『localhost://3000』になるケロ。」

「そうなんだね・・・ところでロジカ、『WEBサーバが起動』って言ったけどReactはクライアントサイドのフレームワークだよね、それなのにサーバが必要なの?」

「そりゃWEBアプリだからね。クライアントのファイルもWEBサーバから送ることになるのでWEBサーバは必要ケロ。ただReactの仕組みがサーバ側で動くってことはないよ。あくまでもクライアントに送られて来た後の処理を受け持つのがReactケロ。」

「そういうことか・・・。その辺実はよく理解できていないんだ。まだまだだね。」

「確かにサーバサイドJavaScriptやJavaScriptのフレームワークに脚光が当たるようになって来たのも最近のことだから無理もないケロ。ま、作って行くうちに身に着いて来るケロよ。」

「OK!トライアンドエラーだね。失敗を恐れず行くよ!」

「その意気ケロ!」

ブラウザを開発者モードにする

「これからこの雛形のファイルを元にアプリを作っていくケロが、その前に開発に適した環境を作るケロ。まずブラウザを『開発者用モード』にするケロ。」

「開発者用?」

「Chromeなら『表示』メニューから『開発/管理』⇒『ディベロッパーツール』を選択ケロ。」

「うん・・・画面の下に何か出てきたぞ。」

「ディベロッパーツールケロ。変数の値やエラーの確認、サーバとのやりとりの様子を確認しながら開発を進めることができるケロ。
あと、スマホ用のアプリということであれば、開発時の画面もスマホのサイズにした方が作りやすいケロ。ディベロッパーツール上部メニューバーの左端にあるアイコンボタン『Toggle device tool bar』をクリックすると、ページがスマートフォンのサイズに切り替わるケロ。」

「あ、すげ〜!でも画面が小さくなっちゃうね・・・」

「そんなときはメニューバー右端のアイコンボタン『Customize and control DevTools』をクリック『DockSide』で左か右を選ぶといいケロ。」

「ホントだ!大きくなったよ。これならわかりやすいね。」

ss002.png

コンポーネント定義ファイルを編集する

「じゃいよいよファイルの中身をいじっていくケロ!
Reactのスクリプトは端的に言うとコンポーネントの組み合わせによってできているケロ。」

「コンポーネント?」

「WEBページ内に表示されているひとまとまりの要素、部品のことケロ。メニューやボタンやストーリー表示エリア、プレイヤーのステータス表示エリアなどイメージできるケロ?」

「なるほど。一つ一つのパーツのことね。」

「雛形として作られたアプリの中には1つのコンポーネントだけ作られているケロ。アプリ全体のベースとなる『App』コンポーネントケロ。
toldot/src/App.jsをテキストエディタで開いて中身を見るケロ。」

「OK。toldot/src/App.jsね。・・・見慣れない書き方のコードが並んでいる・・・。」

「ちょっと特殊な記述法なので最初はとっつきにくいかもケロが、すぐに慣れるケロ。
コンポーネントはclassとして定義されるケロ。基本形はこれケロ。」

import React from 'react';

class コンポーネント名 extends react.Component {
  render() {
    return (
      <div>
        表示内容
      </div>
    );
  }
}

export default コンポーネント名;

「1行目はReactモジュールと、Reactモジュールの中で定義されているComponentクラスを利用するためのスクリプトを取り込むためのもの。最下行はこのコンポーネントを別のファイルでも使えるようにする記述ケロ。」

「それはなんとなくわかるんだけど・・・、クラス定義の中のrenderメソッドのreturn文。この書き方が・・・。これ文字列っぽいけど、クオートは要らないの?」

「不要ケロ。これが『JSX』の書き方ケロ。JSXを利用するとJavaScriptのコードの中でHTMLをこんな風に記述できるのでとても楽ケロ。あと見た感じもわかりやすい!
JSXはReactが持っている仕組みじゃなく、create-react-appで一緒にインストールされた、Babelっていうモジュールによって実現しているケロ。」

「なるほど、これはわかりやすいかも。じゃちょっとAppクラスを書き直してみるよ。デフォルトで入っている要素は特に残す必要ないね。」

src/App.js
import React from 'react';

class App extends react.Component {
  render() {
    return (
      <div>
        ReactRPGを作るよ!
      </div>
    );
  }
}

export default App;

「これでいいかな。じゃブラウザをリロードして・・・ってえ?勝手に更新されてる!?」

ss003.png

「さっきの開発環境専用サーバがファイルの変更を検知して自動的にコンパイルしブラウザの表示を更新してくれるケロ。」

「へー。それは便利だね。
『コンパイル』とは?」

「JSXはそのままだとブラウザは理解できないので一旦HTMLへの変換が行われるケロ。これがコンパイルケロ。
JSXは純粋はHTMLではないので書き方には注意点がいくつかあるケロ。追い追い説明するケロ。」

「わかった。お願いします。
それにしてもしょぼい表示になっちゃったね・・・。」

「まだ表示するコンテンツ自体がないケロからね。それはこれから増えていくから問題ないケロが、見栄えの問題は残るケロね。」

「見栄え、重要だよ。シンプルで構わないけど、使いやすくセンスのあるデザインにはしたいよね。」

「じゃあ次はその辺を攻めるケロか・・・」

次回予告

「次はMaterial-UIを使ってCoolなデザインを適用するケロ!」

連載記事リンク

Day#01 ReactでテールスピンRPGを作るっ!
Day#02 Material-UIでデザインを適用する
Day#03 ストーリーを表示してみる
Day#04 はじめてのNoSQL
Day#05 REST APIでデータをゲット!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした