【アプリ開発】Node.jsとPythonを使ったアプリを作る#2
こんにちは。RockinWoolです。前回の続きということで、今回はFrontendのjavascriptとbackendのpythonを同期させて行こうと思います。それでは早速はじめていきましょう。 Flaskのインストールとサーバのセットアップ それではまず、backend環境を作るためにFlaskをインストールしていきます。自分はanaconda環境でやっているのでcondaで入れていきます。 新しいフォルダ構成でアプリを再構築する 前回のcreate-react-appでのReactアプリの構築では、最新のnodejsをビルドできないことが判明したのでビルドツールをviteに変更します。新しくmaze_gameという親フォルダを作ってその中に移動したら次のコマンドでViteプロジェクトを作ります。 ここまででViteサンプルアプリが動くようになります。 迷路側(frontend)の作成 index.html まずはindex.htmlから順番に作っていきます。Viteになったことで最初に起動させるエントリーポイントJavascriptのファイルがmain.jsxになっています。今回も慣例にしたがってmain.jsxを起動させるようにします。 main.jsx エントリーポイントです。ここではReactの初期設定を行い、アプリケーション全体をブラウザにレンダリングします。 2行目のReactDOMとはなんぞや？と思って調べてみたら、DOM(Document Object Model)という概念についてChatGPTが教えてくれました。Reactはhtmlの要素(Node)を動的に変更することで画面を変化させているということを知らなかったので、DOMによってNodeの塊として表現されているhtmlを変化させるためにReactDOMが必要なんだと理解することができました。3行目はルートコンポーネントであるApp.jsxをインポートすることを宣言しているそうですが、拡張子抜きで宣言するのに違和感があります。6行目ではレンダリング対象を宣言していますが、index.htmlで<div id=”root”></div>と宣言したroot要素を対象にすると言っています。<React.StrictMode>は開発モード機能であると宣言しているので、本番ビルドでは対象ではないと言っています。App /はAppをレンダリングするということらしいですので、次はApp.jsxについて見ていきます。 App.jsx 実態はcomponent/Maze.jsxに記述しているので、これは単純に仲介役を果たすファイルです。 最後のexport default App;でfunction App()を他のjsxから呼び出せるようにしています。 component/Maze.jsx 今回の開発で最もキモとなった部分の1つです。前回はここに迷宮情報を格納して迷路を作っていましたが、backend側に迷宮情報を持たさたほうが良いと判断して、frontend起動時にサーバから迷路情報を取得するように変更しました。そして、Enterを押したら自動で決められた動きをするように変更しています。 backend/server.py 最後にbackend側の実装を行っていきます。backend側は迷宮情報を渡すmaze関数と自動移動を行うmavoe関数を実装します。 vite.config.js Viteで起動したときに通信をどうするかを定義します。 ここまでで一通り動くものが作れました。いやーコードばっかりになってしまい申し訳無いです。次回はコードの詳しい解説と自動移動関数の強化学習を目標にしようと思います。それではまた次回！