個人JavaScriptコードレシピconst str = 'string' console.log([...str]) console.log(str.split(''))
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った URLを文字列結合で組み立てると色々問題が起きやすいので、それを避けるためにURL APIやURLSearchParams APIでURLを組み立てるパターンをまとめたチートシートを作りました。 azu/url-cheatsheet: URL manipulation cheatsheet for JavaScript URLにユーザーが入力した文字列を含めるときはencodeURIComponentでエスケープする URLはプレーンな文字列ではなく構造化された文字列(文字の並びに意味がある文字列)として扱わないと、さまざまな問題を抱えやすいです。 たとえば、次のように文字列結合でURLを組み立てるとパストラバーサルの問題があります。 name に ../../adminのような文字列が
![[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った](https://cdn-ak-scissors.b.st-hatena.com/image/square/b26f7dc8f9e783316f720174980e93c627438d74/height=288;version=1;width=512/https%3A%2F%2Fefcl.info%2Fpublic%2Ffavicon.png)
HTMLに味付けするためのバニラJS tips集
ReactやVueを使わずに、素のJavaScriptでDOM操作する時のやつです。 何度も同じようなことをググって時間を溶かしていたので、よく使うやつをまとめてみました。 要素の取得 // 最初に見つかった要素1つを取得 document.querySelector("#hoge-id"); //[object HTMLElement] document.getElementById("hoge-id"); //[object HTMLElement] //条件に合う要素を全て取得 document.querySelectorAll(".hoge-class"); // [object NodeList] document.getElementsByClassName("hoge-class"); // [object HTMLCollection] Array.from(documen
正式仕様リリース！ JavaScriptの最新仕様ES2022で追加された「全」新機能
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すべての新機能を紹介します。「何が使えるようになったのか？」「どうしてそれが必要だったのか？」が、できるだけわかりやすいように解説しました
ライブラリゼロの20行でReduxもどきを実装して、Reduxを完全掌握しよう！！
はじめに Reduxは遠い昔に誕生したものなので、いまReduxを使っていない人も多いかもしれません。 Reduxは、出現当時はそれほど大きなソフトウェアではなかったのですが、ときが経つにつれて、いろいろな便利関数たちが現れてきて、そのせいで今からReduxを調べる人は、何が本質なのかを調べるのが難しくなっていると思います。 そこで3分でReduxもどきを実装しました。こちらです。20行！！ じゃーん！ JavaScriptでうごきます！！ // 実装 const createStore = (reducer) => { let state = 0; const listeners = []; const dispatch = (action) => { const newState = reducer(state, action); state = newState; listeners
Remix - Build Better Websites
Focused on web standards and modern web app UX, you’re simply going to build better websites Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff. export async function loader({ request }) { return getProjects(); } export async function action
ブラウザバック時の表示を最適化する Yahoo!ニュースの取り組み事例
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュース を担当しているエンジニアの喜楽です。 今回は、Yahoo!ニュースが取り組んでいるブラウザバック時の表示最適化手法について紹介します。 なぜブラウザバック時の挙動に注目するのか ユーザーがYahoo!ニュースのページを閲覧し、別のページに遷移する方法は大きく分けて以下の2つが考えられます。 （A） リンクをたどってページを遷移する （B） ブラウザーのナビゲーションボタンまたはスワイプ操作によって遷移する 「戻る」による遷移（ブラウザバック） 「進む」による遷移（ブラウザフォワード） Yahoo!ニュースでは総PVのうち一定程度が(B)のブラウザバックまたはブラウザフォワードによるページ遷移時のも
Alpine.jsを触ってみた
Alipine.js is 何 ちょうど一年半前くらいにGithubのトレンドになったJSのフレームワーク。 Vueライクなディレクティブを使えるが、Vueなどに比べると軽量かつ学習コストが低そう（15のディレクティブから成っている、機能がかなり絞り込まれている）。 大規模なアプリ作成というよりLP的なものだったり軽いアプリを作りたいが、Vue.jsやReact.js、Nuxt.jsだったりを使うのはちょっと微妙、だけどデータバインドとかはしたい時にサクッと使える気がする。 CDNで読み込み、もしくはnpm install alpineでもできるらしい（npmの方はやってない）。 ちなみに今回はCDNでサクッと体験。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-C
Alpine.js の良いところ - Qiita
これは SOUSEI Technology アドベントカレンダー6日目の記事です 唐突ですが Alpine.js 、素敵じゃないですか https://github.com/alpinejs/alpine 最初見た時は「Alpine」のとこだけ見て、 Linux の方かと思ったのは秘密です。 なんだかんだで普通の HTML のページを作る機会がある人はあると思うんです。ペライチの LP など。 その時に何を使うか 素の JavaScript だったり jQuery だったりがまずパッと思いつきますかね？ いやいや、Next.js や Nuxt.js だ！という人もいると思います。 そんな時、自分は今まで Stimulus を使っていましたが、前から興味があった Alpine.js を使った際に、どのようなポイントが「良いなぁ」と思ったのかご紹介します ※ 紹介している Alpine.js
Div.js - divタグだけでHTMLページを作成できる？
Webの進化形としてセマンティックWebが知られています。タグを使って文書をより構造的に、情報処理しやすい形に書いていくという考え方です。しかし、そのためにタグを多数覚えるのは面倒かも知れません。 今回紹介するDiv.jsで描くHTMLにおいては覚えるタグがdivしかありません。それなのに十分な表現が可能です。 Div.jsの使い方 実際の内容です。ものすごい出落ち感があります。 <div is="h1">Hello world!</div> <div is="p">This is a <div is="b">bold</div> paragraph.</div> <div is="ol"> <div is="li">This is a list item.</div> <div is="li">This is a list item.</div> <div is="li">This is
GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースのまとめ
GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースを紹介します。 当ブログでもよく紹介しますが、見逃していたものがありました。 1年間分、52個もあるので、時間のあるときにチェックしてみてください。 The 52 most popular projects from the last year of Trending Projects by Iain Freestone 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 私を注目をあつめたプロジェクトをキュレーションしており、人気があるWeb開発プロジェクト10個を紹介するニュースレターを毎週、配信しています。この記事では、ここ1年間に配信した各ニュースレターから最も多くクリックされたプロジェクトをリストアップしました。 ニュ
Animon
Animate elements entering the viewport Animon gets out of the way and allows you to describe animations using class names and data-attributes. Based on intersectionObserver, Animon weighs only 0.9kb, with zero dependencies. Learn how to use it. Usage Import the library and its styles from a CDN: <link rel="stylesheet" href="https://unpkg.com/animon@1.0.1/dist/animon.css"/> <script src="https://unp
Tingle.js, 2kB vanilla modal plugin
Tingle uses just one small CSS. Feel free to include it in your workflow (Less, Sass, etc...) and customize it to fit your needs. <link rel="stylesheet" href="tingle.min.css"> Then, just include tingle in your document: <script src="tingle.min.js"></script> Use // instanciate new modal var modal = new tingle.modal({ footer: true, stickyFooter: false, closeMethods: ['overlay', 'button', 'escape'],
遅延読み込み、無限スクロールなど、要素と境界の交差を非同期で検出する1Kbの超軽量スクリプト -Bounds.js
画像の遅延読み込みや無限スクロールを実装する際、ページ上に境界を定義し、その境界に要素が入ったかどうか判定して実行します。要素と境界の交差を非同期に検出し、パフォーマンスを改善する1Kbの軽量スクリプトを紹介します。 要素が境界に1px交差した、全部が入ったなどを正確に検出。他のJavaScriptへの依存はなく、単体で動作します。 Bounds.js -GitHub Bounds.jsの特徴 Bounds.jsのデモ Bounds.jsの使い方 Bounds.jsの特徴 画像の遅延読み込み、無限スクロールなどの実装には、境界を設定することが重要です。通常は、イベントハンドラ、ループ、getBoundingClientRectの呼び出しの組み合わせが必要でしたが、これらはメインスレッドで実行されるため、パフォーマンスが低下します。Bounds.jsは要素と境界の交差を非同期に検出し、パフォ
昨今のJavaScriptをレビューしたら全くわからなかった話 - aoma blog
はじめに 最近JavaScriptのプルリクが来たので「よーしやったるでー」って感じでレビューしたんですが、まったく理解できずレビューになりませんでした。 その時疑問に思ったことをメモします。。 誰かの助けになれば幸いです。。 これはもう引退やな。。 classの中で function って書くの省略してるの？ class TestClass { test() { 処理 } } function を省略して書けるのかなと思ったらそうではない。むしろ書いてはいけない。 下記はエラーになる。 class TestClass { function test() { 処理 } } PHPに慣れてるからか、もやもやする。 (a, b) => は無名関数なのはわかったけど function(a, b) じゃダメなの？ (a, b) => は無名関数で function(a, b) と同じ。 好みの問題
CSS will-changeプロパティについて知っておくべきこと | POSTD
はじめに WebKit系ブラウザでCSS transformやanimationといったプロパティを使った時に発生する、“例のちらつき”。これに気づいたことのある人ならば、おそらく“ハードウェア・アクセラレーション”という用語をこれまでにも耳にしたことがあるでしょう。 CPU, GPU, ハードウェア・アクセラレーション 一言で言うと、ハードウェア・アクセラレーションとは、グラフィックス・プロセッシング・ユニット（GPU）を用いてセントラル・プロセッシング・ユニット（CPU）の処理量を軽減し、ブラウザのレンダリング処理を効率化することです。ハードウェア・アクセラレーターを有効にしてCSS処理を使うと、ページのレンダリングが速くなり、ページ表示が高速化されます。 名前の通り、CPUとGPUはどちらもプロセッシング・ユニットです。CPUはコンピュータのマザーボードに取り付けられている部品で、ほ
【JavaScript】メモリの浪費を避けるコーディング | ヘッドウォータースのブログ TechNote
こんにちは。良昌です。 Facebook、GithubなどのJSON形式でユーザ情報を返却するAPIや、PhoneGap、Monacaなどのスマートフォンのマルチプラットフォームを提供するライブラリ、IDEが開発ツールとして定着してきたことにより、JavaScriptを利用する機会が増えたのではないでしょうか。 今回は、JavaScriptコンテナがWebブラウザの場合に、動的に確保されるメモリ領域の浪費を避ける方法について書きたいと思います。 JavaScriptにおけるメモリの浪費を避けるコーディング JavaScriptにおけるメモリの浪費を避けるコーディングをするためには、GC(ガベージコレクション)、クロージャについての知識が必要です。まずは、この2つの機能について説明していきます。 ■GC(ガベージコレクション) GCとはプログラムが動的に確保したメモリ領域の内、不要になった領
Learn JavaScript
Learn JavaScriptThe easiest way to learn & practice modern JavaScriptLearn in an interactive environment. Read short lessons, take notes, and complete challenges directly in your browser. Try it out →Anonymous cookies are used to improve the quality of the course. Learn modern JavaScript (ES2015+) from scratch, and practice in an intuitive environment. The challenges are inspired by real-world
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドのデザインパターン
Popper - Tooltip & Popover Positioning Engine
