ShinCode_Camp

All Courses, Next.js

実例で学ぶNext.js App Routerのベストプラクティス

Next.js App Router(ver13~15)の現在の状況とそのベストプラクティスを解説します。RSCの導入から複雑になったNext.jsを完結に分かりやすくお伝えします。キャッシュやレンダリング等の分かりにくい概念もドキュメントと図解を併用して理解できます。

All Courses, Mindset

【目標達成の科学】収入倍増への実践的アプローチ

あなたの夢・目標を実現するための論理的アプローチを学ぶ講座です。収入を倍増させたり、転職に成功させるという目標を如何にして達成されるのか。Shinの経験や知見から得られた再現性のある方法を解説しています。

All Courses, Next.js, FullStack

ITメディアサイトを作りながら学ぶフルスタックアプリケーション講座

ITメディアサイトを作りながらAI(Calude)の利用方法とNext.js App Routerを学べる講座になっています。ICSメディアサイトを参考にしながら独自のメディアサイトを構築してセルフブランディングしていきたい方には必見の内容となっています。

All Courses

プログラム技術習得スピードを加速させる講座

本講座はプログラミング技術の習得を効率的に進め、学習速度を大幅に向上させることを目的としています。過去のShinCodeの経験や実際の研究データで効果があるものも紹介しております。

All Courses, Next.js

【Next.js15】新登場したHooks/ServerActionsを駆使して作るSNS開発実践講座

Next.js15で利用される新しいHooksをSNSを開発しながら解説する講座です。useOptimistic(), useFormState(), ServerActions等を学ぶことができます。認証はClerkを採用しておりWebhooksを使ってSupabaseとの連携まで行います。

All Courses

プロを目指すためのTailwindCSS中級テクニック10選

TailwindCSSをさらに使いこなすためのTipsを10選紹介する講座です。プロジェクト開発では主流になってきたTailwindCSSをより深く理解したい方はオススメの講座となっています。

All Courses

Vitestで学ぶフロントエンドテスト実践講座

Vitest/Testing-library/jestを使ってフロントエンドテスト手法を学ぶ講座です。フロントエンドテストの意義やその種類、関数やコンポーネントテストの書き方を学びます。最終的にE2Eテストまで行うのでフロントエンドテストを導入したい方は必見の内容です。

All Courses, Businness

【起業】スモールビジネスからスタートする事業構築入門

スモールビジネスから始めるネット起業方法の講座です。スキルなし経験なしからどのようにして事業構築を始めるのかを丁寧にステップバイステップで解説しています。将来独立して自由に働きたい、副業からお小遣いの収入を得たいという方はぜひご覧ください。

All Courses, FullStack

Hono/Cloudflare D1/Drizzle ORM/Reactで作るフルスタックTodoアプリ開発入門

All Courses, Next.js, FullStack

Next.js × shadcn/ui × Supabaseで本格的なWebアプリ開発を学ぶフルススタック講座

Next.js App Routerの利用とshadcn/uiやcontentLayerを利用したブログポストWebアプリケーション開発を行って実践力を身に着ける講座です。世界トップWebエンジニア「shadcn」が開発したプロジェクトを参考にして作るWebアプリを通して、実務で通用するWeb開発スキルを習得します。

All Courses, React

【完全版】React Hooksを完全に理解するHooksマスター講座

Hooksを制するものはReactを制します。レンダリングのタイミング/キャッシュ/状態管理/メモ化/パフォーマンスチューニング/楽観的UI更新/UIノンブロッキングetc...本講座でさらなるReactへの理解を深めることができます。

All Courses, Next.js

【Supabase2.0】Next.js14とSupabaseでサーバーセッション処理や楽観的UI更新を学ぶSNSクローン講座

Next.js14ではデフォルトでサーバーコンポーネントで開発が行われます。そこでSupabase Auth(OAuth)認証を用いてユーザー管理はサーバー側でセッションで行い、タイムライン表示と投稿、いいね機能付きのSNSを開発します。またReactのuseOptimistic HooksやSupabaseのTriggerなど深くSupabaseを学べる講座となっています。

