Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ご無沙汰してます。ここはクソアプリアドベントカレンダーの12日目です。 今年も無事クソアプリを生み出すことができました。 皆さんの来年がより良いものになるよう、今日は10万年分の星占いをお送りします 過去ログ 2024 星占い10万年 👈いまここ 2023 🎉🎉最高にイカしたバウンディングボックスを紹介するぜ🎉🎉 2022 【ChatGPTと作る】あしのさきの動物パンプリン占い【クソアプリ】 2021 😡webのスクロールでふわっと出てくるやつ絶対粉砕するマン【クソアプリ】 2020 Vue.jsと物理演算とElectron
こんにちは！面白プロデュース事業部のおばらです。 『JS体操』第3問 「Zalgo Text の生成」、今回もたくさんの方が挑戦してくださいました。ありがとうございます！本記事はその解説記事の第1弾。挑戦してくださったみなさまの回答、JS体操 QA チームが事前に検証・想定していた回答を一挙にご紹介します。 もし第3問まだ挑戦できていなかった！というひとは以下よりぜひ。 hubspot.kayac.com 今回の第3問では事前にヒント記事を4件書いてみました。ぜひ併せてご覧ください。 techblog.kayac.com techblog.kayac.com techblog.kayac.com techblog.kayac.com 目次 本戦上位3名の回答 🥇 114文字 by halwhite さん 🥈 117文字 by ほーく さん 🥉 119文字 by すぎゃーん さん 社内
こんにちは！ カヤック面白プロデュース事業部のおばらです。 普段は受託案件のデザイン・フロントエンド開発などを担当しています。 さて、『JS体操』第2問 いかがでしたか？ 今回初めての方々 第1問に引き続きの方々 複数のアプローチで何通りも回答してくださった方々 普段業務で JavaScript をバリバリ書いているであろう方々 JavaScript を学んでいる学生の方々 などたくさんの方々が挑戦してくださいました。 とても嬉しいです。ありがとうございます！ 『JS体操』とは？ 『JS体操』とはカヤックが主催する JavaScript のコードゴルフ大会です。 もともとは社内の勉強会として始めた施策です。 その詳細は以下のブログ記事を御覧ください！ techblog.kayac.com 第2問の詳細はこちら https://hubspot.kayac.com/js-taiso-002 も
前回の記事では、JavaScript の実行エンジン V8 の JIT 出力コードを読んでみました。記事は M1 Mac 上で動かした結果でしたので、ARM アーキテクチャのアセンブラを読むことになりました。 さてそんな ARM アーキテクチャですが、最近の ARM には FJCVTZS という JavaScript 専用の機械語命令があるのをご存知でしょうか？CPU に、特定の言語（それもコンパイラを持たない JavaScript）専用の命令があると知ったとき、私は大いに驚きました（過去にも Jazelle みたいなものはありましたが） 今回は、この FJCVTZS 命令について、実際にどれだけ効果があるのか、V8 をビルドしながら調べてみましょう。 FJCVTZS 命令とは？ FJCVTZS 命令は、Arm v8.3 から導入された JSCVT 命令の一つで、JavaScript の言
こんにちは！カヤック面白プロデュース事業部のおばらです。 普段は受託案件、特にインタラクティブな WebGL や Canvas2D を駆使する案件のデザイン＆実装を担当しています。 先日出題したJS体操 第1問目、挑戦してくださったみなさまありがとうございました！ 早速ですが最短文字数の回答は 44文字 でした！ export default x=>x-(x%=.2)+.2-(.04-x*x)**.5 みごと44文字を達成した方は、 halwhite さん koyama41 さん sugyan さん tkihira さん たつけん さん の5名！（※ Unicode コードポイント順） おめでとうございます！！ 最短文字数を狙った正統派の回答以外にも、裏技的な面白アプローチがたくさんありました笑 このアプローチは面白い、ぜひ紹介したい！という回答がいくつかあったので、解説記事は2回に分けて
HonoWeb application framework Fast, lightweight, built on Web Standards. Support for any JavaScript runtime.
先日、次のような Tweet を見かけました TIL I discovered that TensorFlow.js uses an interesting trick to sniff your CPU architecture in WebAssembly. pic.twitter.com/LVyywIM48I — Robert Knight (@robknight_) January 4, 2023 面白かったので、なぜこうなるのかの解説と、ついでにこのテクニックを使った JIT 検知方法などについて紹介します。 JavaScript における低レイヤーの扱い JavaScript においては、挙動が比較的しっかりと仕様に定められているために、環境による振る舞いの違いはあまり発生しません。しかし、低レイヤーに降りるほど振る舞いは実装依存になり、環境差が発生する余地が出てきます。 一番
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;
id:minemuracoffeeさんがAIを使って描いた絵を背景画像に設定されてる、というのをあさイチで見て、背景画像を自作するのは良いな、と思ったので、ちょっとブラウザでお絵かきするページを作って、ジェネレータを作った。 https://cute-grey-juice.glitch.me/ 使い方は簡単で、上のページをブラウザで開くだけ。 ただ開くとカラフルな絵文字が出るのだけど、好きな字を入れると、入力された字をもとに作ってくれる。 入力された文字と文字コードの近い文字をランダムに選んで埋めていく。 背景色とか具合文字の埋め具合はランダムなので、気に入るまでリロードする形。 2文字以上のときは単に繰り返すようにしたので、拝承ってひたすら書かれた背景画像を生成できる。 生成用のURLもシェアできるので、ここからみんな好きな拝承画像を作れる。 https://cute-grey-juic
JavaScript を書いたことがある人ならば一度は使うであろう console.log ですが、この関数は思ったよりも厄介な性質を持っています。その性質を知らずに console.log を使うと、デバッグ時に大ハマリしてしまうことがあります。この記事では console.log の落とし穴についてお話します。 今回は Chrome に特化して解説しますが、Firefox や Safari でも同じ落とし穴があります。 console.log とは まずはさらっと基本をおさらいしましょう。 大前提なのですが、console.log は JavaScript の言語仕様（ECMAScript）で定義されていません。ブラウザ向けには whatwg の仕様がありますが、あくまでもそれはブラウザ向けの仕様であり、Node.js を含むほぼ全ての JavaScript 環境で使えるのは cons
JavaScript で頻出する undefined と null について語ります。 言語仕様上の違い JavaScript (ECMAScript) において、仕様上 undefined と null は当然ながら明確に区別されています。いくつか言語仕様上の扱いについて挙げてみます。 比較 厳密な比較演算子 === において undefined と null は区別されます。ゆるい比較演算子 == においては両者は区別されません（仕様 7.2.14）。 console.log(undefined === null); // false console.log(undefined == null); // true
Intro Fetch API の実装が広まり、 IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。 Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、 Web API の中でもかなり異質な命名である XHR が、 XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、 Microsoft の命
I've made a JavaScript simulation of driving at night time on the motorway. It's hard to classify what it is. It's not a video, because it's generated dynamically. It's not a game, because you just watch. It's not a screensaver, because it's not the 90s. Maybe it's a "demo"? This is something I've been planning to make for years, but kept forgetting about. I would only remember it when in the pass
Node.js、Denoに続いて、Bunという新たなJavaScriptランタイムが登場していますが、Denoの7月29日のブログにて、"Roll your own JavaScript runtime"という記事が投稿されていたので紹介します。 タイトルの通り、自分のJavaScriptランタイムを作ってみよう！という記事です。 作り方は元記事に載っているのでここでは省略して、掻い摘んだ内容をまとめていきます。 JavaScriptランタイムの材料 Rust deno_core tokio Rustのdeno_coreとtokioというクレートを使って作っていきます。 deno_core deno_coreって、もうそれdenoじゃんと思いましたが、こちらのクレートはJavaScriptエンジンであるV8との橋渡し的な役割を持つようです。 deno_coreは、複雑で大量のAPIを持つV
昨日、ツイッターで次のような JavaScript クイズを出しました。 久しぶりの JavaScript クイズ！ function hello(x) { if(typeof x === 'undefined') { alert(x.f()); } } この hello 関数で "Hello, World!" のアラートを表示させることが出来るか？ — Takuo Kihira (@tkihira) July 31, 2022 このブログ記事では、この問題について解説します。 解答 答えは「出来る」です。出題者の意図としては document.all を想定しておりました。 document.all は、ブラウザに存在する、非常に特殊なオブジェクトです。 document.all 自体は object 型である。console.log(document.all) とすると内容が確認出来る
Develop, test, run, and bundle JavaScript & TypeScript projects—all with Bun. Bun is an all-in-one JavaScript runtime & toolkit designed for speed, complete with a bundler, test runner, and Node.js-compatible package manager.
Intro ECMAScript の Private Class Field の仕様策定と各ブラウザの実装が進んでいる。 これにより、従来の JS にはなかった Class の Private フィールドが使えるようになる。 提案されている構文や、挙動について解説する。 Class Field Declaration まず前提として、現状の Class の フィールドはコンストラクタで定義する必要がある。 例えば count フィールドを持つ Counter クラスを定義した場合、以下のようになる。 class Counter { constructor() { this.count = 0 } increment() { this.count ++ } display() { console.log(this.count) } } const c = new Counter() c.in
となるのが原因です。parseInt というのは、文字列を解析して整数値（int）を返すグローバル関数であり、引数をまず文字列に変換する仕様となっております。その段階で 0.0000005 が "5e-7" という文字列に変換されてしまい、その文字列の先頭の 5 だけが数字として解析されてしまったため、結果として parseInt(0.0000005) === 5 となりました。 なぜ String(0.000005) === "0.000005" に、String(0.0000005) === "5e-7" になるのかについては、この記事の最後で余談として説明します。 整数化には Math.trunc を使おう このように、parseInt は文字列を引数にすることを前提にしているため、速度の面でも可読性の面でも「小数値を整数値に変換したい」という場合に使うのは望ましくありません。最も望
Romeとは 現代のJavascript開発には多くのツールチェーンが必要とされます。Babel,webpack,Jest,ESLint,Prettier,Typescriptなどを組み合わせて開発することが多く、さらにこれらの一部代替選としてesbuild,SWC,Viteなどのツールチェーンの選択肢が存在し、選択肢の多さやその組み合わせの複雑さに苦い思いをしたことがある方も少なくないのではないと思います。 こうした中で、新たに開発が進められているツールチェーン、Romeをご存知でしょうか？ Romeは先に挙げたように複数のツールチェーンを役割ごとに組み合わせて使うのではなく、1つのツールチェーンでこれら全ての役割を担ってしまおうという壮大な計画を持つツールチェーンです。 Romeは2020/03にFacebookより発表されました。現在は法人化され、yarnやBabelの生みの親である
ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
