Overridesで本番環境のJavaScriptをデバッグする（ひとり DevTools Advent Calendar 2020 – 24日目） | Ginpen.com
最終日、24 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 本番環境でしか出ない不具合がある、format とブレイクポイントでデバッグした、たぶんここをこうしたら直ると思う、でも確証を得られるまでデプロイはしたくない……そんなときに。 本番環境の JavaScript を置き換え書き換えてデバッグすることができます。一言で言うとローカルプロキシです。 なんでもできるようになるけど本当に本番サーバーに置いてあるファイルをいじるわけではないので安心です。まあサーバー側で検証とかが甘いと変なデータが API 経由で入っちゃうかもしれないのでそこら辺だけ気を付けて。 先にまとめ Source → Overrides でローカルプロキシ 任意のファイルとマップはできない、サーバーで公開される構成と対になる ln 使えば任意のファイルとマップ
console.log()が面倒ならDevToolsでログポイントを設置する（ひとり DevTools Advent Calendar 2020 – 04日目） | Ginpen.com
4 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 デバッグ時に console.log() は大変便利でよく使ってるんですが、DevTools を使うとコードを書き換えることなく同じことをやれます。 毎回スクリプトを書き直し→（ビルド待ち）→画面再読み込みする手間が省けて良いですね。 手順は簡単。 DevTools の Scripts パネルを開く 目的の JS ファイルを開く (CTRL+P) 出力したい位置の行番号を右クリックし “Add logpoint…” を選択 出力する内容を記述 スクリプトを実行（ボタンを押すとか） 編集したい場合も行番号を右クリックからやります。 DevTools のログポイントを編集する様子。行番号を右クリックして追加、編集。 設置すると、Chrome の場合は赤紫の矢印的なものが行番号の上に表示さ
`package-lock.json` のひみつ（NPMおれおれAdvent Calendar 2019 – 05日目） | Ginpen.com
NPMおれおれAdvent Calendar 2019 – 05日目 （追記：なんか間違ってる気がするので調査中。） 言うほど秘密ってもんでもないですが。 なにそれ package-lock.json は npm install なんかをすると生成されるファイルで、インストールされているパッケージのツリーを表します。このファイルと npm ci を利用して全く同じツリーを再構築することが可能になります。 困ったちゃん このファイル自体は便利なものだと思うんですが、困った点がひとつ。「ロック」とう名前に反して何もロックしない点です。 ロックファイルがある状態で npm install すると、そのロックされたバージョンのパッケージ群がインストールされる、というのを期待するんですが、実際はそんなことなく、新しいものがあればそちらをインストールし、逆にロックファイルを更新します。ロックとは。 昔
DevToolsでz-index一覧できるやつ作ったよ。 | Ginpen.com
Chrome用とFirefox用です。 GitHubでソースコード公開してます。 ginpei/devtools-z-index 見た目 Chrome版。 Firefox版はサブペインじゃなくてパネルとして追加するのでちょっとアレです。仕方なかった。 はじまり コードスニペット版。これはこれで手軽でよろしいね。 ページ中の要素を `z-index` の数字が大きい順に一覧表示するやつです。https://t.co/gNGkdP03ta pic.twitter.com/v0VRNKCKel — 高梨ギンペイ (@ginpei_jp) June 11, 2018 Chrome版について https://chrome.google.com/webstore/detail/bcnpmhefiohkpmjacfoanhbjhikegmoe/ Elementsパネル内に “z-index” ペインを追
inputイベントでフォーム入力値をリアルタイム取得できるよ。（あとjQuery例。） | Ginpen.com
input イベントを使います。 時間差なしで入力値が取れる。わあかんたん。 jQueryを使った例。 change イベントは入力を終えてフォーカスを外した際に発火するのに対して、 input イベントは入力の度に発火します。 対象要素 <input> <textarea> <select> … IE、Edgeでだめ contenteditable 属性付きの要素 … IEでだめ <select> は change イベントを使います。この場合は変更したらフォーカス残したままでも、すぐ発火する。（よね？ しない環境ある？） <select> のデモ contenteditable は、逆に change イベントが発火しない。 contenteditable のデモ チェックボックスとかはだめ MDNによると、歴史的経緯により <input type="checkbox"> とかは cl
新しいChromeでスクロールが取れない？ scrollingElement？ | Ginpen.com
知り合いに聞かれて気づいたんですが、Google Chromeのv61からスクロールの取得方法が変わったっぽい。とりあえずこんなコードで取れます。 なんだこれ Chrome 60までとか未対応のやつは document.documentElement.scrollTop が常に 0 を返すので、 || で繋げてやるとどっちに対応してる環境でも動きます。 事前にUAから分岐して要素を分けて、みたいなことしてると駄目なので、こっちがおすすめです。そんなに実行コストかからんでしょ。知らんけど。 Chromeは変わったけどSafariはまだ変わってないので、対応しときましょう。 あとEdgeも document.body の方みたい。IEは document.documentElement だったのに。はしごを外されちゃったね。 scrollingElement なるものが で、ちらちら見てたら
DOMを使って、jQueryなしでいろいろやってみよう。コピペでどうぞ。（DOMおれおれAdvent Calendar 2015 – 24日目） | Ginpen.com
DOMおれおれAdvent Calendar 2015 – 24日目 最終日です。 jQueryでやってる事をjQueryなしでやるとしたらどうするのってやつです。 $(selector) → document.querySelectorAll(selector) querySelector()を使うとjQueryみたいにセレクターで要素を取得できるよ。（DOMおれおれAdvent Calendar 2015 – 02日目） これが一番基本ですね。 // jQuery var $el = $('.foo'); console.log($el.length); console.log($el[0]); // DOM var els = document.querySelectorAll('.foo'); console.log(els.length); console.log(els[0])
CSSは分かるけどjQueryは苦手……という人が .attr()と .prop()に親しんでくれるといいなーと思って書きました。 | Ginpen.com
もちろん、そうでない方にも親しんで頂きたいと思います。 最近この記事が話題のようです。 CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました この記事中にjQuery 1.6/1.6.1での .attr()仕様変更がらみの話で、うちの「jQuery1.6のattr()で困ったら、1.6.1にすればいいみたい。」の記事へリンクされていました。 ただこの記事はちょっと中身が細かくて、ぱぱっと理解するのは難しいんじゃないかなあと思って、この記事を書いています。どこまでご理解頂けるかはわかりませんが、あっちの記事よりは読みやすいはず。 今さら感もないではないですが……。(´ω｀) jQuery 1.6/1.6.1で何があったの？ .attr()にまとめていた処理を .attr()と .prop()に分割した そしたら今まで動いていたも
ModelとViewに分ける設計の話。ちょい難しめ。（JavaScriptおれおれAdvent Calendar 2014 – 18日目） | Ginpen.com
JavaScriptおれおれAdvent Calendar 2014 – 18日目分 あとから更新。 JSオジサンでお話してきた内容です。というか、先月JSConf.Asiaでもお話してきた内容ですね。 みんなで幸せになろうよ。 スライド こちらご覧ください。 ModelとViewに分ける設計 – #JSオジサン つらいアプリ実装の例 カラーピッカーの実装を考えます。 よくあるカラーピッカーUI。 実装 要素はご覧のとおり、四つ。 プレビュー カラーマップ（クリックで色を選択できる） 数値入力欄 スライダー それぞれ現在選択中の色の値を表現します。またプレビュー以外は色を変更する事ができます。 カラーマップは以下の実装が必要ですね。 カラーマップをクリックしたら、 プレビューを更新 カラーマップ自身を更新 数値入力欄を更新 スライダーを更新 カラーマップクリック時の処理。 他も同様です。
スクロールで何かするための処理まとめ。（JavaScriptおれおれAdvent Calendar 2014 – 21日目） | Ginpen.com
JavaScriptおれおれAdvent Calendar 2014 – 21日目 よくある処理についてまとめました。 スクロールの監視 windowを対象にscrollイベントを監視するだけです。documentでも動くけど、古いIEは駄目。いちいち変える理由もないので、windowだけ使えばよろし。 $(window ).on('scroll', function(event){ console.log('window'); }); $(document).on('scroll', function(event){ console.log('document'); }); // IE 8では呼ばれない スクロール位置の取得 document.documentElement.scrollTopに現在のスクロール位置が格納されています。ちなみにdocument.documentElemen
EditorConfigで文字コード設定を共有して喧嘩しなくなる話。（Frontrend Advent Calendar 2014 – 14日目） | Ginpen.com
Frontrend Advent Calendar 2014の14日目の記事です。 Frontrend Advent Calendar 2014 – Qiita ご存知ですか、EditorConfig。 便利すぎてほんのり涙出てくるくらいなんですが、いまいち周囲で聞かないので流行っていないのではないかと思います。是非とも流行らせてください。平和のために！！ フロントエンドにあんま関係ない代物だけど、改行コード絡みで恨みつらみを聞く機会が多い気がするのでご容赦くださいまし。 なにそれ 様々なエディターで利用できる、共通の書式設定ファイルです。”.editorconfig”というファイルをプロジェクトのルートに配置しておくだけで、エンコード等の書式をそのディレクトリー配下のファイル編集時に固定できます。 もちろん設定自体は各エディターでやってもらえば良いんだけど、やっぱりほら、好みとかもあるわ
jQuery用の変数の命名の話。（JavaScriptおれおれAdvent Calendar 2014 – 02日目） | Ginpen.com
JavaScriptおれおれAdvent Calendar 2014 – 02日目 今日は変数の命名についてのお話その一です。jQueryオブジェクトを格納する変数には”$”を付けろっていうやつ。 先にまとめ 誤解されない、明確な名前を付けよう 必要なら接頭辞も付けよう nameなら文字列、$nameならjQueryで取得した要素、elNameなら生要素 変数の命名からの理解 普通の名前 パッと見でどんな値が格納され（てい）るか想像付くでしょうか。付きますよね。 このnameは名前だからたぶんstring型で、ageはきっと年齢がnumber型で格納されるのだろうなと察しが付く。よね。 意外とそうじゃないかもしれないけど、コード中の意外性は可読性を下げる（正確な理解を妨げる）事になるので、そういう場合は実装なり設計なりを見直した方が良い。 で、その「意外とそうじゃない」奴の例として、要素が
JSファイル全体を括るfunctionについての話。（JavaScriptおれおれAdvent Calendar 2014 – 01日目） | Ginpen.com
これですね。これ何か呼び方あるの？ なにこれ グローバル変数にならないようにする仕組み。 スコープ問題 JavaScriptではスコープ（変数の有効範囲）は関数単位（function(){～}）になるのが基本。 そして一番外側、どの関数の中でもないものは「グローバルスコープ」に所属する「グローバル変数」となり、どこからでも利用できる変数になる。そうなるとどこかで変数の名前がかぶった際、勝手に値が変わったりして大変恐ろしい事になってしまう。 そこで、ファイル全体を関数で括る事でスコープを生成して、グローバルではない変数にしておこう、というもの。ただしvar宣言なしに変数を使い始めると、結局グローバル変数になってしまうので注意。 次世代JavaScriptだとletとかあるけど触れません、関係ないし。 関数の前後にくっついてる括弧は 関数は作成するだけでは何もならないので、即時実行してやります
スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！（Frontrend Advent Calendar 2013 – 06日目） | Ginpen.com
（追記: 2018年10月）何年か経ってから見ても内容大丈夫そうでした。 この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。（これ今後数年で大流行りしそうに思うので、未読なら是非！） さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが（周回遅れ）、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。 どうやったらスムーズに動くかってのを解説したいと思います。 なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。 先に結論 概念的なの GPU合成レイヤーを適切に使うと早い いわゆるハードウェアアクセラレーション 何がCPUで、何
jQueryでチェックボックスの状態をうまく取れない、設定出来ないときは、attr()ではなくprop()を使ってね。（JavaScriptおれおれAdvent Calendar 2013 – 02日目） | Ginpen.com
JavaScriptおれおれAdvent Calendar 2013 – 02日目 チェック状態は$checkbox.attr('checked')ではなく$checkbox.prop('checked')で得る必要があります。 検証 初期状態で確認すると c1: attr=undefined prop=false c2: attr=checked prop=true チェックを入れ替えて確認すると c1: attr=undefined prop=true c2: attr=checked prop=false というわけで .attr() … 変わらない .prop() … 変わる（こっちを使う） 仕組み .attr()はattribute、つまり（HTMLの）属性を得るメソッドです。HTMLにのタグにchecked属性を記載したらその値checkedが得られます。していなければ、存在し
CSSアニメーションを勉強しないとなーと思いつつまだやってない人のために、五分くらいでぱっと分かるCSS Animationを説明するよ。 | Ginpen.com
いえーいCSSでぐりぐり動かしてますか！ やろうやろうと思いつつなかなか手が出ないなんて事もありますが、CSS Animationについてそんな人のための簡単な導入です。 CSSでのアニメーションは二種類 実はCSSのアニメーション、と言っても二種類あります。 transition … マウスホバーとかの操作時に動くやつ animation … ずっと動き続けるやつ プロパティは割と似てる 今のところ、どちらもベンダープレフィクスが必要 頻繁に使われるのは前者でしょうか。 transitionでさくっとアニメーション リンクにカーソルを載せると文字色が変わる、という例。 transitionプロパティで設定します。 値は「変化させたいプロパティの名前」と「変化にかける時間」です。 時間の単位はsで、secondsつまり秒です。 （ちなみにCSSは0.1を.1と記述する事が出来ます。） 複数
parseInt()の甘い罠（JavaScript おれおれ Advent Calendar 2011 – 4日目） | Ginpen.com
JavaScript おれおれ Advent Calendar 2011 – 4日目 <input />の入力値は文字列なので、数値として扱うには変換してやる必要がありますね。そんなときには組み込み関数であるparseInt()が便利です。 var numText = document.getElementById('num').value; var num = parseInt(numText); console.log(num);
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