All Courses, Next.js

【Stripe決済実践】Next.jsとSupabaseで講座販売アプリを作りながら決済を学ぶStripe実践講座

Stripeでサブスクリプション決済システムをNext.jsとSupabaseを利用しながら実装するStripe講座です。Stripe以外にもSupabaseのDatabase FunctionやTriggerを駆使してOAuthログイン時にProfileへユーザー保存等の高度な実装方法を学びます。

All Courses

ShinCodeの頭の中

私ShinCodeが毎日何を考えているのか？次に行動することは何か？人生との向き合い方について動画で発信しています。Shinの頭の中が知りたい方は、ぜひご覧ください。

All Courses

【完全保存版】要件定義からインフラ構築まで一貫して学べるフルスタックアプリ開発講座

要件定義、画面/DB設計、開発、インフラ構築、デプロイ運用...一貫して学べる講座は日本にも数個しか存在しません。この講座を完遂できればアプリ開発の自走力が身につきます。作りたいアプリが自由自在に作れるようになるので、フルスタックエンジニアになりたい方は必見の内容です。

All Courses, Next.js

【フォーム開発実践】認証やお問い合わせフォームをNext.js/RHF/zod等のモダン技術を使って開発する実践講座

アプリ/サイト開発で必須になるフォーム開発。モダンな技術である「Next.js」「react-hook-form」「zod」「shadcn/ui」を使ってバリデーションチェック済みの堅牢性の高いフォームの作り方をご紹介します。ファイル送信機能付きフォームも解説しています。また、Supabase Authenticationを利用してユーザー認証用フォームまで実装します。

All Courses, React

【Reactテスト入門】React Testing LibraryとJestをハンズオン形式で学ぶテスト入門講座

このコースでは、Reactアプリケーションのテストの基礎から応用までを学びます。コンポーネントの単体テストから、統合テスト、エンドツーエンドテストまで、一貫したテスト戦略を構築するための知識と技術を身につけます。React Testing LibraryやJestなどのツールを使いながら、効率的かつ効果的なテストを書く方法を探求します。

All Courses

【Astro入門】爆速で動くWebサイトが作れるAstroを使ってブログ構築しながら学ぶAstroマスター講座

Astroは高速で動くサイトを構築するために作られたWebフロントエンドフレームワークです。本講座ではAstroの基本から動的ルーティングやView Transition　API等の応用まで解説したAstro入門から理解を深める講座となっています。

All Courses

【StoryBook入門】現場で使えるUIコンポーネント管理手法を徹底的に学ぶStoryBookマスター講座

Reactで構築したUIコンポーネントをStoryBookでプロジェクトチーム内で共有する方法を本講座では学びます。コンポーネント駆動開発(CDD)しながらStoryBookの理解を深め、実務で使えるStoryBookの技術力を身に着けます

All Courses

よくある質問への回答集

YoutubeやXで良く質問される回答をまとめた講座になります。「プログラムをどうやって学ぶのか」「オリジナルアプリを作れるようになるにはどうすればいいか」などの質問に対して分かりやすく回答しています。

All Courses, Next.js

電子記事販売ECサイトをNext.jsをフル活用して実践力を身に着けるWeb開発マスター講座

Next.js/Vercel Postgres/NextAuth.js/Prisma/API Route/Stripeを駆使して1つのフレームワークでWebアプリ開発を完結させることが可能になりました。MicroCMSで執筆した電子記事を販売できるアプリケーションを構築します。より実践的なアプリ開発を学びたい方はこちらの講座でご満足いただけることでしょう。

All Courses, Next.js

【レンダリングパターン入門】CSR/SSG/SSR/ISRを完全に理解するマスター講座

Web開発で重要な概念であるレンダリングパターン。CSR/SSG/SSR/ISR/RSCを図解やドキュメント等を見ながら説明して完全に理解する講座となっています。どのタイミングでCSRやSSRを使うべきか、に迷う必要はもうありません。レンダリングを極めるとWeb開発も極めることができるでしょう。

