文字列またはTypedArrayを16進数の文字列に変換する | キリウ君が読まないノート
文字列→16進数の文字列split() で配列にする → map() で各要素に charCodeAt(0) して数値 (UTF-16コード、0~65535) に変換 → 数値に toString(16) で16進表記の文字列に変換 → join() で結合。 文字列const hexStr = 'ABCDかきくけ'.split('').map(v => v.charCodeAt(0).toString(16)).join(' '); console.log(hexStr); // -> 41 42 43 44 304b 304d 304f 3051TypedArray|Buffer →16進数の文字列reduce() で各要素を toString(16) しながら結合。 TypedArray// Uint16Array生成 const uint16Array = Uint16Array.
【Three.js】スクロールでぐにゃぐにゃする画像を実装する
はじめに この記事ではこんな表現の実装方法を解説します。 ▼ GIF ▼ CodePen （0.5x を押すと見やすいです） ▼ 2021/7/26 追記 CodePen（ 慣性スクロールありバージョン） 海外のデザインアワードを受賞するようなリッチなサイトで良く見る演出（個人的主観）です。WebGLの汎用的な表現な気がしますが、その実装方法を解説する記事は（少なくとも日本語では）ほとんど見つけられなかったので、自分の勉強も兼ねて書くことにしました。ちなみに技術記事を書くのは初めてに近いので暖かい目と心で読んでいただけます幸いです。実装はThree.jsを用いています。 注意事項 想定する読者 Three.jsを触ってみたが、サイト制作に活かす術が分からない、同様の表現を良く見るけどどうやって実装しているか分からない、といった方を対象としています。従って本記事では、Three.jsの基本的
structuredCloneはどんなものか
structuredCloneは、JavaScriptにおいてオブジェクトのディープコピーができる便利な関数です。 従来ディープコピーの標準化された方法が無かったため、structuredCloneの登場はJavaScriptのユーザーにとって画期的なものです。あまりに画期的であり、その便利さも分かりやすいため、出たばかりの時期はTwitterでのJavaScript豆知識ツイートの常連でした。 現在はstructuredCloneのもの珍しさは無くなり、単純に便利なAPIとして受け入れられていますが、そのせいかstructuredCloneに対する理解も単純な人が出てきているようです。 そこで、この記事ではstructuredCloneがどのようなものなのか、どうしてそのようになっているのかについて、じっくりと説明します。 structuredCloneの歴史 筆者は自称世界一技術の歴史
IEブラウザを判定してアラートを表示する方法 | おべんきょうにっき
Web制作に携わっていると、IEを（いまだに…）利用しているユーザーのための対応が必要になってくる。対応方法しては、 パターン1：IE用に別途cssを書く パターン2：「（レイアウトが崩れる）IEをやめて、ChromeやEdgeなどに変えましょう」とアラートする。 の2パターンが考えられる。パターン1は、すでにIE10以前のサポートが終了していることと、「IEからEdgeに変えてね」と公式にアナウンスされていることを考えると、手間をかけるだけもったいないので、企業向けサイトでない限り、できるだけ避けたい。 ※Microsoftのアナウンス パターン2のアラートで対応するケースが多いので、今回はその方法を記載。 方法1：ブラウザの画面上にアラートを表示する IE10以前のブラウザで開くと、画面上にアラートのテキストが表示されるようにする。 条件付きコメントでブラウザに表示する IE独自の規格
JavaScriptの正規表現で文字列を抜き出す「グループ化」
JavaScriptの正規表現で特定の文字列を抜き出す「グループ化」について解説します。 JavaScriptで特定の文字列を抜き出して処理したいことがよくあるのですが、グループ化の使い方を忘れてネットで検索してもなかなかヒットしないので、備忘録で残しておきます（他に適切な方法があるようでしたらすいません）。 １．特定の文字列を抜き出す まず基本として、特定の固定文字列を抜き出すには、match関数で次のように記述します。 var foo = 'abcdefg'; var bar = foo.match(/abc/); これは変数fooに「abc」という文字が含まれていれば、変数barに abc が設定されます。 変数fooに「abc」という文字が含まれていない場合、変数barにnullが設定されます。 この使い方は、検索したい文字列があらかじめ決まっていて、上記のような代入文ではなく、判
Window.resizeTo() - Web API | MDN
0 � �� Learn Learn web development Frontend developer course Getting started modules Core modules MDN Curriculum Check out the video course from Scrimba, our partner Learn HTML Structuring content with HTML module Learn CSS CSS styling basics module CSS layout module Learn JavaScript Dynamic scripting with JavaScript module
Array.isArray() - JavaScript | MDN
標準組み込みオブジェクトArrayコンストラクターArray() コンストラクター静的メソッドArray.from()Array.fromAsync()Array.isArray()Array.of()静的プロパティArray[Symbol.species]インスタンスメソッドArray.prototype.at()Array.prototype.concat()Array.prototype.copyWithin()Array.prototype.entries()Array.prototype.every()Array.prototype.fill()Array.prototype.filter()Array.prototype.find()Array.prototype.findIndex()Array.prototype.findLast()Array.prototype.find
Element: scrollIntoView() メソッド - Web API | MDN
引数 alignToTop 省略可 論理値です。 true の場合、要素の上端がスクロール可能な祖先の表示範囲の上端に来るようにスクロールします。 scrollIntoViewOptions: {block: "start", inline: "nearest"} に相当します。これが既定値です。 false の場合、要素の下端がスクロール可能祖先の表示範囲の下端に来るようにスクロールします。 scrollIntoViewOptions: {block: "end", inline: "nearest"} に相当します。 scrollIntoViewOptions 省略可 Experimental 以下のプロパティを持つオブジェクトです。 behavior 省略可 スクロールを即座に行うか、滑らかにアニメーションさせるかを決定します。このオプションは文字列であり、以下のいずれかの値を取りま
JavaScriptのメモリリークを検出するフレームワーク「MemLab」、メタがオープンソースで公開
JavaScriptのメモリリークを検出するフレームワーク「MemLab」、メタがオープンソースで公開 メタ（旧Facebook）は、JavaScriptアプリケーションのメモリリークを検出するフレームワーク「MemLab」をオープンソースとして公開したと発表しました。 We’ve open-sourced MemLab. #MemLab is a JavaScript memory testing framework that automates leak detection and makes it easier to root-cause memory leaks. 1/2 https://t.co/vo6Gzv56ud — Engineering at Meta (@fb_engineering) September 12, 2022 Metaが展開しているFacebook、Fac
関数 - JavaScript | MDN
一般的に言うと、関数とは外部 (再帰の場合は内部) から呼び出すことのできる「サブプログラム」です。プログラムそのもののように、関数は関数本体 (function body) と呼ばれる連続した文で構成されます。関数には引数として値を渡すことができ、関数は値を返すことができます。 JavaScript で、関数は第一級オブジェクトです。関数は他の関数に渡したり、関数から返したり、変数やプロパティに代入したりできるからです。また、それ以外のオブジェクトと同様にプロパティやメソッドを持つこともできます。他のオブジェクトと異なる点は、関数は呼び出せるということです。 より詳細な例や解説については、JavaScript の関数のガイドを参照してください。
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた - feb19
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみたdate2022.9.4(Sun.)tagsweb developmentFrontendJavaScript ウェブアプリケーション開発で React や Vue を使うのはよくある話かなと思うのですが、マーケティングや広報活動など広告クリエイティブ系のウェブサイト制作ではどれぐらい使われているのかなと思い、暇つぶしにリサーチしてみました。 調査方法母集団ウェブギャラリーサイトをいくつか見て比較的国内系のセレクトが多そうな https://io3000.com/ さんから 2022 年に紹介されている 175 件と、ウェブサイトのアワードサイトとして有名な https://www.awwwards.com/websites/ さんで 2022.8 以降に Winner と
画像データにJavascriptコードを埋めるサービス作ってみた | SIBYL System
こちらはJavaScript Advent Calendar 2015の17日目の投稿として書いたものです。 画像データにJavascriptコードを埋め込む事ができる「JS in PNG」というウェブサービスを公開しました。 http://js-in-png.9×4.net/ なぜ作ったのか 今年1月に投稿された、以下の「JavascriptをPNGに圧縮する」という記事に触発されて作ったものです。 JavascriptをPNGに圧縮する http://yomotsu.net/blog/2015/03/01/js2png.html 詳細は上記のサイトを見ていただければと思いますが、画像の1画素を1文字としてJavascriptのコードを画像に埋め込んでいるものです。イメージは以下のようになります。 こちらはJquery 2.1.3 minfyを画像に圧縮したものです。おもしろいですね。と
JPEG画像にJavaScriptのコードを埋め込んでみる | みどりのさるのエンジニア
JPEG画像にJavaScriptのコードを埋め込む手法が紹介されていたので試してみました。 今回は次の画像に対してコードの埋め込んでみます。 注意 この記事は攻撃方法を知ることでセキュリティを学ぶことを前提としており、実験も仮想環境上で実行しています。 決して外部サイトに対して実行しないようにしてください。 画像のバイナリを見てみる 今回試す方法は画像のバイナリを変更してコードを埋め込んでいます。 そこで、最初は画像のバイナリを確認してみます。 $ hexdump -C donarudo.jpg | head -n 5 00000000 ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 01 |......JFIF......| 00000010 00 01 00 00 ff e1 00 6c 45 78 69 66 00 00 49 49 |..
JavaScript で forEach を使うのは最終手段 - Qiita
この記事は JavaScript2 Advent Calendar 2018 の1日目の記事です。 こんばんは。@diescake です。 今年は、JavaScript 経験の浅い新人さんや外注さんをリードする立場として、 とにかく幅広いメンバーのコードレビューをする機会に恵まれたのですが、 事ある毎に Array.prototype.forEach を利用する人が多かったため、初心者向けに要点を整理してみました。 以下 ES2015 以降のバージョンをサポートするブラウザ、あるいは polyfill を利用していることを前提としています。 結論 配列に対して何らかの操作を行う際は、 filter, find, map, reduce などのメソッドを利用できないか検討し、 いずれのメソッドでも実現ができない場合の最終手段として forEach を選択しましょう。 下記に、いくつかのサンプ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【JavaScript】文字列を任意の文字数で分割し、配列を作成する方法 - Qiita
正規表現チェッカー PHP: preg_match() / JavaScript: match()
Window: structuredClone() メソッド - Web API | MDN
オブジェクトのクローンにJSON化を使う時代は終わった！【JavaScript】 - Qiita
console: trace() 静的メソッド - Web API | MDN
GitHub - carhartl/jquery-cookie: No longer maintained, superseded by JS Cookie:
