はじめに
こんにちは、AIエンジニアのせりです。
近年のLLMの台頭で、モデル開発がメインのAIエンジニアでも簡単なアプリケーション開発が求められるようになってきました。自身も、PoCでStreamlitを用いた簡単なアプリ開発はしたことがありましたが、リリースまで意識したアプリ開発はしたことがなく、一方で業務でもある程度の理解を求められるようになってきたことから、しっかりと学ぶことにしました。
本記事では、Webアプリ開発初心者の自分が学習を始めた昨秋から半年間で学んだことと手順を振り返りながら紹介します。
学んだもの
Wbアプリ開発は、さまざまな言語・ツール・フレームワークが利用されるかと思います。今回は、自社で使われていることの多い以下をそれぞれ学びました。
| 領域 | 言語・フレームワーク・ツール |
|---|---|
| バックエンド | Python (Django REST Framework) |
| フロントエンド | Next.js, TailwindCSS |
| インフラ | Azure |
学習順序
1. バックエンド (Django REST Framework) のキャッチアップ
Pythonの利用経験は7年ほどあり、それなりに書いてきましたが、それらはすべて機械学習のモデル開発やデータ分析であり、バックエンド開発は初めてでした。
そこで、まずDjango REST Frameworkの公式サイトを見て最低限の知識をインプットしました。
https://www.django-rest-framework.org/
最低限の文法を理解したところで、社内で開発しているWebアプリのコードを読みながら、分からないところを開発者に聞く、という形で知識をつけました。
2. フロントエンド (Next.js) のキャッチアップ
フロントエンドは全く知見がなく、未経験の状態からスタートしました。こちらは後述の全体のキャッチアップの場面で実際に実装しながらキャッチアップを進めました。
3. インフラ (Azure) のキャッチアップ
インフラ、特にネットワークには苦手意識があり、これまで学習を避けてきましたが、今回学習を行いました。
まず、Azureに登録して実際に触ってみましたが、構成や繋がりなどが分からず、どうすればアプリ構築が出来るのか分かりませんでした。そこで、UdemyにあったAzure講座「合格への近道！Azure Fundamentals AZ-900 試験対策講座」を受講して、構成や各サービスの繋がりについて理解しました。その上で、実際のアプリデプロイに必要な手順についてはネットで調べながら、不明点は社内のWebエンジニアに聞く、という形でキャッチアップを進めました。
4. 全体のキャッチアップ
ここまでで最低限の知識は身に付けたので、実際に実装してみることにしました。
まず、Zennで見つけた「Django REST Framework + NextJSブログ構築」という記事を読みながらブログ構築を行ってみました。ただし、一部省略されていて分かりずらい部分などもあったので、Udemyで見つけた「Nextjs + Tailwind CSS + Django REST Framework で学ぶモダンReact開発」というものも観ながら実装してみることで、Webアプリ開発について理解を深めました。
5. 個人開発
ここまでである程度開発できる自信がついたので、0から個人開発を行ってみることにしました。
まず、今回初めて触ったNext.jsに慣れるために、ポートフォリオサイトの構築を行いました。全体をNext.jsとTailwindCSSで作成し、デプロイはvercelで行っています。デプロイをvercelで行った理由は、Githubと簡単に紐づけることができ、費用も掛からないためです。
次に、いよいよ本格的な開発として音声対話AIアプリを作りました。これは、名前の通りお話ししてくれるAIシステムです。
これはバックエンドをDjango REST Framework、フロントエンドをNext.jsとTailwindCSS、インフラをAzureで構築しており、AI周りは音声認識をWhisper、返答生成をGPT-4o mini、音声生成をにじボイスで行っています。フロント周りでボタン操作の関数を作成するところが分からず少し手間取りましたが、ChatGPTに教えてもらうことで構築することが出来ました。
ここまで出来るようになると、Webアプリ開発を自力で行えると言えるようになってきたのではないかと思います！
おわりに
本記事では、Web開発初心者が半年間で学んだことを紹介しました。
この記事作成時点までに学べなかったこととして、セキュリティがあります。実際にデプロイして誰でも閲覧できるようにするとなると、Azure上のセキュリティ構成を堅牢にする必要がありますが、そこまで理解しきれていません。次のステップとして学ぼうと考えています。
ご紹介した手順がWebアプリ開発をしてみたい人の参考になれば幸いです。