どうやって作ったか

対象読者の悩みを解決するために、次の 3 つの要素が必要と考えました。

• Web アプリケーションの基礎知識

• 参考にしてもらえる品質のコード

• HTML/JS/CSS を一切書かず、Python だけで実装する

Web アプリケーションの基礎知識

新米エンジニアの場合、Web アプリケーションの仕組みがよく分かっていないということもあるでしょう。

本書では Web アプリケーションの基本的な仕組みについても補足、参考情報を示すなどして、実装だけでなく基礎知識についても理解を深めやすくしています。コードを書くのは楽しいですが、コードを書くのが目的にならないように、実装するものを明確に示していきます。

Web アプリケーションの構成要素はフロントエンドとバックエンドの 2 つや、プレゼンテーション層(ブラウザ)、アプリケーション層(AP サーバ)、データ層(DB)の 3 層に分解されますが、本書はフロントエンドを対象範囲としています。しかしバックエンドからのレスポンス考慮して設計・実装するため、バックエンドの知識についても一部対象としています。

##参考にしてもらえる品質のコード

本書では Web アプリケーションを実装しますが、参考にして頂くからにはコードの品質も担保したいと考えています。静的解析や自動補完の恩恵を得られるように TypeHint を活用したり、オブジェクトやメソッドを適切な粒度に分けることを意識しています。

ここで注意しておきたいのは「アプリケーションの品質」ではなく「コードの品質」であるということです。本書ではテストコードについては対象外としています。そのためアプリケーションの品質が担保できているとは言えません。テストコードの実装については FutureWork として、今後取り組みたいと思っています。

静的解析や自動補完を有効にした VSCode での Python 環境構築については記事にしているので、適宜参照してください。

##HTML/JS/CSS を一切書かず、Python だけで実装する

Flask などのフレームワークを用いて Web アプリケーションを作成する場合、テンプレートエンジンJinjaを活用して HTML を動的に生成したり、Bootstrapを導入して事前定義された UI コンポーネントを活用することもあるでしょう。

また最近ではPyScriptという HTML 内で Python が実行できるフレームワークも登場してきました。私自身 PyScript で今後どういったことが出来るようになっているか非常に楽しみです。しかし、これらの方法はどうしても HTML/JS/CSS を書く必要があります。

「フロントエンジニア以外は HTML/JS/CSS は勉強しなくて良い」とは全く思いません。一方で、学習の挫折やデモアプリ開発の遅れの原因になるなど避けたいケースもあるでしょう。想定読者がまさにあてはまるケースだと思います。

そこで本書ではStreamlitを活用することでHTML/JS/CSS を一切書かず、Python だけで実装するWeb アプリケーションを紹介します。UI の選択肢が限られる分、Web アプリケーションの仕組みに集中できます。逆に細かいカスタマイズが出来ず本番運用には向かない面もあるため、あくまで学習・検証・デモ用のアプリケーションと考えて頂きたいと思います。

ref