【アプリ開発】Node.jsとPythonを使ったアプリを作る#1
こんにちはRockinWoolです。最近は頭痛も落ち着いていろいろなことに打ち込めるようになってきました。人生山あり谷ありですが、今は山なんだなあと感じています。さて、今日からはPythonを使ったブラウザアプリを作って行こうと思います。まずはアプリの構成ですが、ChatGPTに質問したら以下のような回答が帰ってきました。 なるほどなるほど。それでは今回はReact.jsを使用してフロントエンドを作って、バックエンドはFlaskという構成でやっていこうと思います。 node.jsのインストール React.jsのインストールをするためには、前提としてnodejsのインストールが必要とのことでした。なので、nodejsを入れていこうと思います。今回の環境はUbuntu20.04です。まずは以下のコマンドを実行します。 ここまで実行すればnodeコマンドやnpmコマンドが実行できるようになると別のサイトには書いてあったのですが、自分の環境では以下のエラーが出ました。 第一感では、このエラーはPATHの通っていないところにnodeがインストールされた結果発生しているのでは無いかと考えられました。なので、地道にPATHが充分か調査してみます。 このコマンドでnodeが存在していることは確定しました。次はnodeのinstallに使ったnの位置です。 こちらにもnodeがいることがわかります。ただし、こちらにある方が本物です。というのもsudo apt install nodejsでインストールできるnodeはversion10と非常に古いのでnコマンド経由で22.12.0をインストールするようにしたのが最初のコマンド群でした。ということで、こちらをPATHに追加していきます。以下のコマンドを.bashrcとターミナルの両方に打ち込んでPATHを登録します。 プロジェクトの作成 React.jsを使ったアプリの作成は以下のコマンドで実行します。 ここで–forceオプションをつけるのはreactのバージョンによってはうまく行かない依存関係が発生してしまうためです。このアプリの名前はmaze_gameとしました。迷路ゲームを作ろうと思っているので。さて、ここで`cd maze_game`してnpm startでアプリを起動！のつもりがまだ依存が解決していないとかで怒られました。私の場合は以下のコマンドで解決できました。 迷路部分の実装 ここから先はあまり詳しくはないので、いろいろ調査しながら作りました。まずnpm startを実行した際の挙動としては というステップを踏んでいます。したがってApp.jsに具体的にフロントエンドで実装したいことを書いていきます。ただし、直接App.jsに書くとsrcディレクトリの中が汚れそうだったのでsrc/componentsディレクトリを作って、その中にMaze.jsという本体を書いていくことにしました。したがってApp.jsとMaze.jsの中身はこんな感じになります。 App.js Maze.js App.jsはMaze.jsを呼び出しているだけなので、今回はそんなに重要ではないです。本題となるのはMaze.jsの方で、ここには大きく分けて3つの要素が含まれています。 迷宮の地図 キーボードを入力した際の動き 最初は1.1の座標からスタートすることを言っています。handleKeyDownはキーボード入力を拾っています。それからplayerPosを直接更新することはせずに一回tempとしてnewPosを定義しています。let newPos = の部分がそれで、playerPos=newPosとするとplayerPos=2としたときにnewPosも2になってしまう問題があるため、PlayerPosの中身(..playerPos)を配列で囲むことによって同じ配列を作っています。後は入力e.keyの種類によってx,yを更新してPlayerPosに入れています。 迷路とプレイヤーの描画…