【Mac】ReactとPython flaskを使ったWebアプリ

Reactの基本的な勉強を済ませ、簡易アプリのソースを読んで知見を蓄え中の身です。本記事は、下記の記事に触発され、愛用しているMacbookのローカル環境で実行した時のメモです。

どんなアプリ？

mecabを使った分かち書きスクリプトを使って、フロントで受け取った入力テキストをサーバー側で分かち書きをし、その結果をフロントで表示するという非常にシンプルなアプリです。

どんな構成？

フロント側はReact、サーバー側はpython flaskで実装しています。

実装環境

macOS Big Sur 11.2.3
Python: 3.9.6
flask==1.0.2

npm: 7.20.3

1. Mecabのインストール

日本語の形態素解析エンジン"MeCab"をMacにインストールしてPython3から利用します。

$ brew install mecab
$ brew install mecab-ipadic
$ brew install git curl xz yarn

$ git clone --depth 1 https://github.com/neologd/mecab-ipadic-neologd.git
もしくは
$ git clone --depth 1 [e-mail]:neologd/mecab-ipadic-neologd.git

$ cd mecab-ipadic-neologd
$ ./bin/install-mecab-ipadic-neologd -n
$ brew install swig

これでmecab-python3をpip installできるようになりました。

2. ソースをgit clone

mecab-ipadic-neologdフォルダ内にいる場合は、別フォルダに移動した方が良いでしょう。ここでは親フォルダに移動します。その後、ソースコードをgit cloneします。

$ cd ..
$ git clone https://github.com/Pu-of-Parari/jparser_app.git
$ cd jparser_app
$ ls
README.md   backend     frontend    ref

3. サーバー側の準備

まだ動きません。python3の仮想環境内で必要なモジュールをインポートします。

いま、jparser_appフォルダ内にいます。
$ cd backend

venvという名前で仮想環境を作成します。
$ python3 -m venv venv
$ source venv/bin/activate

一応、pipをアップグレードします。
$ python3 -m pip install --upgrade pip

requirements.txtを用いて、必要なモジュールをインストールします。
$ pip install -r requirements.txt

手順１を飛ばし、homebrewでmecabをあらかじめインストールしておかないと、ここでエラーが出るでしょう。

4. バックエンドのサーバを立てる

いま、backendフォルダ内にいます。
$ python3 server.py

問題が起きなければ、これでバックエンドサーバの準備は完了です。

5. フロントエンドのサーバを立てる

まず、フロントエンド用に先ほどとは別のターミナルを立ち上げてください。立ち上げたら、jparser_app/frontend/appフォルダに移動します。

$ cd jparser_app/frontend/app

axiosがインストールされていない場合は、axiosをインストールします。
$ npm install axios

node_modulesフォルダを作成します。
git cloneした場合、node_modulesフォルダは基本的にありません。
local環境に依存するため、通常は.gitignoreで無視します。
$ npm install

フロントエンドサーバを立てます。
$ yarn start

これでフロントエンドサーバの準備は完了です。

そして、全ての準備が完了です。お疲れさまでした。

localhost:3000にアクセス

ブラウザからlocalhost:3000にアクセスします(yarn startで自動で開きます)。

app screenshots