ついに JavaScript に groupBy が実装されたぞ！！！ - Qiita
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
ESLint の Suggestions から学ぶ、コードの自動修正の奥深さ - mizdra's blog
これは、はてなエンジニアアドベントカレンダー2023 4日目の記事です。 3日目は id:mechairoi さんの「SQLiteでLinderaを使った日本語全文検索」でした。 blog.chairoi.me 今日のテーマは、JavaScript 向けの Linter 「ESLint」についてです。ESLint を使うと、JavaScript で書かれたコードを静的解析して、よくある間違いを検出したり、コーディングスタイルを統一できます。 通常、ESLint のルールによって報告された問題 (error や warn) は人が手で修正します。ただし、ルールが報告する問題の中には「fixable」な性質を持ったものがあります。こうした fixable な問題は、eslint --fix で自動修正できます。例えば、object-shorthand ルールによって報告された問題は、以下のよう
Web制作者の念願がついに叶った！ height: 0;からheight: auto;へのトランジションをJavaScriptは無し、CSSで実装する方法
今まで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
JavaScriptの非同期処理について - Qiita
JavaScriptの非同期処理に関しての理解 背景 フロント開発で、よくPromise、await、then、catch、finally、asyncなどのキーワードがありますね、これらと一緒に出る単語は”同期処理”、”非同期処理”ですね。 多分Javaでの逐次処理、並列処理、並行処理と類似しているものと最初勝手にそう思いました。 実際にフロントエンドの開発を始め、この非同期処理の理解についてすごく苦労してました。（ただのプロセス上コードを一行ずつに実行するか、プロセスが複数に同時に処理することではなかったですね😭） いきなり非同期処理クイズです！ まず下記のソースコードの実行順を予測してみてください！ // timeandpromise.js console.log("[A] 🦖 MAINLINE: Start"); setTimeout(() => { console.log("[
ESLintのローカルルールで独自のコーディング規約を実装する - ドワンゴ教育サービス開発者ブログ
この記事はドワンゴ Advent Calendar 2023 の 22 日目の記事です。 ドワンゴ教育事業Webフロントエンドチームの berlysia です。1 この記事では、オンライン学習サービスN予備校の開発を支えるコーディング規約の考え方に少し触れ、その運用を支えるESLintの活用を紹介します。 この記事の内容は、他社様主催イベントにて発表した内容の再構成です。 speakerdeck.com コーディング規約は実行可能にしたい 教育事業のWebフロントチームには、細かいコーディング規約が書かれた文書は存在しません。コーディング規約はESLintをはじめとする各種ツールによって、自動で検出・修正可能な形になっています。 文書という形でなく、各種ツールのコンフィグファイルとそのコメントとしてまとまっている、と言い換えてもよいかもしれません。ドキュメンテーションは重要な仕事ですが、そ
「JS体操」のすゝめ 〜その①〜 - KAYAC engineers' blog
このエントリは【カヤック】面白法人グループ 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.
JSでクリエイティブコーディング - テキストを分解しパーティクルにする演出 - ICS MEDIA
パーティクルとは粒子のこと。パーティクルを表現に取り入れると、印象的な演出に役立ちます。JavaScriptやWebGLを使うことで、ウェブの技術でもパーティクル表現の制作が可能です。本記事では題材にパーティクル表現の制作に役立つアイデアや着眼点を紹介します。 作例の紹介 本記事のチュートリアルの完成形はこちらになります。 別タブで再生する ソースコードを確認する この記事で学べること 2Dテキストを粒子化して動かす表現 パーリンノイズによる空気感の再現 GSAPによる大量のトゥイーン制御 WebGLの高速化（PixiJSの応用） 制作の技術 本作例を制作するにあたり、利用しているウェブの技術の概要を紹介します。 WebGL 画面表示はWebGLを利用します。ウェブのレンダリング技術において、もっとも高速な描画性能を得られるのがWebGLであるためです。WebGLは3D表現のための技術と思
快適なThree.jsの開発環境を手に入れたい！webpackで環境構築してみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、くりちゃんです。 Three.jsはwebglを簡単に使えるようにするライブラリですが、それでもメッシュを作ったり、シェーダーを書いたりするためには準備しなければいけないものが多いです。 まずThreejsを読み込んでカメラとレンダラーとシーンを用意してステージを作ったら、ジオメトリーとマテリアルからメッシュを作成してシーンに追加して、リクエストアニメーションフレームでループを回して、やっとメッシュを描画できた！ だけど開発中はOrbitControlsでカメラをぐりぐりできるようにしたいし、dat.guiで数値もぐりぐり動かしたい。シェーダーは別ファイルから読み込めるようして可読性を担保したいし、アニメーションにGSAPは必須な気がする。念のためFPSも計測しときたいのとcssとjsのビルドもしてリントも通したい etc. 普段は会社の開発環境にThree.jsを読み込んで、
Next.js + NestJS + GraphQLで変化に追従するフロントエンドへ 〜 ショッピングクーポンの事例紹介
今回は、fragmentを活用するためにパターンCを採用しており、厳密には、以下のように方針を定めています。 SSR時のクエリ発行: ページコンポーネント単位 CSR時のクエリ発行: CSRが必要なコンポーネント単位 この際、取得したqueryの結果をどのようにfragmentへ変換するかというのがポイントです。 そこで、graphql-anywhereの filter メソッドを用いることで、クエリ結果をfragmentへ変換します。 以下は、簡略化されたクーポンページの実装例です。 type DetailPageProps = { // GraphQLクエリの結果 data: Query } const DetailPage: FunctionComponent<DetailPageProps> = ({ data }) => { // couponはGraphQLのCouponスキー
JavaScript のスレッド並列実行環境
これは Chromium Browser アドベントカレンダーの十日目の記事です。本記事では Chromium における JavaScript のスレッド並列実行環境について仕様・実装・API の面から包括的に紹介します。ブラウザの内部実装に興味がある人を対象に、各機能の使い方ではなく実行モデルに焦点を当てて説明しているため、難易度は高いです。使い方を知りたい人は MDN などの記事を読んでください。この記事をきっかけに実装解読に挑戦してみる人が一人でも増えると幸いです。 本記事を書くにあたり、yuki3 さんに多くのコメントをいただき、議論に付き合っていただきました。ありがとうございました。なお、文責はすべて私 (nhiroki) にあります。誤りや補足、質問などは気軽に GitHub Issue もしくは Twitter へお寄せください。 更新履歴 2018/01/15 Layout
初心者のためのJavaScript入門 − ＠IT
プログラミング初心者のための入門連載です。JavaScriptとは何かの基礎知識から、さまざまな基本構文／文法（alertなどのイベント処理、変数、function（関数）、引数、ifなどの条件分岐、whileやforなどの繰り返し（ループ）、配列、オブジェクト、HTMLを操作するDOMなど）を、書き方が分かる豊富なサンプルコードとともに解説します。 ようこそJavaScriptの世界へ 初心者のためのJavaScript入門（1） JavaScriptで本格的なプログラミングの世界へ。実用的なアプリケーションを作れるようになるまで
JavaScriptをゼロから学ぼう！全くの初心者でも問題なし
ホームページを制作する上で、HTML・CSSとともに欠かすことができないのがJavaScriptの存在です。 しかし、HTMLやCSSのようなマークアップ言語と違ってプログラミングって少し難しそう……と思っている人も多いのではないでしょうか。実は、JavaScriptは非常にシンプルで、基礎的な部分は他のプログラミング言語と同じところも多いのです。 そこで今回は、JavaScriptの基礎を初心者向けに解説します。 JavaScriptとは？ JavaScriptは何百種類もあるプログラミング言語の一種で、ホームページに様々な動きや機能を付加することができます。 JavaScriptはフロントエンド言語(クライアントサイド言語)の一種で、サーバーをとおすことなく、ブラウザだけでプログラミングを実行することが可能です。 JavaScriptはいたるところで使われています。 例えば、ユーザー登
プログラミング初心者からthree.jsに慣れるまで｜misaki nakano
こんにちは。 私は現在クリエイティブディベロッパーという、フロントエンド＋WebGL 実装する仕事を2年半ほどやっています。 1年半東京の会社で働いたあと半年間フリーランスをして、その後アムステルダムの会社に入社して現在8ヶ月経ちます。 three.jsで絵を作るのが好きで、仕事でもプライベートでもこんなかんじのものを作っています。ほとんどtwitterにあげてるので、興味がある方はぜひ見てみてください。 最近ツイッターのDMでどうやってthree.jsを勉強すればいいかアドバイスが欲しいというのをもらうことが多くなってきたんですが、この質問に答えるのは難しいなと感じています。 人によって得意不得意があるし、始めようと思った時点でどのくらいプログラミングや数学に精通しているか人それぞれすぎて、これがベストな勉強法！これをやれば誰でも大丈夫とは言えないです。 この記事では、私が初心者レベルか
Node.js向け画像編集ライブラリSharp - kamoqq.info
Node.js向け画像編集ライブラリのSharp の紹介。 特徴 npmパッケージのみで完結していて外部ライブラリの依存は無い 入力はJPEG、PNG、WebP、TIFF、GIF、SVGに対応 出力はJPEG、PNG、WebP、TIFFに対応 フォーマット変換、拡大・縮小、クロッピングなど各種基本的な機能は網羅 インターフェイスはCallback、Promise、Streamに対応 ドキュメントによるとImageMagickより4〜5倍早いらしい 名前からお察しの通りググラビリティは壊滅的 ライセンスはApache-2.0 （0.22.0現在） 使い方 インストール yarnかnpmでインストールするだけでOK。 ネイティブモジュールも含まれるのでそこだけ注意しましょう。 $ yarn add sharp 以後のサンプルは0.22.0のものです。 基本的な使い方 説明不要なくらいシンプル。
曜日や日時、時間帯に処理を実行するjsライブラリ「self-timer.js」
2017年 3月6日 20時05分 6年前 動かしたい時間帯や日時、曜日などに 処理を実行するJSライブラリ「self-timer.js」の紹介です。 "月、水、金曜日に"、 "10日 〜 19日まで"、 "9時 〜 17時までの間" と言う風に 決まったタイミングで処理を実行したいと思ったことはありませんか？ 販促系のサイトであれば " 毎月25日はポイント2倍 " と 23日~25日に通知バーを出したり 定休日があるところなら " 毎週火曜日は定休日 " と 前日の月曜から火曜日にアラート。 ニュース系のサイトであれば、 サイドバーのコンテンツが曜日毎に切り替わったりすると面白いかもしれません。 例えばサイトにアクセスした時、 " *3月 〜 5月* *毎月5の付く日* *9時 〜 23時* にキャンペーン用のalertを出す " なんてコードを書く時は少し面倒です。 " 上記の様なこ
JavaScriptでリダイレクト（転送）を行う方法と注意点
【無料】ねぎお社長のSEOメールマガジン※30秒で登録完了 購読者数は既18000人を突破！ SEO業界20年のねぎお社長が最新情報、ノウハウ、考え方などこのメルマガでしが入手できない情報を配信。SEO,コンテンツマーケティングで売上を上げたい方は、是非、ご購読下さい。 詳細はこちら リダイレクトとは リダイレクトという言葉はリダイレクション（向きを変える）という意味で、Webページに訪れたユーザーを別のWebページに転送することを言います。 主にWebページが移転した時や、メンテナンスの時や一時的に封鎖したい場合など、Webページを転送するために使われます。 リダイレクトには大きく分けて3つの方法があります。 HTTPによるリダイレクト HTTPによるリダイレクトは移転前のページ評価を移転後のページに最も確実に引き継ぐと言われているため、SEO上最もおすすめされているのがこの方法です。
You Might Not Need jQuery
jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more tha
JavaScriptで重複排除を自分で実装してはいけない（Setを使う） - Qiita
若者とプログラミングをしていて非常にショックを受けたのだが「JavaScript 配列 重複 削除」で検索するとfilterとindexOfを使ったアルゴリズムが検索結果上位に出てくる。これはO(N^2)。計算量の概念がないというのはとても恐ろしい。Big Techがアルゴリズム偏重の試験を課すのは合理的だと確信した。 — 父🌒 (@fushiroyama) March 10, 2020 先日このようなツイートが流れてきたので、$O(N^2)$、つまり計算量が $N^2$ に比例するということの恐ろしさを簡単に書きます。 JavaScriptで配列から重複を排除するコード EcmaScript 2015から導入されたSetを使えばものすごく簡単に書けます。 const array1 = [1, 5, 3, 1, 5, 3]; const array2 = Array.from(new S
【JavaScript】連想配列の重複を削除する方法
はじめに コジマです。 JavsScriptって微妙にかゆいところ手が届かなかったりするんですよね。 連想配列の重複を削除する方法 について書いていこうと思います。 こんな配列があったとします。 const colors = [ {english: 'red' , japanese: '赤'}, {english: 'blue' , japanese: '青'}, {english: 'green' , japanese: '緑'}, {english: 'yellow' , japanese: '黄色'}, {english: 'red' , japanese: '赤'}, {english: 'green' , japanese: '緑'}, {english: 'red' , japanese: '赤'} ]; 適当すぎてごめんねな気持ちもあるけど、英語名と日本語名があります。 赤と
最低限のセキュリティ対策（WEB） - Qiita
WEBアプリを制作する上で最低限気を付けなければ ならないセキュリティについての学習です。 不正なアクセスやトラブル、またユーザの操作 によって第三者に被害を与えてしまうことを防ぐ、 セキュリティの確保がWebアプリにも必要です。 ここで、代表的なセキュリティホールを2つほど 紹介し、対策を考えていきます。 ちなみに運用時のサーバにおけるセキュリティ 対策も必要ですが、今回は触れません。 XSSの概念と対策 クロスサイトスクリプティング（XSS）とは、 ユーザがフォームなどで情報を入力する Webアプリがあり、入力→送信されたデータを 再びユーザにHTMLとして描画する際に 不適切な処理を行っている為に 何かしらの攻撃に繋がってしまうことを 指します。 最も顕著なのが、 他人のWebサイトへ、悪意のあるスクリプトを埋め込むこと。 JavaScriptのコードが埋め込まれているテキスト を「
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
