- Видео 35
- Просмотров 21 007
TypeScriptでフルスタックエンジニアに挑戦
Япония
Добавлен 28 сен 2021
長尺動画では目次で目当ての機能を見ようとしても、他のコードが邪魔でわかりにくいと思ったことはありませんか?
そこで、当チャンネルでは最小単位の機能をわかりやすく、動画にアップしています。
まずは、目的の機能を当チャンネルで理解していただくことで、長尺動画でも目利きできるようになります。
【自己紹介】
50歳手前で20年超勤めた会社を辞めて、転職には失敗
未経験から、エンジニアは無理だった
しかし、このままではいかんと、再起をかけて、無謀にもRUclipsを始める
足掛け、10年以上独学したプログラミングを広めるべく、奮闘中
これまで、いろんな言語に目移りばかりして広く浅くなりがちだったけど
今は、Typescript1択で突き進む
【独学したプログラミング言語とフレームワーク】
HTML CSS SASS
SQL
JavaScript TypeScript React Next.js Vue.js Nuxt.js
PHP Laravel
Python Django FastAPI Streamlit
Dart Flutter
【チャンネル登録者数】
2024年4月1日 15人から再開
2024年5月24日 100人達成
2024年6月14日 150人達成
2024年6月30日 200人達成
2024年7月14日 250人達成
2024年7月31日 300人達成
2024年8月21日 350人達成
2024年9月10日 400人達成
2024年9月28日 450人達成
2024年10月8日 500人達成
2024年10月19日 550人達成
2024年11月9日 600人達成
そこで、当チャンネルでは最小単位の機能をわかりやすく、動画にアップしています。
まずは、目的の機能を当チャンネルで理解していただくことで、長尺動画でも目利きできるようになります。
【自己紹介】
50歳手前で20年超勤めた会社を辞めて、転職には失敗
未経験から、エンジニアは無理だった
しかし、このままではいかんと、再起をかけて、無謀にもRUclipsを始める
足掛け、10年以上独学したプログラミングを広めるべく、奮闘中
これまで、いろんな言語に目移りばかりして広く浅くなりがちだったけど
今は、Typescript1択で突き進む
【独学したプログラミング言語とフレームワーク】
HTML CSS SASS
SQL
JavaScript TypeScript React Next.js Vue.js Nuxt.js
PHP Laravel
Python Django FastAPI Streamlit
Dart Flutter
【チャンネル登録者数】
2024年4月1日 15人から再開
2024年5月24日 100人達成
2024年6月14日 150人達成
2024年6月30日 200人達成
2024年7月14日 250人達成
2024年7月31日 300人達成
2024年8月21日 350人達成
2024年9月10日 400人達成
2024年9月28日 450人達成
2024年10月8日 500人達成
2024年10月19日 550人達成
2024年11月9日 600人達成
Curosorどうなる?NEW AIエディタ Codeium発Windsurfを使ってみる
今回は、Codeiumがリリースした、AIエディターWindsurfを紹介します。
私の開発環境では、CursorにCodeiumの拡張機能を導入しています。
Codeiumの拡張機能の何がいいかというと、コードの補完ができることです。
それも、無料で。
そんな、Codeiumがとうとう、AIエディター、Windsurfをリリースしたんです。
これは、試さない手はないということで、実際に使ってみます。
▼チャンネル登録はコチラからお願いします▼
ruclips.net/channel/UCqmIGhDsE5y-fmjtp8SnblQ
▼入力フォームを作る動画はこちら▼
ruclips.net/p/PL_WIODhpPte_Uwd363Zb6VkDn5hN50uzC
▼REST APIを作る動画はこちら▼
ruclips.net/p/PL_WIODhpPte99MHtvocIbdnq2kWB03prk
▼Remotion関連動画もアップしてます▼
ruclips.net/p/PL_WIODhpPte9RxvKgSSuxxOwgQg1Ji27j
#windsurf #codeium
私の開発環境では、CursorにCodeiumの拡張機能を導入しています。
Codeiumの拡張機能の何がいいかというと、コードの補完ができることです。
それも、無料で。
そんな、Codeiumがとうとう、AIエディター、Windsurfをリリースしたんです。
これは、試さない手はないということで、実際に使ってみます。
▼チャンネル登録はコチラからお願いします▼
ruclips.net/channel/UCqmIGhDsE5y-fmjtp8SnblQ
▼入力フォームを作る動画はこちら▼
ruclips.net/p/PL_WIODhpPte_Uwd363Zb6VkDn5hN50uzC
▼REST APIを作る動画はこちら▼
ruclips.net/p/PL_WIODhpPte99MHtvocIbdnq2kWB03prk
▼Remotion関連動画もアップしてます▼
ruclips.net/p/PL_WIODhpPte9RxvKgSSuxxOwgQg1Ji27j
#windsurf #codeium
Просмотров: 302
Видео
shadcn/uiのForm Componentを使う秘訣が明らかに!【タスクマネージャーアプリをNext.jsで作る⑤】
Просмотров 28714 дней назад
今回の動画では、タスクマネージャーアプリのタスクの一覧表示するコンポーネントの作成から、タスク登録フォームまで作成します。 前回、タスク詳細カードを作成しました。 まずは、そのカードを一覧表示するコンポーネントを作成して、トップページに表示します。 また、タスク登録フォームを作成します。 フォームには、shadcn/uiのFormコンポーネントを導入します。 今回の動画を見ていただくと、shadcn/uiのFormコンポーネントの使い方が理解できます。 それでは、プログラミングをやっていきましょう!! ▼目次▼ 00:00 イントロ 01:01 タスクリストコンポーネントを作成 04:44 タスク登録カードコンポーネントを作成 05:56 タスク登録フォームを作成 17:09 アウトロ ▼デモサイト(Cloudflareにデプロイ)▼ task-manager-app-exa.pag...
shadcn/uiのCard Componentを使う秘訣が明らかに!【タスクマネージャーアプリをNext.jsで作る④】
Просмотров 221Месяц назад
今回の動画では、タスクマネージャーアプリのタスク詳細カードを作成します。 shadcn/uiのカードコンポーネントを導入して、タスク詳細カードを作成します。 今回の動画を見ていただくと、shadcn/uiのカードコンポーネントを使い方が理解できます。 それでは、プログラミングをやっていきましょう!! ▼目次▼ 00:00 イントロ 00:48 型Taskの定義 01:23 環境変数を定義 01:35 APIリクエスト関数を作成 03:08 タスク詳細カードを作成 11:18 アウトロ ▼デモサイト(Cloudflareにデプロイ)▼ task-manager-app-exa.pages.dev/ ▼チャンネル登録はコチラからお願いします▼ ruclips.net/channel/UCqmIGhDsE5y-fmjtp8SnblQ ▼入力フォームを作る動画はこちら▼ ruclips.ne...
HonoとdrizzleでAPI GETメソッドを今すぐ作成しよう!【タスクマネージャーアプリをNext.jsで作る③】
Просмотров 422Месяц назад
今回の動画では、タスクマネージャーアプリのデータベースを準備して、REST APIのGETリクエストを作成します。 データベースはCloudflareが提供しているD1を使って、honoとdrizzleを導入してAPIを作成します。 Honoは軽量で高速なWebフレームワークで、drizzleは、データベース向けに設計されたORMです。 今回の動画を見ていただくと、Cloudflare D1の使い方やHonoとdrizzleを使ったAPIのGETリクエストが作成できるようになります。 それでは、プログラミングをやっていきましょう!! ▼目次▼ 00:00 イントロ 01:25 データベースを作成 03:23 drizzleを導入 05:58 テーブルを作成 09:32 honoを導入 11:54 全データを取得するgetリクエストを作成 16:54 idを指定したgetリクエストを追...
shadcn/uiを使った固定ヘッダーとサイドバーを作る秘訣が明らかに!【タスクマネージャーアプリをNext.jsで作る②】
Просмотров 372Месяц назад
今回の動画では、タスクマネージャーアプリのサイドバーを作成します。 サイドバーには、ボタンを配置して、ボタンにはアイコンとタイトルを表示します。 また、レスポンシブに対応して、ボタンのタイトルの表示を切り替えるようにします。 最後に、ヘッダーとサイドバーを固定して、スクロールしても動かないようにします。 そうすることで、ナビゲーションや検索に素早くアクセスできるようになり、ユーザー体験の向上につながります。 今回の動画を見ていただくと、レスポンシブに対応したサイドバーを作成できたり、ヘッダーとサイドバーを固定できるようになります。 それでは、プログラミングをやっていきましょう!! ▼目次▼ 0:00 イントロ 1:12 サイドバーを作成 3:43 サイドバーをレスポンシブに対応 5:01 ヘッダーとサイドバーを固定 6:15 サイドバーのボタンをオブジェクトで管理 8:28 アウトロ...
shadcn/uiを使ったレスポンシブ対応ヘッダーを作る秘訣が明らかに!【タスクマネージャーアプリをNext.jsで作る①】
Просмотров 458Месяц назад
今回の動画では、タスクマネージャーアプリのヘッダーを作成します。 ヘッダーには、アプリロゴと検索窓とユーザー登録ボタンとログインボタンを表示します。 また、レスポンシブに対応して、認証のボタンは2つのボタンとドロップダウンメニューで切り替えるようにします。 今回の動画を見ていただくと、レスポンシブに対応したヘッダーを作成ができるようになりますので、学びたい方は最後までご覧ください。 それでは、プログラミングをやっていきましょう!! ▼目次▼ 0:00 イントロ 0:54 プロジェクト作成 2:02 shadcn/uiの設定 3:55 フォント、言語、メタデータを設定 4:42 mainグループを作成 5:14 ヘッダーを作成 9:14 ヘッダーをレスポンシブ対応にする 12:58 アウトロ ▼デモサイト(Cloudflareにデプロイ)▼ task-manager-app-exa.p...
【Cloudflare Pages】Next.jsのフォントの使い方
Просмотров 133Месяц назад
今回の動画では、Next.jsでGoogleフォントを使う方法を紹介します。 Webサイトやアプリのデザインで、フォントは意外と重要なポイントです。 適切なフォントを使うだけで、全体の雰囲気や読みやすさが一気に変わります。 今回の動画では、Next.jsにGoogleフォントを導入して、プロジェクトにスタイルを加える手順を丁寧に解説します。 Google Fontsをプロジェクトに組み込む方法を見ていきましょう。 それでは、プログラミングをやっていきましょう!! ▼チャンネル登録はコチラからお願いします▼ ruclips.net/channel/UCqmIGhDsE5y-fmjtp8SnblQ ▼入力フォームを作る動画はこちら▼ ruclips.net/p/PL_WIODhpPte_Uwd363Zb6VkDn5hN50uzC ▼REST APIを作る動画はこちら▼ ruclips.n...
【Cloudflare Pages】Cloudflare Workers AIを使って画像生成AIアプリを作る
Просмотров 2552 месяца назад
今回の動画では、AIを使った画像生成するアプリを、Next.jsを使ってフルスタックで作成します。 そして、今回使う画像生成AIは、Cloudflare Workers AIで提供されているモデルを使います。 これまで、バックエンドはCloudflare WorkersとHonoを使って、フロントエンドはNext.jsを使って、 フロントエンドとバックエンドを別にして、実装してきました。 ただ、バックエンドはNext.jsのRoute HandlersとHonoを使うことで、Next.jsのみで実装できます。 そこで、Next.jsのみでアプリを実装します。 そして、Cloudflare Pagesにデプロイする前提で実装します。 それでは、プログラミングをやっていきましょう!! ▼今回のコード▼ github.com/arafipro/image-generate-app ▼チャン...
【Auth.js/NextAuth】NextAuth v5のadapter機能を追加して登録ユーザーをデータベースで管理する
Просмотров 4312 месяца назад
今回の動画では、Auth.jsで、登録されたユーザー情報をデータベースで管理する方法について解説します。 以前の動画で、GitHubやGoogleのアカウントを使ったOAuth認証を利用して、ユーザー登録を行う方法を実装しました。 具体的には、ユーザーはOAuthプロバイダーを通じてログインします。 ログインすると、OAuthプロバイダーにユーザー情報が保存されます。 たとえば、ユーザーが認証後に限定コンテンツへアクセスするだけで十分なサイトでは、これで問題ありません。 セッション情報のみで管理できるからです。 しかし、ZennやQiitaのように、ユーザーごとに投稿を管理する場合、もう少し工夫が必要です。 OAuthで取得できる情報は、メールアドレス、ユーザー名、アバター画像のURLに限られるため、これらだけではユーザーの投稿やその他の情報を一意に識別するのが難しいからです。 この...
【Auth.js/NextAuth】NextAuth v5の認証ボタンをshadcn/uiでリッチにカスタマイズ+Google認証を追加する
Просмотров 2792 месяца назад
今回の動画では、Auth.jsを使って実装した認証ボタンをカスタマイズする方法を見ていきます。 以前の動画では、Auth.jsで用意されているデフォルトのログインボタンが表示されました。 しかし、デフォルトの簡素なボタンでは、いまいち見た目がパッとしませんよね。 そこで今回は、そのボタンをもっとオシャレで使いやすいデザインに変身させていきます。 この動画で、単なる機能実装だけでなく、見た目の大切さも学んでいきましょう。 Auth.jsの柔軟性を活かしつつ、見た目も機能も充実したログインボタンを作り上げていきます。 また、Auth.jsでGoogle認証の追加しています。 実装方法は、先ほど触れたGitHub認証とほぼ同じです。 そして、Google認証で必要なクライアントIDとクライアントシークレットをGoogle Cloudで取得する方法も説明しています。 それでは、プログラミング...
2024年最新!初心者でもわかるOPENAI APIを使った、LangChain Expression Language (LCEL)の基礎
Просмотров 1513 месяца назад
今回は、OpenAI APIとLangChainを使ったAPIを作成します。 今回の開発には、Node.jsではなく、より高速なJavaScriptランタイムであるBunを使用します。 また、メインのLangChainでは、LangChain Expression Language (LCEL)を中心に見ていきます。 LangChain Expression Language (LCEL) とは、レゴブロックのように、いろんな機能を組み合わせて実行させる仕組みです。 ただ、いろんな機能がありすぎて、最初から把握するのはとても大変です。 そこで、今回は最低限の機能の組み合わせでAPIを作成します。 まずは、LangChain Expression Language (LCEL) の使い方に慣れましょう。 そして、完成したAPIは、Cloudflare Workersにデプロイできます。...
【Cloudflare Workers】誰でも簡単に始められる!Hono+Cloudflare D1+Drizzle ORMで株式投資取引APIを作る
Просмотров 5873 месяца назад
今回は、株式投資取引APIを作成する方法を解説します。 今回の開発には、Node.jsではなく、より高速なJavaScriptランタイムであるBunを使用します。 データベースにはCloudflareが提供するD1を使い、ORMにはDrizzleを採用します。 Honoは軽量で高速なWebフレームワークとして知られていますが、Zodを組み合わせることで、強力なバリデーションチェックが可能となります。 また、Zodでバリデーションを構築するためのミドルウェアzValidatorも使用します。 さらに、データベースのリレーションの使い方も説明します。 2つのテーブルを作成し、バリデーションスキーマとルーティングを設定し、リレーションを設定することで、データベースの効率的な操作を実現します。 完成したAPIは、Cloudflare Workersにデプロイします。 なお、株式投資の知識がな...
【Cloudflare Pages】Neon DB+Drizzle ORMを使って、TODOアプリのフロントエンドを作る
Просмотров 1853 месяца назад
今回は、前回のNEONとdrizzleを使ったTODOアプリのバックエンドの続きで、今回はフロントエンドを作成します。 また、サーバーアクションを使った入力フォームやサーバーコンポーネントとクライアントコンポーネントの違いを深掘りします。 それでは、プログラミングをやっていきましょう!! ▼【React Hook Form】【zod】shadcn/uiを使って、リッチな入力フォームを作る▼ ruclips.net/video/PQeW8gLI5Eg/видео.html ▼前回の動画▼ ruclips.net/video/tFfUHpv2FUI/видео.html ▼今回のコード▼ github.com/arafipro/neon-db-drizzle-app ▼チャンネル登録はコチラからお願いします▼ www.youtube.com/@arafipro?sub_confirmat...
【Cloudflare Pages】Neon DB+Drizzle ORMを使って、TODOアプリのバックエンドを作る
Просмотров 3453 месяца назад
今回はNEON DBとdrizzleを使って、TODOアプリのバックエンドを作成します。 NEON DBとはPostgresベースのデータベースになります。 また、NEON DBからのデータを管理するために、drizzleを使います。 実は、はじめてNEON DBをキャッチアップしましたが、基本的には難しくありませんでした。 無料で試すことができて、1つのプロジェクトを作成できます。 他にも、素のSQLやPrismaを使うことができます。 そして、Cloudflare Pagesにデプロイすることを考えて、フレームワークはNext.jsを使います。 ただ、API routesは使いません。 それでは、プログラミングをやっていきましょう!! ▼今回のコード▼ github.com/arafipro/neon-db-drizzle-app/tree/096fecbacc90487dcc6...
【Formタグ】【React Hook Form】【zod】たった1時間でFormタグからReact Hook Formまでマスター!
Просмотров 2214 месяца назад
今回は、これまで公開した入力フォームの動画を集めた完全版です。 最初はFormタグを使った入力フォームの作成から、 次に、React Hook Formを使った発展した入力フォームの作成、 最後には、shadcn/uiを使ってリッチな入力フォームの作成まで網羅しています。 この動画を見れば、入力フォームは完璧です。 それでは、プログラミングをやっていきましょう!! ▼チャンネル登録はコチラからお願いします▼ www.youtube.com/@arafipro?sub_confirmation=1 ▼React Native関連動画はこちら▼ ruclips.net/p/PL_WIODhpPte-dWqDprMQb6z3fe0P9H8Wj ▼REST APIを作る動画はこちら▼ ruclips.net/p/PL_WIODhpPte99MHtvocIbdnq2kWB03prk ▼Remo...
【React Native/Expo】データベースExpo SQLiteとExpo Routerを使って、スマートフォンのTODOアプリを作る
Просмотров 5914 месяца назад
【React Native/Expo】データベースExpo SQLiteとExpo Routerを使って、スマートフォンのTODOアプリを作る
【Cloudflare Workers】Bun+HonoでREST APIを作成③ Drizzle ORMを使ってデータベースのリレーションを実現!!
Просмотров 2444 месяца назад
【Cloudflare Workers】Bun HonoでREST APIを作成③ Drizzle ORMを使ってデータベースのリレーションを実現!!
【Cloudflare Workers】Bun+HonoでREST APIを作成② zodを使ってバリデーションチェック!!
Просмотров 4004 месяца назад
【Cloudflare Workers】Bun HonoでREST APIを作成② zodを使ってバリデーションチェック!!
【Cloudflare Workers】Bun+HonoでREST APIを作成① 効果的なhonoルーティングの秘訣
Просмотров 1,1 тыс.5 месяцев назад
【Cloudflare Workers】Bun HonoでREST APIを作成① 効果的なhonoルーティングの秘訣
【React Native/Expo】Expo RouterのTabs layoutを使ってみる
Просмотров 4625 месяцев назад
【React Native/Expo】Expo RouterのTabs layoutを使ってみる
【React Hook Form】【zod】shadcn/uiを使って、リアルタイムエディタを作る
Просмотров 3015 месяцев назад
【React Hook Form】【zod】shadcn/uiを使って、リアルタイムエディタを作る
【react-markdown】ブログアプリで使える Markdown-HTML 変換コンポーネントを作る
Просмотров 2195 месяцев назад
【react-markdown】ブログアプリで使える Markdown-HTML 変換コンポーネントを作る
【Cloudflare Workers】Hono+Cloudflare D1+Prisma 20分でREST APIを作成
Просмотров 1,2 тыс.6 месяцев назад
【Cloudflare Workers】Hono+Cloudflare D1+Prisma 20分でREST APIを作成
【Auth.js/NextAuth】Webアプリ必須!NextAuth+shadcn/uiで認証機能付きヘッダーを作る
Просмотров 7546 месяцев назад
【Auth.js/NextAuth】Webアプリ必須!NextAuth shadcn/uiで認証機能付きヘッダーを作る
【React Hook Form】【zod】shadcn/uiを使って、zodを中心に入力フォームを作る
Просмотров 1,3 тыс.6 месяцев назад
【React Hook Form】【zod】shadcn/uiを使って、zodを中心に入力フォームを作る
【Auth.js/NextAuth】NextAuth v5で認証機能を作って、Cloudflare Pagesにデプロイする
Просмотров 2,1 тыс.6 месяцев назад
【Auth.js/NextAuth】NextAuth v5で認証機能を作って、Cloudflare Pagesにデプロイする
【React Native/Expo】REST APIとExpo Routerを使って、スマートフォンのTODOアプリを作る
Просмотров 2,6 тыс.7 месяцев назад
【React Native/Expo】REST APIとExpo Routerを使って、スマートフォンのTODOアプリを作る
【Cloudflare Pages】無料で公開!REST APIを使って、Next.jsでTODOアプリを30分で作る
Просмотров 6027 месяцев назад
【Cloudflare Pages】無料で公開!REST APIを使って、Next.jsでTODOアプリを30分で作る
【Cloudflare Workers】Hono+Cloudflare D1+Drizzle ORM 30分でREST APIを作成
Просмотров 1,6 тыс.7 месяцев назад
【Cloudflare Workers】Hono+Cloudflare D1+Drizzle ORM 30分でREST APIを作成
【Cloudflare Workers】HonoとCloudflare D1を使って20分でREST APIを作成する
Просмотров 1,5 тыс.7 месяцев назад
【Cloudflare Workers】HonoとCloudflare D1を使って20分でREST APIを作成する
なるほど,動的なサイトを作りたい場合は,fetchの部分をworker経由にすればいいのですね vercelの運用より,cloudflare pages & workerのほうが安く運用できそうですね
コメントありがとうございます おっしゃる通りで、vercelの場合、商用利用すると絶対課金しなければいけません でも、cloudflare pages & workerであれば、商用利用前提でも無料から始められます よって、気軽にWebアプリをリリースできますよ
wow very good content, I like and subscribe, thank you very much, keep it up! I look forward to more content from cloudflare hono, d1 etc <3
Thank you for watching! I have a new job, so I won't be able to upload videos often, but thank you for your patience!
▼目次▼ 00:00 イントロ 01:01 タスクリストコンポーネントを作成 04:44 タスク登録カードコンポーネントを作成 05:56 タスク登録フォームを作成 17:09 アウトロ
▼目次▼ 00:00 イントロ 00:48 型Taskの定義 01:23 環境変数を定義 01:35 APIリクエスト関数を作成 03:08 タスク詳細カードを作成 11:18 アウトロ
めちゃくちゃわかりやすかったです、本当にありがとうございます。
コメントありがとうございます!! お役に立てて、幸いです
勉強になります。初心者向けのロードマップ用に、動画まとめ動画を作っていただけると幸いです
コメントありがとうございます どんな動画が皆さんのお役にたてるのか 私も考えていたので、ありがたいです いずれ、まとめ動画もあげようと思いますので 今しばらくお待ちください
▼目次▼ 00:00 イントロ 01:25 データベースを作成 03:23 drizzleを導入 05:58 テーブルを作成 09:32 honoを導入 11:54 全データを取得するgetリクエストを作成 16:54 idを指定したgetリクエストを追加 19:00 アウトロ
▼目次▼ 0:00 イントロ 1:12 サイドバーを作成 3:43 サイドバーをレスポンシブに対応 5:01 ヘッダーとサイドバーを固定 6:15 サイドバーのボタンをオブジェクトで管理 8:28 アウトロ
バリデーションエラー表示は下記でしょうか? export const stockSchema = z.object({ code: z.string().regex(codeRegex), stockName:z.string().trim().min(2).max(128), market: z.preprocess( (val) => (val === "" ? undefined : val), z.enum(["プライム", "スタンダード", "グロース"], { required_error: "market フィールドは必須です", invalid_type_error: "プライム、スタンダード、グロースのいずれかを指定してください", }) ), })
凄い分かりやすかったです!
ありがとうございます!! お役に立てて、幸いです。
非常に勉強になりました。動画の中でnpx prisma generateの実行がないようです。私の環境ではこれをしないとうまくいきませんでした。
コメントありがとうございます。 npx prisma generateを使わない代わりに、以下の手順で行なっています。 1. npx wrangler d1 migrations create prisma-demo-db create_user_tableを実行して、0001_create_user_table.sqlを作成 2. schema.prismaにテーブルスキーマを作成 3. npx prisma migrate diff --from-empty --to-schema-datamodel ./prisma/schema.prisma --script > migrations/0001_create_user_table.sqlを実行して、schema.prismaで作成したテーブルスキーマの差分を0001_create_user_table.sql反映させる npx prisma generateを使えば、schema.prismaのテーブルスキーマを使って、マイグレーションファイル(上記で言えば、0001_create_user_table.sql)が作成されます。 上記のように、いったんマイグレーションファイルを作成して、差分を反映させるような、遠回りしなくてもできそうですね。 コメントいただいたおかげで、私も改めて勉強になりました。
神動画
最高の褒め言葉、ありがとうございます!!
▼目次▼ 0:00 イントロ 0:54 プロジェクト作成 2:02 shadcn/uiの設定 3:55 フォント、言語、メタデータを設定 4:42 mainグループを作成 5:14 ヘッダーを作成 9:14 ヘッダーをレスポンシブ対応にする 12:58 アウトロ
4:08で検索バーからファイルを作成していますが、何の拡張機能でしょうか?
コメントありがとうございます。 ご質問の拡張機能ですが、advanced-new-fileという拡張機能を使っています。 URLのリンクを貼っておきますので、よかったら、使ってみて下さい。 marketplace.visualstudio.com/items?itemName=patbenatar.advanced-new-file
Dockerを使われてないのは、なにか特別な理由があるのでしょうか
コメントありがとうございます ご質問にお答えします 結論から言うと、2つ理由があります 1つ目は単にキャッチアップできていないからです Dockerfileやdocker-compose.ymlの作り方が難しくて 以前、使おうとしましたが諦めました ただ、今ならChatGPTやClaudeを使えば解決できそうですね 2つ目は言い訳ですが、必要性を感じないからです 使いこなせるに越したことはありませんが 現時点では、優先順位が低いと考えています @bubumoment86さんはDockerはお使いですか?
@@arafipro まず、チーム開発、もしくはその可能性がある、または他者とのプロジェクトの共有があるなら必須だと思います。 Dockerがあることによって、各開発者の環境を確実に揃えられるのですから、その恩恵は強いと思います。 また、デザイナー寄りの方など、チームの技術レベルが揃っていない場合でも、誰でも簡単に環境を構築できます。 もちろん、PCを新調した際の環境構築の手間もなくなります。 ただ、このチャンネルはフルスタックが趣旨でしょうから、この点はあまり重要ではないのかもしれませんね。 次にNodeのバージョン問題です。 Macなどに直にNodeをインストールしてしまうと、プロジェクトが増えていくことで、固定バージョンのNodeでしか動かないものが出てきます。 つまり、Nodeをアップデートすることで、古いプロジェクトが動かせなくなる(対応コストがかかる)ということです。 Nodeパッケージは依存関係がものすごく強いので、その結末は避けられません。 特にMacを新しいものに新調した時に困ります。 それを解決するために、VoltaなどのNode管理ツールでごまかすのですが、根本解決はしません。 また、Node以外にも、Pythonなどのバージョンなど、使用しているPCに開発環境が依存してしまう問題は避けられません。 それを解決するのが開発環境におけるDockerの利点だと思っています。 Docker導入時は難しく思われるかもしれませんが、Dockerfileとdocker-compose.ymlさえあれば、誰でも簡単に構築できるのがDockerです。 この用途では、本番環境ではなく、開発環境での利用に限定できるのですから、ぶっちゃけ、だれかの既存テンプレートをコピーして使うだけでもいいと思います。 偉そうに長々と書いてしまいましたが、逆にそのあたりの問題を別の方法で解決されていらっしゃるのでしたら、逆に伺えたら嬉しいです。
@@arafipro もしかしたら、そちらでは見えているのかもしれませんが、長文を書くとRUclips側で非表示にされがちですね。。。
ご返信ありがとうございます。 すいません、長文を見られなくするような設定にはしていないのですが・・・。 管理画面でコメントを拝見しました。 Dockerを使いこなしていらっしゃいますね、すごいです!! 私は、特に別の解決方法は持っていません・・・。 ご期待に添えなくて申し訳ありません。 NodeもBunもPythonも、PC上に直でインストールしています。 また、Node管理ツールすら使っていません。 正直、Dockerを使えこなせたらいいなとは思っています。 ただ、前回のコメントと重複しますが、学習コストが高いことがネックですね。 参考に、Dockerをどのように学習されましたか? おすすめがあれば、教えていただけるとありがたいです。
@@arafipro Dockerは環境構築をするためのツールです。 Dcokerの使い方を覚えることと、環境構築について覚えることは、学習の方向が違います。 サーバーの環境を構築することは、構成管理またはプロビジョニングと呼ばれますが、私はDockerを使う前は、ansibleというツールを使って構成管理をしていました。 従って、私はDockerの使い方を覚えるだけで、Dockerに乗り換えることができました。 その点においては、あまり学習コストが高いと思ったことがありません。(私の使用範囲に限定されますが) ただ、そもそも構成管理の経験、造詣の深くない方は、Dockerの前にサーバーインフラから学習する必要があります。 その点が、Dockerの学習コストが高く感じる理由ではないでしょうか。 ご自身に足りないものを見極めて、どちらかに絞って学習することをおすすめします。 ただ、Cloudflareの環境構築をするのに、Dockerを極めるほど学習する必要もないので、 個人的には、あらかじめ用意されているテンプレートをそのまま使うだけでいいんじゃないかなと思います。 私はCloudflareにはまったく詳しくないので責任は持てませんが、おそらくCloudflare用のDocekerfileはどこかに用意されていると思いますよ。
わかりやすかったです。ありがとうございました。
ご覧いただきありがとうございます。 こちらこそ、お役に立ててうれしいです。
めんどくさいからそうなっていると思いますが、良い感じの解説動画じゃないですね。 結局ソース見ればいっかって思ったら404😅。
ご貴重なご意見ありがとうございます。 もしよろしければ どのあたりがめんどくさそうに感じられたのか 教えて頂けると幸いです。 よろしくお願いします。 また、ご指摘いただいてありがとうございます。 GitHubリポジトリがPublicになっていませんでした。 ソースがご覧いただける様になったので、よろしくお願いします。
@@arafipro 動画を一回みた限りですが、簡潔にする編集にはあまり気を使いたくないと感じました。 記憶に良く残っているのが、記号まで読み上げているところでしょうか。ナミカッコ、ドット、etc。 アクセシビリティ狙っていないなら、無くても良いかなって思います。 後はライブ解説でないのに、ライブコード並みに、一文一句カタカタ動画で流すのもんーって思いました。 超初心者向けかつ尺を稼ぐためだと言われたらそれまでですけど。
ご意見ありがとうございます。 フィードバックをいただけるのは非常に嬉しいです。 ナミカッコ、ドットなどの記号まで読み上げているところは 明言していませんがハンズオン風に初心者向けに作成しているので 現状のようになっています。 貴重なご意見、ありがとうございました。
My understand for japanase are 0 (i am useing auto translate HAHAHAHA). though the step-by-step visualization cleary. Very Helpful thank you or should i say ありがとう ございます
Thank you for taking a look. We are glad we could be of service.
ありがとうございます。 自分用にメモを残します。 5:31~ 初期ファイル設定
こちらこそ、ありがとうございます。 ぜひ、コメント欄をご活用ください。
いつも参考にさせていただいてます。 以前の動画では、create-cloudflare-cliを最初にインスールしていましたが、hono/Drizzle/D1構成ではcreate-cloudflare-cliは特に必要なくなったのでしょうか?
いつもご覧いただき、ありがとうございます。 ご質問について、結論から言いますと、create-cloudflare-cliでは開発環境をNode.jsからBunに変えることができないからです。 またNode.jsからBunに変更した理由は、動画内でも説明しておりますがNode.jsよりBunの方が処理スピードが速いので開発環境が改善されるためです。 create-cloudflare-cliはプロジェクトを作成する方法のひとつであり、今回の方法でもCloudflare Workersのプロジェクトが作成できます。 今回の場合はcreate-cloudflare-cliの代わりに、bunx create honoを使っていると思ってください。 また、ご不明なことがあれば、遠慮なくコメントからお願いいたします。
@@arafipro よく理解できました! ありがとうございます。
こちらこそ、ありがとうございます! ご理解いただけて、よかったです。
とても参考になります! 最近prismaも使える様になったらしいので応用して試してみます! 応援してるのでこれからも動画投稿続けてもらえると嬉しいです!
応援、ありがとうございます! とても励みになります! 私も@naoya3350さんを応援しています!
I love shadcn. I use with Astro.
I also like shadcn. I have used Astro itself, but I haven't used it together with shadcn yet.
Excellent content
Thank you