- 36
- 14 195
KENのモダンWeb開発ラボ
เข้าร่วมเมื่อ 20 ธ.ค. 2012
このチャンネルでは、Webエンジニア向けに最新のフロントエンド開発技術や効率的な開発手法を紹介しています。React、Next.js、GitHub Actions、Terraformなどを活用した実践的なテクニックや、開発効率を高めるためのツールの使い方を解説します。スキルアップを目指すエンジニアの皆さんに役立つ情報をお届けします！
ReactのuseCallback完全解説！無限ループ問題を解消して最適化する方法
今回はReactのuseCallbackを深掘りし、Reactアプリで度々発生してしまう無限ループ問題を解消する方法を解説します。この動画では以下の内容をカバーしています：
- useCallbackの必要性と基本的な使い方
- 無限ループが発生する原因とその解消法
- React Developer Toolsを活用したデバッグ方法
- useCallbackを適切に使うための注意点
動画内では実際のコード例を使って解説していますので、ぜひ参考にしてください。
- useCallbackの必要性と基本的な使い方
- 無限ループが発生する原因とその解消法
- React Developer Toolsを活用したデバッグ方法
- useCallbackを適切に使うための注意点
動画内では実際のコード例を使って解説していますので、ぜひ参考にしてください。
มุมมอง: 142
วีดีโอ
VSCodeとTailscaleで実現！最強のリモート開発環境を構築する方法
มุมมอง 51219 ชั่วโมงที่ผ่านมา
1回目: th-cam.com/video/EWvQEGWgO2s/w-d-xo.html 2回目: th-cam.com/video/deQK_ivGwaw/w-d-xo.html 00:00 イントロ 00:55 開発の課題 05:14 Remote Dev Containersとは？ 08:29 ハンズオン開始 10:24 SSH設定 13:40 VSCodeでSSH接続 18:15 dockerの設定 20:24 dev containersを実行 25:57 Tailscaleで簡単VPN構築 33:31 Remote Dev Containersの注意点 36:22 まとめ 今回は、MacやWindowsを使いながらLinux上で開発を行うための「リモート Dev Containers」と「Tailscale」を活用した最強の開発環境構築方法をステップバイステップで解説し...
最高の開発環境を目指す！VSCode Dev ContainersでNext.js + Prisma + PostgreSQLの開発を実践する！
มุมมอง 63814 วันที่ผ่านมา
前回の動画: th-cam.com/video/EWvQEGWgO2s/w-d-xo.html 00:00 イントロ 01:52 概要 04:15 ハンズオン開始（dev contianersセットアップ） 08:43 devcontainer.json 12:50 dev contianers起動 14:44 Next.js作成 17:11 Next.js → PostgreSQL 26:33 コンテナを消して最初から 29:37 開発環境のカスタマイズ 33:18 サービスを追加してみる 42:04 DBにアクセスしてみる 43:44 まとめ VSCodeのDevcontainerを活用して、実践的な開発環境を構築する方法を解説！今回は、Next.jsとPostgreSQLを組み合わせたフルスタック環境を構築し、複数サービスの連携や開発環境のカスタマイズ方法をご紹介します。 Do...
最高の開発環境を目指す！VSCode Dev Containersの基本を押さえよう！
มุมมอง 2.2K14 วันที่ผ่านมา
00:00 イントロ 00:38 開発環境の課題 03:43 Dev Containerとは？ 06:59 ハンズオン開始 08:18 拡張機能のインストール 12:50 Dev Containerの起動 15:10 Reactアプリを作ってみる 17:17 Dev Containerのポートフォワード 20:18 簡単に開発環境をリセット 23:31 まとめ Devコンテナを使って、ローカル環境を汚さずに快適な開発環境を整えよう！ この動画では、VS Codeの強力なツール「Dev Containers」を初心者向けに解説します。具体的な事例を交えながら、以下を紹介： - Devコンテナが解決する開発環境の課題 - 基本的なセットアップと使い方 - Node.jsとTypeScriptを用いた実践デモ - チーム全員が同じ環境で開発できるメリット 次回は「Docker Compos...
PrismaでTypeScriptの型を自在に操る！Prisma.validatorを使おう
มุมมอง 17121 วันที่ผ่านมา
この動画では、PrismaでTypeScriptの型を効率的に管理する方法について解説します。 PrismaはTypeScriptとの相性が良く、型補完が効く強力なORMですが、生成された型を他の場所で再利用する際に、手作業で型を定義するのは大変ですよね。 そこで登場するのが「Prisma Validator」！これを使えば型定義の保守性を高め、スキーマの変更にも柔軟に対応できます。 動画では、具体的なコード例を交えながら、Prisma Validatorの使い方を詳しく解説しています。 TypeScriptでの開発効率をアップさせたい方 Prismaをもっと使いこなしたい方 は必見です！ ぜひ最後までご覧いただき、ご質問やご感想もお待ちしています！ 関連リンク： Prisma公式ドキュメント: www.prisma.io/docs/orm/prisma-client/type-sa...
モノレポでのChromatic活用術：GitHub ActionsでCIを効率化する方法
มุมมอง 17128 วันที่ผ่านมา
再生リスト: th-cam.com/play/PLL8RZJqj2LQdP66ucOZ848uz9EN_PZITz.html 前回の動画: th-cam.com/video/UTTt3cebMzg/w-d-xo.html 00:00 イントロ 00:56 概要と課題 04:31 Workflowの作成 08:45 GitHub Actionsの課題 12:12 課題の対処法 17:00 まとめ 今回は、モノレポ環境でChromaticとGitHub Actionsを効率的に活用する方法をご紹介します。特定のディレクトリやファイルが変更された場合のみChromaticを実行し、CIのコストと時間を削減するテクニックを解説します。 また、必須のステータスチェックと組み合わせる際の課題と、その解決策についても詳しく説明します。この方法はChromaticに限らず、他のGitHub Acti...
もう怖くないgit rebase！基本から高度なテクニックまで解説
มุมมอง 293หลายเดือนก่อน
Gitを使っていると「rebase」というコマンドを耳にしたことがある方も多いのではないでしょうか。しかし、「使うのが怖い」「間違えたらどうしよう」と不安に感じていませんか？ この動画では、その不安を取り除き、git rebaseを理解して便利に使うための方法をわかりやすく解説します。基本的な概念から始め、具体的な使用例を交えながら、git rebaseを安全に行う方法をステップバイステップで説明します。 さらに、複数のブランチが絡んだ複雑な状況での「git rebase onto」を使った高度なテクニックも詳しく紹介！これを理解することで、ブランチ管理の不安を減らし、git rebaseを適切なタイミングで自信を持って使えるようになります。 🔹 この動画で学べること： git rebaseの基本概念 git rebaseとMergeの違いと使い分け git rebaseを使った安全...
PrismaとPostgreSQLで日本語全文検索を実現する！
มุมมอง 291หลายเดือนก่อน
00:00 イントロ 02:04 導入と概要 06:35 リポジトリセットアップ 08:00 Dockerのセットアップ 11:41 スキーマとシードの作成 22:54 PrismaでPostgreSQLの拡張機能を追加 29:31 データベースへのパフォーマンス検証クエリ 35:55 簡単な検索アプリの作成 39:26 まとめ 日本語での全文検索にお困りの皆さん、必見です！この動画では、PrismaとPostgreSQLを組み合わせて、日本語の全文検索を実現する方法を解説します。標準の全文検索機能ではうまくいかない日本語特有の問題を、pg_bigmを活用して解決します。 - Dockerを使った環境構築 - Prismaでのスキーマ定義とシードデータの作成 - pg_bigmの導入と設定 - パフォーマンス検証と高速検索の実現 - 実際の検索アプリの作成 ステップバイステップで説明...
【GitHub Actions連携編】Storybook+Chromaticでフロントエンドの品質を継続的に保証する
มุมมอง 130หลายเดือนก่อน
再生リスト: th-cam.com/play/PLL8RZJqj2LQdP66ucOZ848uz9EN_PZITz.html この動画では、ChromaticとStorybookを使用したビジュアルテストをGitHub Actionsと連携させる方法を詳しく解説します。基本的なワークフローのセットアップから、TurboSnap機能の活用、環境変数の設定、プルリクエスト管理まで、実践的なテクニックを紹介。効率的なCIパイプラインの構築方法を学べます。 以下の動画を先に見ておくと良いかもしれません。 th-cam.com/video/6k_D7R2hH2o/w-d-xo.html th-cam.com/video/o3UNkjwDyYE/w-d-xo.html th-cam.com/video/tm4WNmpeSU4/w-d-xo.html th-cam.com/video/hcuGc1...
【Visual Tests Addon編】Storybook+Chromaticでフロントエンドの品質を継続的に保証する
มุมมอง 87หลายเดือนก่อน
ChromaticとStorybookの連携における新しいアプローチ、Visual Test Add-onの使用方法を紹介します。この機能を活用することで、ローカル環境での差分確認やデザイナーとのスムーズなコミュニケーションが可能になり、開発効率が大幅に向上します。CIの実行時間短縮や、プルリクエスト前の事前確認など、実践的なメリットを具体的に紹介しています。 以下の動画を先に見ておくと良いかもしれません。 th-cam.com/video/6k_D7R2hH2o/w-d-xo.html th-cam.com/video/o3UNkjwDyYE/w-d-xo.html th-cam.com/video/tm4WNmpeSU4/w-d-xo.html th-cam.com/video/hcuGc1xi9ZE/w-d-xo.html 参考ページ Chromatic Setup: www....
【Chromatic CLI編】Storybook+Chromaticでフロントエンドの品質を継続的に保証する
มุมมอง 1082 หลายเดือนก่อน
再生リスト: th-cam.com/play/PLL8RZJqj2LQdP66ucOZ848uz9EN_PZITz.html この動画では、モダンなWeb開発のエコシステムを活用して、堅牢なReactアプリケーションを構築する手法を紹介します。StorybookとChromaticを組み合わせることで、フロントエンドの品質を継続的に保証する仕組みについて数回に分けて解説＆実践していきます！ 以下の動画を先に見ておくと良いかもしれません。 th-cam.com/video/6k_D7R2hH2o/w-d-xo.html th-cam.com/video/o3UNkjwDyYE/w-d-xo.html th-cam.com/video/tm4WNmpeSU4/w-d-xo.html 参考ページ Chromatic Setup: www.chromatic.com/docs/storybo...
【Chromatic概要編】Storybook+Chromaticでフロントエンドの品質を継続的に保証する
มุมมอง 1402 หลายเดือนก่อน
再生リスト: th-cam.com/play/PLL8RZJqj2LQdP66ucOZ848uz9EN_PZITz.html この動画では、モダンなWeb開発のエコシステムを活用して、堅牢なReactアプリケーションを構築する手法を紹介します。StorybookとChromaticを組み合わせることで、フロントエンドの品質を継続的に保証する仕組みについて数回に分けて解説＆実践していきます！ 以下の動画を先に見ておくと良いかもしれません。 th-cam.com/video/6k_D7R2hH2o/w-d-xo.html th-cam.com/video/o3UNkjwDyYE/w-d-xo.html th-cam.com/video/tm4WNmpeSU4/w-d-xo.html 参考ページ Chromatic Review: www.chromatic.com/docs/review...
Storybook+Vitestで超便利なコンポーネントテスト手法が登場！
มุมมอง 3662 หลายเดือนก่อน
再生リスト: th-cam.com/play/PLL8RZJqj2LQdP66ucOZ848uz9EN_PZITz.html この動画単体でも新しい機能はわかりますが、以下の動画で作ったStoryを使っているため、合わせて見てみると理解が深まるかもしれません！ th-cam.com/video/6k_D7R2hH2o/w-d-xo.html th-cam.com/video/o3UNkjwDyYE/w-d-xo.html Storybook v8.3の新機能、Vitest Pluginがフロントエンド開発のテスト方法を一変させるかもしれません。Storyを直接テストに変換し、実際のブラウザ環境で高速にテストを実行。SmokeテストからInteractionテストまで、より効率的で信頼性の高いテスト環境を提供します。従来のテスト方法と比較して大幅な時間短縮を実現し、開発ワークフローを加...
Storybookで書くInteraction Testを実装してみよう！
มุมมอง 1952 หลายเดือนก่อน
再生リスト: th-cam.com/play/PLL8RZJqj2LQdP66ucOZ848uz9EN_PZITz.html th-cam.com/video/6k_D7R2hH2o/w-d-xo.html この動画は上記動画の続きとなっていますが、StorybookのInteraction Testを見てみたい人にとっては十分な内容になっているかと！ ReactとStorybookを使用したコンポーネントテストの新しいアプローチ、Interaction Testを紹介します！ 00:00 イントロ 01:40 Interaction Testの実装 07:19 Interaction Testの課題 09:15 Interaction Testの自動実行 10:48 Interaction Testでタイムトラベル 11:32 まとめ 動画内に登場したもの - Storybook ...
React + Storybook + MSW + Vitestで作る堅牢なフロントエンド開発術
มุมมอง 1.2K2 หลายเดือนก่อน
再生リスト: th-cam.com/play/PLL8RZJqj2LQdP66ucOZ848uz9EN_PZITz.html この動画では、モダンなWeb開発のエコシステムを活用して、堅牢なReactアプリケーションを構築する手法を紹介します。 React、Storybook、MSW（Mock Service Worker）、Vitestを組み合わせることで、効率的な開発フローと信頼性の高いテスト環境を実現します。APIモックの作成からユーザーインタラクションのテストまで、実践的なテクニックを step-by-step で解説します。 Storybook MSW: storybook.js.org/addons/msw-storybook-addon MSW Boundaryの記事: mswjs.io/blog/introducing-server-boundary Vitest: ...
GitHub Actionsの失敗をSlackで即座にキャッチ！効率的な開発体験の構築法
มุมมอง 1684 หลายเดือนก่อน
GitHub Actionsの失敗をSlackで即座にキャッチ！効率的な開発体験の構築法
Production ReadyなNext.jsコンテナイメージのCI/CDを構築する
มุมมอง 3915 หลายเดือนก่อน
Production ReadyなNext.jsコンテナイメージのCI/CDを構築する
GitHubって何？Gitと違うの？ - バージョン管理とGit、そしてGitHub
มุมมอง 1017 หลายเดือนก่อน
GitHubって何？Gitと違うの？ - バージョン管理とGit、そしてGitHub
素晴らしい動画をありがとうございます！私もLinuxマシンに開発環境を構築してみたいと思います。
ありがとうございます！ぜひぜひ！
@@kenfukuyama688 動画を参考に無事環境の構築ができました。とても便利そうです。ありがとうございました！
知りたいと思っていた内容でとても参考になりました。ありがとうございます！チャンネル登録しました。これからもこのような動画を作っていただけるとありがたいです。
ありがとうございます！お役に立てたようでよかったです！今後もTipsを共有していけるようにします！
とてもわかりやすい
ありがとうございます！
最近の動画、欠かせず見てます！ フロントできる人が周りにいないのでとても助かります。
ありがとうございます！不定期なのが恐縮ですが少しずつ役に立つかもしれないコンテンツが配信できたらと思います！
説明ありがとうございます！ アドバイスが必要です： 私のOKXウォレットにはUSDTが含まれており、シードフレーズを持っています. (alarm fetch churn bridge exercise tape speak race clerk couch crater letter). Binanceにそれらを転送するにはどうすればよいですか？
すみません、お恥ずかしいことになんのことなのかさっぱりわかりません！🙏 動画に関連した話ですか？？
15:30 フォルダ vite-project は狙い通りフォルダ project-a の直下に作成されてるように見えるのですが、コレは想定とは異なるのでしょうか？
言い方がややこしかったですね😭私は個人的に、プロジェクト配下直下にpackage.jsonとかがきてほしいので、vite-projectってフォルダができてほしくなかった、という意味でした！ 確か ‘npm create vite@latest .’ みたいな書き方をすると直下に作ってくれたと思います！
直接、ドッカーファイル作った方が直感的ではないでしょうか。docker-composeを作るになるともっと複雑になるのでは?😅
複数サービス必要なときに使うのがdocker-composeですね！それ以外はおっしゃる通りDockerfileだけで良いと思います🙆
Web Developer Bootcamp 2023 受講して、先日完走しました。素晴らしい講義をありがとうございました。
ありがとうございます！あの超絶長いコースを完走できるのほんとにすごいです（自分で作っておきながら…） こちらでも引き続き実践的な内容を不定期に配信しますのでよろしくお願いします！
ちょうど、このあたりの技術を習得したいと思っていた50代おじさん技術者です。頑張って付いて行きます。
ありがとうございます！これからも不定期にコンテンツ出していくのでよろしくお願いします！🚀
よき！
ありがとうございます！
次回はssh接続とかですかね ？どうやって家のパソコンを起動しているのか気になります。次回もよろしくお願いします
そうです！実はtunnelという方法もあるのですが若干もっさりするので使っていないです。 家のパソコンは、自分で起動していなかったときは家族というチートを使ってます...😂WOLまで導入しなくても特に困っていないので...🙏
@@kenfukuyama688 家族にパソコンのボタン押して～っていうの面白いですねｗ 自分はwolむずかしすぎてできなかったので、スマートスイッチか何かで物理的にスイッチおしたいと考えてます いつも、素晴らしい動画をありがとうございます！これからも頑張ってください！
次回の動画楽しみです！！
ありがとうございます！早めに収録します！来週目標で...
全然関係ない質問になりますが、「copilotすご！」の手書き風の文字はどうやって動画内に組み込まれたのでしょうか？
これは動画制作ソフトで後から挿入しています！
続きキボンヌです！！
ありがとうございます！明日の夕方には配信できる予定です！
すごい勉強になります！ありがとうございます😊
ありがとうございます！ぜひ使ってみてください😁
udemyの【世界で70万人が受講】Web Developer Bootcamp 2023(日本語版)を受講し、エンジニアになって1年が経った者です。 講座で非常にお世話になりましたが、TH-cam発信もされていたとは嬉しい限りです！ Prismaは実務でも使っているので、解説嬉しいです。 今後の発信も楽しみにしてます😊
ありがとうございます！あの超長いコースも受講していただきありがとうございます！（「エンジニアになって1年」と聞けてめちゃくちゃうれしいです） 実務で役に立つと思う情報を不定期ですが発信していきますので、興味ありそうな動画があれば観ていただけたら幸いです！😄
こんにちは。いつも git を雰囲気で使って失敗している者です。 注意点も含めた rebase の分かりやすいご説明、ありがとうございます。 switch サブコマンドすら使ったことがなかったので大変参考になりました。 私はレビュー待ちなどで同時に複数のブランチで並行して作業していると、ブランチごとのコミットの基点がどこだったか迷子になりがちなのですが、この動画のように視覚的に理解しやすく表示できる方法やツールなどご存知だったら教えていただけないでしょうか？
ありがとうございます！複数ブランチ並行して作業しているとわからなくなりますよね...。これは私も最適解が無く、地道に記憶を辿っていたりします...💦 個人的には `tig` というツールでブランチを可視化しているのですが、VSCodeではいつのまにかSource Control Graph(code.visualstudio.com/docs/sourcecontrol/overview#_source-control-graph)が表示されるようになってブランチが可視化されるようになったので、見やすくなった印象はあります！ あとは標準なgitであれば `git log --graph --oneline --all` が使えたりしますね！ ローカルでbranchのbranch（分岐からさらに分岐）をしなければだいたい乗り切れるとは思うのですが、branchのbranchを多数やり始めたり、かつローカルでrebaseを多発させるといずれにせよ苦しむ印象が強いですね...😭
Web Developer Bootcampの日本語版でお世話になってました！ TH-camもやっていたのですね。こちらも参考にさせていただきます！
ありがとうございます！TH-camではゆるく、でも役に立つような情報を不定期に出しています。 何かしらヒントになる何かが提供できたらと思っています！
とても勉強になりました！ 動画での説明提供ありがとうございます 早速、やってみようと思います
ありがとうございます！何か新たな発見があればフィードバックよろしくお願いします📝
@@kenfukuyama688 自身もNext.jsでの開発をメインに活動しているのでServer actionsとtanstack queryを併用したリソース更新・取得並びにcache戦略あたりの知見について動画などにしていただけるととても嬉しいです！ 度々ですがこの動画はとても参考になりました！ ありがとうございます
わかりやすかったです。 会社で使うので勉強になりました
コメントありがとうございます！お役にたててよかったです！
Udemyにアクセスすると、4,500円と表示されますが、決済に進むと無効なクーポンコードと表示され、18,000円に戻ってしまいます。
大変申し訳ありません。Udemyの価格改定に伴ってクーポンが無効化されていたようです。2016年内であれば1500円で購入可能なクーポンを新たに発行致しました。
1500円のクーポン欲しいなー。
すごい分かり易くて、是非購入したいんですけど金欠です。1500円セールお願いしますT_T
コメントありがとうございます！２０１８年中であれば１２００円のクーポン発行しましたので、ぜひご活用ください！ www.udemy.com/angularjs_ja/?couponCode=LEARNANGULARJS2018JP
Ken Fukuyama マジすか！ありがとうございます！絶対購入します！