1.1　はじめに

　はじめまして。筆者です。本書を手に取っていただき、ありがとうございます。

　本書は、SvelteKitとFastAPIという、比較的若いWeb開発フレームワークについて紹介します。紹介の過程の中で、取り扱うフレームワークの魅力を知ったり、実際にサンプルを眺めながら動きを試すことができます。

　筆者は、なぜこれらのフレームワークを選んでいるのでしょうか。それは、競合フレームワークより明らかに使いやすいからです。初学者でも学びやすく、現場でも十分に運用できるポテンシャルを有しています。

　現行、日本ではフロントエンドはReact、バックエンドはRuby on Railsなどが主流である状況ですが、筆者は、そろそろフレームワークのパラタイムシフトを予見しています。つまり、王座の交代です。

　また、これらのフレームワークが正式版(1.0.0〜)をリリースしようとしているという段階にあり(2022年10月時点)、このタイミングを機に、王座の交代がより現実味を帯びてくると考えています。

　本書を理解することは、数年後起こる王座交代をフォローできる力になるかと思います。

　ただし、それらは執筆時点ではまだ開発段階になります。故に、今後起こるアップデートで、システムの根幹を変更するような設計変更などが低い確率ですがありえます。言い換えれば、本書は発行から時が経つほど、記載内容と現状が食い違う部分が出てくるということです。そのとき、読者の皆様は、その辻褄を合わせるために、本書の内容を全く無視して、現行の仕様を調べる手間が生じるかもしれません。あらかじめご了承をお願い申し上げます。そのときは皆さんの力を貸してください。よろしくお願いします！

1.2　初学者の方へ

　あなたがもしエンジニア初心者・Webの初学者の場合、第一章の後半に記載しているWeb座学に目を通しておくことをお勧めします。

1.3　前提知識

　前提知識として以下の条件を要求します。重たい内容ではないので、調べながらでも可能かもしれません。

　・Githubの使い方

　・ターミナル・コンソール・CLIの使い方、叩き方

　・Python・HTML・CSS・JavaScript/TypeScriptの書き方について、都度説明がなくても大丈夫な方

　・Node.js、npmの使い方がわかる・都度説明がなくても大丈夫な方

　・Dockerについて詳しい説明がなくてもいい方。本書の設定に従える方

1.4　用意するもの

　アカウント関連でいくつか用意が必要です。すでに持っている方は、それを利用していただいて構いません。

　・githubアカウントと、リポジトリー

　github¹ で、アカウントを作成し、リポジトリーを作成してください。リポジトリーは、バックエンド用とフロントエンド用のふたつを用意してください。

　・Googleアカウント

　Google Cloud PlatformおよびMongoDB Atlasというインフラの利用登録に使います。

　・MongoDB Atlasに登録

　MongoDB Atlas²へアクセスし、データベースを作る用意をします。Googleアカウントを用いたログインを選択し、先程作ったGoogleアカウントで登録。ここでは、以降の画面の手順を進めず、止めておきましょう。

　・vercelアカウント

　vercel³は、フロントエンドの成果物を世の中に公開できるホスティングサービスです。注意点として、ここでアカウント登録する際は必ず先ほど作ったgithubアカウントを使って、vercelのアカウントを作ってください。

　・Talent API Tester

　APIを試し打ちできるツールで、今回は教材の一環としてこのソフトを利用します。Google Chromeの拡張ソフトです。脚注リンク⁴からダウンロードできます。

　・Pythonのインストール

　Python⁵のダウンロード・インストールを行ってください。公式HPから行うのが手っ取り早いです。ダウンロード後、バージョン確認コマンドを入力し、3.8.12以上がインストールされていることを確認してください。

    % python --version

    (Python) X.X.X

　・Node.js、npmコマンドのインストール

　Node.js⁶と、npmコマンドが扱えるようにしてください。Node.jsが16.17.0以上、npmが8.15以上必要です。

    % node -v

    % npm -v

　・Dockerのインストール

　バックエンドのソースコードはDockerでコンテナ化します。ここでは、Docker⁷をインストールだけしておいて、コンテナ化についてはバックエンドの章で記載する手続きに従いましょう。

1.5　Webの誕生経緯

　本書のタイトルに、「誰でもできる！」などというニュアンスを記載しているため、もしかするとWebについての知識を有していない読者がこの本に手を取った可能性が考えられます。

　この本を手に取った初学者の方には大変な感謝と、行動力に敬意を表させてください。

　彼らを対象に、本書を用いて実践する前に、いくつか基礎的な部分の座学を用意いたしました。後々の実装を理解するための伏線になりうる箇所もありますので、ぜひ読んでいただけると幸いです。

　Webの登場人物は大きく3つです。サーバー・データベース・端末 (フロントエンド)です。これらは、以下のような連携をとっています。

　この関係において、特筆すべき点は、以下の2点です。

　・データベースはサーバーが持つ。(中央集権)

　・端末は大抵ブラウザーを持っており、ブラウザーさえあれば如何様なWebページでも動かせる。

　　─ブラウザーを使っている状態の端末を、フロントエンドという、という認識でいいかも。

　Webアプリケーションでは、サーバーがデータを持ちます。フロントエンドは、ほしいデータをサーバーに問い合わせる仕組みを用いて、各フロントエンドにデータを配信するという構造です。

　サーバーやデータベース、そしてそれらが乗っかるインフラをまとめてバックエンドと呼びます。

　また、Webアプリケーションにおいて、端末側は専用のアプリなどはインストールしません。強いていうならばブラウザーがそれです。HTML、CSS、JavaScriptという言語のみで、ブラウザーに様々な画面を表示・動作させることができます。

　その基本の積み重ねで、世の中には様々なWebアプリケーションがあります。

　・Googleアカウントさえあればファイルを無料でサーバーに保管し、それを誰かと共有できるサービス

　・自分の思ったことをつぶやいたことが世界中の人間に見られるサービス

　・会社の勤怠や決算を管理できるサービス

　・就職・転職の情報をたくさん集めて吟味できるサービス

　などなどです。

1.6　Webサービスの具体的な仕組み

　具体的な話に持っていきます。前節の説明で、Webはフロントエンドとバックエンドで大きく分割されていることがわかります。

　しかし、ただ分割すればいいというものではありません。フロントエンドとバックエンドの間の情報のやりとりに関する事柄を、明確に定義する必要があります。Webは、フロントとサーバーはしばし離れた場所に位置するため、インターネットを介さないと情報のやりとりができません。

　そこで、先人たちは、そのやりとりの方法はどうすればいいか考えました。結果、WebAPIという考え方が誕生しました。

　ざっくり説明すると、WebAPIでは以下の図のように、誰に何をやってほしいかを命令するルールと、やった結果を返すデータの構造に関するルールが決めたものです。

　フロントは、通信したいサーバーの居場所(ドメイン)、やってほしい処理の名前(エンドポイント)、その処理のオプション(パラメータ)を、URLとして指定することができます。この動作をリクエストといいます。図でいうと、ドメインはfoo.bar.comの部分、/userがエンドポイント、?number=1024がパラメータです。サーバーはリクエストを受けたら、それにそぐう計算を行い、計算結果をJSONと呼ばれる情報の構造体で返却します(世界中のレスポンスが全てJSON形式であるわけではないです)。この動作をレスポンスといいます。