document.querySelectorAll('input:not([name="newsletter"])')
【随時更新】jQueryからJavaScriptへの書き換えまとめ
document.querySelectorAll('input:not([name="newsletter"])')
<div/> のレンダリングから始める React 学び直し
React Advent Calendar 2022 2日目の記事です。 本記事はごく簡単なコンポーネントから始めて、react のレンダリングについて学び直す記事です。学び直し(!=入門記事)なので JSX、TS の説明などはしません。 本記事の対象読者 ある程度 react を触っていて、もっとレンダリングについて理解したい人 より良いコンポーネントを書きたい人 本記事のコードについて 特に断らないかぎり、本記事に出てくるコードは以下のコードを省略したものです。実際に動かせる codesandbox も用意したので、そちらも参照ください。 import { createRoot } from 'react-dom/client'; const App = /* 実装 */; createRoot(document.querySelector('#main')).render(<App
私がthrowを使わない理由
この記事について JavaScriptではthrow文という文を使うことで例外を投げることができます。 このthrow文ですが、私はレビューなどで例外を投げないでくださいというコメントをするのですがその理由とどのようにコードを変更すればよいのか、ということを書いておこうと思いました。 前提条件 この記事の内容は下記の条件を前提として書き進めていきます。 TypeScriptを採用していること フロントエンド開発の場合 Node.jsを利用したサーバーサイドのコードやCLIツールの開発、各種ライブラリの開発については本記事の対象に含まれないことをご了承下さい。 結論 先に結論から書いておくとTypeScriptを利用している場合例外はカスタムエラーを返却するか、Result型を利用するのがよいと思っています。 次の章からサンプルコードを用いながらthrow文を使った実例と、代替え案について記
環境変数に型を付与しよう！
はじめに 皆さんは、Next.js で env ファイルを使用していて、process.envの後に env ファイルの環境変数を候補として出してほしいと感じたことはありませんか？ 型を付与する方法を調べていたら、良さげなライブラリを見つけたので紹介します。 こちらの記事でおすすめされていました。 問題点 まずなにも使わずに、env ファイルを使用した際の問題点を挙げていきます。 型がstring | undefinedになる
Node.jsでのrecursive readdir - araya's reservoir
やりたいこと 下記のディレクトリで、files以下に存在するファイルのパスをすべて取得したい。 . └── files ├─ a │ ├─ a.txt │ └─ aa │ └─ aaa │ └─ a-aa-aaa.txt ├─ b │ └─ bb │ └─ b-bb.txt └─ c ├─ c.txt ├─ c1 │ └─ c-c1.txt └─ c2 └─ c-c2.txt つまりこのような結果が得られればいい。 [ "./files/a/a.txt", "./files/a/aa/aaa/a-aa-aaa.txt", "./files/b/bb/b-bb.txt", "./files/c/c.txt", "./files/c/c1/c-c1.txt", "./files/c/c2/c-c2.txt", ]; これを Node.js で実現することを考える。 Node.js の fs.r
ESLint とかのインストールだるくないすか？を解決する OSS を書いてる話
tl;dr; JS(TS) 書くときに入れるものって何がある？ node のプロジェクト新しく作るとき JS とか TS の開発時に決まって(ほぼ脳死で)入れるものと言ったら何があるでしょうか？ 人によって違いがあるとは思いますが、だいたい以下の通りではないかなと思います。 ESLint Prettier Jest TypeScript そして、Next.js などの各種フレームワークを使う場合は ESLint とか Jest とか TypeScript が自動セットアップされている状態、というのがプロジェクト作成時に構築されてるんじゃないかなと思います。 でもこれらのセットアップが面倒だと思ったこと、土日もコード書く開発者各位は一度は思ったことあるんじゃないかなと思います。 具体的に何が面倒？ node のプロジェクトであることを前提に、1 から構築していく前提で話を進めます。 Pret
Prettierでimportの順番を自動で整理する
背景 フロントエンドPJのimport文は、複数のモジュールをインポートする際に使われます。 しかし、複数のモジュールをインポートする場合、どういう順番でインポートすればコードが見やすくなるのかは悩ましい問題です。 この記事では、PrettierのimportOrderを使って、import文を自動的に整理する方法を紹介します。 prettier-plugin-sort-importsのインストール PrettierのimportOrder設定は、インポート文を特定の順序に並べ替えるためのものです。 importOrderを使うには、prettier-plugin-sort-importsというプラグインをインストールする必要があります。 npmでインストール
2023年1月のWebプラットフォームの新機能 | フロントエンドBlog | ミツエーリンクス
このページの一部は、Google が作成し、クリエイティブ・コモンズ 4.0 著作権表示情報に記載されている用語に従って使用されている、著作物を複製したものです。 以下の内容は、2023年1月31日に公開された記事「New to the web platform in January」の日本語訳です。翻訳の正確性は保証いたしかねますので、必要に応じ原文を参照ください。また、ブラウザサポートについては原文公開時点のbrowser-compat-dataに基づいており、必ずしも最新の状況を反映しているとは限りませんので、ご注意ください。 2023年1月に安定版およびベータ版のWebブラウザに搭載された興味深い機能を複数ご紹介します。 安定版ブラウザのリリース 2023年1月にはFirefox 109、Chrome 109、そしてSafari 16.3が安定版となりました。これがWebプラットフ
State of JavaScript 2022
After years of relative stability, many are now beginning to question the status quo. New front-end frameworks like Solid and Qwik are suggesting that React might not have all the answers after all, and on the server Astro, Remix and Next.js (among others) are making us reconsider how much code we really need to ship to the client. We'll need all the data we can get if we want to make sense of all
【JavaScript】いまどき（2023年1月）の文字数カウント方法 - Zenet Tech Blog
Intl.Segmenter とは 文字数をカウントする 単語や文に分割する まとめ 余談 こんにちは、システム事業部の松永です。 突然ですが、みなさんはJavaScriptで文字数をカウントした経験はありますか？ 私は先日、とあるプロジェクトで文字数のカウントを行う機会があり、何も考えずに .length を使って以下のようにカウントしてました。 "ゼネットテックブログ".length // => 10 ところがこの書き方だとうまくいかない文字というのも存在します。 （詳しくは以下のサイトに分かりやすくまとめられています） JavaScript における文字コードと「文字数」の数え方 | blog.jxck.io 上記サイトを参考にさせていただくと、以下の文字は（人間の感覚から見て）うまくカウントされません。*1 "𩸽".length // => 2 (サロゲートペア) "葛󠄀".l
moment.js・day.js よりも速くて軽い cdate ライブラリ - Qiita
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") のようなタイムゾーン（時間帯）指定に対
【JavaScript】ES2023の新機能 - Qiita
ES2023その2 / ES2023 / ES2022 / ES2021 2023年一発目ということで、ES2023にFinished Proposalsとして取り入れられた機能を見てみましょう。 ちなみにFinished Proposalは「複数の実装が既に存在する」が前提なので、2023という名前にもかかわらず既に一部のブラウザで使用可能です。 というかES2023の新機能は全てのモダンブラウザで既に使用可能です。 ES2023 Array find from last 末尾からの検索です。 const array1 = [5, 12, 8, 130, 4]; console.log(array1.find(element => element > 10)); // 12 console.log(array1.findLast(element => element > 10)); //
PHPからJavaScriptにデータを受け渡すときに考えること - Qiita
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を作った
[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/8e5439b69c83b50834bd0c07600f1b23fd865e34/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fefcl.info%2Fpublic%2Ffavicon.png)
【JavaScript】アニメーションの処理負荷を軽減する
単体のアニメーションだとそれほど気にならない場合でも、表示範囲の中で複数のアニメーションが同時に走ったりする場合、負荷が増大して処理落ちなどを起こすことがあります。 最近レンダリング負荷を軽減するため試行錯誤をしたので、備忘録もかねて実施した内容をまとめました。
Hands-on Native ESM @ JSConf JP 2022
See Original version on Google Slides for copy-pa…
実装の引き出しを増やすためのDOM Eventテクニック
このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptの関数名の全て - Qiita
2022年に起きたフロントエンドの変化
JavaScriptで平仮名(ひらがな)を判定する - Qiita
