サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
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])
以下の二つの機能が必要です。 セレクターから要素を取得し、確保しておく 確保した要素全てに対して処理をする 他にも諸々の機能が必要かと思いますが、それらの基盤となるのが本機能ですね。 セレクターから検索して要素を確保 これで配列風に扱えるようになります。 // インターフェイス。これを使う。 function $(selector) { return new MyQuery(selector); } // コンストラクター。実態。 function MyQuery(selector) { var nodes = document.querySelectorAll(selector); // 配列風に各要素を保持 for (var i=0, l=nodes.length; i<l; i++) { this[i] = nodes[i]; } // 配列風に要素数を保持 this.length
ここで el に上記 <ul> が格納されているものとすると、 el.firstElementChild は最初の <li> になります。想定通りと思います。一方 el.firstChild はというと、 <ul> と最初の <li> の間の「改行とインデント」から成る文字列ノードが格納されています。そう、文字列もノードです。 デモ 他にもこんな感じで「ノード全種から取得」するものと「要素ノードの中から取得」するものとがあります。 parentNode vs parentElementNode children vs childNodes firstChild vs firstElementChild lastChild vs lastElementChild ? previousSibling vs previousElementSibling ? nextSibling vs next
console.log(document.forms[0]); // <form id="foo"></form> console.log(document.forms[1]); // <form id="bar"></form> console.log(document.forms['foo']); // <form id="foo"></form> console.log(document.forms['bar']); // <form id="bar"></form> forms については過去記事をどうぞ。 JavaScriptで要素を検索せずに取得する方法があります。(JavaScriptおれおれAdvent Calendar 2013 – 03日目) HTMLCollectionの出番 以下の場合がHTMLCollectionになります。 document.anchors do
var origin = document.querySelector('#origin'); var parent = document.querySelector('#parent'); var result = origin.compareDocumentPosition(parent); console.log(!!(result & origin.DOCUMENT_POSITION_PRECEDING)); // => true console.log(!!(result & origin.DOCUMENT_POSITION_FOLLOWING)); // => false console.log(!!(result & origin.DOCUMENT_POSITION_CONTAINS)); // => true console.log(!!(result & origin.D
DOMおれおれAdvent Calendar 2015 – 09日目 テキストノートはあくまでノードなので、文字列ではありません。 toString() も特に用意されてないみたいです。 文字列を取得するにはテキストノードの nodeValue を見ます。 var elTitle = document.querySelector('title'); var nText = elTitle.firstChild; var text = nText.nodeValue; console.log(text); // => "Ginpen.com" 任意の要素内の文字列を全部取得するなら 要素ノードの textContent を使います。ノードを再帰的に検索して、全ての文字列をかき集めてくれます。(正確には要素ノード以外でも使えるけど、まあ要素ノードで使うよね。) 取得だけじゃなくて設定もできるの
DOMおれおれAdvent Calendar 2015 – 07日目 jQueryだと属性の操作はほとんど attr() で済むんですが、DOMは色々setとgetと分かれてます。あと名前が長いです。 // el = <a href="#top">TOP</a> console.log(el.getAttribute('href')); // => "#top" el.setAttribute('href', '#top-of-the-world'); console.log(el.getAttribute('href')); // => "#top-of-the-world"
DOMおれおれAdvent Calendar 2015 – 08日目 HTMLの要素をたくさん作ってウェブページを作るわけだけども、要素以外にも「ノード」はあります。 ノード? HTMLはタグを入れ子に書いて組み立てるというのはご存知の通り。そしてそのタグで記述された要素の階層構造が「ツリー」になります。 ツリーの一番上の要素が <html> 要素で、タグとしてはその 中 に <head> と <body> とがあって、これを階層構造で見た場合は 下 になる、と。さらに <head> の 下 に <title> があって <body> の下には <h1> とかそういうのがあって、またその下には……みたいな。 html +- head | +- meta | +- title | +- body +- main | +- h1 | +- div | +- footer +- address
DOMおれおれAdvent Calendar 2015 – 02日目 ちょっとだけ要素を操作したくてそれだけのためにjQuery読み込むのもちょっとアレよね、みたいなときに便利なやつです。 こんな具合です。
DOMおれおれAdvent Calendar 2015 – 01日目 HTML文字列からががーっと生成する場合は el.innerHTML=htmlText と書くのが普通だと思うんですが、 insertAdjacentHTML() というAPIもあります。 var el = document.querySelector('div#out'); var html = '<b>BOLD</b>'; var position = 'afterbegin'; el.insertAdjacentHTML(position, html); // -> <div><b>BOLD</b></div> "position" はHTML文字列を挿入する位置を指定します。以下のいずれかです。 "beforebegin" "afterbegin" "beforeend" "afterend" それぞれ開始タグの
小ネタですが数か月ぶりに記事を書いてみます。 var day = '日月火水木金土'[new Date().getDay()]; console.log('今日は' + day + '曜日'); — 高梨ギンペイ (@ginpei_jp) July 31, 2015 解説 曜日情報の取得 現在日時の情報を new Date() で取得します。 var now = new Date(); と書いた方がわかりやすいかもしれない。 で、その現在日時情報が格納されたDateオブジェクト now のメソッド .getDay() で曜日の取得です。ただし戻り値は数値で、 0 なら日曜日、以下月火水……と続きます。 .getDay() 曜日
著者の一人、平木聡さんから頂いてましたので、紹介させて頂きます。 Amazon.co.jp: Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール: 塩谷 啓, 紫竹 佑騎, 原 一成, 平木 聡: 本 GitHubは年中無休なので、お正月に本書を読みながら諸々を試しておくと、新年の業務がスムーズになるんじゃないすかねー。 「GitHubの教科書」 in タネマキ pic.twitter.com/JmJOItxrlx — 高梨ギンペイ (@ginpei_jp) 2014, 11月 13 概要 GitだけでなくGitHubだけの機能も紹介 GUIアプリ(SourceTree Win/Mac)とコマンドラインとの両方で作業を解説 画像多数、ちなみに総天然色 言い回しや書体、図解が読みやすい Gitがよくわからないけど使う事になった非技術者に最適 仕事でGitというと
JavaScriptおれおれAdvent Calendar 2014 – 24日目 個人的に、こんな感じで認識してますって話。書くにあたりあんまり精査してないので勘違いありそう。やさしく教えてください。 もちろん個々人では先取りしてあれやこれややってる人もいて、そういう人たちは特に今でも第一線で頑張っているように思う。 原初 設計なし DHTML (Dynamic HTML) NoScript 設計なしに書いていた時代。 もちろん個別のアルゴリズムとかはあったんだけど、アプリケーションというよりはウィジェットとかそういう規模のもの。 あれよあれ、マウスカーソル追っかけるやつとかそういうの。もちろんまともに考えられたものもあったけど、少数派。JavaScriptといえば「よくわからない派手で邪魔なもの(を作るやつ)」という認識。ブラウザーの設定やプラグインでスクリプトの実行を停止している閲覧
JavaScriptおれおれAdvent Calendar 2014 – 18日目分 あとから更新。 JSオジサンでお話してきた内容です。というか、先月JSConf.Asiaでもお話してきた内容ですね。 みんなで幸せになろうよ。 スライド こちらご覧ください。 ModelとViewに分ける設計 – #JSオジサン つらいアプリ実装の例 カラーピッカーの実装を考えます。 よくあるカラーピッカーUI。 実装 要素はご覧のとおり、四つ。 プレビュー カラーマップ(クリックで色を選択できる) 数値入力欄 スライダー それぞれ現在選択中の色の値を表現します。またプレビュー以外は色を変更する事ができます。 カラーマップは以下の実装が必要ですね。 カラーマップをクリックしたら、 プレビューを更新 カラーマップ自身を更新 数値入力欄を更新 スライダーを更新 カラーマップクリック時の処理。 他も同様です。
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
お呼ばれしまして、ちょっとお話ししてきました。初参加。 内容の過不足あればPRください。 ginpei/20141218-js-ojisan JSオジサン #4 【満員御礼!】JSオジサン #4 : ATND 俺の 俺の 俺 の 話 を 聞 け https://t.co/4YtCuVt8nj — JSオジサン (@JS_ojisan) 2014, 11月 18 agoさんによるウェルカムLT 到着したらもう喋ってる人がいて「すわ一時間間違えたか」と焦ったけどagoさんだったので安心して着席しました。 はじまってないのにもう話してる… #JSオジサン pic.twitter.com/FkWLbaarPD — JSオジサン (@JS_ojisan) 2014, 12月 18 #jsオジサン 今回もWelcomeLTありかな。できれば「サービス多言語化戦線異常なし」みたいなのと、「テストの価値は
JavaScriptおれおれAdvent Calendar 2014 – 17日目 特にライブラリー的なものを作るとき、最初にドキュメントを書くようにしてます。 例えばこれ、まだドキュメントしかないです。 ginpei/scroller.js 最初にドキュメントを書く効能 もちろん後で書く手間が省けるってのもあるけど、それより、最初にAPIのリファレンスを作る事で、成果物の最終形が明確になります。最終形が分かっていれば、ごりごり書いてそれに近づけるだけっすね。 APIが決まっていれば試験を書ける、試験が書ければリファクターができる、リファクターができれば雑なコードでも実装を進められる。とまあそんな感じ。 もしここで明確な最終形を記述できなかったとしたら、それは現時点ではまだ何を作れば良いかわかっていないという事になるでしょう。それだとコードも書けない。 モジュールでも同じように 製品内の部
JavaScriptおれおれAdvent Calendar 2014 – 16日目 間が空いてしまったけど、ぼちぼち落ち着いてきたので再開します。 割と全体的な命名のお話。なおプロパティの命名も同様。 ※例がうまく思い付かなかったので、ちょっとアレかも。思い付いたら後で変更するかもです。 基本は名詞 userとかnameとかageとか、そういう値やオブジェクトを格納するものは名詞にします。 中身がオブジェクトなのか、文字列なのか数値なのか、は空気読む感じ。 動詞と同形なら、名詞を優先 ややこしいのが、名詞であり動詞でもある場合。その場合は名詞を優先します。で、関数の方は別の動詞+その名詞で名付ける。 例えばーそうだな、”sample”とか。オブジェクトなり純粋な値なりはsample、それを抽出する関数はmakeSample()とか。 動詞は関数 実行可能なものは動きそうな名前にしておきます
Frontrend Advent Calendar 2014の14日目の記事です。 Frontrend Advent Calendar 2014 – Qiita ご存知ですか、EditorConfig。 便利すぎてほんのり涙出てくるくらいなんですが、いまいち周囲で聞かないので流行っていないのではないかと思います。是非とも流行らせてください。平和のために!! フロントエンドにあんま関係ない代物だけど、改行コード絡みで恨みつらみを聞く機会が多い気がするのでご容赦くださいまし。 なにそれ 様々なエディターで利用できる、共通の書式設定ファイルです。”.editorconfig”というファイルをプロジェクトのルートに配置しておくだけで、エンコード等の書式をそのディレクトリー配下のファイル編集時に固定できます。 もちろん設定自体は各エディターでやってもらえば良いんだけど、やっぱりほら、好みとかもあるわ
JavaScriptおれおれAdvent Calendar 2014 – 06日目 メソッドに限らず関数オブジェクトをプロパティに設定する場合のプロパティ名についてです。こんな感じで命名してます。 メソッド 関数オブジェクトを格納したプロパティって言うと、まあ普通はこれですね。 関数やメソッドは実行可能するものであるから、動詞にするのが自然だと思います。実際そうしてる人が多いと思う。 開始と終了、切り替え openDialog()があればcloseDialog()も実装するし、必要ならtoggleDialog()も用意します。 ここで言いたいのは例えば”xxxDialog”という命名での統一が大切だという事です。関連するものなので、パッと見で「あ、これシリーズなんだな」てな事がわかるような命名だと良いかと思います。 値取得
JavaScriptおれおれAdvent Calendar 2014 – 03日目 立て込んでて日付またいじゃいました。 そんなに大きくない規模のJSを書く際、こういうパターンで作る場合が多い。 (function() { var controller = { start: function() { // … }, // … }; $(function() { controller.start(); }); })(); 全体を即時実行関数で括る スコープ生成してグローバル変数にならないように。 一昨日の記事参照。 JSファイル全体を括るfunctionについての話。 controllerオブジェクト オブジェクトリテラルで。 前項の通りスコープ生成されているから、その中で普通に関数作ったり共通の変数を使ったりしても別に構わないんだけど。でも普段はBackbone.JS的な書き方をしている事
JavaScriptおれおれAdvent Calendar 2014 – 02日目 今日は変数の命名についてのお話その一です。jQueryオブジェクトを格納する変数には”$”を付けろっていうやつ。 先にまとめ 誤解されない、明確な名前を付けよう 必要なら接頭辞も付けよう nameなら文字列、$nameならjQueryで取得した要素、elNameなら生要素 変数の命名からの理解 普通の名前 パッと見でどんな値が格納され(てい)るか想像付くでしょうか。付きますよね。 このnameは名前だからたぶんstring型で、ageはきっと年齢がnumber型で格納されるのだろうなと察しが付く。よね。 意外とそうじゃないかもしれないけど、コード中の意外性は可読性を下げる(正確な理解を妨げる)事になるので、そういう場合は実装なり設計なりを見直した方が良い。 で、その「意外とそうじゃない」奴の例として、要素が
JSファイル全体を括るfunctionについての話。 寿司Advent Calendar – 1日目 jQuery用の変数の命名の話。 寿司Advent Calendar – 2日目 CSS 珍百景 Advent Calendar 2014 – 02日目 小規模JS実装の自分的基盤パターンの話。 HTML5 Canvasで、RGB値を入れ替えるサンプルの話。 CDNの話。 関数プロパティの命名の話。 “isFinished”みたいな命名は関数に限定したい話。 シェアボタン等各種のまとめ。 (おやすみ) (おやすみ) タネマキで寿司会、あとホウボウ。(寿司Advent Calendar – 10日目) (おやすみ) (おやすみ) (おやすみ) (おやすみ) EditorConfigで文字コード設定を共有して喧嘩しなくなる話。(Frontrend Advent Calendar 2014 –
これですね。これ何か呼び方あるの? なにこれ グローバル変数にならないようにする仕組み。 スコープ問題 JavaScriptではスコープ(変数の有効範囲)は関数単位(function(){~})になるのが基本。 そして一番外側、どの関数の中でもないものは「グローバルスコープ」に所属する「グローバル変数」となり、どこからでも利用できる変数になる。そうなるとどこかで変数の名前がかぶった際、勝手に値が変わったりして大変恐ろしい事になってしまう。 そこで、ファイル全体を関数で括る事でスコープを生成して、グローバルではない変数にしておこう、というもの。ただしvar宣言なしに変数を使い始めると、結局グローバル変数になってしまうので注意。 次世代JavaScriptだとletとかあるけど触れません、関係ないし。 関数の前後にくっついてる括弧は 関数は作成するだけでは何もならないので、即時実行してやります
MSDNに載ってた。 getAttribute method (Internet Explorer) lFlags [in, optional] Type: Integer Integer that specifies one or more of the following flags: 0 Default. Performs a property search that is not case-sensitive, and returns an interpolated value if the property is found. 1 Performs a case-sensitive property search. To find a match, the uppercase and lowercase letters in strAttributeName must exact
code fenceのところで”diff”を指定して、-と+を行頭に書くだけ。 ```diff continued line -removed line +added line ``` デモ 変更がない行の冒頭のスペースひとつは、自分で付けないといけないみたい。 使えるのはGitHubが採用しているRedcarpetというMarkdownパーサー、だそうだ。これかな? vmg/redcarpet このブログで使っているものや、MD-Notesで採用しているものだと使えない。拡張しちゃうか、パーサーを変えるか。うーむ。 常駐先の方に教えて頂きました。感謝。
Google ChromeやNode.jsで利用可能なAPIです。Firefox等には搭載されていません。(まーあんまり使う場面なさそうですけど。) http://code.google.com/p/v8/wiki/JavaScriptStackTraceApi 以下、翻訳です。 All internal errors thrown in V8 capture a stack trace when they are created that can be accessed from JavaScript through the error.stack property. V8 also has various hooks for controlling how stack traces are collected and formatted, and for allowing custom
その他 括弧全般を指す場合はBracketと呼ぶみたい 上記以外にも呼び方の種類は多い、特に英語 鍵括弧 「 」 はCJK(中日韓)で利用される かつて日本の数学では ( ), { }, [ ] の順に小、中、大括弧と呼ばれていたが、今はそうでもないらしい 世界的には ( ), [ ], { } の順に小、中、大が用いらる場合が多いらしい というか初期以外は丸括弧 ( ) の入れ子で全部表現するようになるよね 一般に使われる山括弧 < > は、実は括弧ではなく数学の大小記号 本来の山括弧 〈 〉 は角度が浅い形をしたもの(フォント)が多そう。たぶん 英語WikipediaでもHTMLタグの山括弧をAngle bracketsと記述しているので、別に混同しても問題なさげ 例: ” tags enclosed in angle brackets (like <html>)” 出典 Bracke
(追記: 2018年10月)何年か経ってから見ても内容大丈夫そうでした。 この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。(これ今後数年で大流行りしそうに思うので、未読なら是非!) さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが(周回遅れ)、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。 どうやったらスムーズに動くかってのを解説したいと思います。 なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。 先に結論 概念的なの GPU合成レイヤーを適切に使うと早い いわゆるハードウェアアクセラレーション 何がCPUで、何
次のページ
このページを最初にブックマークしてみませんか?
『Ginpen.com | Powered by JavaScript and JapaneseSushi』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く