Пікірлер
@Deus-lo-Vuilt
@Deus-lo-Vuilt 2 күн бұрын
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
@arafipro
@arafipro 2 күн бұрын
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!
@arafipro
@arafipro 8 күн бұрын
▼目次▼ 00:00 イントロ 01:01 タスクリストコンポーネントを作成 04:44 タスク登録カードコンポーネントを作成 05:56 タスク登録フォームを作成 17:09 アウトロ
@arafipro
@arafipro 25 күн бұрын
▼目次▼ 00:00 イントロ 00:48 型Taskの定義 01:23 環境変数を定義 01:35 APIリクエスト関数を作成 03:08 タスク詳細カードを作成 11:18 アウトロ
@岸本優-x5f
@岸本優-x5f 28 күн бұрын
めちゃくちゃわかりやすかったです、本当にありがとうございます。
@arafipro
@arafipro 28 күн бұрын
コメントありがとうございます!! お役に立てて、幸いです
@るは-l6m6l
@るは-l6m6l 29 күн бұрын
勉強になります。初心者向けのロードマップ用に、動画まとめ動画を作っていただけると幸いです
@arafipro
@arafipro 28 күн бұрын
コメントありがとうございます どんな動画が皆さんのお役にたてるのか 私も考えていたので、ありがたいです いずれ、まとめ動画もあげようと思いますので 今しばらくお待ちください
@arafipro
@arafipro Ай бұрын
▼目次▼ 00:00 イントロ 01:25 データベースを作成 03:23 drizzleを導入 05:58 テーブルを作成 09:32 honoを導入 11:54 全データを取得するgetリクエストを作成 16:54 idを指定したgetリクエストを追加 19:00 アウトロ
@arafipro
@arafipro Ай бұрын
▼目次▼ 0:00 イントロ 1:12 サイドバーを作成 3:43 サイドバーをレスポンシブに対応 5:01 ヘッダーとサイドバーを固定 6:15 サイドバーのボタンをオブジェクトで管理 8:28 アウトロ
@チクわ部-b8v
@チクわ部-b8v Ай бұрын
バリデーションエラー表示は下記でしょうか? 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: "プライム、スタンダード、グロースのいずれかを指定してください", }) ), })
@チクわ部-b8v
@チクわ部-b8v Ай бұрын
凄い分かりやすかったです!
@arafipro
@arafipro Ай бұрын
ありがとうございます!! お役に立てて、幸いです。
@shinyapython5260
@shinyapython5260 Ай бұрын
非常に勉強になりました。動画の中でnpx prisma generateの実行がないようです。私の環境ではこれをしないとうまくいきませんでした。
@arafipro
@arafipro Ай бұрын
コメントありがとうございます。 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)が作成されます。 上記のように、いったんマイグレーションファイルを作成して、差分を反映させるような、遠回りしなくてもできそうですね。 コメントいただいたおかげで、私も改めて勉強になりました。
@黒白-o1b
@黒白-o1b Ай бұрын
神動画
@arafipro
@arafipro Ай бұрын
最高の褒め言葉、ありがとうございます!!
@arafipro
@arafipro Ай бұрын
▼目次▼ 0:00 イントロ 0:54 プロジェクト作成 2:02 shadcn/uiの設定 3:55 フォント、言語、メタデータを設定 4:42 mainグループを作成 5:14 ヘッダーを作成 9:14 ヘッダーをレスポンシブ対応にする 12:58 アウトロ
@ばにら-b7t
@ばにら-b7t Ай бұрын
4:08で検索バーからファイルを作成していますが、何の拡張機能でしょうか?
@arafipro
@arafipro Ай бұрын
コメントありがとうございます。 ご質問の拡張機能ですが、advanced-new-fileという拡張機能を使っています。 URLのリンクを貼っておきますので、よかったら、使ってみて下さい。 marketplace.visualstudio.com/items?itemName=patbenatar.advanced-new-file
@bubumoment86
@bubumoment86 2 ай бұрын
Dockerを使われてないのは、なにか特別な理由があるのでしょうか
@arafipro
@arafipro 2 ай бұрын
コメントありがとうございます ご質問にお答えします 結論から言うと、2つ理由があります 1つ目は単にキャッチアップできていないからです Dockerfileやdocker-compose.ymlの作り方が難しくて 以前、使おうとしましたが諦めました ただ、今ならChatGPTやClaudeを使えば解決できそうですね 2つ目は言い訳ですが、必要性を感じないからです 使いこなせるに越したことはありませんが 現時点では、優先順位が低いと考えています @bubumoment86さんはDockerはお使いですか?
@bubumoment86
@bubumoment86 2 ай бұрын
@@arafipro まず、チーム開発、もしくはその可能性がある、または他者とのプロジェクトの共有があるなら必須だと思います。 Dockerがあることによって、各開発者の環境を確実に揃えられるのですから、その恩恵は強いと思います。 また、デザイナー寄りの方など、チームの技術レベルが揃っていない場合でも、誰でも簡単に環境を構築できます。 もちろん、PCを新調した際の環境構築の手間もなくなります。 ただ、このチャンネルはフルスタックが趣旨でしょうから、この点はあまり重要ではないのかもしれませんね。 次にNodeのバージョン問題です。 Macなどに直にNodeをインストールしてしまうと、プロジェクトが増えていくことで、固定バージョンのNodeでしか動かないものが出てきます。 つまり、Nodeをアップデートすることで、古いプロジェクトが動かせなくなる(対応コストがかかる)ということです。 Nodeパッケージは依存関係がものすごく強いので、その結末は避けられません。 特にMacを新しいものに新調した時に困ります。 それを解決するために、VoltaなどのNode管理ツールでごまかすのですが、根本解決はしません。 また、Node以外にも、Pythonなどのバージョンなど、使用しているPCに開発環境が依存してしまう問題は避けられません。 それを解決するのが開発環境におけるDockerの利点だと思っています。 Docker導入時は難しく思われるかもしれませんが、Dockerfileとdocker-compose.ymlさえあれば、誰でも簡単に構築できるのがDockerです。 この用途では、本番環境ではなく、開発環境での利用に限定できるのですから、ぶっちゃけ、だれかの既存テンプレートをコピーして使うだけでもいいと思います。 偉そうに長々と書いてしまいましたが、逆にそのあたりの問題を別の方法で解決されていらっしゃるのでしたら、逆に伺えたら嬉しいです。
@bubumoment86
@bubumoment86 2 ай бұрын
@@arafipro もしかしたら、そちらでは見えているのかもしれませんが、長文を書くとKZbin側で非表示にされがちですね。。。
@arafipro
@arafipro 2 ай бұрын
ご返信ありがとうございます。 すいません、長文を見られなくするような設定にはしていないのですが・・・。 管理画面でコメントを拝見しました。 Dockerを使いこなしていらっしゃいますね、すごいです!! 私は、特に別の解決方法は持っていません・・・。 ご期待に添えなくて申し訳ありません。 NodeもBunもPythonも、PC上に直でインストールしています。 また、Node管理ツールすら使っていません。 正直、Dockerを使えこなせたらいいなとは思っています。 ただ、前回のコメントと重複しますが、学習コストが高いことがネックですね。 参考に、Dockerをどのように学習されましたか? おすすめがあれば、教えていただけるとありがたいです。
@bubumoment86
@bubumoment86 2 ай бұрын
@@arafipro Dockerは環境構築をするためのツールです。 Dcokerの使い方を覚えることと、環境構築について覚えることは、学習の方向が違います。 サーバーの環境を構築することは、構成管理またはプロビジョニングと呼ばれますが、私はDockerを使う前は、ansibleというツールを使って構成管理をしていました。 従って、私はDockerの使い方を覚えるだけで、Dockerに乗り換えることができました。 その点においては、あまり学習コストが高いと思ったことがありません。(私の使用範囲に限定されますが) ただ、そもそも構成管理の経験、造詣の深くない方は、Dockerの前にサーバーインフラから学習する必要があります。 その点が、Dockerの学習コストが高く感じる理由ではないでしょうか。 ご自身に足りないものを見極めて、どちらかに絞って学習することをおすすめします。 ただ、Cloudflareの環境構築をするのに、Dockerを極めるほど学習する必要もないので、 個人的には、あらかじめ用意されているテンプレートをそのまま使うだけでいいんじゃないかなと思います。 私はCloudflareにはまったく詳しくないので責任は持てませんが、おそらくCloudflare用のDocekerfileはどこかに用意されていると思いますよ。
@Nanashi-rq7lk
@Nanashi-rq7lk 2 ай бұрын
わかりやすかったです。ありがとうございました。
@arafipro
@arafipro 2 ай бұрын
ご覧いただきありがとうございます。 こちらこそ、お役に立ててうれしいです。
@Burajiru-san
@Burajiru-san 3 ай бұрын
めんどくさいからそうなっていると思いますが、良い感じの解説動画じゃないですね。 結局ソース見ればいっかって思ったら404😅。
@arafipro
@arafipro 3 ай бұрын
ご貴重なご意見ありがとうございます。 もしよろしければ どのあたりがめんどくさそうに感じられたのか 教えて頂けると幸いです。 よろしくお願いします。 また、ご指摘いただいてありがとうございます。 GitHubリポジトリがPublicになっていませんでした。 ソースがご覧いただける様になったので、よろしくお願いします。
@Burajiru-san
@Burajiru-san 3 ай бұрын
@@arafipro 動画を一回みた限りですが、簡潔にする編集にはあまり気を使いたくないと感じました。 記憶に良く残っているのが、記号まで読み上げているところでしょうか。ナミカッコ、ドット、etc。 アクセシビリティ狙っていないなら、無くても良いかなって思います。 後はライブ解説でないのに、ライブコード並みに、一文一句カタカタ動画で流すのもんーって思いました。 超初心者向けかつ尺を稼ぐためだと言われたらそれまでですけど。
@arafipro
@arafipro 3 ай бұрын
ご意見ありがとうございます。 フィードバックをいただけるのは非常に嬉しいです。 ナミカッコ、ドットなどの記号まで読み上げているところは 明言していませんがハンズオン風に初心者向けに作成しているので 現状のようになっています。 貴重なご意見、ありがとうございました。
@112_akmalmahardikanp8
@112_akmalmahardikanp8 3 ай бұрын
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 ありがとう ございます
@arafipro
@arafipro 3 ай бұрын
Thank you for taking a look. We are glad we could be of service.
@くしらっちょ
@くしらっちょ 4 ай бұрын
ありがとうございます。 自分用にメモを残します。 5:31~ 初期ファイル設定
@arafipro
@arafipro 4 ай бұрын
こちらこそ、ありがとうございます。 ぜひ、コメント欄をご活用ください。
@samedaysameshit
@samedaysameshit 4 ай бұрын
いつも参考にさせていただいてます。 以前の動画では、create-cloudflare-cliを最初にインスールしていましたが、hono/Drizzle/D1構成ではcreate-cloudflare-cliは特に必要なくなったのでしょうか?
@arafipro
@arafipro 4 ай бұрын
いつもご覧いただき、ありがとうございます。 ご質問について、結論から言いますと、create-cloudflare-cliでは開発環境をNode.jsからBunに変えることができないからです。 またNode.jsからBunに変更した理由は、動画内でも説明しておりますがNode.jsよりBunの方が処理スピードが速いので開発環境が改善されるためです。 create-cloudflare-cliはプロジェクトを作成する方法のひとつであり、今回の方法でもCloudflare Workersのプロジェクトが作成できます。 今回の場合はcreate-cloudflare-cliの代わりに、bunx create honoを使っていると思ってください。 また、ご不明なことがあれば、遠慮なくコメントからお願いいたします。
@samedaysameshit
@samedaysameshit 4 ай бұрын
@@arafipro よく理解できました! ありがとうございます。
@arafipro
@arafipro 4 ай бұрын
こちらこそ、ありがとうございます! ご理解いただけて、よかったです。
@naoya3350
@naoya3350 6 ай бұрын
とても参考になります! 最近prismaも使える様になったらしいので応用して試してみます! 応援してるのでこれからも動画投稿続けてもらえると嬉しいです!
@arafipro
@arafipro 6 ай бұрын
応援、ありがとうございます! とても励みになります! 私も@naoya3350さんを応援しています!
@filosofiadelosgrandes
@filosofiadelosgrandes 6 ай бұрын
I love shadcn. I use with Astro.
@arafipro
@arafipro 6 ай бұрын
I also like shadcn. I have used Astro itself, but I haven't used it together with shadcn yet.
@filosofiadelosgrandes
@filosofiadelosgrandes 6 ай бұрын
Excellent content
@arafipro
@arafipro 6 ай бұрын
Thank you