タグ console.log
新着順 10 users 50 users 100 users 500 users 1000 users【徹底比較】Vue.js と React でレンダリングされる値、されない値
フロントエンドの開発・デバッグ中にコンポーネント内の変数や props の値を確認したい時、console.log() で出力するよりも画面上にレンダリングしてしまう方が分かりやすい場合もあります。 コンソール出力は値の変化をリアルタイムで確認するには不向きです。一方、画面上にレンダリングすると、値の変化を直感的に把... 続きを読む
今からでも遅くないconsoleを使いこなそう - Qiita
はじめに この記事では、consoleメソッドについて紹介を行っていきます。consoleメソッドには例えばconsole.log()などが挙げられます。web開発においてconsole.log()を使用する方は多いかもしれません。しかしconsoleにはconsole.log()以外にも様々なメソッドがあるので、状況に合わせて使い分けることで少しでも快適な... 続きを読む
console.log() の代わりにdevtoolsのLogpointsを使う - Qiita
Logpointsを使おう Webフロントエンドの開発をする際、デバッグ目的で「特定の処理が実行された」ということを確認するために console.log() を使うことは多いと思います。しかし、Google Chrome や Microsoft Edge で利用可能な Logpoints を利用することで、 console.log() を使わずともコンソールにメッセージを出力... 続きを読む
JavaScriptでconsole.logを使用してませんか?
はじめに Webフロントエンド開発の学習において、多くの人がまず最初にconsole.logの使い方を学びます。 console.logはデバッグの際に非常に便利なツールですが、JavaScriptにはこれ以外にも多彩なデバッグ機能が存在します。 通常のconsole.logだけでなく、さまざまなconsoleのメソッドを活用することで、デバッグ作業... 続きを読む
TypeScriptではNumber.isNaN()よりもisNaN()の方が安全かもしれない
これまで「グローバルのisNaN()ではなくNumber.isNaN()を使え!」を教義に生きてきたのですが、揺らいできました。 JavaScriptのisNaN()は引数を数値に変換した結果がNaNであるかを判定します。 一方のNumber.isNaN()はES6で提供された関数で、引数がNaN以外の時はtrueを返しません。 console.log(isNaN('hello')); // t... 続きを読む
console.log()だけのデバッグはやめよう
はじめに フロントエンドのWeb開発においてconsole.log()というのは非常によくお世話になります. しかしconsoleオブジェクトにはには他にもたくさんのインスタンスメソッドがあり,それらを使わずに開発を行うのは少しもったいないです. この記事では様々な機能を紹介していき明日から開発で使用していただければ嬉し... 続きを読む
Chrome の console.log でハマらないために
JavaScript を書いたことがある人ならば一度は使うであろう console.log ですが、この関数は思ったよりも厄介な性質を持っています。その性質を知らずに console.log を使うと、デバッグ時に大ハマリしてしまうことがあります。この記事では console.log の落とし穴についてお話します。 今回は Chrome に特化して解説し... 続きを読む
WebAssembly と JavaScript との間で自在にデータをやりとりする
はじめに 引き続き Rust + WebAssembly + SolidJS で遊んでいます。前回は、Rust 側で作成した文字列を JavaScript 側で console.log に出力することを考えましたが、今回は JavaScript 側から何らかのデータを Rust 側へ渡すことを考えたいと思います。今回も、wasm-bindgen[1] に頼らずにやっていきましょう。 メモリ... 続きを読む
React大好き侍が、「もうSolidJSでいいじゃん...//」ってなったワケ。 - Qiita
const Counter = () => { const [count, setCount] = createSignal(0) createEffect(() => { console.log(`Count: ${count()}`) }) //第2引数はありません。SolidJSが勝手に依存している状態を感知してくれます。 return ( <div> <div>{count()}</div> <button onClick={() => setCount(prev => prev + 1)}>Add</button... 続きを読む
console.log(); しか使えなかった自分へ。。。 - Qiita
この記事について Webエンジニアになって早1年半。railsのデバッグをする時にはエディターのデバッガーでスマートにできていたが、javascriptになるといつもconsole.log();ばかりを使って原始的なデバッグをしていた。。。 そんな脳筋な過去の自分に教えてやるための記事です。 console.log({変数名}); 「いきなりconso... 続きを読む
JavaScript で parseInt / parseFloat を使わない方が良い理由
先日、Twitter のタイムライン上で JavaScript における parseInt 関数の不可解な挙動に関するネタがバズっていました。 console.log(parseInt(0.000005)); // → 0 console.log(parseInt(0.0000005)); // → 5 !!!!! この記事では、JavaScript における文字列から数値への変換について簡単に説明します。 parseInt(0.0000... 続きを読む
Chrome Devtoolのmonitorを使うと関数の呼び出しを観察できて便利 - ぱすたけ日記
を読んで思い出したのでご紹介です。 元の記事と同様に以下の関数 sum について、 function sum(nums, acc = 0) { console.log({ nums, acc }); if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } この関数sumの引数 (nums と acc) の呼び出しごと... 続きを読む
module bundler を作った - mizdev
このフロントエンドの魔境に生まれたからには一度は俺が考えた最強の module bundler を作りたい。みんなそう思ってると思う。作った。 mizchi/bundler: hobby bundler tldr このコードが // foo.js export default 1; // index.js import foo from "./foo.js"; console.log(foo); export const index = 1; こうなる // ... 続きを読む
TypeScriptのMap<K, V>をJSON.stringify()に食わせると空のオブジェクトになって困るんですけどって時 - その手の平は尻もつかめるさ
(TypeScriptに限らずJavaScriptでもだいたいこのような感じだと思いますが) 例えば以下のようなコードを書くと,出力としては {"body":{}} が得られます. const body = new Map<string, string>().set("foo", "bar"); console.log(JSON.stringify({body})); 本当は {"body": {"foo": "bar"}} のような構造がほしいと... 続きを読む
Nuxt.js v2.7.0 の変更点と注目のポイントまとめ - Qiita
本日 Nuxt.js v2.7.0 がリリースされました。 普段は大きな変更点がある場合を除き日本語でまとめたりしないのですが、いくつか便利そうな変更点があったので簡単にまとめます。 tl;dr アップデート変わった主な変更は以下(# は該当の Pull Request) SSR 側での console.log が開発環境に限定してクライアントへと引き継... 続きを読む
今度こそ理解できる! JavaScriptの参照が完全に分かる記事 - Qiita
const arr1 = [1, 2, 3]; // (中略) const arr2 = arr1; arr2.push(4); // (中略) console.log(arr1); // [1, 2, 3, 4] ワイ「何や、配列を書き換えたら別の変数に入れた配列も一緒に変化したで! JavaScriptのバグやな!」 上司「バグってんのはお前の頭やろ! もう一回勉強し直さんかい!」 ※この記事は全編やめ太... 続きを読む
#0
Service Worker とは合法ローカルプロキシ // client navigator.serviceWorker.register("/sw.js"); // sw.js self.addEventListener('fetch', event => { console.log('[fetch on sw]', event.request.url) }) service-worker いつ使える?開発者向けツール: たぶん使って OK一般向けサービス: 2020~ (Windows7 サポー... 続きを読む
JSのデバッグにはconsole.log()ではなくNodeのデバッガーを使いなさい - WPJ
JSのデバッグにはconsole.log()ではなくNodeのデバッガーを使いなさい 2017/05/15 Camilo Reyes Articles in this issue reproduced from SitePoint Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Transla... 続きを読む
Webカムに映った顔の位置を認識するJSライブラリ headtrackr.js がすごい « console.log :) | Don't forget trace :)
Javascriptで実装された顔認識ライブラリ「headtrackr.js」がけっこうスゴイです。 Githubでソースが公開されています。 https://github.com/auduno/headtrackr/ 以下のデモでどういう機能か分かると思いますが、 Webカムに映った顔を認識し、その位置座標を取得できるものです。 実装されている処理は、ホワイトバランスを調整する処理や顔認識処理、... 続きを読む
[JavaScript] ループ途中で抜ける処理は for(in break) ではなく some を使おう♪ - Qiita
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; for (var i=0,len=arr.length; i<len; ++i) { var value = arr[i]; if (value > 5) { break; } console.log(value); } [runstant] Array.prototype.some 5 以上だったら true ... 続きを読む
テンプレートリテラルが実装された - JS.next
2014-11-22 テンプレートリテラルが実装された ★★★ ES6 新仕様実装 V8 概要 テンプレート文字列を記述できる構文が実装された。 テンプレートリテラル 基本の使い方 『 ` 』の記号で文字を囲むと、文字列リテラル同様に文字列として評価される。 var t = `テンプレート` var s = "テンプレート" console.log(t) // "テンプレート" console.l... 続きを読む
[JavaScript] isNaN() の謎な挙動とその対策 - Qiita
console.log(isNaN(NaN)); // true console.log(isNaN(5)); // false console.log(isNaN(true)); // false console.log(isNaN('NaN')); // true console.log(isNaN({a:100})); // true いやいや下の2つw そっちのほうが便利な場合もあるのは分... 続きを読む
HTML - 覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita
DevTools、使ってますか? もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line ... 続きを読む
Sumallyのconsole.logが可愛くあざとい件 - PolyPeaceLight
2013-12-05 Sumallyのconsole.logが可愛くあざとい件 neta 普段の癖でSumallyを開いた時にWeb Inspectorを立ち上げるとconsole.logにメッセージがあることに気がついた。 なんだこれww 「We need couple of talented geeks. Are you the one? Check this out」 「探しものはなんですか... 続きを読む
JavaScriptの+演算子の謎挙動に迫る » nmi.jp
JavaScriptで、手っ取り早く文字列を数字に変換するときに、+演算子(正確には単項+演算子)を使います。 var str = "3"; console.log(str + 1); // 31 because of ("3" + 1) var num = +str; console.log(num + 1); // 4 because of (3 + 1) JavaScriptの仕様として、単... 続きを読む