この技術スタックは現代の魔法です。

  Рет қаралды 14,662

Shin Coding Tutorial

Shin Coding Tutorial

Күн бұрын

#入門 #プログラミング #個人開発 #webエンジニア #プログラミング #Webサービス #独学
※追記
Vercelのhobbyプランでは商用利用ができないので、Proに課金する必要があります。
月額20$なので、運用コストがかかります。
運用コストを最小限に抑えたい場合はAWSやGCP、CloudflarePags等のクラウドサーバーを利用してデプロイした方がリスクを避けて運用ができます。ただNext.jsのISRの機能はVercelでしか利用が不可です。
オススメは以下かもです。
フロントエンド:Next.js → CloudFlarePages またはAWS/GCPへデプロイ
バックエンド:Hono → Cloudflare Workersへデプロイ
だと、最初の運用コストを最小限にできると思います。Supabaseはそのままでもいいかと思います。
00:00 イントロ
01:11 注意点とメリット
02:38 全体像
03:15 フロントエンド技術スタック
08:00 バックエンド技術スタック 
10:43 DBと決済プラットフォーム
12:54 認証 
14:16 インフラ
15:13 個人開発プロジェクト
17:42 Webアプリ開発とビジネス  
20:27 おわりに
【さらに詳しく学びたい方へ。Udemy90%割引クーポン発行中🚀】
↓↓↓↓↓
shincode.info/2021/12/31/udemy...
\ShinCode_Camp開校しました/
プログラミング講座&副業・起業が学べるプラットフォーム🚀
🎁月額2500円でWebプログラミング全講座が見放題
🎁分からない箇所は質問し放題
🎁7日間無料キャンペーン実施中
🎁定期的にお仕事・副業の発注
🎁ShinCodeと1対1で話せる
🎁コミュニティ機能付き
🎁初月30%割引クーポンコード : shincode
↓↓↓↓↓
code-s-school-5bc2.thinkific....
🌟Web開発案件も募集中です🌟
shincode-hp.pages.dev/for-bus...
Webの開発案件も募集しております。
-----------------------------------------------------------------------------------------------------------------------------
おすすめWeb系IT企業はこちら ↓
株式会社WorldHacks(ワールドハックス)
【HP】worldhacks.co.jp
【X】 / worldhacks20220324…
採用も拡大中のため、HPやWantedlyの採用基準をご覧の上ご応募ください。
社長の紹介
森下浬(もりしたかいり)
【X】 / kairi_morishita
株式会社WorldHacks代表取締役。
日本体育大学体育学部卒。完全未経験からエンジニアに転職後、株式会社WorldHacksを設立。現在はWeb、アプリの受託開発をメインで行っており、新規のサービス立ち上げから既存サービスの保守運用まで業界問わず様々な企業様の開発を支援。
-----------------------------------------------------------------------------------------------------------------------------
【この動画を視聴するメリット】
・SaaS/Webアプリ開発プロジェクトを高速で回せる技術スタックが学べる
・Next.js(or React)
・Supabase
・Prizma(or Drizzle)
・NextAuth.js
・RHF
・Stripe
・TailwindCSS(shadcn/ui)
・Vercel(or Cloudflare Pages)
を構成図を通して理解できる
【信頼性】
・Udemy講師
・講師レビュー評価94.6%
・Udemy受講生延べ3000人突破
・Webアプリ/サイト開発数:200以上
・生きがい:プログラミングでサイトやアプリを作ること
★チャンネル登録はこちらから★
/ @user-hl9uv6cv7k
★今回のソースコード★
★運営者SNS★
Twitter: / shin_engineer
★この動画で使用している機材★
キーボード(Keychron K6 赤軸):amzn.to/3F4zca5
マウス(Logicool G ロジクール G ゲーミングマウス):amzn.to/3DZaaYB
マイク(サンワダイレクト USBマイク PCマイク):amzn.to/30AVwJF
マイクスタンド(Luling Arts マイクスタンド マイクアーム スタンド):
amzn.to/3se5onZ
※アフィリエイトリンクになります。

