スクリプトのお勉強 技術

Svelte(Carbon Components Svelte) + Python(FastAPI)でWebアプリを作る

投稿日:

Svelte用のサンプルとして、Carbon Components SvelteのTreeViewを試用してファイルツリーを表示し、各データはAPIとして読み出し、編集するWebアプリケーションを実装してみました。

Svelte – treeview Webアプリ仕様

Web上で設定ファイルを変更する場面を想定してみました。

近年、各ホストにログインして何かを変更するというのはしない傾向にあります。
でも、ある条件下での設定ファイルは変更したい、というのはあるだろうと考えました。

なので、そんなに大きくない、TreeViewを前提としたファイル編集ができるWebアプリを考えてみました。

以下はオミットしました。メンテナンスとして一括で行えばいいだろうとの考えです。まぁ実装が面倒なのはその通りですが。。

  • フォルダ作成
  • ファイル作成
  • ファイル削除

開発環境

開発環境は以下です。

  • WSL2(Ubuntu 22.04)
  • node.js(v14.17.6)
  • npm (8.9.0)

ソース全部

ソースは、ここにあります。

画面側(Svelte)

Svelteのバージョンは3系統を前提としています。

そして画面は、前回のTreeViewを流用してます。

追加したところは以下です。

  • ボタンのダイアログ表示
    • 作成時のファイル名入力ダイアログ
    • 削除時の確認ダイアログ
  • 編集機能
    • 編集/確認/保存画面追加

APIの呼び出し方

APIの呼び出し方が分かってなかったので試行錯誤した結果、以下のようにしました。

  • getFolders関数作成
  • fetchでPython APIにて取り出す
  • onMountにて呼び出して、対象データをchildrenに格納
  • TreeViewコンポーネントはchildrenに入ったデータを表示

ソースは以下です。

// API呼び出し
const getFolders = async () => {
  const serverURL = "http://localhost:8000/ft/";
  const response = await fetch(serverURL, {
    method: "GET",
    mode: "cors",
    credentials: "omit",
  });
  const json = await response.json();
  return json;
};

let children;
// アプリマウント時に、treeを指定する
onMount(async () => {
  var folders = await getFolders();
  for (let index in folders) {
    change_node(folders[index]);
  }
  children = folders;
  treeview.expandAll;
});

<TreeView
    {children}
  />

起動方法

起動方法は以下です。

$ npm run dev

API側(FastAPI)

API側のPythonは難しい所はありません。

設定ファイルで指定したディレクトリを提供するフォルダに見立てて、そのディレクトリツリーの情報を返却したり、編集できるようにしただけです。

テスト起動

テストを起動するのは以下です。

$ cd service
$ poetry run py.test tests/

起動方法

起動方法は以下です。

$ cd service
$ poetry run uvicorn api:app --reload

各画面画像

以下の手順にて起動させ、画面のスクショを取りました。

$ git clone https://github.com/KenichiTanino/treeview_svelte.git
$ cd treeview_svelte
$ npm install
$ npm run dev
### 別コンソールにて
$ cd service
$ poetry install
$ poetry run uvicorn api:app --reload

としてからhttp://localhost:5000にアクセスします。

TreeView(トップ画面)

ファイル作成/削除ダイアログ

以下はダイアログだけ出してみました。実際の処理は未実装です。

編集/確認/保存

以下はファイル修正時の画面です。

残課題

まだ以下の課題があります。

  • ファイル作成/削除が未実装
  • なんかのタイミングで、保存後の表示が修正前になってる。
    • ファイル保存自体は出来ている。

終わりに

Svelteは学習コストが低く、かつ、自分的にはほぼ直感のまま書けました。

Vueはともかく、React.jsはいまだにあの関数型プログラミングがよく分からない。。
という私のような人は、お勧めできるような気がします。

参考

  • dialog参考
    https://svelte.dev/repl/033e824fad0a4e34907666e7196caec4?version=3.48.0
  • svelte-spa-router参考
    https://svelte.dev/repl/11e51e1ce65449c0b0db1af0906e206a?version=3.4.4

-スクリプトのお勉強, 技術

執筆者:

関連記事

pipenv + Apache + Django起動設定

仕事でwebアプリケーションを作成しています。 Djangoで作成し、webサーバをApache、環境をpipenvで設定したpython3環境上で動かす予定です。 Apacheが起動するまでに、苦労 …

Mojolicious XML-RPC Pluginの開発(1)

はじめに 最近、お仕事関連で、perlとWebアプリケーションを触っています。 両方一度にお勉強、ということで、perlのWAF(Webアプリケーションフレームワーク)を調べてみようと思いました。 こ …

Python Django REST Framework(REST API)の作成

1.はじめに 今回は、pythonの「Django」というWebアプリケーションフレームワークを使用し、REST APIを作成します。作成するREST APIは、これから作るであろう、Nuxt.jsか …

小ネタ: JavaScriptにてBase64エンコード/デコードする方法

小ネタです。JavaScriptにてBase64エンコード/デコードをしようとして、意外と詰まったので、メモ的に方法を書いておきます。 結論: js-base64ライブラリを使用する これだけです。。 …

Markdown to HTML(grip)

1.はじめに 最近の文書はほとんどMarkdownで書くのですが、それをHTMLに変換する方法を調べました。 ただし、私がMarkdownと思っている文法は「github-flavored-markd …

google オプトアウト Click here to opt-out.