[B! javascript] Kuichiのブックマーク

Kuichi id:Kuichi

javascriptに関するKuichiのブックマーク (12)

本当に倒すべきだったのは jQuery ではなくテンプレートエンジンだった - fsubal
そうはっきり言ったほうが良かった。いや言わなくても伝わる現場は良かったんだけど、伝わらないままごく一部だけをコンポーネントに移行、それ以外はただ生 DOM API に変えて終わり（あるいは他は jQuery のまま）みたいな「モダン化」で済ます余地を与えたのは発信の失敗だった……という10年代の振り返り。テンプレートエンジンはなぜ倒された方が（…といって悪ければ、変わったほうが）良いのかは端的に指摘できて、それは初回レンダリングしか考慮してないからだということになる。 Web の UI には状態変化がつきもの（になったのは実は最近の話）だが、テンプレートエンジンは1回目のレンダリングだけを担当し、変化した後の2回目以降の見え方は JavaScript が担当するというパラダイムを構成する。
Kuichi 2020/06/08
jQuery

javascript

react

フロントエンド
リンク
[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - Qiita
初心者が見た瞬間になるもの特集です。小テクだったり、省略記法だったり、、実際私も出会ってになりました！追記即時関数のところで説明にある他には、+や-等でも動きます。の"等"が気になった方に朗報です。こちらの記事で"等"を知ることができます！！ [JavaScript] "!function() {}()"以外の即時関数を紹介するぜよろしければ覗いてみてください！ !! is 何 booleanへの型変換。例 const obj = { hoge: "hoge" } function hasHoge() { return !!obj.hoge // => true } 論理否定（！）を二つ繋げて、boolean への型変換をしています。 !の結果を!で評価しているんですね〜。 JSON.parse(JSON.stringify(obj)) is 何ディープコピー。例
Kuichi 2020/04/15
javascript

Qiita

プログラミング

programming
リンク
JavaScriptでの賢いconsole.log( )の使い方 & その他便利なconsole.xxx( )使い方まとめ (dir・table・warn・groupとか) - Qiita
JavaScriptでの賢いconsole.log( )の使い方 & その他便利なconsole.xxx( )使い方まとめ (dir・table・warn・groupとか)JavaScriptdebug初心者初心者向けデバッグ方法更新 2019/5/20 console.trace()、console.time()、 console.timeEnd()、console.clear()を追記しました。この記事について JavaScript大好きっ子とよももです！ JavaScriptの上手なconsole.log()の使用方法を調べていたらいろんな使い方があること、console.log()の他にも色々なデバッグ方法があることを知りました。自分の勉強も兼ねてまとめてみることにしました。賢いconsole.log()の使い方例えば... 下記のような３つのオブジェクトがあるとします。
Kuichi 2019/05/19
javascript

log

tips
リンク
Webフロントエンドパフォーマンス改善ハンドブックを公開しました - dwango on GitHub
パフォーマンス改善ハンドブックウェブページにおけるパフォーマンスに関する問題の見つけ方や考え方の事例をまとめた Webフロントエンドパフォーマンス改善ハンドブックを公開しました。 URL: https://dwango-js.github.io/performance-handbook/ このハンドブックでは過去に行ったWebフロントエンドのパフォーマンス改善の事例を中心に紹介しています。注意点としてWebフロントエンドは常に変化しているため、現在の最適な解決方法を提案するものではありません。また、アプリケーションによっても最適な解決方法は異なります。今回の事例ではViewライブラリにReactを用い、映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのWebフロントエンドを扱います。具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれていま
Kuichi 2018/09/15
web

performance

パフォーマンス

javascript

react

フロントエンド

dwango

技術
リンク
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
Kuichi 2017/12/26
javascript

プログラミング
リンク
canvas要素の基本的な使い方まとめ
canvas要素の概観 canvas要素とは canvas要素はWEBブラウザ上(クライアントサイド)で動的にグラフィックを描くための仕組みです. もともとApple社が自社製品の機能向上を目的に, WEBブラウザSafariの独自拡張として策定したものでした. が, その利便性が認識されるとMozilla(FireFox)やOpera等のブラウザベンダーも追随するようになり, HTMLにおける事実上の標準仕様として認識されるようになりました. この流れから, HTML5ではWHATWG/W3Cによって正式に仕様として取り入れられ, 現在Internet Explorerを含むほとんどのブラウザ上でcanvas要素が利用可能です. canvas要素の役割 canvas要素はグラフィックの入出力及び分析を可能とするノードです. canvas要素に描かれたグラフィックはimg要素で表示している
Kuichi 2017/03/15
javascript

canvas
リンク
【Javascript】bxSliderのよく使っているカスタマイズ5選 | Wood-Roots:blog
お仕事ではbxSliderをよく使うのですが、毎回似たようなカスタマイズを行うことが多いため、コピペで済ませられるようによく使っているカスタマイズをまとめてみました。本家はこちら（最近Internal Server Error連発して超重い…）
Kuichi 2017/02/21
jQuery

javascript

スライダー
リンク
2016年、サーバーサイドエンジニアがゼロからReact/Reduxを学習したときの方法を振り返る
こんにちは。スタジオ・アルカナのサーバーサイドエンジニアなっちゃん(@natsumican63)です。この記事はReact Advent Calendar 2016の13日目の記事です。それは2016年も後半へ差し掛かったある日のことでした… 上司「次の案件、この辺の技術使うから軽く勉強しておいてー」つ React.js + Redux.js + redux-saga + Cordova + ES6 + Babel + OnsenUI + Gulp + Webpack (　ﾟдﾟ) (つд⊂)ｺﾞｼｺﾞｼ (；ﾟ Дﾟ) !?!? (; ﾟдﾟ)「…わ、わかりました」 ※「何でもやります！やらせてください！」が私の口癖なので、決して無茶振りしてくる弊社ではありませんよ！ほんとだよ！！斯くして2016年、サーバーサイドエンジニアがはじめてフロントエンドへの門戸を開くこととなった際の学
Kuichi 2016/12/14
javascript

記事

react

Redux

react.js

js

ecmascript

babel

ECMA
リンク
JavaScriptの「&&」「||」について盛大に勘違いをしていた件 - Qiita
論理演算子「&&」「||」について JavaScriptの基本である論理演算子の && || について、根本的に勘違いをしていたことに最近気付いたので自戒の意味を込めてここに記します。論理演算子の使い道 1. お馴染みの使い道「条件処理」 JavaScriptには皆さんご存知の通り論理演算子&& ||が存在します。それぞれ「AND」「OR」という意味で、条件処理の中で使うことが多い演算子です。 // aとbに0または1を足し続ける // aとbのどちらかが最大値に達すると終了 var a = 0, b = 0, max = 50; // 条件式その１ AND while (a < max && b < max) { // 0または1を足す a += Math.round(Math.random()); b += Math.round(Math.random()); console.l
Kuichi 2015/09/12
javascript
リンク
JavaScriptのデバッグのコツと技 | POSTD
以前の記事で、 Webアプリケーションのデバッグの仕組みについて触れました。今回は実践的なJavaScriptのデバッグについて掘り下げていきたいと思います。ブラウザデベロッパツール私の個人的なお気に入りはChromeデベロッパツールです。SafariやFirefoxはChromeほどの高水準に達していません。しかし、徐々に改善されてきています。FirefoxにはFirebugと改良されたFirefoxデベロッパツールが組み合わされた機能が備わっています。もし、Firefoxチームがビルトインされているデベロッパツールの改良の中で素晴らしい仕事をし続けたとしたら、Firebugはいつか、すたれるかもしれません。個人的な好みにかかわらず、ターゲットとするあらゆるブラウザで、全てのコードのテストやデバッグができるようにすべきです。”あらゆるブラウザ”には、かの有名なInternet E
Kuichi 2015/09/05
javascript

デバッグ
リンク
https://qiita.com/kenokabe/items/618692858044a89adbc0
Kuichi 2014/12/07
最初のコードの.reduceの意味がよくわからなくて『ある程度Javascriptをわかっている人向け』かと思ったんだけれど、後々解説してくれてるのでそうでもないらしい。

プログラミング

Javascript
リンク
こんな使ってたのか...。Amazonでどれだけ買い物したのか金額が分かるブックマークレット（楽天版を追加しました）
こんな使ってたのか...。Amazonでどれだけ買い物したのか金額が分かるブックマークレット（楽天版を追加しました）2013.06.12 16:106,923 あれ、10万も何使ってたんだろう...。MacBook Air買えちゃう...。久しぶりに面白いブックマークレットを作っておられる方がいました。いままでにいくらAmazonで買い物をしたかが分かるブックマークレットです。年単位でいくら使ったかがすぐ分かります。ないと困るAmazon。すぐ届けてくれるAmazon。Amazonがない生活なんて考えられないAmazon。早速使ってみたのでご紹介します。 1.アマゾンの注文履歴ページにいきます。 https://www.amazon.co.jp/gp/css/order-history 2.アドレスバーに以下のjavascriptをコピペして実行します。 javascript:(fun
Kuichi 2013/06/07
生活

amazon

javascript
リンク
1