Webアプリ開発 React.js フロントエンド環境 Part(3) 3つ並べゲーム(3)

Contents

はじめに

こんにちわ、swim-loverです。初心者向けのWebアプリ開発記事です。フロントエンド環境にReact.jsを使用しています。今の目標は、出席簿アプリを作ることです。

第2回は、 Reactの開発環境(CodePen)の導入からマウスクリック処理、コンストラクタ実装、変数Stateの更新処理を行いました。

今回も引き続き ‘CodePen’に保存したProject 三つ並べゲーム ‘My Tic Tac Toy’のサンプルを使って、勉強したいと思います。

Chromの拡張機能の一つで、 React DevTools を使うと、Debugが効率的にできるようです。いずれプログラムを必要になる機能だと思いますので、今の段階で導入しておきます。チュートリアルの説明はかなりざっくりとしてましたので詳細を書かいておきます。

以下のリンクからReact Dev Toolsをします。

ブラウザの右上にReact Dev toolsのアイコンが表示されます。もし表示されない場合は、拡張機能のアイコンをクリックして、React Dev Toolsをピン留めしておくと良いかもしれません。

Ctrl＋Shift＋i(Win),Cmd+Opt+i(Mac)でツールをOpenします。ブラウザのページに以下の画面が埋め込まれます。

ただし、今やりたいことは、開発環境のCodePenのプロジェクトの内容をDebugしたいのでさらに追加の手順をおこないます。

CodePenに自分のプロジェクトを作成していることを前提ですが、「Fork」ボタン、Change Viewの「Debug mode」を選択します。

すると、新しいタブでアプリ(my Tic Tac Toy)が起動します。この状態で、React Dev toolsをOpenします。Ctrl＋Shift＋i(Win),Cmd+Opt+i(Mac)

下図のように、SqureClassのStateが”x”になっていることが確認できます。

今回は、Chromの拡張機能の一つである、 React DevTools について触れてみました。

引き続き、Reactのプログラミングを行っていきたいと思います。

組み込み系ソフトエンジニアをしています。これまでフロントエンド技術は避けてきましたが、食わず嫌いをやめて、勉強を始めました。
趣味は、水泳、ロードバイク、ランニング、登山です。
組み込み系技術ネタ、勉強したフロントエンド技術、たまに趣味の運動について発信していきます。
どうぞよろしくお願いします。