見出し画像

UdemyでWeb開発のコースを作った話

こんにちは、つるです。

noteデビューがまさか 反省文 になるとは思っていませんでした。
気を取り直して、UdemyでWeb開発のコースを作ったので
その件について書こうと思います。

自分のブログでも良かったんですが、
noteのほうが随分楽に書けるのでこの媒体に頼ろうかなと思いました。
(自由度でいうと自分のブログのほうがいいけど)

口下手な自分がUdemyでなにかコースを出すなんてさっぱり考えていませんでした。

今でも信じられないくらい...!というのは流石に言いすぎですね😅

以下が、そのコースです。

トップの画像は、もともと僕が作っていたものを友人に見せたら、その友人が「コレくらいしないと目立たないから見てくれないよ〜」って言って作ってくれました。友人には感謝しかない。ありがとう。*1

では、内容について一つずつ裏話を書いていきます。
※概要はコースのページ見てもらったらわかるので、こちらでは別の角度の話を書こうと思います。

STEP1 : Webシステムの概要を理解する

画像1

まずここで、コース全体に共通する、概念を理解します。
ところでWebシステムと言う言葉を使ってしまったのですが、
Webアプリのほうが良かったのだろうか、と最近悶々としています。

え?どっちでもいい?

Googleトレンドでは、Webアプリケーションのほうが多い。
そう気づいたのは、全て録り終えてからでした。
すいません。コレはご勘弁ください。
内容はしっかり理解できるように図を添えて説明していますので・・・

STEP2 : 開発環境を整える

画像2

最近人気のVisualStudioCodeを紹介しています。

まずいきなり環境作ったりなんとかしたり...みたいなのは一切やりたくなかったので、まずはどんどんすすめることができるようにしました。

必要なものを必要なときに、必要なぶんだけ・・・

ジャストインタイムですね!
(・・・言いたかっただけです)

STEP3 : Webシステムを公開する

画像3

当コースで一番大きな部分です。

HTML / CSS / JavaScript / PHP などの言語から、
AWSの EC2 / ALB / Route53 / ACM と、
Webサービスをするなら知っておいて損はないものを一通り押さえていきます。
お名前.comで独自ドメインを契約して、ネームサーバーの設定もしていきます。

ここでは HTML/CSS でWebページの構築について学び、JavaScriptやPHPでプログラミングについて基礎の基礎から学んでいきます。
プログラミングの学習についてこだわったのは、Intとかfloatとか型がどうのとかは、あえて簡略化しました。
だって、最初からそんな言語仕様伝えられても面白くないでしょ。
僕は、まず動かしてもらって、
「動いた!嬉しい!もっとやりたいぞっ!」
っていうのをコースで実現できることを目指しました。

なぜなら自分自身が、その感動体験があるので今まで飽きずにやってこれたからです。

僕の場合は N88-BASIC というプログラミング言語から入りました。
「なんでお前の年齢でそれやってんの?」って言われるくらい古いものですが、中学生のときにBASIC部*2 があったからとしか言えないです笑

正直 N88-BASIC でも PHP でも何でもいいと思うんですよね。
(いや、今の時代でN88-BASICから入るのは駄目か笑)
自分で作ったものが動いたときの感動っていうのは、他の人には計り知れない。それを知ってほしかった。
今は、Webサービスの作り方を知っていたほうが、BASICより使えるし、お金を稼ぐチカラにもなる、僕としても1番自信を持ってお伝えできる、そんな色んな理由があって、今の内容になっています。

話が逸れました。。

STEP3の後半では、実際にサーバーに今まで作ったものをアップロードしてインターネット上に公開できるようにしていきます。

やっぱりWebページを作ったのだから公開できたほうが楽しいですよね。

そして、その公開のためのサーバーの準備は、昨今のWebサービスでは当たり前になっている、クラウドコンピューティングサービスを活用します。
その中でも、1番利用されているAWSを利用します。
「いきなりサーバーなんて難しい」と思う方でも全然だいじょうぶです。
コマンドの利用など全く知らない方でも操作できるようにゼロから説明しています。コースタイトル通り!
この部分で、サーバー怖い黒い画面怖いみたいなのが無くなると嬉しいです。(僕もむかし怖かったけど)

STEP4 : ファイルを効率よく管理する

画像4

ここではおなじみGit、Githubについてお伝えしています。

