TypeScript/JavaScriptの配列操作について、私たちのとあるリポジトリ内での利用順に紹介します。 一度も利用されていない操作は載せていないので悪しからず。 関数 利用数
TypeScript/JavaScriptの配列操作について、私たちのとあるリポジトリ内での利用順に紹介します。 一度も利用されていない操作は載せていないので悪しからず。 関数 利用数
はじめに 私は長い間レガシーコードと共に仕事をしてきましたが、jQueryの重要性は依然として頻繁に話題に上がるトピックの一つです。ライブラリ自体は便利なままですが、それは別の時代のニーズを完璧に満たしていました。 現在、私たちは既にES2023について話していますが、過去にjQueryがカバーしていたほとんどの機能は、すでに2015年にリリースされたES6に取り込まれています。 ES6の標準は既に広範にサポートされており、96%のレベルに達しています(出典:caniuse.com)。そのため、特に要素の選択、スタイリング、アニメーション、データの取得などの基本的なタスクについては、ライブラリの使用を見直す良いタイミングかもしれません。 以下のトピックは、いくつかの標準的なjQueryのパターンと、それに相当するバニラJavaScriptでの手法を示す参考資料として役立つと思います。 要素
shift() / unshift() is 何? JavaScriptには、配列の末尾に要素を追加するArray.prototype.push()と、末尾から要素を取り出すArray.prototype.pop()メソッドがあります。これ自身はJavaScriptのメソッド名である以前にスタック操作の用語であり、また語の持つイメージとしてもわかりやすい気がします。 一方、配列の先頭に要素を追加するArray.prototype.unshift()と、先頭から要素を取り出すArray.prototype.shift()はどうでしょうか? お...覚えられない...🌋!!!せめて取り除く操作はdequeueであってくれ...🥺 (ggれば一瞬だからそもそも覚える必要がないとか、そんな悲しいこと言わないでください) かくいう私も一向に覚えられず、MDNとエディタを往復する日々を過ごしていま
Array.prototypeのreduce()メソッド。 苦手な方や、ややこしいから使わないようにしているという方もいるかな、と。 確かに、他のmap()やfilter()、sort()などと比べるとちょっと難解な感じありますよね。 また、一方では、reduceマジ最強と思ってる方もいると思います。 確かに、集計することも新たな配列を作ることも何でもできますもんね。 そんな避けられたり奉られたりなreduce()について、本当はどんなメソッドなのか自分なりの解釈を書きたいと思います。 (追記:ありがたいことに色々と有益なコメントを頂いているのでそちらも是非ご参照ください。) reduce()とは reduce() メソッドは、配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素における計算結果の返値を渡します。配列のすべての要素に対し
はじめに 個人でWebアプリを開発した際に使用したJavaScriptの便利なライブラリを紹介します。 HTML/CSS/JavaScriptの知識があれば公式サイト見たり、ググったりすれば移植できます! 目次 1.グラフを書きたい!=Chart.js 2.並び替えができる表を作成したい!=List.js 3.画像を自動再生するスライドショーを作りたい!=VEGAS2 4.モーダルで画像を表示したい!=Lightbox 5.カンバンボードを作成したい!=Muuri 6.最後に グラフを書きたい!=Chart.js Chart.js は棒グラフ、折れ線グラフ、円グラフなどを簡単に画面に表示できるようになるライブラリです。 公式サイト デモ 以下のようなグラフを表示できます。 棒グラフ 折れ線グラフ レーダーチャート サンプルコード 円グラフを表示するコードです。 See the Pen Un
Intro JS から Cookie を操作する document.cookie の改善を目的とした Cookie Store API についてまとめる。 document.cookie document.cookie は、ブラウザの API における代表的な技術的負債の一つと言える。 HTML Standard https://html.spec.whatwg.org/multipage/dom.html#dom-document-cookie 基本的な使い方は以下だ。 document.cookie = "a=b" console.log(document.cookie) // a=b まず、この API の問題を振り返る。 同期 API 最も深刻なのは、 I/O を伴いながら、同期 API として定義されているところだ。 この API は古くから実装されているため、I/O は非同期
検索APIはFess 14.8から、OpenAPI仕様に準拠して提供されるようになりました。そのため、従来のJSON形式のAPIと比べて、いくつかの変更が加わっています。OpenAPI準拠の新しい検索APIに関する詳細は、検索APIガイドで確認することができます。 OpenAPIに対応することで、検索APIを利用するクライアント用コードを生成することができるため、Fessの検索と連携するシステムを開発しやすくなります。 今回は、検索APIに関するOpenAPIのYAMLファイルを使用して、JavaScriptのクライアント用コードを生成する方法について紹介します。生成されたクライアント用コードを利用して、検索クエリの送信や検索結果の取得方法を説明します。 クライアント用コードの作成 Fessから取得したJSON形式の検索結果をブラウザ上で表示する簡単な例を用いて説明していきます。JavaS
!!って何?と思ったので調べてみました。 二重否定とは 複数の否定演算子を連続して使用することで、明示的にあらゆる値を対応する論理型プリミティブに変換することができます。 参考 mdn web docs 論理型プリミティブ…??? 論理型プリミティブ まずプリミティブとは JavaScript において、プリミティブ (primitive、プリミティブ値、プリミティブデータ型) はオブジェクトでなく、メソッドを持たないデータのことです。 6 種類のプリミティブデータ型があります。 文字列 数値 長整数 論理値 undefined シンボル null 多くの場合、プリミティブ値は、その言語実装の最下層にて直接的に表現されます。 参考 mdn web docs 文字列だったり数値や論理値(真偽値)などオブジェクト以外をプリミティブ値と呼ぶという事がわかりました。 つまり、論理型プリミティブとい
はじめに ある程度開発をしていくと、関数型プログラミングや手続き型プログラミングとはいう言葉はちらほら耳にしますよね。 Reactは16.8.0のReacthooks導入により関数型プログラミングに大きくシフトしました。 関数型プログラミングについて知らなくてもコードは書けると思いますが、MetaがReactを関数型として設計している意図を汲み取れた方がより効率良く綺麗なコードが書けると思います。 自分自身のReactの学習のためにも今回はまとめさせて頂きます。 その前に手続き(命令)型プログラミングとは ブラウザなどへの命令を手順通り(手続き通り)記述していく手法になります! デメリットとしてコード量が大きくなって可読性が悪くなる場合があります。 例:配列にある数値を倍にする処理 let nums = [1,2,3]; let doubleNums = []; for(let i = 0
以下のコードで HTML 全体の CSS を取得して Shadow DOM に適用することができます。 最近まで replaceSync() と adoptedStyleSheets() の存在を知らなかったのですが、 この 2つを使うと毎回 style タグを書き出すより効率的に処理できるらしい。 これまで Shadow DOM の中に link タグを書くような方法を使っていたのですが、link タグだと最適化がしにくい問題があります。 CSS はインライン化したほうが高速なので、その時にも同じように使える方法が欲しかったのですが、この方法でいけるとわかりました。 document.styleSheets も知らなかった…。 function getGlobalCSS() { let cssText = ""; for (const stylesheet of document.sty
先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。 Introducing the popover API by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに HTMLのpopover属性とは ポップオーバーのデフォルト、オーバーライド 自動ポップオーバーと手動ポップオーバー popover属性とdialog要素の違い 近日公開予定の便利な2つの機
DataTablesとは DataTablesは、HTMLテーブルを対話的なデータグリッドに変換するためのJavaScriptライブラリ。 簡単に言い換えると、HTMLテーブルをソートや検索などがおこなえる高機能な表にできるということ。 拡張性 や 柔軟性 が高く、また大規模なデータを持つテーブルを操作するのにとても便利である。 導入 下記のリンクから自分の環境に合ったやり方でダウンロードしよう。また、基本的に jQuery は必須である。 最もシンプルな例 とりあえず簡単な実装例を挙げてみる。 ここでは理解できなくてもOK! See the Pen DataTables by Tomoki Ota (@odlqzyes-the-sans) on CodePen. 使い方 これからDataTablesの使い方を説明していく。 最初は以下のcssとjsファイルだけでOK! (CDN以外の書き
Vanilla JSとは素のJavaScript、すなわち純粋なJavaScriptのことを言います。 jQueryで記述していたコードをVanilla JSに書き換える時によく使うものをまとめてみました。 セレクタ IDセレクタ ID名で要素を指定する。 構文
はじめに インターンのコーディング面接をJavaScriptで受けることになったので、その対策としてAtCoder に登録したら次にやること ~これだけ解けば十分闘える!過去問精選 10 問~を解いてみました。あんまり解説を見ずに自力で解いたので、綺麗なアルゴリズムじゃないのでご了承ください!他に良い解法があったらぜひコメントお願いします! 【1問目】ABC086A - Product const main = input => { input = input.split(" "); a = parseInt(input[0], 10); b = parseInt(input[1], 10); if(a % 2 == 0 || b % 2 == 0){ console.log("Even"); } else{ console.log("Odd"); } } main(require('fs
概要 予め変数に格納した文字列をオブジェクトのキーとして設定する方法を簡単にまとめる。 方法 下記のように、キー部分を[]で囲むことで変数が展開されて、変数の中身をキー名として設定する事ができる。 let keyStr = 'keyName'; let infos = { [keyStr] : 'value', }; console.log(infos);
JavaScriptの鬼門"this"。 物分かりの良い人にとってはなんて事のない概念なのかもしれませんが、自分は理解に戸惑い、かなり時間を溶かしてしまいました。その一方で、調べていく過程で今までの疑問に答えられる、比較的包括的な理解を得られたと思います。仕様書の解説記事にまで行きあたったところで、これまでの知識の整理をと思い、忘備録がてらまとめる次第です。 1:はじめに 2:一般的な説明 3:関数の中におけるthisの振る舞い 3-1:グローバルスコープの関数の場合 3-2:オブジェクトのメソッドの場合 3-3:アロー関数の場合 3-4:イベントハンドラーの場合 3-5:コンストラクター関数の場合 3-6:クラス構文の場合 4:thisに暴れてほしくないとき 5:仕様書からthisを探る 6:おわりに 1:はじめに thisとは何でしょうか。 thisは「キーワード」であり、変数でありま
最初に 本記事で紹介することは、JSでforEachやmap等のコールバック関数で処理をするメソッドを使い始めたときに、誰もがやらかしてしまいそうになる内容をまとめてみました。 実はこのコードは、最初に「end」と表示される const squareNum = (num) => new Promise((resolve, reject) => resolve(num*2)); [2].forEach(async(num) => console.log(await squareNum(num)));// 最後に表示される console.log("end");// 最初に表示される 配列内の2倍値を表示するために、forEachとsquareNum関数を使う。 しかし、非同期処理として動かしたくないため、forEach内のコールバック関数にasync/awaitを使うが、同期処理化されず最初
JavaScriptで連想配列(関数を取り扱わないオブジェクト)の配列の編集方法をまとめてみました。連想配列の配列の形で受け取ったデータを、編集するための資料です。 やりたいこと 条件に合致するデータを複数(すべて)抽出する 条件を1行で記述できる場合 filter 条件を複数行で記述する場合 filter 配列の中の配列を条件にする場合 filter+some, filter+every 条件に合致するデータを1件抽出する 条件を1行で記述できる場合 find 条件を複数行で記述する場合 find 連想配列を編集して新しい配列や連想配列を作る 必要な項目を配列で出力 map 必要な項目を連想配列で出力 map 複数条件(条件が配列)に合致するデータを抽出する 複数条件のいずれかに合致するデータを抽出する filter + some 複数条件のいずれかに合致するデータを、条件毎の配列で抽出
私は、フロントエンドからRailsで作成したAPIにリクエストを投げて、返ってきたJSON形式のレスポンスを処理するということがよくあります。 その際、次のようにオブジェクト名.プロパティ名でレスポンスの中から欲しいデータを抽出していました。 // サンプルのレスポンスデータ let menu = { type: 'hamburger', name: 'てりやきバーガー', } // menuのtyepが取得したい場合 console.log(menu.type) // 'hamburger'が出力される ある時、プロパティ名に変数を使いたいことがあり「あれ、どうすればいいんだ?」と手が止まってしまったので、今回はその方法について記録しておきます。 最初に試したこと 以下の方法を試してみましたが、当然うまくいきません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く