All Courses

【実践】Github開発フローをアプリ開発しながら実践的に学んでみる講座

チーム開発する上では避けては通れない実務で必ず利用されるGithub。Githubを使った開発ワークフローは個人開発では学ぶ機会が少なりがちです。そこで本講座では個人開発でもチーム開発を意識したGithubワークフロー開発を行います。主要なコマンドやフローを図解で説明する講座です。

All Courses

【完全保存版】フルスタックエンジニアになるための学習ロードマップ

フロントエンド、バックエンド、インフラ構築まで任せられるフルスタックエンジニアになるための学習ロードマップを紹介する講座となっています。「何から学べ良いか分からない！」「どんな手順で技術取得すればいいの？」がスッと理解できるので学習手順に迷っている方は必見の内容です。

All Courses, React

Reactパフォーマンスチューニング入門

Web開発ではレンダリングやキャッシュの実装の有無によってパフォーマンスとユーザーエクスペリエンスが大幅に変わってきます。本講座ではReactやNext.jsで使えるレンダリングの最適化やキャッシュ戦略についてのお話になります。SEO対策やサイトパフォーマンスを上げたい方は必見の内容です。

All Courses, Next.js, FullStack

【フルスタックAWSデプロイ】Next.jsとExpressでTodoアプリを作ってAWSへデプロイして運用する実践講座

本講座ではTodoアプリを使いながらTypeScriptベースのNode.jsとExpress,Next.js13のスタックを使ってAWSへフルスタックデプロイをする講座となっています。Next.jsはAmplifyでExpressはAppRunnerへデプロイして本番環境で運用する経験を積むことができます。

All Courses

VitePressとMarkDownを使って綺麗な個人ポートフォリオサイトを作ってみよう

VitePressを使ってブログを構築する講座です。私の運営しているブログはVitepressを使っています。マークダウン形式でブログを書いてGithub Pagesで自動デプロイ。高速で動くページを開発して個人ブログを運用して世界に発信してみましょう。

All Courses, Next.js, FullStack

【AWS開発】Next.js13でメモアプリを構築してAWSサーバーへデプロイして本格的に運用する実践講座

Next.js13とMicroCMSを利用してノートアプリを作成します。作成したアプリケーションをAWSのS3とCloudFrontに静的ファイルをデプロイして運用します。動的ルーティングや動的コンテンツの運用はMicroCMSのWebHookとGithubActionsを連携して自動デプロイするという流れになります。AWSインフラの第一歩としては最適な講座となっています。

All Courses

ShinCodeと個別相談・雑談募集を受け付けます

ShinCodeと個別相談・雑談したい方はSlackへの参加をお願いします。会員さんは無料なのでご安心ください。

All Courses, Businness

僕が月収100万円稼ぐまでやった全行程を話します

Webプログラミング未経験だった僕が、どのようにして月収100万円を達成できたのか。その考え方とロードマップを学ぶことができます。起業や副業、独立に興味がある方は参考になる講座です。また、マインドや独立して分かったことなどもお話しています。

All Courses

ChatGPTのAPIを使ってAIチャットアプリケーションを開発してみよう

OpenAIのAPIを活用してAIとチャットできるアシスタントチャットアプリケーションを構築する講座です。仕様技術はFirebase/FireStore/Authentication/Next.js13/Typescript/TailwindCSSです。ChatGPTクローンを作りながらWebアプリ構築を学ぶことができます。

All Courses, Next.js

【Next.js13】最新バージョンのNext.js13をマイクロブログを構築しながら基礎と本質を学ぶ講座

Next.js13になってからappディレクトリやクライアント、サーバーサイドレンダリングの理解が重要になってきました。SSG/SSR/CSR/ISRの基礎を振り返り、自信を持ってNext.jsが使えるようになるマスター講座になります。

