今からでも遅くないconsoleを使いこなそう - Qiita
はじめに この記事では、consoleメソッドについて紹介を行っていきます。consoleメソッドには例えばconsole.log()などが挙げられます。web開発においてconsole.log()を使用する方は多いかもしれません。しかしconsoleにはconsole.log()以外にも様々なメソッドがあるので、状況に合わせて使い分けることで少しでも快適なデバック、開発ライフを目指しましょう。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 consoleについて consoleオブジェクトを用いることで変数の値などをコンソール上に出力することができます。主に出力の確認であったり不具合の原因特定などのデバックするために
ブラウザ上でデバッグするときに使えるテクニック
ウェブ上で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
はじめに 私は普段インフラをメインで扱っているエンジニアです。 そんな開発がメインではない私が1年目でプログラミングを学ぶために使用した教材を紹介していきます。インフラエンジニアの方だけではなく未経験のエンジニアの方にも参考になれば良いなと思っております。 インフラの学習に使用した教材については下記記事にて紹介しておりますので、ご覧いただければ幸いです。 インフラエンジニアはプログラミングは必要？ まずはこの質問をChatGPTに聞いてみましょう。 はい、インフラエンジニアにとってプログラミングスキルは必要です。 近年、クラウドの普及やインフラ自動化の進展により、インフラエンジニアに求められるスキルも変化しています。今では、サーバの自動化やコンテナのデプロイなど、プログラミングスキルが必要な業務も多くなっています。 具体的には、以下のようなことが挙げられます。 インフラ自動化の実現 インフ
console.log()だけのデバッグはやめよう
はじめに フロントエンドのWeb開発においてconsole.log()というのは非常によくお世話になります． しかしconsoleオブジェクトにはには他にもたくさんのインスタンスメソッドがあり，それらを使わずに開発を行うのは少しもったいないです． この記事では様々な機能を紹介していき明日から開発で使用していただければ嬉しいです． assert console.assert()は第一引数に論理式をとり，第二引数以降には任意のオブジェクトを取ります． 第一引数がfalseとなった場合，第二引数をコンソールに出力します． サンプル // assert const wishToSuccess = () => { return Math.random() < 0.5 } console.assert(wishToSuccess(), "失敗しました") 出力 log 一般的にログを出力するconso
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】定数で長い文字列(SQL文)を持たせる - Qiita
はじめに 筆者はJavaScriptの経験が浅いため、参考程度にご覧いただければと思います。 また、誤記や誤字、アドバイス等ありましたら、コメントお願いします！ 経緯 Node.jsを使用したAPI作成で「SQL文」を文字列として、const定数に持たせる際、 どのように書けば見やすいのか、候補をまとめてみました。 １行で書く 短いSQL文なら問題ないが、定数宣言合わせて２行になる場合は、 横スクロールしないと、全体が確認できないので、見づらい const sqlStr = "SELECT param1, param2, param3, param4, param5 FROM test_table WHERE param6 = 'test';";
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では配列を非破壊で操作できるメソッドが追加されています。非破壊とは、元の配列を変更せ
console.log(); しか使えなかった自分へ。。。 - Qiita
この記事について Webエンジニアになって早１年半。railsのデバッグをする時にはエディターのデバッガーでスマートにできていたが、javascriptになるといつもconsole.log();ばかりを使って原始的なデバッグをしていた。。。 そんな脳筋な過去の自分に教えてやるための記事です。 console.log({変数名}); 「いきなりconsole.log();の紹介かい！！！」って思われるかもしれませんが、この技を知ったときは「なんで知らんかったんや。。。」って思うくらい便利だったので最初に紹介します。 以下のようなHTMLがある場合 <form> <input type="text" value="名無しの権兵衛" id="name"> <input type="text" value="80歳" id="age"> <input type="text" value="バスケ"
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タグを除去する方法 | 1 NOTES
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の書き方
2021年11月18日 JavaScript いつも何気なく使っていたコードをふと調べ直してみると、知らないうちに「Deprecated（非推奨）」と書かれている…なんてこともありますよね。今回はJavaScriptを書いていて出くわした非推奨となったものをいくつか紹介します。 document.write 画面にテキストを表示する document.write 。JavaScriptの勉強を始めて最初に書いたコードがこれだったという方もいるのではないでしょうか？これはブラウザーのレンダリングに悪影響が出たり、DOMへの影響などを考慮して「強く非推奨」とされています。 これまでの記述例： document.write('やっほーい'); 解決策1：textContent や innerHTML を使う 代わりに文字列を書き換える textContent や、HTMLも含めた文字列を挿入でき
【swiper.js】停止ボタン付けたい【autoplayはtureで】 | naolife.online
スライダーを実装するときはswiper.jsを使っています。 公式：https://swiperjs.com/ 今回は、自動で再生させておくオプションの『autoplay』と共に『停止/再生ボタン』も付けたいというご要望があったので調べました。 swiper.jsのバージョンは 5.2.1 を使用しました。 ざっくり全体のコード [box02 title=”こちらの記事を参考にさせていただきました”] jQueryなしで動くレスポンシブ対応スライダー「swiper」に停止ボタンをつける [/box02] <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Sli
JavaScriptにおける配列のfilter()メソッド | DigitalOcean
はじめに 配列のfilter()メソッドは、既存の配列から指定された条件に該当する要素を持つ新しい配列を作成します。 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を比較してチェックします。これは、オブジェクトの場合にプロパティにアクセスするのに役立ちます。 現在のi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
