- 25
- 35 038
100秒テック
Japan
Приєднався 3 бер 2024
100秒テックです！
フロントエンドでよく使われる難しい単語や概念を100秒でカンタンに解説します！
役に立った方はぜひチャンネル登録お願いします！
フロントエンドでよく使われる難しい単語や概念を100秒でカンタンに解説します！
役に立った方はぜひチャンネル登録お願いします！
HTMX入門【はじめからそうやって教えてくれればいいのに！】
今回は、フロントエンドでよく聞く「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.flaticon.com/free-icons/laptop
・www.flaticon.com/free-icons/cursor
・www.flaticon.com/free-icons/arrow-right
・www.flaticon.com/free-icons/one
・www.flaticon.com/free-icons/two
・www.flaticon.com/free-icons/three
・www.flaticon.com/free-icons/heart
#ずんだもん #プログラミング #javascript #js
▼リンク
・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.flaticon.com/free-icons/laptop
・www.flaticon.com/free-icons/cursor
・www.flaticon.com/free-icons/arrow-right
・www.flaticon.com/free-icons/one
・www.flaticon.com/free-icons/two
・www.flaticon.com/free-icons/three
・www.flaticon.com/free-icons/heart
#ずんだもん #プログラミング #javascript #js
Переглядів: 13 730
Відео
100秒で理解するSSG（Static Site Generation）
Переглядів 66114 днів тому
今回は、フロントエンドでよく聞く「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,1 тис.28 днів тому
今回は、フロントエンドでよく聞く「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 тис.Місяць тому
今回は、プログラミング開発でよく聞く「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 тис.Місяць тому
今回は、フロントエンドでよく聞く「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,2 тис.Місяць тому
今回は、フロントエンドでよく聞く「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
Переглядів 392Місяць тому
「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,5 тис.Місяць тому
今回は、フロントエンドでよく聞く「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）
Переглядів 8362 місяці тому
今回は、フロントエンドでよく聞く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
Переглядів 6872 місяці тому
今回は、フロントエンドでよく聞くJavaScriptの「CommonJS」について分かりやすく解説します。（前作ったCommonJSリメイク版です！より分かりやすくなるように改定しました！） 00:00 CommonJSの定義 00:22 モジュールの復習 01:18 CommonJSとは 01:39 JavaScriptの歴史 ▼「100秒で理解するモジュールの超基本」 ua-cam.com/video/wXP01-wak0w/v-deo.htmlsi=GSficC91zrGTWx3J ▼X（Twitter） 100_tech_ch ▼Zenn zenn.dev/ak ▼お借りしたもの ・VOICEVOX：ずんだもん ・立ち絵：坂本アヒル 様 ・アイコン：Flaticon ・www.flaticon.com/free-icons/js ・www.flat...
100秒で理解するBun
Переглядів 8342 місяці тому
今回は、フロントエンドでよく聞く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秒で理解するECMAScript
Переглядів 4962 місяці тому
今回は、フロントエンドでよく聞く「ECMAScript（エクマスクリプト）」について分かりやすく解説します。 00:00 ECMAScriptとは 00:27 JavaScriptの歴史 02:23 エンディング ▼X（Twitter） 100_tech_ch ▼Zenn zenn.dev/ak ▼お借りしたもの ・VOICEVOX：ずんだもん ・立ち絵：坂本アヒル 様 ・アイコン：Flaticon ・www.flaticon.com/free-icons/js ・www.flaticon.com/free-icons/hatch ・www.flaticon.com/free-icons/sparkling ・www.flaticon.com/free-icons/performance ・www.flaticon.com/free-icons/th...
100秒で理解するCDN（Content Delivery Network）
Переглядів 9212 місяці тому
今回は、フロントエンドでよく聞く「CDN（Content Delivery Network、コンテンツデリバリーネットワーク）」について分かりやすく解説します。 00:00 CDNとは 00:34 CDNの構成要素 01:27 CDNの仕組み ▼X（Twitter） 100_tech_ch ▼Zenn zenn.dev/ak ▼お借りしたもの ・VOICEVOX：ずんだもん ・立ち絵：坂本アヒル 様 ・アイコン：Flaticon ・www.flaticon.com/free-icons/js ・www.flaticon.com/free-icons/hatch ・www.flaticon.com/free-icons/verification ・www.flaticon.com/free-icons/file ・www.flaticon.com/free...
100秒で理解するCSR（Client Side Rendering）
Переглядів 4732 місяці тому
今回は、フロントエンドでよく聞くSPA（Single Page Application）における「CSR（Client Side Rendering、クライアントサイドレンダリング）」について分かりやすく解説します。 00:00 CSRとは 00:23 CSRの流れ 01:46 CSRの問題点 ▼X（Twitter） _akimuu_ ▼Zenn zenn.dev/ak ▼お借りしたもの ・VOICEVOX：ずんだもん ・立ち絵：坂本アヒル 様 ・アイコン：Flaticon ・www.flaticon.com/free-icons/js ・www.flaticon.com/free-icons/television ・www.flaticon.com/free-icons/file ・www.flaticon.com/free-icons/love-a...
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完全に理解した！
めっっちゃわかり易かった！
この４つのタグを使えばUA-camみたいなサイト作れるやん！
全国の小学校でこの動画流せ
Peak content
jQueryで良くねと思っちゃうんだけど、jQueryより便利なのか？
どういう仕組みなんやろと思って見てみたら、Javascriptのライブラリなんやね
今のjavascriptは何でもできますからね(低レイヤ―は弄れない）。まるでJavaみたいだ。
based and hypermedia-pilled
GREAT!
この動画優秀すぎる。 サクッとhtmxの概要が知れてよかったです。 ありがとうございます。
すご
わかりやすかった！🥳
Gracias!
Reactを使うまでもないようなシンプルな物を作る場合は、HTMXは見やすくていいですね！
What a fun way to learn HTMX
based
HTMX
おもろい！HTMXは最高。
JS(女子小学生)を理解できると思って入ってきた俺のようなカスでも理解しやすい内容…。これって勲章ですよ
うおおお！！分からやすい！！！ クッキーモンスターでも分かりやすい！！🍪
むちゃくちゃ分かりやすい… 100秒ずんだもん…あなたは神か…🙏
めっちゃわかりやすい
ブンと読んでた、バンなのか？
TypeScriptを取り上げて下さるのが本当にありがたいです TypeScriptの型ジェネリクスを、アニメーションで解説してほしいです
うぽつです！
まだ開発中かと思ってた。 安定して使えるなら早いってだけでも使う価値あるし、かわいい見た目も愛されそう😊
初めて知った🥺 nodeとnpmの代わりに使えるのかな🥺
bunへの移行 に際して、jestを利用していたところだけをbunに代替してみましたがありえないほど早くなってテスト動いてないのかと３度見くらいしました
Bunは最近Windowsでも使えるようになりましたし、勢いがありますよね
わかりやすかった
これみんなが勝手なアドレスを主張してしっちゃかめっちゃかにならないのかなって不思議だった
わかりやすくて良き🎉
すごくわかりやすくて助かります！
電車で見やすいです 助かってます
コールスタックが空になるタイミングで実行されてたんだ、、 Webアプリの仕事から離れちゃってるから、100秒シリーズで細かい学習＆復習できるの本当にありがたい めちゃわかりやすいので、 もうちょっと複雑なコードでイベントループの挙動見てみたい
めっちゃ分かりやすかった！！
概要をざっくり理解するのにこんなに分かりやすい動画はじめて！
良いチャンネルを見つけた……！