JavaScript標準でgroupBy関数が実装されています。2023年11月現在Safari以外の主要なブラウザで実装済みで、SafariもTechnology Previewのようです。 （現在MDNの日本語の記事は古い情報のままになっており、現行と異なるので注意！ →更新していただきました。ありがとうございます！） Proposal の Stage はすでに 4 / Finished なので規格として確定済みです。 基本的な使い方 よくあるgroupByです。配列（Iterable）とキーを抽出する関数の二つを指定すると、キーで配列をグループ化します。 const ret = Object.groupBy([ { name: '山田太郎', address: '東京' }, { name: '山田次郎', address: '愛知' }, { name: '山田三郎', addre
これは、はてなエンジニアアドベントカレンダー2023 4日目の記事です。 3日目は id:mechairoi さんの「SQLiteでLinderaを使った日本語全文検索」でした。 blog.chairoi.me 今日のテーマは、JavaScript 向けの Linter 「ESLint」についてです。ESLint を使うと、JavaScript で書かれたコードを静的解析して、よくある間違いを検出したり、コーディングスタイルを統一できます。 通常、ESLint のルールによって報告された問題 (error や warn) は人が手で修正します。ただし、ルールが報告する問題の中には「fixable」な性質を持ったものがあります。こうした fixable な問題は、eslint --fix で自動修正できます。例えば、object-shorthand ルールによって報告された問題は、以下のよう
今までJavaScriptを使用しないと実装できなったことが、CSSだけで実装できるようになったものが増えてきました。たとえば、表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今回紹介するのは、height: 0;からheight: auto;へのトランジションです。高さが固定値であれば簡単にアニメーションできますが、コンテンツ量が不明で成り行きの場合はJavaScriptで高さを取得する必要がありました。 height: 0;からheight: auto;へのトランジションをCSSで実装する方法を紹介します。元記事を読んで、CSS Gridをここで使用するのか！ と驚きました。 🧙♂️ CSS trick: transition from height 0 to auto! by Fra
~ deno run timeandpromise.js [A] 🦖 MAINLINE: Start [M] 🦖 MAINLINE: End [L] 👦 MICRO: then [B] ⏰ TIMERS: setTimeout[0ms] [C] 👦 MICRO: Resolved value: 1st Promise [D] 👦 MICRO: Next chain [I] ⏰ TIMERS: setTimeout[0ms] [J] 👦 MICRO: Resolved value: 3rd Promise [K] 👦 MICRO: Next chain [E] ⏰ TIMERS: setTimeout[0ms] [F] 👦 MICRO: Resolved value: 2nd Promise [H] 👦 MICRO: Next chain 当たった人、おめでとう🎉🎉🎉
この記事はドワンゴ Advent Calendar 2023 の 22 日目の記事です。 ドワンゴ教育事業Webフロントエンドチームの berlysia です。1 この記事では、オンライン学習サービスN予備校の開発を支えるコーディング規約の考え方に少し触れ、その運用を支えるESLintの活用を紹介します。 この記事の内容は、他社様主催イベントにて発表した内容の再構成です。 speakerdeck.com コーディング規約は実行可能にしたい 教育事業のWebフロントチームには、細かいコーディング規約が書かれた文書は存在しません。コーディング規約はESLintをはじめとする各種ツールによって、自動で検出・修正可能な形になっています。 文書という形でなく、各種ツールのコンフィグファイルとそのコメントとしてまとまっている、と言い換えてもよいかもしれません。ドキュメンテーションは重要な仕事ですが、そ
このエントリは【カヤック】面白法人グループ Advent Calendar 2023 の24日目の記事です。 こんにちは！意匠部のおばらです。 面白法人カヤックでは日々、様々な社内勉強会が開催されています。本記事では JS 好きな社内のエンジニア向けに私が企画＆主催している「JS体操」についてご紹介します。 記事の最後にはみなさんも挑戦できるように最新の「JS体操」を紹介しています。ぜひ挑戦してみてください。 1.「JS体操」とは？ 2.「JS体操」の掟 3.「JS体操」のメニュー 3.1. 何らかのロジックを解く 3.2. コードゴルフで文字数を競う 4.「JS体操」の流れ 4.1. 出題方法 4.2. 解答方法 4.3. 実際の様子 5.「JS体操」の過去問の紹介 5.1. 第一回 5.2. 第二回 5.3. 第三回 5.4. 第八回 5.5. 第十一回 5.6. 第十四回 5.7.
パーティクルとは粒子のこと。パーティクルを表現に取り入れると、印象的な演出に役立ちます。JavaScriptやWebGLを使うことで、ウェブの技術でもパーティクル表現の制作が可能です。本記事では題材にパーティクル表現の制作に役立つアイデアや着眼点を紹介します。 作例の紹介 本記事のチュートリアルの完成形はこちらになります。 別タブで再生する ソースコードを確認する この記事で学べること 2Dテキストを粒子化して動かす表現 パーリンノイズによる空気感の再現 GSAPによる大量のトゥイーン制御 WebGLの高速化（PixiJSの応用） 制作の技術 本作例を制作するにあたり、利用しているウェブの技術の概要を紹介します。 WebGL 画面表示はWebGLを利用します。ウェブのレンダリング技術において、もっとも高速な描画性能を得られるのがWebGLであるためです。WebGLは3D表現のための技術と思
こんにちは、くりちゃんです。 Three.jsはwebglを簡単に使えるようにするライブラリですが、それでもメッシュを作ったり、シェーダーを書いたりするためには準備しなければいけないものが多いです。 まずThreejsを読み込んでカメラとレンダラーとシーンを用意してステージを作ったら、ジオメトリーとマテリアルからメッシュを作成してシーンに追加して、リクエストアニメーションフレームでループを回して、やっとメッシュを描画できた！ だけど開発中はOrbitControlsでカメラをぐりぐりできるようにしたいし、dat.guiで数値もぐりぐり動かしたい。シェーダーは別ファイルから読み込めるようして可読性を担保したいし、アニメーションにGSAPは必須な気がする。念のためFPSも計測しときたいのとcssとjsのビルドもしてリントも通したい etc. 普段は会社の開発環境にThree.jsを読み込んで、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
