概要

本記事は、Nuxt.jsとFastAPIの入門記事になります。

なるべく初学者の方でも読み進めることができるように、誤解を恐れず、できるだけ簡単な言葉を使って説明するように心がけます。

本記事のスコープはNuxtJSとFastAPIを使って、簡単なWebアプリを作って、API連携するところまで解説します。

とりあえず、ローカルのPCでちゃんと動くところまでですね。（※ クラウドサーバー等へのデプロイなどは対象外になります。🙇）（もしご要望あれば追加しようと思います👍）

Nust.jsとは

一昔前（2010年とかその頃）は、クライアントアプリというのはなく、Server側にhtmlのtemplateエンジンなんかを組み込んで、templateの中にちょっとしたJavascriptの処理などが入っているものが一般的でした。
しかも、そのJavascriptの処理はjqueryを使うというのがメインで、jqueryが使えれば大体のことができた時代でした。

ところが・・・ここ最近は、クライアント側でやるべきこと（インタラクティブな処理、リッチなデザインの組込、複雑なビルド処理）が増えた結果、
クライアントアプリはサーバーとは別プロジェクトにして管理し、Server側はAPIのみを提供するような形が主流になってきました。

そんな中、クライアントアプリのプロジェクトでやるべき処理みたいなものがテンプレ化してきたため、クライアントアプリのフレームワークみたいなものが乱立してきました。

Nuxt.jsはVue.jsをベースにしたクライアントアプリのフレームワークです。
私個人的には、かなり使い易く、メインストリームになっていくだろうなと思っています。

その他

Next.jsという似たようなフレームワークがあるのですが、こちらはReactを使っているのに対し、Vue.jsを使っています。
私個人的には、ReactよりもVueの方を好んで使用しているため、Nuxt.js押しです。

FastAPIとは

FastAPIはPythonのWebアプリ向けのフレームワークです。

• Pythonのフレームワークでは、Djangoがまだまだ主流かなとは思いますが、Djangoはかなり大きなフレームワークで、ちょっとしたアプリを作りたい時にはあまり向かないかなと思います。
• Flaskというフレームワークによく似ています。
• まだちゃんと実感してはないですが・・FastAPIは性能がよく、Pythonのフレームワークでは一番早いみたいです。

開発するアプリについて

今回は以下のような特徴をもつWebアプリを開発しようと思います。

• Google Accountでログインできる
• ボタン一つで、Google Driveのファイル（フォルダも）をAPIで全て取得してデータベースに格納できる
• ファイル名などで、ファイルを検索し、検索結果からファイルにアクセスできる
• サイトのデザイン性もそこそこ担保する（Material Designを導入します）

開発Step

開発Stepは以下のようになります。

1. Nuxt.jsを使って、ワイヤーフレームレベルのアプリを作る（APIは連携しない）（ダミーデータをハードコードする）
2. FastAPIを使って、APIを開発する
3. Nuxt.jsのアプリとFastAPIのAPI連携を行う
4. Nuxt.jsアプリとFastAPIアプリをデプロイする（本記事の対象外）

第２回以降で、No.1から順にキリの良いところまで記事にしていきたいと思います。