JavaScriptエンジンにはSafariに搭載されているJavaScriptCoreを採用。データベース機能としてSQLiteも搭載し、npmパッケージマネージャとしての機能も備えています。 主な開発言語としてZigを採用し、メモリ管理などを含む低レイヤでの実装がBunの高速な動作を支えています。 Bunの高速性を強調 Bun 1.0の発表では高速性が強調されています。例えば下記はTypeScriptでの「hello world」の実行速度。
![JavaScriptランタイム「Bun 1.0」正式リリース。Windows版もまもなく登場へ](https://cdn-ak-scissors.b.st-hatena.com/image/square/87ceea423af8d94f216b87ead447c6c3e291f581/height=288;version=1;width=512/https%3A%2F%2Fwww.publickey1.jp%2F2023%2Fbun1001.png)
JavaScriptエンジンにはSafariに搭載されているJavaScriptCoreを採用。データベース機能としてSQLiteも搭載し、npmパッケージマネージャとしての機能も備えています。 主な開発言語としてZigを採用し、メモリ管理などを含む低レイヤでの実装がBunの高速な動作を支えています。 Bunの高速性を強調 Bun 1.0の発表では高速性が強調されています。例えば下記はTypeScriptでの「hello world」の実行速度。
はじめに 私は長い間レガシーコードと共に仕事をしてきましたが、jQueryの重要性は依然として頻繁に話題に上がるトピックの一つです。ライブラリ自体は便利なままですが、それは別の時代のニーズを完璧に満たしていました。 現在、私たちは既にES2023について話していますが、過去にjQueryがカバーしていたほとんどの機能は、すでに2015年にリリースされたES6に取り込まれています。 ES6の標準は既に広範にサポートされており、96%のレベルに達しています(出典:caniuse.com)。そのため、特に要素の選択、スタイリング、アニメーション、データの取得などの基本的なタスクについては、ライブラリの使用を見直す良いタイミングかもしれません。 以下のトピックは、いくつかの標準的なjQueryのパターンと、それに相当するバニラJavaScriptでの手法を示す参考資料として役立つと思います。 要素
Webブラウザ上でNode.js環境を実現する「WebContainer」、iOS/iPadOS版Safariに対応。iPhone/iPadでWeb開発環境が起動 WebAssemblyを用いてWebブラウザ上でNode.js環境を実現する「WebContainer」などを提供するStackBlitzは、WebContainerがiOS/iPadOS 16.4以降のSafariに対応したことを明らかにしました。 iPhoneやiPad上のSafari上で、Node.jsをベースとしたWeb開発環境が起動することになります。 Big news: WebContainers are now supported on Safari, iOS and iPadOS!https://t.co/6SfOUDn4z2 pic.twitter.com/9PykipdNxJ — StackBlitz (@s
SQLite3 WASM/JS、Origin Private File Systemを用いてChrome上の高速なローカルDBが機能するとGoogleが明らかに、廃止されたWeb SQLの代替として利用可能 Google Chromeの開発チームは昨年(2022年)9月に、非推奨となったWeb標準のWeb SQL Database API(以下Web SQL)をChromeから削除、その代替機能としてSQLite開発チームと協力してWebAssembly版のSQLiteを開発し、提供する予定であることを明らかにしていました。 参考:Chrome開発チームがSQLiteチームとWebAssembly版SQLiteを開発中。Webブラウザ上からのファイル書き込みで永続化も可能。Web SQL APIの代替として Web SQLはWebアプリケーションがSQLを通じてローカルなリレーショナルデー
moment.js や day.js と似たインターフェースを実装した高速・軽量の JavaScript ライブラリ『cdate』をリリースしました。→ https://www.npmjs.com/package/cdate cdate の主な特徴: moment.js や day.js、Luxon よりも高速 moment.js と同じ .format("YYYY-MM-DD HH:mm:ss") 出力フォーマットに対応 strftime と同じ .text("%Y-%m-%d %H:%M:%S") 出力フォーマットに対応 moment.js と同様に .add(1, "month").startOf("week").endOf("day") のような計算に対応 .tz("Asia/Tokyo") あるいは .utcOffset("+09:00") のようなタイムゾーン(時間帯)指定に対
PHPのstringは任意のバイト列を扱えますが、JavaScript/JSONはUnicodeで扱える文字しか扱えません PHPのint / floatはプラットフォーム依存ですが、JavaScriptのnumberは整数と小数を型レベルで区別しません JSONのarrayに対応する型はPHPのarrayのうちリストであるものです PHPは配列(リスト)と連想配列を型レベルで区別せず、どちらもarrayです リストはキーが0からの抜けがない連番になっている要素が0個以上の配列です array_is_list()関数で連想配列とリストを判別できます array_values()で連想配列をリストに変換できます array_filter()の結果はフィルタされたキーがスキップされるのでリストではありませんが、結果をarray_values()に通すことでリストにできます JsonSerial
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った URLを文字列結合で組み立てると色々問題が起きやすいので、それを避けるためにURL APIやURLSearchParams APIでURLを組み立てるパターンをまとめたチートシートを作りました。 azu/url-cheatsheet: URL manipulation cheatsheet for JavaScript URLにユーザーが入力した文字列を含めるときはencodeURIComponentでエスケープする URLはプレーンな文字列ではなく構造化された文字列(文字の並びに意味がある文字列)として扱わないと、さまざまな問題を抱えやすいです。 たとえば、次のように文字列結合でURLを組み立てるとパストラバーサルの問題があります。 name に ../../adminのような文字列が
こんにちは。ぬこすけ です。 皆さんは「 setTimeout とはどんな関数でしょう?」と聞いたら、どう答えますか? おそらく、ほとんどの人が「指定した時間に処理が走るようにする関数」と答えるのではないでしょうか? function main() { console.log('動いたよ!!'); } // 大体 3 秒後に main 関数が動き出す setTimeout(main, 3000); 大雑把な理解としては問題ないですが、実は setTimeout の隠された能力はそれだけではありません。 setTimeout の隠された能力を知るとどんな良いことがあるのでしょうか? 例えば、次のような良いことがあります。 ブラウザに対する理解が深まる Web サイトのパフォーマンスを向上させることができる ドヤれる まず、 ブラウザに対する理解が深まります 。 かのアリストテレスはこう言い残
Wasm Labsが「Wasm Workers Server」をオープンソースで公開。Node.jsやDenoのようにWebAssemblyのWorkerをイベントドリブンに実行 VMware Wasm Labsは、WebAssemblyのWorkerをNode.jsやDenoのようにサーバサイドでイベントドリブンに実行できる「Wasm Workers Server」をオープンソースで公開しました。 インストールも簡単で、わずか5分で使い始められると説明しています。 Today, we are excited to announce Wasm Workers Server, a self-contained server to run your workers in #WebAssembly. It assigns an HTTP endpoint to wasm modules base
Intro Fetch API の実装が広まり、 IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。 Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、 Web API の中でもかなり異質な命名である XHR が、 XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、 Microsoft の命
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 最近リリースされたSafariとChromeで、CSSのSelectors Level 4(現時点でドラフト)仕様にある疑似クラス「:has()」が相次いで実装されました。 疑似クラス「:has()」は、カッコ内に要素を書くと、その要素を持つ親要素にのみ指定したスタイルを設定できる、という便利な機能を提供してくれます。 ところがこの「:has()」のChromeにおける実装は、jQueryで似たような機能(カッコ内の要素を持つ親要素を選択する)を提供する「:has()」に悪影響を及ぼし、このjQueryの「:has()」を使っているWebサイトでは、Chromeを利用した場合に一定の条件下でWebサイトが壊れるなどの問題を引き起こすことが分かりました(同じエ
結論 どちらでもいい セミコロン付けても付けなくても落とし穴はある ESLintを利用することで落とし穴を検知できる 私はセミコロンつけない派 自動セミコロン挿入とは 自動セミコロン挿入(automatic semicolon insertion) この仕組みのおかげでセミコロンを使わなくてもコードを書くことができ、コンパイラが行末を察してセミコロンを挿入してくれる 自動セミコロン挿入のしくみはECMAScriptで規定されており、自動セミコロン挿入はJavaScriptエンジン間で可搬性がある 自動セミコロン挿入には落とし穴があり、ルールを理解しておく必要がある 第1のルール:セミコロンが挿入されるのは、"}"トークンの前か、改行の後か、プログラムの末尾だけ
はじめに 今回はゲーム感覚でプログラミングを学べるサービスを紹介します。 ゲームを通して学んだ知識をアウトプットできるサービス集を厳選したので、ぜひ学んだ知識を「使える技術」として自分のものにしていただければと思います。 この記事の主な対象者 プログラミング初心者~中級者 基礎文法は学んだけどアウトプットができていない人 フロントエンジニアを目指してる人 楽しみながらプログラミングを学びたい人 ぷよぷよプログラミング まずはじめに紹介するのは、SNSでも話題になった、ぷよぷよを開発しながらプログラミングを学ぶことができる「ぷよぷよプログラミング」です。 ぷよぷよプログラミングでは、人気ゲームぷよぷよを開発しながらHTMLやCSSやJavaScriptといったプログラミングをしていく中で基礎となる技術を学ぶことができます。 実際にアプリ開発をしながら学べるので、インプットとアウトプットが同時
JavaScriptの仕様はECMAScriptで、ECMAScript 2015(ES2015)、ECMAScript 2016(ES2016)...というように毎年進化を続けています。 これまでの仕様はES2021でした。 本日6月22日、ES2022は正式仕様として承認され、ES2022が最新仕様となりました。 22.06.2022 Ecma International approves new standards - Ecma International ブラウザ対応も完了しており、全モダンブラウザ(Google Chrome・Firefox・Safari・Microsoft Edge)でES2022の全機能が使えます。 本記事では、ES2022すべての新機能を紹介します。「何が使えるようになったのか?」「どうしてそれが必要だったのか?」が、できるだけわかりやすいように解説しました
JavaScript初心者のため、デバッグ力がまだまだ拙くどうしたらデバッグ力ってつくのだ…と悩んでいたら 👨💻 < スタックトレースするといいよ! 👨💻 < スタックトレースするにはdebuggerとかconsole.trace()使うといいよ! と教えていただきdebuggerを使ったらとても便利だったので🙏 スタックトレースとは スタックトレース (stack trace)とは エラーが発生したときに表示される内容で、そのエラーが発生するまでの過程(どんな処理がどの順番で呼び出されたかの流れ)を、ざっくりと表示したものです。 「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 スタックトレースを使って問題をどう切り分けるか まずは問題が起きている箇所のスコープを狭くしていきましょう💡 問題の切り分け方として ざっくり入口と出口の関数に適切な値が入って
この投稿ではJavaScriptで文字数をできるだけ正確にカウントする方法について取り上げます。 文字数とは? 要件で「文字数を表示してほしい」「○文字以上はバリデーションエラーにしたい」と文字数を考慮しないとならないことがあります。 そもそも文字数とは何でしょうか。 たとえば、アルファベットの「A」は1文字と数えられそうです。 次の絵文字は、何文字になるでしょうか? この絵文字はiOSであれば14.5の環境では、UI上では上のように1文字のように表示されます。しかし、それ以前のバージョンでは、同じ文字列データでも😵💫のように2文字で表示されます。なお、この絵文字は3つのコードポイントU+1F635 U+200D U+1F4ABからなります。この絵文字の「文字数」はいったい何文字として扱ったらよいのでしょうか。 以上のように、ひとことで文字数と言ってもデータと見た目と環境の3つのややこ
どうも、まさとらん(@0310lan)です! 今回は、ブラウザ上からリアルなハッカー気分を疑似体験できるユニークな無料Webゲームをご紹介します! PCゲームとしてSteamからもリリースされていますが、今回ご紹介するブラウザ版は手軽に遊べるのでオススメです。ターミナル風のゲーム画面が特徴で、実際にJavaScriptを使ってプログラミングもできます。 ハッキングやセキュリティなどにご興味ある方も含めて、ぜひ参考にしてください! 【 Bitburner 】 ■「Bitburner」の遊び方 「Bitburner」は、西暦2077年のサイバーパンクをテーマにしたディストピアな世界を舞台にしています。 ゲーム画面は3Dグラフィックや派手な演出があるわけではなく、世界観にピッタリなCLIベースのターミナルを忠実に再現しているのが大きな特徴です。 遊び方ですが、面倒なユーザー登録などは必要ありませ
※本記事は筆者styprが英語で執筆した記事を株式会社Flatt Security社内で日本語に翻訳したものになります。 TL;DR Node.jsのエコシステムで最も人気のあるMySQLパッケージの一つである mysqljs/mysql (https://github.com/mysqljs/mysql)において、クエリのエスケープ関数の予期せぬ動作がSQLインジェクションを引き起こす可能性があることが判明しました。 通常、クエリのエスケープ関数やプレースホルダはSQLインジェクションを防ぐことが知られています。しかし、mysqljs/mysql は、値の種類によってエスケープ方法が異なることが知られており、攻撃者が異なる値の種類でパラメータを渡すと、最終的に予期せぬ動作を引き起こす可能性があります。予期せぬ動作とは、バグのような動作やSQLインジェクションなどです。 ほぼすべてのオンラ
JavaとJavaScriptを混同する人に、名前がかぶってるだけの別モノという指摘がされることもあります。間違いではない。 技術的にも実務的にもコミュニティ的にもそのとおりではあります。 ただ、そう言い続けられた結果、ほんとに単にLiveScriptの名前にJavaをもってきてJavaScriptにしただけという誤解があるようです。 JavaScriptはJavaのScript版、少なくともそうであろうという努力はされていました。 JavaScriptリリース時のCNETの記事には「JavaScript is based on Java」という記述があります。 Netscape and Sun Unveil JavaScript - CNET 実際には、LiveScriptにJavaから文法やライブラリなどを持ち込んでリリースにこぎつけたというのがあります。 JavaScriptのDat
となるのが原因です。parseInt というのは、文字列を解析して整数値(int)を返すグローバル関数であり、引数をまず文字列に変換する仕様となっております。その段階で 0.0000005 が "5e-7" という文字列に変換されてしまい、その文字列の先頭の 5 だけが数字として解析されてしまったため、結果として parseInt(0.0000005) === 5 となりました。 なぜ String(0.000005) === "0.000005" に、String(0.0000005) === "5e-7" になるのかについては、この記事の最後で余談として説明します。 整数化には Math.trunc を使おう このように、parseInt は文字列を引数にすることを前提にしているため、速度の面でも可読性の面でも「小数値を整数値に変換したい」という場合に使うのは望ましくありません。最も望
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く