夏休み3日目に入った。昨日までは2日連続で大きな地震があり困惑していたが今日はwebサイトの改修に集中した1日であった。ここ最近はFlutterやSvelte(＋SvelteKit）を学んでいる。

元々はUI構築をともなうプログラミングはしてなかった。高校の頃は基本情報技術者試験の学習のために擬似言語やJavaを少々学ぶ程度でプログラミング自体にも馴染みがなかった。面倒な仕事を効率化するためにVBAを学びその一年後にPythonを2週間で学習した。そのままお仕事でもPythonやVBAを多様な用途で使うようになり気づいたら5年以上は経過している。

その間にも効率化とは別に趣味でプログラミングの学習をしている。最近はUIを作ることがマイブームである。PythonではGUIはあまり得意分野ではないので馴染みがなかったがUI系のフレームワークを学ぶ際によく状態管理というワードが出る。最初はいまいちよくわからなかった。

自分なりの理解では、状態管理の仕組みを使うことにより(1)一つの場所で複数のUIコンポーネントからその状態を扱うこと、(2)状態を長いライフタイムで持続することを実現することを目指していると考える。UIではいろんな箇所で共通のデータを扱ったり、画面遷移をしてもデータを保持したりする必要があるので、これを実現するためのコードを効率よく書く必要がある。また、UIと複雑な状態やロジックを分離させることでコードの管理のしやすさや保守性を高めていくことも規模が大きくなればなるほど必要となる。Pythonではあまり馴染みのない概念であったが、webやスマートホンアプリを作る上では避けることが困難であろう概念であることを察した。

このサイトはMicroCMSやNewtなどのHeadlessCMSを使い構築している。サービスから提供されるAPIを介して記事やコンテンツの情報を受け取り、サイトやアプリに表示させられるような仕組みである。この仕組みを使う時、通信量の上限が決められていることが一般的である。そのためにこの通信量を最適化する必要があり、節水するのと同じようにコンテンツの情報を必要な量だけ取り出す工夫が必要である。

ブログの場合には、カテゴリーごとに記事を表示させる・日付ごと・タグごと・ページ毎など重複して記事を表示させることとなる。これらのページを作る毎に記事を全量取り出すと通信容量を無駄にたくさん扱うこととなる。これに対応するために今日はSvelteのStoreを使いデータベースのデータに各モジュールからアクセスできるようにしたり、データベースを使って集計したりなどする手法を学んだ。

一度全量のデータをデータベースに注入し、それを状態管理を介してデータベースのインスタンスに全てのモジュールからアクセスすることによりAPIへのリクエストを1回だけに絞ることができ、加えてデータを使ったタグ毎・カテゴリー毎の記事のカウントの方法なども学ぶことができた。応用すればサーバーサイドレンダリングなど動的なページによる効率的なコンテンツ配信もできるし、SSGで静的なコンテンツを作り軽量高速なサイトを作ることも可能である。Svelteであればとても簡単で柔軟だ。

純粋なPythonのコーディングとは目的が違うために考え方やコーディングの文化なども異なる。思想の違いに難しさは感じるものの状態管理への理解をさらに深めて、自由自在にスマホ・デスクトップ・web向けのアプリを作れるようになっていきたい。