- 28
- 55 789
100秒テック
Japan
เข้าร่วมเมื่อ 3 มี.ค. 2024
100秒テックです！
フロントエンドでよく使われる難しい単語や概念を100秒でカンタンに解説します！
役に立った方はぜひチャンネル登録お願いします！
フロントエンドでよく使われる難しい単語や概念を100秒でカンタンに解説します！
役に立った方はぜひチャンネル登録お願いします！
Cloudflare Workers入門【はじめからそうやって教えてくれればいいのに！】
Cloudflare Workersのチュートリアルです。
00:00 イントロダクション
00:21 動画の道のり
01:03 CDNとは
03:13 エッジコンピューティングとは
05:09 JavaScript実行環境とは
07:05 セットアップ
09:48 コードの確認
11:19 デプロイ
12:37 まとめ
▼💫 X（Twitter）
100_tech_ch
▼📰 Zenn
zenn.dev/ak
▼お借りしたもの
・VOICEVOX：ずんだもん
・立ち絵：坂本アヒル 様
・アイコン：Flaticon
・www.flaticon.com/free-icons/arrow
・www.flaticon.com/free-icons/cloud-server
・www.flaticon.com/free-icons/world
・www.flaticon.com/free-icons/js
・www.flaticon.com/free-icons/conwheel
・www.flaticon.com/free-icons/freelancer
・www.flaticon.com/free-icons/placeholder
・www.flaticon.com/free-icons/loading
・www.flaticon.com/free-icons/reload
・www.flaticon.com/free-icons/eyes
・www.flaticon.com/free-icons/quote
・www.flaticon.com/free-icons/car
・www.flaticon.com/free-icons/engine
・www.flaticon.com/free-icons/settings
・www.flaticon.com/free-icons/window
・www.flaticon.com/free-icons/chrome
・www.flaticon.com/free-icons/rocket
・www.flaticon.com/free-icons/social-withdrawal
・www.flaticon.com/free-icons/deployment
・www.flaticon.com/free-icons/key
・www.flaticon.com/free-icons/technical-service
・www.flaticon.com/free-icons/cursor
・www.flaticon.com/free-icons/one
・www.flaticon.com/free-icons/two
・www.flaticon.com/free-icons/three
▼ℹ️ このチャンネルについて
このチャンネルでは、JavaScript、Reactなどフロントエンドの話題から、CDNやCookieなどWebに関連する技術を幅広く解説しています。
#ずんだもん #プログラミング #javascript #js
00:00 イントロダクション
00:21 動画の道のり
01:03 CDNとは
03:13 エッジコンピューティングとは
05:09 JavaScript実行環境とは
07:05 セットアップ
09:48 コードの確認
11:19 デプロイ
12:37 まとめ
▼💫 X（Twitter）
100_tech_ch
▼📰 Zenn
zenn.dev/ak
▼お借りしたもの
・VOICEVOX：ずんだもん
・立ち絵：坂本アヒル 様
・アイコン：Flaticon
・www.flaticon.com/free-icons/arrow
・www.flaticon.com/free-icons/cloud-server
・www.flaticon.com/free-icons/world
・www.flaticon.com/free-icons/js
・www.flaticon.com/free-icons/conwheel
・www.flaticon.com/free-icons/freelancer
・www.flaticon.com/free-icons/placeholder
・www.flaticon.com/free-icons/loading
・www.flaticon.com/free-icons/reload
・www.flaticon.com/free-icons/eyes
・www.flaticon.com/free-icons/quote
・www.flaticon.com/free-icons/car
・www.flaticon.com/free-icons/engine
・www.flaticon.com/free-icons/settings
・www.flaticon.com/free-icons/window
・www.flaticon.com/free-icons/chrome
・www.flaticon.com/free-icons/rocket
・www.flaticon.com/free-icons/social-withdrawal
・www.flaticon.com/free-icons/deployment
・www.flaticon.com/free-icons/key
・www.flaticon.com/free-icons/technical-service
・www.flaticon.com/free-icons/cursor
・www.flaticon.com/free-icons/one
・www.flaticon.com/free-icons/two
・www.flaticon.com/free-icons/three
▼ℹ️ このチャンネルについて
このチャンネルでは、JavaScript、Reactなどフロントエンドの話題から、CDNやCookieなどWebに関連する技術を幅広く解説しています。
#ずんだもん #プログラミング #javascript #js
มุมมอง: 3 048
วีดีโอ
TypeScriptって何？【今日のニュースから学ぶ】
มุมมอง 895หลายเดือนก่อน
Zenn、Qiita、はてなブックマークなどのトレンドから学ぶシリーズ。今回は「TypeScript」について解説します。 ▼💫 X（Twitter） 100_tech_ch ▼📰 Zenn zenn.dev/ak ▼お借りしたもの ・VOICEVOX：ずんだもん ・VOICEVOX：四国めたん ・立ち絵：坂本アヒル 様 ・アイコン：Flaticon ・www.flaticon.com/free-icons/typescript ・www.flaticon.com/free-icons/js ・www.flaticon.com/free-icons/landing-page ・www.flaticon.com/free-icons/warrior ・www.flaticon.com/free-icons/peasant ・www.flaticon....
![Remix Tutorial [WHY DIDN'T ANYONE TEACH ME LIKE THIS?]](http://i.ytimg.com/vi/jLBuwRKG6tM/mqdefault.jpg)
Remix Tutorial [WHY DIDN'T ANYONE TEACH ME LIKE THIS?]
มุมมอง 3.7Kหลายเดือนก่อน
Reactのフレームワーク「Remix」の入門編です。 ▼🎬動画内のリンクはこちら！ ・(01:04) github.com/100-tech-ch/remix-tutorial/blob/main/app/root.tsx ・(06:12) jsonplaceholder.typicode.com/posts?_limit=5 00:00 イントロダクション 00:21 Remixの準備 01:32 【Remixの基本①】Outlet 03:21 【Remixの基本②】meta 05:04 【Remixの基本③】loader 08:26 【Remixの基本④】Dynamic Segments 12:38 【Remixの基本⑤】action 16:23 まとめ ▼🗄️GitHubのレポジトリ ・github.com/100-tech-ch/remix-tutorial/tree/ma...
![HTMX Tutorial [WHY DIDN'T ANYONE TEACH ME LIKE THIS?]](http://i.ytimg.com/vi/B4X7Pyj4sQY/mqdefault.jpg)
HTMX Tutorial [WHY DIDN'T ANYONE TEACH ME LIKE THIS?]
มุมมอง 18Kหลายเดือนก่อน
HTMX Tutorialです。 フロントエンドでよく聞く「HTMX」についてアニメーションで分かりやすく解説します。 ▼リンク ・htmx.org/docs/#via-a-cdn-e-g-unpkg-com ・www.tohoho-web.com/js/events.htm ▼X（Twitter） 100_tech_ch ▼Zenn zenn.dev/ak ▼お借りしたもの ・VOICEVOX：ずんだもん ・立ち絵：坂本アヒル 様 ・アイコン：Flaticon ・www.flaticon.com/free-icons/website ・www.flaticon.com/free-icons/swap ・www.flaticon.com/free-icons/target ・www.flaticon.com/free-icons/tap ・www.f...
100秒で理解するSSG（Static Site Generation）
มุมมอง 9962 หลายเดือนก่อน
今回は、フロントエンドでよく聞く「SSG（Static Site Generation）」について分かりやすく解説します。 ▼X（Twitter） 100_tech_ch ▼Zenn zenn.dev/ak ▼お借りしたもの ・VOICEVOX：ずんだもん ・立ち絵：坂本アヒル 様 ・アイコン：Flaticon ・www.flaticon.com/free-icons/js ・www.flaticon.com/free-icons/javascript ・www.flaticon.com/free-icons/hydration ・www.flaticon.com/free-icons/laptop ・www.flaticon.com/free-icons/server ・www.flaticon.com/free-icons/profile ・...
一瞬で理解するHydration
มุมมอง 1.5K2 หลายเดือนก่อน
今回は、フロントエンドでよく聞く「Hydration（ハイドレーション）」について分かりやすく解説します。 ▼X（Twitter） 100_tech_ch ▼Zenn zenn.dev/ak ▼お借りしたもの ・VOICEVOX：ずんだもん ・立ち絵：坂本アヒル 様 ・アイコン：Flaticon ・www.flaticon.com/free-icons/js ・www.flaticon.com/free-icons/javascript ・www.flaticon.com/free-icons/hydration ・www.flaticon.com/free-icons/water ・www.flaticon.com/free-icons/laptop ・www.flaticon.com/free-icons/server ・www.flatic...
100秒で理解するHTTP Cookie
มุมมอง 1.5K2 หลายเดือนก่อน
今回は、プログラミング開発でよく聞く「Cookie」について分かりやすく解説します。 ▼X（Twitter） 100_tech_ch ▼Zenn zenn.dev/ak ▼お借りしたもの ・VOICEVOX：ずんだもん ・立ち絵：坂本アヒル 様 ・アイコン：Flaticon ・www.flaticon.com/free-icons/js ・www.flaticon.com/free-icons/javascript ・www.flaticon.com/free-icons/laptop ・www.flaticon.com/free-icons/login ・www.flaticon.com/free-icons/profile ・www.flaticon.com/free-icons/search-engine ・www.flaticon.com...
一瞬で理解するNode.js
มุมมอง 1.9K2 หลายเดือนก่อน
今回は、フロントエンドでよく聞く「Node.js」について分かりやすく解説します。 ▼X（Twitter） 100_tech_ch ▼Zenn zenn.dev/ak ▼お借りしたもの ・VOICEVOX：ずんだもん ・立ち絵：坂本アヒル 様 ・アイコン：Flaticon ・www.flaticon.com/free-icons/js ・www.flaticon.com/free-icons/car ・www.flaticon.com/free-icons/gear ・www.flaticon.com/free-icons/engine ・www.flaticon.com/free-icons/arrow ・www.flaticon.com/free-icons/browser #ずんだもん #プログラミング #フロントエンド #javascript
100秒で理解するPolyfill
มุมมอง 1.5K2 หลายเดือนก่อน
今回は、フロントエンドでよく聞く「Polyfill」について分かりやすく解説します。 ▼動画で参照したCloudflareのリンク cdnjs.cloudflare.com/polyfill/ ▼動画で参照したFastlyのリンク polyfill-fastly.io/ ▼X（Twitter） 100_tech_ch ▼Zenn zenn.dev/ak ▼お借りしたもの ・VOICEVOX：ずんだもん ・立ち絵：坂本アヒル 様 ・アイコン：Flaticon ・www.flaticon.com/free-icons/js ・www.flaticon.com/free-icons/javascript ・www.flaticon.com/free-icons/programmer ・www.flaticon.com/free-icons/chrome ・...
一瞬で理解するnpx その2
มุมมอง 6203 หลายเดือนก่อน
「npx」その2です！ その1で解説しきれなかった部分について解説しています！ ▼X（Twitter） 100_tech_ch ▼Zenn zenn.dev/ak ▼お借りしたもの ・VOICEVOX：ずんだもん ・立ち絵：坂本アヒル 様 ・アイコン：Flaticon ・www.flaticon.com/free-icons/js ・www.flaticon.com/free-icons/television ・www.flaticon.com/free-icons/package ・www.flaticon.com/free-icons/programmer ・www.flaticon.com/free-icons/cogwheel ・www.flaticon.com/free-icons/bin ・www.flaticon.com/free-i...
一瞬で理解するnpx
มุมมอง 1.9K3 หลายเดือนก่อน
今回は、フロントエンドでよく聞く「npx」とは何か、分かりやすく解説します。 ▼X（Twitter） 100_tech_ch ▼Zenn zenn.dev/ak ▼お借りしたもの ・VOICEVOX：ずんだもん ・立ち絵：坂本アヒル 様 ・アイコン：Flaticon ・www.flaticon.com/free-icons/js ・www.flaticon.com/free-icons/open-box ・www.flaticon.com/free-icons/hammer ・www.flaticon.com/free-icons/screw-driver ・www.flaticon.com/free-icons/grass ・www.flaticon.com/free-icons/cow ・www.flaticon.com/free-icons/...
100秒で理解するSSR（Server Side Rendering）
มุมมอง 1.1K3 หลายเดือนก่อน
今回は、フロントエンドでよく聞くSPA（Single Page Application）における「SSR（Server Side Rendering、サーバーサイドレンダリング）」について分かりやすく解説します。（前作ったSSRのリメイク版です！より分かりやすくなるように改定しました！） 00:00 SSRの定義 00:32 CSRの問題点 01:18 SSRとは ▼X（Twitter） 100_tech_ch ▼Zenn zenn.dev/ak ▼お借りしたもの ・VOICEVOX：ずんだもん ・立ち絵：坂本アヒル 様 ・アイコン：Flaticon ・www.flaticon.com/free-icons/js ・www.flaticon.com/free-icons/television ・www.flaticon.com/free-icons/pr...
100秒で理解するCommonJS
มุมมอง 9123 หลายเดือนก่อน
今回は、フロントエンドでよく聞くJavaScriptの「CommonJS」について分かりやすく解説します。（前作ったCommonJSリメイク版です！より分かりやすくなるように改定しました！） 00:00 CommonJSの定義 00:22 モジュールの復習 01:18 CommonJSとは 01:39 JavaScriptの歴史 ▼「100秒で理解するモジュールの超基本」 th-cam.com/video/wXP01-wak0w/w-d-xo.htmlsi=GSficC91zrGTWx3J ▼X（Twitter） 100_tech_ch ▼Zenn zenn.dev/ak ▼お借りしたもの ・VOICEVOX：ずんだもん ・立ち絵：坂本アヒル 様 ・アイコン：Flaticon ・www.flaticon.com/free-icons/js ・www.fla...
100秒で理解するBun
มุมมอง 1.2K4 หลายเดือนก่อน
今回は、フロントエンドでよく聞くJavaScript実行環境である「Bun」について分かりやすく解説します。 00:00 Bunとは 00:22 【特徴①】BunはJavaScript実行環境 01:07 【特徴②】便利な機能が沢山含まれている 01:32 【特徴③】とにかく速い！ 02:03 【特徴④】TypeScriptのサポートが手厚い 02:35 エンディング ▼X（Twitter） 100_tech_ch ▼Zenn zenn.dev/ak ▼お借りしたもの ・VOICEVOX：ずんだもん ・立ち絵：坂本アヒル 様 ・アイコン：Flaticon ・www.flaticon.com/free-icons/js ・www.flaticon.com/free-icons/recycle ・www.flaticon.com/free-icons/gea...
100秒で理解するCDN（Content Delivery Network）
มุมมอง 1.3K4 หลายเดือนก่อน
100秒で理解するCDN（Content Delivery Network）
npxも気になって見にきました！
めちゃくちゃ分かりやすいです
編集が丁寧すぎる。
とても分かりやすく、参考になりました。
気になってたけど試せてなかったから助かる
とってもわかりやすかったです！
Next.jsよく触ってて、Remixを知りたいなーって思っていたのですが、この動画をみてRemixの基礎が学べました！ありがとうございます(^^)
When I get bored learning something. I come here
なんとなくNext.jsに似てますな
分かりやすい！
routesをラウツって読む宗派の方だ たぶんタプル、ラベルじゃなくてテュープル、レイブルと呼んだり hoge fuga じゃなくてfoo bar bazz を使う宗派の方だ
OutletとかMetaから説明を始めるの割と攻めてると思ったけど、HTMLからの差分で覚えようとすると、その順番のほうがスッと入ってくるので良いかもしれない
Remixを仕事で使っています。非常に良いチュートリアルだと思います！Remixの仕組みと良さが伝わってきましたー
めっちゃ丁寧で助かります。普段Nextを触っているので差も分かりやすかったです。 お手隙の際で構いませんのでHonoとRemixを使った動画もあると大変嬉しいです。
もはや1000秒テックで草．編集も説明も丁寧で好き．
わかりやすいです！
すでに100秒じゃないのに、全く100秒じゃなくて笑った
小泉進次郎さん！？
丁寧でわかりやすいチュートリアル😭Remixはシンプルでいいフレームワークなので流行って欲しい。
最近このチャンネル見つけて一気見してます
hx-targetが難しそう 副作用のある操作でありながら、htmlという静的解析に乗りにくいデータで実行している これは自動テストをする際に辛いところがありそう
つまりPython
Next.jsの勉強の最中だったから助かる
超分かりやすかった！ チャンネル登録した！
わかりやすい
かわいくて、わかりやすくて、最近のお気に入りのチャンネルです。毎日見てます！
Web APIって「ブラウザが提供する機能」って説明と「webアプリ間でデータのやり取りをするもの」って説明の２つがあるけどこれって別物ですか...？
そのどちらもがWeb APIです。 Web APIは大きく2つの分類があり、「ブラウザAPI」と「サードパーティーAPI」です。前者は「ブラウザが提供する機能」、後者は「webアプリ間でデータのやり取りをするもの」と考えていただいて大丈夫です。 詳細はこちらを読んでみてください: developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction
@@100-tech-ch 助かります、情報元までありがとうございます🙇♂
純粋にはTypeScriptの型チェックしてないよね
マルウェアに…なってしまいましたね…
カップ麺にお湯を注ぐイメージだった
自由度低いし普通にJSでDOM操作すればよくね？とは思ったけど、多分JS書ける人は想定利用者層に含まれてないんだろうな JSは書けない、HTML/CSSは触ったことある、でも動きのあるページを作ってみたいっていうライト層のニーズを満たすためのオモチャだな
トリガーでホヴァーしただけで送信は、悪用される可能性が出てきそう。 意図しないホヴァーで、送信は怖すぎた
htmx完全に理解した！
めっっちゃわかり易かった！
この４つのタグを使えばTH-camみたいなサイト作れるやん！
全国の小学校でこの動画流せ
Peak content
jQueryで良くねと思っちゃうんだけど、jQueryより便利なのか？
どういう仕組みなんやろと思って見てみたら、Javascriptのライブラリなんやね
based and hypermedia-pilled
GREAT!
この動画優秀すぎる。 サクッとhtmxの概要が知れてよかったです。 ありがとうございます。
すご
わかりやすかった！🥳
Gracias!
Reactを使うまでもないようなシンプルな物を作る場合は、HTMXは見やすくていいですね！
What a fun way to learn HTMX
based
HTMX
おもろい！HTMXは最高。
JS(女子小学生)を理解できると思って入ってきた俺のようなカスでも理解しやすい内容…。これって勲章ですよ