All Courses, Next.js, FullStack

【Next.js×Node.js×Prisma×Supabase】本格的なSNSアプリをフルスタック構築するマスター講座

モダンな技術スタックを駆使して１からSNSアプリケーション開発する講座。ユーザー認証からSupabaseでの投稿DB管理、PrismaのORMを使ってJavascriptのみの知識でフロントからバックエンドまで完結させる技術を身に着けます。

All Courses, Next.js

Next.jsとNotionで運用できる自作ブログを１からTypescriptベースで開発する実践マスター講座

NotionをCMSとして運用できるブログを１から構築する講座。使用する技術はNext.js/Typescript/NotionAPI。Notionにメモを残すついでにブログとして運用・投稿してみたい人にはオススメのブログ開発講座です。

All Courses, React, FullStack

【Discordクローン】React×Typescript×Firebaseを使ったDiscordクローン開発実践講座

人気アプリ「Discord」を１からReactで開発する講座。使用する技術はReact/Redux/Typescript/Firebase。近年はTypescriptの実装が増えてきており実務に近い形式で学びたい方は知っておいて損はない講座

All Courses, FullStack

【フルスタック開発】NotionクローンをMERNスタックで本格的に構築するWebアプリケーション開発実践講座

人気メモアプリ「Notion」を１からフルスタック開発する講座。使用する技術はReact/Redux/Node.js/Express/MongoDB。ユーザー認証APIやメモ作成API構築など、この講座１本で多くの技術が学べるお得な実践講座

All Courses, React

【Web3.0アプリ開発入門】ReactとSolidity言語で簡単ブロックチェーンWebアプリ開発を体験してみよう！

React×SolidityでDappsと呼ばれるブロックチェーンWebアプリケーションを開発します。Web3.0の基礎用語から丁寧に解説し、仮想通貨やメタマスク、スマートコントラクトの概念を網羅的に学べるWeb3.0完全入門パック

All Courses, PHP

【PHP入門】2ちゃんねる掲示板クローンを作りながらPHPとMySQLの基礎と本質をマスターするPHP完全入門パック

西村ひろゆき氏が開発した２ちゃんねる掲示板クローンを作りながらPHPとMySQLの基礎が学べます。コメント投稿からスレッド作成、DB設計とHTTP通信まで幅広く学ぶことができ、これからサーバーサイドエンジニアとして活躍したい方は必見です。

All Courses, Javascript, Three.js

【Three.js入門】モダンな3Dフロントエンド技術を習得して周りのエンジニアと差をつけよう！

Three.jsをあなたはご存じですか？Three.jsを学べば「これまでとは全く違う2D→3Dのフロントエンド技術」を扱えるようになります。ありふれたフロントエンドエンジニアで埋もれたくないあなたへ贈るThree.js基礎マスターコース。

All Courses

【Djangoアプリ開発】たった5日で本格的なTodoリストを構築してDjangoを学べるWebアプリ開発入門講座

CRUD操作とログインやユーザー新規登録、タスク検索機能を備えた本格的なTodoリストを構築しながらDjangoの基礎と本質が学べます。HTMLやCSSのスタイリングまで解説。サクッと動画でDjangoを習得したい方は必見の内容です。

All Courses, React

【Reactアプリ開発】3種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座

Reactを使って「ポケモン図鑑」「ブログ」「ノートメモアプリ」の3種類のアプリを構築する講座です。Reactの基礎は学び終えたからもっと実践的なアプリケーションを作りたい！応用が効くアプリ開発力を鍛えたい！という方は必見の講座内容です。

All Courses, React

【Redux完全入門】絶対に理解させるReduxアルゴリズム徹底解説入門パック

Reduxで苦戦しているそこのあなた。本講座ではあなたにReduxを完璧に理解させます。Reduxで状態管理をマスターすれば大規模なWebアプリケーション開発構築が可能に。Redux Tookitまで徹底解説したRedux完全入門パック

All Courses, Node.js, React, FullStack

