そのJavaScript、V8が泣いてます。V8の気持ちを理解して書くパフォーマンス最適化このスライドはSlidevで作られており、以下のレポジトリで公開しています https://github.com/riya-amemiya/amemiya_riya_slide_data/tree/main/frontend_conf_tokyo_2025
The many, many, many JavaScript runtimes of the last decade
This last decade has seen an inundation of new JavaScript runtimes (and engines in equal measure), enabling us to run JavaScript in all manner of contexts with precise fitness for task. Through these, we've seen the language spread to the Cloud, the edge, Smart TVs, mobile devices, and even microcontrollers. In this article, we'll explore what's driving this diversity, and why no one runtime or en
Cloudflare Workers で Basic認証する方法 | 株式会社ビヨンド
＊KOBE ENISHI (神戸三宮) こんにちは！ 株式会社ビヨンド大阪オフィスのラーメン王、ヒデです。 今回が13回目の投稿です。 前回はAWS IAMで特定のホストゾーンのみ閲覧できるポリシー設定について書きました！ 設定方法は比較的簡単にできますが、設定箇所を間違えると作成できなかったり、見せてはいけない部分を見せてしまうことも起きます。 わかりやすく設定方法を紹介しているので気になる人はぜひ、確認してみてくださいね。 【AWS IAM】特定のホストゾーンのみ閲覧できるポリシー設定 概要 Basic認証を使ってアクセス制限したいなぁ。。。。 せっかくCloudflareを使ってるし、オリジンに負荷かけたくないから CloudflareでBasic認証を実装したいなぁ。。。。 え？でもこれ、どうすんの？ 上記のことは考えたことありませんでしょうか？ 通常、Basic認証を実装する際は
Cloudflare Workers 入門【はじめからそうやって教えてくれればいいのに！】
はじめに 【追記】↓100秒テックでイラスト投稿してます！よかったら見てってください！ Cloudflare Workers とは？ Cloudflare Workers とは、一言で言うと、Cloudflare のエッジで動くサーバーレスの JavaScript 実行環境のことです。 ...と言っても、これだけだとよくわからないですよね。だから、今回は初めて触る人でもわかるように、順序だててわかりやすく解説していきます。 Cloudflare Workers 理解するための道のり Cloudflare Workers を理解するためには以下の3つのキーワードを理解することが重要です。 CDN エッジコンピューティング JavaScript 実行環境 この記事ではこの3つのキーワードを1つ1つ解説した後、最後にデモという形で実際にコードを書いて Cloudflare Workers にデプ
Anime.js | JavaScript Animation Engine
All-in-one animation engine. A fast and flexible JavaScript library to animate the web.
テキストをコピペするときにスタイルごとコピーされちゃうのってどんな仕組み？ - Qiita
概要 文章をコピペしてエクセルに張り付けたときに、画面のスタイルもコピーされてしまって困ったことはありますか？ありますよね！ （↓こんな感じ） 私もよくやってしまうのですが、実際にどのような処理が行われているのかよく分かっていませんでした。理解を深めるためにも、自分で実装して謎を解いていきたいと思います。 3つパターンの処理を実装 比較のため、プレーンテキスト・HTMLテキスト・リッチテキストのコピー機能をサンプルプログラムを実装してみました。 （リッチテキストのコピーが、範囲選択してコピペしたときと同じ機能を想定しています。） HTMLファイル 画面表示されるHTMLは下記のような感じです。各コピー処理でid="message"の部分を固定でコピーするようにします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"
iosショートカットの凄技でこんなこともできます - Qiita
みなさんショートカット使ってますか？ https://support.apple.com/ja-jp/guide/shortcuts/welcome/ios https://qiita.com/tags/shortcuts もともとは Workflow というサードパーティアプリだったのですが、 Apple に買収され、iOS に組み込まれてさらにパワフルなツールになりました。 最近だと、ホーム画面のアプリ起動アイコンをカスタマイズする方法としてニュースに取り上げられたりしています。 さて、そんなショートカット機能、ぱっと見はブロックプログラミングみたいな、最近流行りのノーコードみたいな感じで、「コードを書ける俺には必要ないぜ」と見くびって深堀りしていない諸氏も多いことでしょう。 さて本日は、プログラミング大好きな皆さんを刺激する技をご紹介します。 「WebページでJavaScriptを実
1KBのWebフレームワークをつくる - ゆーすけべー日記
1KBのWebフレームワークをつくりました。 名前は「Pico」。 minifyしてビルドした模様。 コードはこれだけ。依存なし。ほんとにこれだけです。 Cloudflare WorkersとDenoで動きます。 今回はこのPicoというフレームワーク、 それに必要不可欠なURLPattern、実装について、 そして僕がつくっているもう一つのフレームワークHonoとの関係などを紹介します。 Hello World text/plainでレスポンスを返す、“Hello World"相当のコードは4行で書けます。 import { Pico } from "@picojs/pico"; const app = new Pico(); app.get("/", (c) => c.text("Hello Pico!")); export default app;
Amazon Prime Videoが動画再生にWebAssemblyを採用。再生デバイス上にWasm VMをデプロイ、高フレームレートなど実現
これだけ多種多様なデバイスに対して、ログイン画面やパーソナライズされたポータル画面、動画の再生などの機能を実現するために、Amazon Prime VideoのアプリケーションはC++で開発されたJavaScript VMと、その上で動くJavaScriptアプリケーションの2つから構成されています。 そしてそれぞれが必要に応じてデバイスにダウンロードされ、実行されます。 特にJavaScriptのアプリケーション部分は実行時にダウンロードされ実行されることで、機能追加などの変更やバグフィクスが容易になっていると説明されています。 プロトタイプのWebAssembly化で10倍から25倍高速に Amazon.comがこのAmazon Prime VideoのアプリケーションにWebAssemblyの採用を検討し始めたのは2020年8月とのことです。 同社はプロトタイプとして低レイヤのJav
いまさら聞けないNode.js | さくらのナレッジ
こんにちは！小田島です。さくらのナレッジで初めて記事を書きます。よろしくお願いします！ 先日5月13日、Deno 1.0がリリースされました。Denoについては後日記事を書きますが、今回はDenoが生まれるきっかけとなったNode.jsについて、いまさら聞けないことを色々書いていきます。 対象者 本記事は、Node.jsについて以下のような疑問を持っている人が対象です。 Node.jsって何？ Node.jsを使うと何がうれしいの？ Node.jsを使うときに何を注意すればいいの？ なお、本記事はNode.jsのイメージを掴んでもらうのが目的であり、ハンズオンではありません。そのためコードは1行も出てきませんのでご了承ください。 そもそもNode.jsとは？ 超ざっくり説明すると、JavaScriptの実行環境です。 それまではJavaScriptといえばウェブブラウザー上で動かすのが普通
JavaScript イベントループの仕組みをGIFアニメで分かりやすく解説
JavaScript イベントループの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 ✨♻️ JavaScript Visualized: Event Loop by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: イベントループ イベントループは、JavaScriptデベロッパーが避けては通れない関門の1つですが、最初は理解しにくいかもしれません。私は視覚学習者なので、GIFアニメで視覚的に説明することで、あなたの手助けをしようと思います。 説明の前に、まずイベントループとは何でしょうか？ なぜ気にする必要があるのでしょうか？ JavaScriptはシングルスレッドで、一度に実行できるタスクは1つだけです。通常は問題ありませんが、30
DenoとNode.jsの大きな違い - keroxpのScrapbox
DenoとNode.jsは両方ともV8をバックエンドにしたサーバーサイドJavaScriptランタイムだが、そこには大きな違いが存在するkeroxp.icon
🚀⚙️ JavaScript Visualized: the JavaScript Engine
DEV Community Follow A space to discuss and keep up software development and manage your software career Open Forem Follow A general discussion space for the Forem community. If it doesn't have a home elsewhere, it belongs here Future Follow News and discussion of science and technology such as AI, VR, cryptocurrency, quantum computing, and more.
10分でわかる「今更だけどTypeScriptってなに？」 - Qiita
2年ぶりくらいに業務で TypeScript をやることになったので、個人的なおさらい用です。 TypeScript とは JavaScript は現在 Web アプリケーションの開発で最も使われているものの、JavaScript 独特の癖や、型の認識が緩いこと、ブラウザによって挙動に違いがあります。 それらを補うために altJS というアプローチがあります。JavaScript の機能を拡張し、よりメンテナンスしやすく、高機能にするものです。 それをトランスパイル（変換）することでブラウザによる挙動の違いを吸収したピュアな JavaScript が吐き出され、安全に JavaScript にはまだ無い機能を擬似的に使えるようにすることができます。 その中で現在デファクトスタンダードとなっているのが、TypeScriptです。 なぜ TypeScript が人気なのか 近年の Web 開
すべての新米フロントエンドエンジニアに読んでほしい50の資料 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね💪 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。 とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。 ※補足 新米と表記しましたが、実際には新卒や
面倒なJavaScriptコードのとりまとめがこれ1つで可能に、「webpack」入門 | さくらのナレッジ
最近JavaScript関連の開発で採用が進んでいる「webpack」は、JavaScriptファイルの変換や結合といった操作をコマンド1つで実行できるツールだ。本記事では、webpackとは何かという基本的な概念から導入方法、実際の利用例などを紹介する。 モジュール管理機構の不足や未サポート機能の問題をツールで解決する「webpack」 今日のWeb開発においてJavaScriptの利用は避けることができないが、JavaScriptのソースコードをどのように管理・デプロイすべきかという問題に対しては、まだ決定的な解決策が生まれていない状況が続いている。その根本的な原因の1つには、最近までJavaScriptにおいて普遍的に利用できるモジュール管理システムが存在しなかったことがある。 一般的なプログラミング言語では、大規模なプログラムを実装する際に作業性やメンテナンス性を高めるためプログラ
JavaScript Primer - 迷わないための入門書 #jsprimer
JavaScript Primer 迷わないための入門書 Tweet Watch Star Xのハッシュタグ: #jsprimer これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 プログラミングをやったことはあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるように書かれています。 初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは「はじめに」から読んでみてください。 JavaScript Primerを読み始める 書籍版 このウェブサイトの内容はアスキードワンゴから書籍として出版されています。 書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。 書籍版は次のサイトから購入できます。
Chrome Dev Summit 2018が開催！Web制作者がチェックしておきたい、CSSとJavaScriptの最新情報 | コリス
先週、サンフランシスコで開催された「Chrome Dev Summit 2018」から、Web制作者が特に注目しておきたいハイライトを紹介します。 ナビゲーションの新しい遷移方法、Squooshの開発秘話、新しいPageSpeed API、ChromeでもLazyloadをサポートなど、これからの制作に役立つものばかりです。 Highlights from Chrome Dev Summit 2018 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ナビゲーション遷移（Navigation transitions） Squoosh -15kbのJavaScriptアプリ PageSpeedとLighthouse APIによる統一されたパフォーマンス分析 ChromeでもLazyloadをネイティブにサポート ナビゲーション遷移（
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptの本を書くときに参考にしてるもの
JavaScriptでの賢いconsole.log( )の使い方 & その他便利なconsole.xxx( )使い方まとめ (dir・table・warn・groupとか) - Qiita