正直STEP3まででも十分なコースになるコンテンツボリュームです。
しかし、やっぱりWeb開発で活躍できるような人になるには、もうちょっとスキルほしいなと思ったからです。
その中でも、GitとGithubの便利さにはぜひ触れてほしいですね。

過去、個人ブログに Git と Github の違いがわからないくらいの人がみたらちょっとだけマシになる記事 を書いたことがあるのですが、こんな零細ブログですらブクマついています。
あれ、コレもしかしてみんな困ってたりする?
じゃあ、コースの内容に入れちゃえ!ノリで追加しました笑

今見ると、過去に書いた記事でもなんとかわかりますが、Udemy内の資料のほうが随分わかりやすいですね。自分も進歩していてよかった。
(褒めてくれないので、自画自賛しよう)

STEP5 : 先人が作った機能を利用して開発を加速させる

画像5

このSTEPのコンセプトは、「いろんな方が公開しているOSSを使って開発を加速させよう」です。

なんでOSSで、DockerとかWebフレームワークと同じくくりにするんだよ、と思った方もいるかも知れません。

ただ、僕はちょっと疑問だったんですよね。
いきなり「Docker使いましょう!」「Webフレームワークいいですよ!」って言われて、「はーい」ってなるかなって。

「え?なんでいいの?今動いてるからいいじゃん」
ってならないですか。

なので、まずOSSっていうのを展開しているインターネットの世界観をお伝えした上で、「環境づくりには最近ならDockerがおすすめですよ」、「OSSであるWebフレームワークを使うと開発が加速しますよ!」とお伝えすることにしました。

そんなわけで、
結果的にはDockerやMySQL、Laravelを使うことができるSTEPに仕上がりました。
Laravel触ると、必然的にプログラミングの設計の話(MVC)になると思うんでここも〇〇を例に説明しています。

続きはコースの中で!

STEP6 : 他のサービスと自分のプログラムを連携させる

画像6

最後のSTEPでは、WebAPIやWebhookについて学びます。
教材としてはLINEを使って、ボットを作ります。
(ボットというのは自動的に返事をくれるロボアカウントです)

やっぱりなんか管理画面作るより他のサービスと連携させて何かを動かせたほうが、

「うおー!動いたぜー!!」

ってなりますよね。
あれ?なりませんか?

興奮しすぎなのかなあ・・・
普段自分が使っているサービスを自分の作ったプログラムで自動的に動かせたら、ステキじゃないですか。

でも実は1番面白いのって、その便利になった後のことを想像しながら作ってる工程だったりしますよね。そして試行錯誤してできるからできたとき感動する。完成を目指しているはずなのに結局工程が面白いってどういう説明したらいいですか。

そういえばUdemyのコンテンツも作ってるときが1番楽しかったかも。

そんなことより、後ウマイヤ朝の最盛期王ってなんなのかって?
アブド=アッラフマーン3世ですよ。有名じゃないの?*3

さいごに

さて、こんなボリュームになってしまったこのコースですが、
実はこのコースめちゃくちゃ難産で、1年3ヶ月掛かっております。
なぜなら前半のSTEP3まで取り直しをしたからです。
(前半の半分、説明が下手くそ過ぎてすべて捨てました笑)
スライドなんて、1039枚の大作、Keynoteでこんなに作ったの人生で初めて笑
そのおかげもあってか、
多くの方が受講していただけています。
(もちろん最初の公開時にTwitterでRTいただけた皆さんのおかげが1番大きいと思いますが)
日々動画の再生時間も伸びているので、順調に進めていただけているのだと信じています。

僕にUdemyの作成をおすすめしてくださった先生、
コースのサムネ作ってくれた友人、
そしてコースを受講していただいた方に感謝いたします。

ありがとうございます。

あ、ちなみに以下から買うとクーポンがついていますので
気になる方は、ご利用ください。

※モバイルでクーポンが適応できない話も訊いているのでブラウザからお願いします。
※もし割引できてないならクーポン期限切れです。お知らせください。クーポンを更新します(発行できるなら、ですけど)

脚注

*1 とはいえ、やっぱり恥ずかしい気持ちもある笑
*2 BASIC部が文化祭で作ったアニメーションで会場がざわついたときの感動や、スロットゲームを作ったら後輩が楽しそうに遊んでいたときの嬉しさは今も鮮明に覚えている。
*3 偶然覚えているだけで世界史が得意なわけではない


よろしければサポートお願いします! いただいたサポートはクリエイターとしての活動費に使わせていただきます!