querySelectorAllしてmapしたいとき[...すると短い - hitode909の日記
表示中のHTMLから情報を雑に抜き出して利用するため，ブラウザのデベロッパツールなどでquerySelectorAllしてmapしたい．しかし，querySelectorAllはNodeListを返すので，mapするにはArrayに変換する必要がある． NodeListをArrayに変換するときに短く書く方法ないですかって同僚に聞いたらいろいろ教えてもらえたのでメモ． Array.prototype.slice.callする オーソドックスな手法．昔からこれを書いていて，長くて困っていた．最近はアロー関数を使えるのでちょっと短くなったけど長い． Array.prototype.slice.call(document.querySelectorAll('a')).map(a => a.href) [].slice.callする Array.prototypeのかわりに[]で書く．ちょっと短い
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～JavaScriptjQuery ※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索が
this, call(), apply(), bind() - 30歳からのプログラミング
JavaScriptの言語仕様を勉強していくことにした。 いい技術書に巡り合ったこともあり、それなりに理解できるようにはなったが、まだまだ身についてはいない。 あくまでも、技術書の説明を読めば理解できる、というレベルに過ぎない。 これでは実際のコーディングに役立てることは出来ないし、開発中に詰まる度に、調べ直さなきゃいけない。 「読めば分かる」と「理解している」は、かなり距離がある。この距離を埋めていく。 ES5に準拠した内容を学んでいく。 本当はES2015(ES6)を学んだほうがいいのかもしれないが、ES6を体系的にまとめた入門書はまだ見当たらない。 それに、ES2015についての様々な情報は、ES5の内容を理解していることを前提にしているものが多い。 基礎を疎かにしないためにも、背伸びせずES5から学ぶことにした。 そのほうが、スムーズにES2015に移行でき、結果的に早いと思う。歯
Object.keys()やReflect.ownKeys()のまとめ - Panda Noir
オブジェクトのプロパティを取得するメソッドが Object.keys() Object.getOwnPropertyNames() Object.getOwnPropertySymbols() Reflect.ownKeys() と、4種類も存在していてややこしかったので整理しました メソッド名enumerable対象 Object.keys(obj)true文字列 Object.getOwnPropertyNames(obj)true or false文字列 Object.getOwnPropertySymbols(obj)false*1シンボル Reflect.ownKeys(obj)true or false文字列 or シンボル Object.keys(obj) は、objのプロパティのうち、enumerableであり文字列であるものを列挙します。 Object.getOwnPro
2017年、新規にJavaScriptを書くならどんな設計をするか｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
この記事はJavaScript Advent Calendar 2016の記事です。 今回は、2017年、新規にJavaScriptを書くならどんな設計をするか、というテーマで書いてみようと思います。2017年といっても、しばらくはこんな感じのアーキテクチャでやってきましたので、どんな構成でJavaScriptを設計してきたかという方が正しいかもしれません。基本的にはSPAをベースとしています。 また、最新のイケてる技術バリバリ使ってやるぜ、というよりは、堅牢で、はやりが変わってもメンテができるということを意識してみました。 DOMのレンダリング Virtual DOMを代表とした、DOMのレンダリングを行うライブラリをなにか採用します。特に理由がなければReactでいいと思います。Virtual DOMではありませんが、AngularでもDOM管理においてはさほど違いはありません。この2
2016年にJavaScriptを学ぶとこんな感じ
このストーリーは、Circle CIに投稿された”It’s the future”というストーリーにインスパイアされたものです。オリジナルはこちら。ここに書いたことは一つの意見というだけで、他のJavaScriptフレームワークもそうですが、過剰に真に受けないでください。このストーリーを執筆中に新たなJavaScriptフレームワークは作成されていません。 やあ、今新しいプロジェクトをやっているんだけど、実はここ数年ウェブのコード書いていなくてさ、しかも以前とは少し変わったとも聞いているよ。それで君が一番この辺でウェブ開発に詳しいって聞いたんだけど？ -フロントエンドエンジニア、といったほうが正しいが…まあ、俺なら間違いない。俺のは2016年のウェブだからな。ビジュアライゼーション、ミュージックプレイヤー、サッカーをするドローン等々。JsConfとReactConfから帰ってきたばかりだか
レトロエンジニアのための近代Webフロントエンド事情 - Qiita
フロントエンド開発という言葉があちらこちらから聞こえてくる。 「反対語はバックエンド開発だから、サーバとかCUIじゃない、アプリとかGUIあたりのことを指す広い意味の言葉だよね。」 ・・・とか思ってたらとんでもない。 世の中ではJavaScript界隈を限定している風な使われ方をしている。 私のような C/C++ メインのレトロエンジニアは肩身が狭くなるばかりである。 本文は、近年のWeb技術に追いつこうと調査した結果のメモ書きである。 n番煎じの内容だが、Web業界にいない人間の視点 なので、私と同類のレトロエンジニア等、一部の人には新しい気付きが与えられるかもしれない。 詳しい人の添削・ツッコミは大歓迎。 詳細はリンク先に任せ、私が思う「わかりやすい順序」で、調べたことをざっと紹介していく。 きっかけ 読み飛ばしてもよい。 Reactを使うとなぜjQueryが要らなくなるのか 数年前、
はてな教科書 JavaScript編
はてな教科書JavaScript編 講義の目的 JavaScriptについて、自分で調べて学習するための基礎知識を身につける リファレンスをひけば良い部分は覚えない 話の流れ JavaScriptの言語コア部分 構文とか WebとJSにまつわるあれこれ DOM 非同期プログラミング Ajax jQuery フロントエンド設計 Node.js 駆け足で進めるので、速すぎるなら遠慮せず言ってください！ LICENSE この作品は クリエイティブ・コモンズ表示 - 非営利 - 継承2.1日本ライセンス の下に提供されています。
老害と言われないためのES6勉強会報告・イントロダクション編 - Qiita
はじめに だいたい昔からJavaScriptを触ってたりすると、ECMA-262 Edition 5.1に慣れきってしまって、もうそれでいいじゃんという雰囲気になったりする。しかし、既に5.1だけを使うのは老害なのではないか(はっきりとは断言しない)という危機感によって、今回はECMAScript 2015を勉強しようという話になった。 なぜ5.1は老害なのか まず最初にBabelによって、ECMA Script2015を無理矢理5.1にすることが可能になった。その後、段々と対応ブラウザが増えつつあり、今後おきかわる可能性がある。これはプロダクトの都合。プログラマーとしては格段に書きやすくなった。 参考資料 Amazon 2016年11月に出版されたので、とにかくECMAScript 2015の対応は早かった。本の内容も、めくってみた感じだと、それほど悪くない印象がある。 参考資料2 はて
JavaScriptのそこまで黒くない魔術のお話 - すなばいじり
あまり大きくない整数値が欲しい時に ~~"123" // 123 といった手抜きをする事があります。大変申し訳ございませんでした。 ちなみに、上記のやつは負数ではないことが分かっている場合のMath.floor()をやる手抜きです。(ついでに文字→数値変換もしている) ~~123.6 // 123 ~~-123.6 // -123 Math.floor(123.6) // 123 Math.floor(-123.6) // -124 こちらからは以上です。 黒魔術（Javascript）まとめ - Qiita koがわりと好きなのですが、(0, eval)('this')のせいでChrome拡張機能で使うと怒られるやつ(利用には unsafe-eval を設定する必要があります)。 2016/10/09 15:53 koがわりと好きなのですが、(0, eval)('this')のせいでCh
JavaScriptで配列を直接書くのが辛い時は、script要素に文字列を埋め込めば良いかもしれない - Qiita
var dialogueList = [ "あいうえお", "かきくけこ", "さしすせそ", "たちつてと", "なにぬねの", "はひふへほ", "まみむめも", "やゆよ", "らりるれろ", "わゐゑを", "ん" ]; こうなります。 台詞1つ追加する度に、引用符にカンマをつけなくてはなりません。 また、エスケープも考慮しなくてはなりません。 エディタに補完機能が無い場合は、インデントも手動で打たなくてはなりません1。 これくらいなら数が少ないためまだ見やすいのですが、これが増えてくるともっと辛くなるかもしれません。 そこで、HTMLに改行区切りの文字を埋め込み、それを配列に変換するという方法を考えてみました。 コード
控えめなJavaScript - Wikipedia
控えめなJavaScript（ひかえめなジャバスクリプト、英語: Unobtrusive JavaScript）とは、WebページでのJavaScriptの利用における一般的なアプローチである。この用語は正式には定義されていないが、基本的な原理は一般的に次のようなことが含まれると理解されている。 機能（behavior layer）の、Webページの構造・コンテンツ、表示との分離[1] 伝統的なJavaScriptプログラミングの問題（ブラウザによる違いや拡張性の欠如など）を回避するためのベストプラクティス 高度なJavaScriptの機能をサポートしない可能性のあるユーザーエージェントをサポートするためのプログレッシブエンハンスメント[2] 新しいパラダイム[編集] 歴史的にJavaScriptは本格的なアプリケーション開発には適さない、扱いにくい言語とされてきた[3][4]。これは主に
jQueryはもうしんどい…フレームワーク初心者ならVue.jsから始めてみたら？
jQueryは超便利。でも、ちょっとアプリっぽいものを作るには見通しも悪いし、後々のメンテナンスも大変…。Angunlar.jsやReact.jsよりもシンプルで触りやすい、Vue.jsから始めてみてはいかが？ 2016年7月21日：記事更新。Vue.js 1.0.xをカバーし、コンポーネント部分を追加しました。 Vue.jsは、MVVM（Model-View-ViewModel）アーキテクチャパターンを使用したWebアプリケーションの組み立てを助けてくれるJavaScriptライブラリーです。はじめはAngularJSとよく似ていると思いましたが、一度使ってみるとVue.jsはシンプルで使いやすいだけでなく、フレキシブルであることにも気づきます。 今回は初心者向けの記事として、Vue.jsの基本コンセプトと重要な特徴を含めた全体像を説明します。 Vue.js 1.0.xはいくつかシンタッ
ブラウザ上で軽いDOMを使いたい
documentFragmentを使ってもDOMが重い場合、Server side DOMをブラウザ上で使うと早くなる。 今回はdominoを使った。 試してないけど、jsdomはたぶんブラウザ上では動かない（node向けの依存ライブラリがかなりあるので。dominoはpure jsでdependenciesが無い） ただ、dominoもそのままglifyJSにかけると壊れる。 正規表現用の文字列（\uxxxx）が壊れるのと、function nameが消えてinstanceofが失敗するのが原因っぽい glifyJSのコマンドラインオプションに --beautify beautify=false,ascii-only=true --keep-fnames を足して解決。 Special characters in Regular Expressions · Issue #171 · mi
jQuery.ajaxの代わりにSuperAgentを使う - Qiita
脱jQuery AngularJSやVue.jsでは、DOMの直接操作は推奨されません。 そうなると、jQueryはAJAXでしか使わなくなります。 であれば、AJAX専用のライブラリにまかせてしまって、jQuery依存を外したくなってきます。 というわけで、AJAXだけをやってくれるライブラリとして、SuperAgentを導入してみましょう。 HTTPリクエストに特化したライブラリです。 Node.jsとブラウザ両方で使うことができます。 作者はExpress, Stylusの開発などで有名なTJです。 superagentの良さ かわいい。 ブラウザでの導入方法 まず、下記URLにアクセスし、ファイル名superagent.jsとして名前をつけて保存してください。 https://wzrd.in/standalone/superagent@latest scriptタグでsuperag
私がscriptタグについて知っていること全て : 知られていない属性や実行順序など | POSTD
<script src="//typekit.com/fj3j1j2.js"></script> <!-- This second script won’t execute until typekit has executed, or timed out --> <script src="//my.site/script.js"></script> ローカルスクリプトとリモートスクリプトを組み合わせても同様に操作することができます。 機能的には、Webページの前の部分で重いスクリプトのロードがあると、サイトの表示が明らかに遅くなることを意味します。さらに、ページの最後の方で表示されるスクリプトは、それまでに存在するされたスクリプトの動作に依存することを意味します。 先行する全てのscriptタグがロードされ実行されるまで、ページ上の要素は表示されません。つまり、パフォーマンスへの悪影響を覚
JavaScript Primer - 迷わないための入門書 #jsprimer
JavaScript Primer 迷わないための入門書 Tweet Watch Star Twitterのハッシュタグ: #jsprimer これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるように書かれています。 初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは「はじめに」から読んでみてください。 書籍版 このウェブサイトの内容はアスキードワンゴから書籍として出版されています。 書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。 書籍版は次のサイトから購入できます。 Amazon 達人出版会（電子書籍版
リンクのへの rel=noopener 付与による Tabnabbing 対策 | blog.jxck.io
なお IE は(security zone setting をいじらない限り)この問題が発生しないようだ。 引用元: blankshield demo | Reverse tabnabber phishing tabnabbing 上記の挙動を、フィッシング詐欺に利用できることが既に指摘されている。 この手法は Tabnabbing と呼ばれている。 Tabnabbing: A New Type of Phishing Attack Aza on Design Target="_blank" - the most underestimated vulnerability ever この攻撃方法を解説する。 攻撃の概要 https://cgm.example.com (左上) というサービスがあるとし、これは SNS やチームコラボレーション系サービスを想定する。 攻撃者は、このサービスの不
ES2015の現在とESNextの未来
HTML Party in 鹿児島 で発表した ES2015 の話です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript の parseInt で小数を整数に変換しようとしてはまる
