今からでも遅くないconsoleを使いこなそう - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
ブラウザ上でデバッグするときに使えるテクニック
ウェブ上でJavaScriptを実行してバグが発生した場合、ブラウザに内蔵されている開発者ツールを使ってデバッグすることがよくあります。そうしたブラウザでのデバッグにおいて役立つテクニックをNetflixでフロントエンドの開発に携わっているアラン・ノルバウアーさんがまとめています。 67 Weird Debugging Tricks Your Browser Doesn't Want You to Know | Alan Norbauer https://alan.norbauer.com/articles/browser-debugging-tricks ◆高度な条件付きブレークポイント 開発者ツールの「ソース」タブにはデバッガーが用意されており、JavaScriptの任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを
console.log() の代わりにdevtoolsのLogpointsを使う - Qiita
Logpointsを使おう Webフロントエンドの開発をする際、デバッグ目的で「特定の処理が実行された」ということを確認するために console.log() を使うことは多いと思います。しかし、Google Chrome や Microsoft Edge で利用可能な Logpoints を利用することで、 console.log() を使わずともコンソールにメッセージを出力することが可能です。 なぜLogpointsを使うの？ Logpoints を使うのには以下のメリットがあります。 デバッグや動作確認のためにコードを変更する必要が無い console.log() を誤ってcommitに含めてしまう心配が無い console.log() を入れた後に再ビルドやホットリロードを待つ必要が無い どうやってLogpointsを使うの？ logpoints は以下のように使用します。 Chr
jQueryへの別れ：現代的な開発のための必須JavaScriptメソッド - Qiita
はじめに 私は長い間レガシーコードと共に仕事をしてきましたが、jQueryの重要性は依然として頻繁に話題に上がるトピックの一つです。ライブラリ自体は便利なままですが、それは別の時代のニーズを完璧に満たしていました。 現在、私たちは既にES2023について話していますが、過去にjQueryがカバーしていたほとんどの機能は、すでに2015年にリリースされたES6に取り込まれています。 ES6の標準は既に広範にサポートされており、96％のレベルに達しています（出典：caniuse.com）。そのため、特に要素の選択、スタイリング、アニメーション、データの取得などの基本的なタスクについては、ライブラリの使用を見直す良いタイミングかもしれません。 以下のトピックは、いくつかの標準的なjQueryのパターンと、それに相当するバニラJavaScriptでの手法を示す参考資料として役立つと思います。 要素
【Javascript】計算量を減らして処理時間を短くする【2重ループとMap】
検証 前提条件 今回の検証内容です。 ユーザーと住所をDynamoDBの各テーブルから全件取得し、それを結びつける作業を想定しています。 言語は弊社メイン開発言語のTypescriptを使用します。 2重ループ まずはfor文を重ねるやり方です。 // ユーザーのデータをテーブルから取得したと仮定して作成 const users: {id, name}[] = []; for (let i = 0; i < 100000; i++) { users.push({id: i, name: `name_${i}`}); } // 住所のデータをテーブルから取得したと仮定して作成 const addresses: {id, state, userId}[] = []; for (let i = 0; i < 100000; i++) { addresses.push({id: i, state:
【JavaScript】Setオブジェクトとは何か？配列の中の重複した要素を削除する方法。使い方や配列にする・戻す方法を実例で解説(new Set, add, delete, clear, had)
Setオブジェクトとは何か？ Setオブジェクトは簡単に言うと、要素の重複を許可しない配列のことです。だだし、厳密には配列ではなくset型という全く別の型になります。 Setと配列（Array）の違い 配列には配列番号のように各要素に順番が割り振られています。 一方、Setオブジェクトの中の要素には順番がありません。 配列（Array）はひと升ひと升に順序を決めて要素を入れていくイメージに対し、Setは袋の中に重複のない値をごそっといれるようなイメージになります。 ＞参考：Setオブジェクト（MDN）
インフラエンジニア1年生がプログラミングを勉強するのに使った教材 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 私は普段インフラをメインで扱っているエンジニアです。 そんな開発がメインではない私が1年目でプログラミングを学ぶために使用した教材を紹介していきます。インフラエンジニアの方だけではなく未経験のエンジニアの方にも参考になれば良いなと思っております。 インフラの学習に使用した教材については下記記事にて紹介しておりますので、ご覧いただければ幸いです。 インフラエンジニアはプログラミングは必要？ まずはこの質問をChatGPTに聞いてみましょう。 はい、インフラエンジニアにとってプログラミングスキルは必要です。 近年、クラウドの普及や
JavaScriptの配列メソッド: オブジェクトの配列を扱うときに役立つ便利な配列メソッドを分かりやすく解説
JavaScriptでオブジェクトの配列を操作するためにもっとも有用な配列メソッドとコードを紹介します。 JavaScript Array Methods: A Comprehensive Guide by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに filter()メソッド: オブジェクトの配列からキーstatusがactiveと等しいオブジェクトの配列を取得する find()メソッド: 配列内から特定のidを持つオブジェクトを検索する findIndex()メソッド: 配列内の特定のキーを持つオブジェクトのインデックスを検索する reduce()メソッド: オブジェクトの配列内にある特定のキーの値を合計する map()メソッド: オブジェクトの配列内に含まれる特定のキーに対応する一意
【JavaScript】reduceメソッドとは何か？第1, 第2, 第3, 第4引数の意味や初期値の設定方法を実例で解説（初心者向け、わかりやすい）
reduceメソッドとは何か？ reduceメソッドとは、配列の要素を一つずつ取り出し、指定した処理を行っていき、最終的に一つの値を返す関数です。 例えば、配列の中に入っている数値を全て足し上げるといった四則演算をすることができます。 reduceとは「減らす」という意味の英語です。 配列に含まれている要素を一つ一つ処理して、最終的に一つの結果のみを返すのでreducdという名前がついています。
JavaScriptのES2023・ES2022の新機能まとめ - ICS MEDIA
JavaScriptの仕様であるECMAScriptはEcma Internationalによって定められています。ECMAScript 2015（ES6）の登場以降は、ECMAScript 2016、ECMAScript 2017･･･と、年次で仕様が更新されています。ECMAScript 2022（ES2022）は2022年6月22日のEcma InternationalのGA 123rd meetingにて、ECMAScript 2023（ES2023）は2023年6月27日のGA 125th meetingで承認されました。 ES2022とES2023はすでに多くのブラウザやNode.js環境で利用可能です。本記事では新仕様と使いどころを紹介します。 ES2023 - 配列の非破壊操作 ES2023では配列を非破壊で操作できるメソッドが追加されています。非破壊とは、元の配列を変更せ
JavaScriptのコードには、こんな書き方もある
この記事はコードの書き方について、書き方そのものを推奨するものではなく、このような書き方も出来るという紹介です。コメント欄まで一緒にみていただくと学びになります。 ※記事はいただいたコメントを反映しましたので、当時のコメントと記事の内容に差分があります 1.破壊的メソッドを避ける 破壊的メソッドとは、元の配列の要素を変えるメソッドです。以下の例ではconstで宣言した変数numbersが、pushメソッドにより更新されています。 対応前 const numbers = [1, 2, 3] numbers.push(4) console.log(numbers) // [1, 2, 3, 4] この場合、元の配列の要素を更新するのではなく、スプレッド構文を使って新しい変数に代入します。変数はなるべくイミュータブルにしておくと、意図しない不具合やプログラムの可読性や保守性が向上します。push
JavaScript: 文字数を正確にカウントするには？ - Qiita
この投稿ではJavaScriptで文字数をできるだけ正確にカウントする方法について取り上げます。 文字数とは？ 要件で「文字数を表示してほしい」「○文字以上はバリデーションエラーにしたい」と文字数を考慮しないとならないことがあります。 そもそも文字数とは何でしょうか。 たとえば、アルファベットの「A」は1文字と数えられそうです。 次の絵文字は、何文字になるでしょうか？ この絵文字はiOSであれば14.5の環境では、UI上では上のように1文字のように表示されます。しかし、それ以前のバージョンでは、同じ文字列データでも😵💫のように2文字で表示されます。なお、この絵文字は3つのコードポイントU+1F635 U+200D U+1F4ABからなります。この絵文字の「文字数」はいったい何文字として扱ったらよいのでしょうか。 以上のように、ひとことで文字数と言ってもデータと見た目と環境の3つのややこ
JSの非同期処理を理解するために必要だった知識と学習ロードマップ
はじめに JavaScript の非同期処理を学習してみて「ある程度自信を持って理解できたと言える」状態に到達したので、その感想とまとめの学習ロードマップとその中でどのような知識が必要になるかを紹介したいと思います。 あるいは、自分が実際に学習してきた道筋に基づいているのでショートカットとして参考にしてもらったり、使えるリソースなどの情報が共有できると思います。もしくは「JavaScript 初心者が非同期処理を理解できるようになるまでの道筋」というストーリーで１つのサンプルとして見ていただけるといいかもしれません。 ChangeLog 大きな変更のみをトラッキングしています。 2022-11-16 本の内容を反映させた追記・修正を追加 2022-05-21 構成を修正 「V8 エンジンから考える」の項目を追加 2022-04-30 「イベントループの共通性質」の項目を追加 「ロードマップ
JavaScript | 文字列から正規表現でHTMLタグを除去する方法
JavaScriptを使ってHTMLを含む文字列から正規表現でHTMLタグを除去する方法のサンプルコードです。 正規表現を使ったHTMLタグ除去にreplace()関数を利用します。 replace()関数は元の変数にある値を書き換えず、返り値として結果を返します。 text.replace(/(<([^>]+)>)/gi, ''); textに代入したHTMLを含む文字列からHTMLタグのみを除去します。 ※サンプルでは新しい変数を作成せずtextに上書きしています。 let text = `<p>こんにちわ</p>`; text = text.replace(/(<([^>]+)>)/gi, ''); console.log(text); //こんにちわ HTMLタグの入れ子構造、複数行でも機能している事を確認します。 let text = `<div> <p>こんにちわ</p> <p
まだ使ってる？今は非推奨となったJavaScriptの書き方
まだ使ってる？今は非推奨となったJavaScriptの書き方いつも何気なく使っていたコードをふと調べ直してみると、知らないうちに「Deprecated（非推奨）」と書かれている…なんてこともありますよね。今回はJavaScriptを書いていて出くわした非推奨となったものをいくつか紹介します。 document.write画面にテキストを表示する document.write 。JavaScript の勉強を始めて最初に書いたコードがこれだったという方もいるのではないでしょうか？これはブラウザーのレンダリングに悪影響が出たり、DOM への影響などを考慮して「強く非推奨」とされています。 これまでの記述例： document.write("やっほーい"); 解決策 1：textContent や innerHTML を使う代わりに文字列を書き換える textContent や、HTML も含め
Buy naolife.online – Premium Expired .online Domain on GoDaddy | ExpiredDomains.com
As the world’s largest domain registrar with over 20 million customers, GoDaddy manages more than 84 million domains, offering a robust platform with 24/7 customer support and a wide range of TLDs. Its user-friendly interface and comprehensive services, including hosting and website builders, make it ideal for businesses seeking an all-in-one solution. Price 100 USD Auction Type GoDaddy Buy Now Go
JavaScriptにおける配列のfilter()メソッド | DigitalOcean
var numbers = [1, 3, 6, 8, 11]; var lucky = numbers.filter(function(number) { return number > 7; }); // [ 8, 11 ] 上記の例では、numbers配列を取得し、7より大きい値のみを含むフィルターされた新しい配列を返します。 フィルター構文 var newArray = array.filter(function(item) { return condition; }); item 引数は、配列内の現在の要素を参照し、filter() はこの要素とconditionを比較してチェックします。これは、オブジェクトの場合にプロパティにアクセスするのに役立ちます。 現在のitem が条件を満たすと、新しい配列に送信されます。 オブジェクトの配列をフィルタリングする .filter() の一
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
console.log()だけのデバッグはやめよう
【JavaScript】定数で長い文字列(SQL文)を持たせる - Qiita
console.log(); しか使えなかった自分へ。。。 - Qiita
