プログラミングは勉強したけどアプリは作れない...おすすめのUdemy講座を紹介

プログラミングを勉強している人はたくさんいますが、「プログラムは書けるけどWebアプリは作れない」と感じている人は多いのではないでしょうか？

Webアプリを開発するには、単にプログラミングの知識だけでなく、さまざまな技術を学ぶ必要があります。本記事では、Udemyそれぞれの開発技術に対応したおすすめの講座を紹介します！
「何から学べばいいかわからない」「プログラムは書けるけどWebアプリを作る方法がわからない」と悩んでいる方に向けて、必要な学習内容を網羅できるようにしています。

Webアプリ開発を行うには、フロントエンドやバックエンド、データベース操作などのプログラミング技術に加え、バージョン管理やインフラ、デプロイなどの環境構築に関する知識も求められます。しかし、これらを一括で学べるツールは少なく、多くの学習教材は特定の技術に特化しているため、「プログラムは書けるがWebアプリは作れない」と悩む人も少なくありません。そこで、本記事では、Webアプリを実際に開発し公開するために必要な技術を紹介します。

• 開発技術

  • HTML

  • CSS

  • JavaScript

  • React

  • Next.js

  • SQL（DB）

• バージョン管理

  • Git

  • GitHub

• インフラ / デプロイ

  • Vercel

※ここでは『プログラミングに挑戦したい人が最初に学ぶこと - VSCodeインストールからReactアプリを立ち上げてWeb公開するまでの手順書』で初期設定を済ませている前提でのご紹介になるため、もしご覧になられていない方以下を参考に初期設定を済ませた上でご覧ください。

開発技術

HTML

HTML: Webページの土台を作るもの。文章や画像を配置する。

該当箇所：セクション２

おすすめポイント
→プログラミング未経験の人でもHTML・CSSって何？どうやったら使ったらいいの？や１つ１つの単語からゆったりとしたペースで詳しく学ぶことができます！どのWeb開発アプリを使った時でも必要な知識をしっかりとおさえることができます！ コースごとに使ったコードも載っているためわからなくなった時や後ほど復習したい時に振り返られるようになっています！

CSS

CSS: Webページの見た目を整えるもの。色やレイアウトを決める。

該当箇所：セクション３

※前述HTMLと同じ講座のものとなります
セクション３以降はHTMLとCSS複合のものになります。基礎の基礎のみを学びたい方はセクション６までを学ぶことをおすすめします。なおその後のセクションにおいてその他のレイアウトの仕方等を解説してくださっているため、余裕のある方は最後までお試しください。

JavaScript

JavaScript: Webページに動きをつけるもの。ボタンを押したときの動作などを作る。

おすすめポイント
→１個１個の動画が10分以内になっているのであまり時間が取れない人でもコツコツできるような講座になっており１個の動画に１つの内容となっているのでわからなくなった場合でも大丈夫！ 便利な拡張機能の紹介や、トラブルシューティングも途中途中紹介してくださっているので万が一エラーが起きても対処できるようになっています。

React

React:効率よくWebページを作るための道具。大きなサイトでも管理しやすくする。

おすすめポイント
→プログラミングを学び始めの方にもあわせて本来難しい内容をかみ砕いて紹介してくださっており、なおかつこの講座では某有名アニメを用いたものになっているためとっかかりやすい内容となっています！
コードを記述する際に後ほど振り返った時にわかるようにコメントも一つ一つ記述しているため誰が見てもわかるコードがかけるようになります！

※Reactを学びたいだけであればセクション３まで受講することをお勧めします

公式サイト　https://ja.react.dev/

Next.js / Vercel

Next.js: Reactをもっと便利にするもの。ページを速く表示したり、SEOを良くしたりできる。
Vercel: 作ったWebアプリをインターネットに公開できるサービス。

おすすめポイント
→Reactを使用するために必要不可欠なNext.jsの内容となっています。Reactのおすすめ講座を紹介した方と同じ方の講座を採用しているため連続性があり、講座間でのギャップも少なく見ていただけます。

公式サイト　https://nextjs.org/

SQL(DB)

SQL:データを保存・管理するための仕組み。ログイン情報や投稿データを記録する。
本記事では「Supabase」の使用を推奨しております
Supabaseのみの講座は見当たらなかったためここでは私が実際に導入の際参考にしたサイトを紹介します

公式サイト　https://supabase.com/　

バージョン管理

Git / GitHub

Git:作ったコードを記録して、過去の状態に戻せるようにするもの。
GitHub:Gitのデータをオンラインで管理・共有できるサービス。

おすすめポイント
→Webアプリ開発以外でもさまざまな開発の場で使用されるGitやGithubです。個人の開発においてもチームでの開発においても活躍する大変便利なものとなっているのでぜひこの機会に身につけましょう！わかりにくい内部の部分を図解も用いて説明してくださっているため初心者の方でも理解しやすいものになっています！

※本講座ではチーム開発もできるようになっていますが、一旦は個人開発のみという方はセクション７までの受講をおすすめします。

公式サイト　https://git-scm.com/
　　　　　　https://github.co.jp/

First off Projectsについて

First off Projects（FoPs）は、高校生と大学生のためのビジネスコミュニティです。法人向けIT研修サービスを提供するスタディメーター株式会社の研究機関としての役割を担い、メンバーは資金や学習機会の援助を受ける代わりに、本人の関心に基づいたサービスの開発や学習レポートの作成を行い、新技術に関する知見や新規事業創出の事例を同社に還元しています。