Пікірлер: 31
@google_admin1
@google_admin1 2 ай бұрын
とても参考になります。いつも楽しみにしています!
@0312zico
@0312zico 2 ай бұрын
いつも神動画ありがとうございます😊
@mannorth2386
@mannorth2386 Ай бұрын
おお~!めっちゃいいな!
@user-em3ix9wi2l
@user-em3ix9wi2l 2 ай бұрын
先生が神々しく見えます いつも見てます。 応援してます
@user-hl9uv6cv7k
@user-hl9uv6cv7k 2 ай бұрын
最近は窓からの光をそのまま撮影のライトに使っていまして..😢 応援うれしいです!
@nrnr_mh
@nrnr_mh Ай бұрын
このチャンネルを1年間ずっとみ続けて勉強し、Udemyでもshinさんの動画を買って勉強したら未経験から受託開発に転職することができました。 shinさんがいなかったら絶対挫折してましたし感謝しかありません。 これからも参考にさせていただきます!
@user-hl9uv6cv7k
@user-hl9uv6cv7k Ай бұрын
どうも嬉しいコメントありがとうございます! 1年間も僕の動画で勉強されてきたのですね...泣 未経験から受託開発に転職成功できたとのことで、おめでとうございます いえいえ、nrnr_mhさんが日々頑張ったからなので自信持ってくださいね!これからも勉強する日々が続くと思いますが、これからもぼちぼち頑張ってくださいね! はい、僕もぼちぼち投稿頑張りたいと思います。コメント感謝です!
@user-qd7yl7fe4t
@user-qd7yl7fe4t 2 ай бұрын
Backend: Hono, Cloudflare D1, Drizzle Frontend : Next or Remix とかのスタックも紹介して欲しい!
@user-hl9uv6cv7k
@user-hl9uv6cv7k 2 ай бұрын
リクエストありがとうございます! Campの方ではバックエンドのスタックはそれらで1つリリース予定ではありますね。
@masanorishin381
@masanorishin381 2 ай бұрын
NOTION PRESSヒットすると良いですね。一人で開発されたんでしょ。さすがですね😅
@user-hl9uv6cv7k
@user-hl9uv6cv7k 2 ай бұрын
ありがとうございます! ヒットすればいいんですけどね笑 最後まで作れるまでがんばります!
@jhoanmiguelescobararboleda8547
@jhoanmiguelescobararboleda8547 2 ай бұрын
I think this approach is good for small apps, big apps will be very expensive
@user-hl9uv6cv7k
@user-hl9uv6cv7k 2 ай бұрын
Nice Comment! Oh..Do you know which services will be the most expensive? Is it still Supabase or Vercel?
@jhoanmiguelescobararboleda8547
@jhoanmiguelescobararboleda8547 Ай бұрын
@@user-hl9uv6cv7k Well I am not a expert, but I think that for small projects go for vercel, for middle ones go on clouldflare, and big one maybe AWS?? Supabase, its just another level, I love supa!
@arakawariver
@arakawariver Ай бұрын
honoは凄い良いですね。 簡単ですし、hono rpcがすごい便利で開発がノーストレス
@t-lang779
@t-lang779 Ай бұрын
確かvercelの無料枠は商用利用できないと思うので、収益化するアプリデプロイする際は課金しなければいけないですかね
@ch-ni4qc
@ch-ni4qc Ай бұрын
ゲーム路線でit進んで行く際の 具体的なロードマップみたいなのってありますでしょうか?
@petitclip7028
@petitclip7028 Ай бұрын
以前にViteにてshadcnを使用してWebを製作しようとしたところ、いろいろとおかしな挙動が起きてしまいました。 Viteで開発することをあきらめてNext.jsにてshadcnを使用してみたところ、問題なく動作しました。 シンさんも動画内で「shadcnはNext.jsでしか使えない」とおっしゃっていますが、同じくViteで試してうまくいかなかったということでしょうか?
@user-hl9uv6cv7k
@user-hl9uv6cv7k Ай бұрын
ui.shadcn.com/docs/installation こちら覗いてみると、viteでもreactでもいけそうですね、、僕の重い違いだったみたいです。 すみません!viteでも使えるはずですね、、
@dmcreatorjapan
@dmcreatorjapan 2 ай бұрын
Vercelってマネタイズする場合、有料プランにしないとだめじゃなかったっけ? 例えばアドセンスやアフィリエイトなどを入れたサイトの場合、Vercelのhobbyプラン(無料)では規約違反では?
@user-hl9uv6cv7k
@user-hl9uv6cv7k 2 ай бұрын
商用利用であればHobbyだとダメみたいですね。 申し訳ありませんでした。 であればコストを抑えるのであればAWSかGCP等の従量課金の方が良さそうですね。 動画でお伝えできずにいました。概要欄にもその旨を記載しておきます🥲
@mozart-2003
@mozart-2003 2 ай бұрын
ご紹介されていたNotionPressの場合テストはどこまで自動化していますか?
@user-hl9uv6cv7k
@user-hl9uv6cv7k 2 ай бұрын
ご質問ありがとうございます。 テストの実装はまだしていません...🙂
@bibiri778
@bibiri778 2 ай бұрын
あっ、天才。👇下にも卵が。
@ztsE7NKQ
@ztsE7NKQ 2 ай бұрын
すっげー わけわかんねーやw
@user-hl9uv6cv7k
@user-hl9uv6cv7k 2 ай бұрын
僕もまだまだなので、学習がんばります!
@user-nv2em1gu9k
@user-nv2em1gu9k 2 ай бұрын
まさかですが、うまくいかなかったんですか。。。 何がとは言いません、少し悲しい目をしていて、動画の最後にさらっとやさぐれる発言が。。。
@user-hl9uv6cv7k
@user-hl9uv6cv7k 2 ай бұрын
いえ!笑 お気になさらずに!多分言いたいことは分かりますが、大丈夫ですよ
@samedaysameshit
@samedaysameshit 2 ай бұрын
Drizzleの解説動画を拝見したいです。
【GitHub入門】Webアプリを作りながらGitHub開発フローを習得してみよう
38:58
プログラミングチュートリアル
Рет қаралды 36 М.
마시멜로우로 체감되는 요즘 물가
00:20
진영민yeongmin
Рет қаралды 31 МЛН
New model rc bird unboxing and testing
00:10
Ruhul Shorts
Рет қаралды 23 МЛН
УГАДАЙ ГДЕ ПРАВИЛЬНЫЙ ЦВЕТ?😱
00:14
МЯТНАЯ ФАНТА
Рет қаралды 2,6 МЛН
【2024年最新】主要プログラミング言語22選!初心者&中級者向けに解説
35:53
セイト先生のWeb・ITエンジニア転職ラボ
Рет қаралды 34 М.
【AIがヤバい】Webエンジニアがこの先生きのこるには
10:24
しまぶーのIT大学
Рет қаралды 10 М.
Next.jsエンジニアが間違える5つの勘違い
32:44
プログラミングチュートリアル
Рет қаралды 2,8 М.
Bun v1.0リリース!Node jsの時代がついに終了!
15:05
マフィア先生のエンジニア塾
Рет қаралды 6 М.