ST_FUNC開発日記

建築構造設計Excelアドイン開発の記録

フロントエンドウェブアプリ

ウェブアプリを開発してみたい

st-func-tsを別のライブラリにしているが、現状特に分けている意味があまりない。

また、Excelへのアドインインストールがサイドロードしかできない。

なんとなくもったいないので、せっかく作ったライブラリを活用できるようにウェブアプリを作ってみようと思う。

そういえば、昔構造計算用のAndroidアプリを作ろうと試みたことがあったが、ウェブアプリならどの端末でも動くからそっちの方が使いやすいのかな?

現在使っているロリポップはただのウェブサーバーでバックエンドは動かないので、フロントエンドだけで動くプログラムにしてみたい。

フロントエンドだけで完結させれば、ページをダウンロードすればオフラインでも動くのかしら?とりあえず試してみよう。

何のフレームワークを使うか

ウェブアプリはdjangoとflaskは触ったことがあるが、javascriptとフロントエンドの開発は初めてなので、まず調べるところから。

qiita.com

なんとなくこの辺のサイトが分かりやすい?

ReactとVue.jsというのがあるようだ。

上記サイトのおすすめなのと、シェアが大きいということでReactでやってみることにする。

まあ、そんなに複雑なものを作るつもりはないし、簡単なら何でもよい。

プロジェクトの作成

qiita.com

この辺を眺めながらやってみることとする。

Node.jsは既にインストール済なので、いきなりプロジェクトを作成する。

$ npx create-react-app st-func-web --template typescript
Need to install the following packages:
create-react-app@5.0.1
Ok to proceed? (y) 

インストールするか聞かれるので、yで進むとアプリの作成が始まった。

インストールが完了したが、

You had a `README.md` file, we renamed it to `README.old.md`

と表示された。あら、親切ね。

いろいろとファイルができた。

ここで

$ npm start

とすると、Reactのアイコンがぐるぐるするページが表示された。アプリの作成はうまくいったようだ。

GitHub - st-func/st-func-web at eada04a74e977f07a8ec257623f3f51fd0b064f2

結局サーバーが必要?

動いたものの、普通にhtmlを開くだけだとアプリが起動しない。これは結局バックエンドで何か動いていないと動かないのかしら?