【完全保存版】MERNフルスタック開発で本格的なSNSアプリを１から自分の手で構築してみよう

MERN=MongoDB×Express×React×Node.jsのフルスタック技術を使って、あなたが普段利用しているSNSアプリを１から構築していく講座です。フロントエンドからバックエンドまで駆使できる市場価値の高いエンジニアになろう！

All Courses, Javascript, Three.js

【Three.js発展講座】シェーダー言語を駆使して複雑な3Dオブジェクトを自在に操りたい人のためのマスター講座

頭の中でイメージする物体をそのままウェブサイトに落とし込めるThree.jsシェーダー言語。GLSLと呼ばれる難関言語をマスターして他と一線を画したフロントエンドエンジニアを目指せる講座

All Courses, APIs

【GraphQL入門】RESTに代わるモダンAPIのGraphQLでニュースアプリAPIを構築しながら基礎を学ぶ入門講座

HackerNewsアプリのGraphQLサーバーを構築しながら、GraphQLの本質とREST APIとの違いを理解して実務でも使いこなせる知識を身に着けられるGraphQL実践講座。モダンなAPI構築手法キャッチアップしてみよう

All Courses, Next.js

【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座

Next.jsフレームワークでマイクロブログを実際に構築しながら、Webアプリ読み込み速度やWebパフォーマンスを最大化するSSG/SSRプリレンダリング手法が学べる講座。モダンなフロントエンド技術をキャッチアップしてみよう。

All Courses, HTML/CSS

【Tailwincss3.0】利用者急増中！作って学ぶ爆速で理解したい人向けのTailwindcss完全入門パック

Next.jsフレームワークでマイクロブログを実際に構築しながら、Webアプリ読み込み速度やWebパフォーマンスを最大化するSSG/SSRプリレンダリング手法が学べる講座。モダンなフロントエンド技術をキャッチアップしてみよう。

All Courses, React

ReactでTrelloクローンアプリケーションを作ってReactをマスターしよう！

「Reactの基礎は散々学んだけど結局Webアプリの作り方の流れと設計が分からない！」そんなあなたに向けたReact中級者向けの動画です。Reactの基礎を抜け出したい人は必見です。

All Courses, React

【Twitterクローン】React×Firebaseでツイッターアプリをハンズオン形式で自作してみよう！

「ReactとFirebaseを連携させてSNSアプリを自作してみたい！データベース管理もしてみたい！」そんなあなたに向けたReact中級者向けの動画です。いつも使っているツイッターを１から自作できるようになります。

All Courses, Node.js

【Node.js入門】Node.jsとMongoDBを連携してTodoアプリを１から構築してみよう

サーバーサイド言語のNode.jsとMongoDBを連携してWebAPIを作成し、データベースに保存できるTodoアプリの作り方を図解を用いて分かりやすく説明します。

All Courses, Javascript

Vanilla Javascriptでメモアプリを自作してみよう

フレームワークを一切に使用せずにVanilla Javascriptのみでメモアプリを構築する講座です。 生のJavascriptでアプリを作ることでJavascriptの基礎と本質をより理解することが可能になります。 クラスやコンストラクタ等が登場しますので、難しいと感じた場合は休憩を入れて楽しんで学習しましょう🚀

All Courses, Next.js

Next.jsとGraphQLで運用できるブログを構築してみよう

Next.jsとGraphQLを組み合わせて本格的に運用が可能なブログを構築する講座です。煩わしいAPI設計はGraphCMSに任せて、フロントはNext.jsでGraphQLを用いてブログデータを叩いて出力します。WebHookと組み合わせてブログ運用も可能になります🚀

All Courses, React

ReactとSocket.ioでリアルタイムチャットアプリを構築しよう

ReactとSocket.ioでリアルタイムチャットアプリを構築する講座です。 ルーム番号を共有している人同士だけがソケット通信が可能になり、応用すればLINEやZoomのようなアプリが作れるようになります。講座内ではCORSエラー対処についても言及しています。