スクリプトのお勉強 技術

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

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

執筆者:

関連記事

新規プロジェクト参入時に考えること

派遣における労働条件 就業予定時間(変形労働時間やフレックスタイム制の適用を含む)残業の有無と量就業場所(交通ルート、オフィスの配置等)業務の継続予定期間 制服の有無 (背広かどうか)福利厚生施設の有 …

「Python3 メモ」 独自例外クラスからの値取得/変数の内容取得

忙しい。。 この時期でなぜか忙しく、ブログ書いてる暇ない。。のでメモ書き程度。そして、内容をよく忘れるやつ。。 python3の独自例外クラス 例外クラスからの値取得方法をいつも忘れます。ある関数or …

暗号モードによる処理時間の違いを測定してみた

はじめに 前回、AESで暗号化する実装をしてみた際、知らない暗号モードが増えたなと思いました。 なので、どの暗号モードを使用すべきかの、判定材料の一つとして、代表的な暗号モードの処理速度を簡単に計って …

SPAMチェック for OCN の開発

前回、Thunderbirdプラグインの概要を書いたので、今回は開発したプラグインについて書きます。 SPAMチェック for OCNとは 以下の機能を持ったThunderbirdのアドオン(プラグイ …

整形/文法チェック ツール インストールまとめ

1.はじめに 最近、仕事で複数スクリプトを組み合わせてコーディングすることが多くなりました。 それだと、各スクリプトの癖を忘れたり、そもそもどう書くのか忘れたりと、不良を作りこむ可能性が多くなります。 …

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