var checkBoxes = document.getElementsByClassName("checkBox"); for(var key in checkBoxes){ if(checkBoxes[key].classList.contains("checked")){ checkBoxes[key].checked = true; } } 盛大に勘違いしていたのですが、 getElementsByClassName()メソッドが返す値は配列だと思っていたら、実は違った！ getElementsByClassName()は、配列に似ていますが実際には配列ではないHTMLcollectionオブジェクトを返します。 配列ではないので、例えばforEachみたいな便利な配列メソッドを呼び出すことはできません。 また、 for/inを使用してHTMLCollectionを反復処理するこ

Google Apps Script(GAS)などでは、Javascriptで表示される動的なページのスクレイピングができません。 ただ、PhantomJsCloudというツールを使うと、動的に生成されるページでもHTMLソースが取得でき、スクレイピングが可能になります。 今回、PhantomJsCloudを無料登録し、APIキーを取得する手順を解説します。 GAS標準機能は静的スクレイピングのみ可能Googleが提供するサーバーレスのスクリプトサービス、Google Apps Script(GAS)はWebページのスクレイピングによく用いられています。 無料利用でスケジュールによるトリガー実行などが可能なため、定期的にページをスクレイピングするのに重宝します。 GASでスクレイピングする方法！Parserライブラリを利用した手順を解説 ただし、GASによるスクレイピングでは、HTMLソー

追記: URLSearchParams - Web APIs | MDNが使えるならそっちの方が便利。 Search Param付きURL生成 いよいよjQueryを使う必要がなくなってきており、$.ajaxは滅多に使わなくなり、fetchを書くことが増えた。しかし、POSTはまだしもGETでパラメータを送りたい場合、$.ajaxでは var data = { a:1, b:2, c:3 }; $.ajax({ url:'hogehoge', method:'GET', data:data }); とやればよかったものが、fetchの場合はパラメータのkeyとvalueを&で繋いでURLにくっつけるのを自前でやらねばならない。特にURLにSearch Paramsがある場合は?以降を切った後に繋ぎ直さねばならず面倒くさい。 どうにかならないかと調べてみたところ、anchor要素を使うのが良

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

console.log関連についてまとめました。 モダンブラウザであればどれも使用できると思いますが、基本出力結果等はchromeで確認したものです。 console.hogehogeのいろいろ 基本 引数を入れることで出力結果をカスタマイズできます console.info、console.warn、console.error それぞれで見た目を変えることができます。 console.assert 式を評価してfalseの場合にログ出力します。 console.count ログの出力結果が同じ場合にカウント数が自動的に増えていきます。 console.dir オブジェクトのプロパティの中身をログに出力します。 console.dirxml HTMLとかXMLの要素を渡すと、下の要素が全部見れるようになります。 console.group、conosle.groupCollapsed co

はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

マイクロソフトが無償で提供しているコードエディター「Visual Studio Code（略称：VS Code）」はGoogle ChromeやMicrosoft Edgeのデバッグ機能と連携できます。VS Code上でブレークポイントを設定してコールスタックを確認したり、ステップ実行や変数のウォッチなどを行えます。複雑なJavaScript開発を行っている方は、デバッグ機能を使うことで、効率のよい開発体験を得られるでしょう。 本記事ではデバッグ機能を使うためのVS Codeの導入方法について説明します。 導入手順と前提 VS Codeにはデフォルトでデバッグ機能が搭載されています。 ※2021年8月以前のVS Codeでは拡張機能「Debugger for Chrome」の導入が別途必要でしたが、今のVS Codeでは拡張機能をインストールする必要はありません。 本記事では、ウェブページ

gridfolio.jsはグリッドレイアウトのポートフォリオサイトを手軽に作成できるJavaScript製のジェネレーターです。gridfolio.jsにコンテナのタイトルやアイキャッチ、リンク先、スタイルやラベルを設定すれば上図のようなレイアウトで実装される、というシンプルなもの。手軽で非依存型と、なかなかよさ気でした。ライセンスはMIT。 gridfolio.js

"use strict"; test = ""; //Uncaught ReferenceError: test is not defined for (i = 0; i < length; i++) {} //Uncaught ReferenceError: i is not defined

このエントリは、ECMAScript5 の strict モードについてのメモです。 コード関連は、chromeで確認しています。 概要 strict モードにすることで幾つかの機能を制限します。 主に 暗黙的なグローバル変数の禁止 代入不可なプロパティへの代入の禁止 削除できないプロパティの削除の禁止 関数の引数名の重複は禁止 8進数表記は禁止 with 禁止 幾つかの識別子は予約語にするため使用禁止 などを制限します。 適用方法と範囲 strict モードにするには、

Imagine a web component distributed as a single .js file and containing everything. We would still have our basic style sheets, but the dynamic CSS would be a part of JavaScript. Now this is possible, and one way to achieve it is with CSSX. Similar to JSX, CSSX offers encapsulation. Being able to see all parts of a single component is a big step forward. The separation of concerns defined developm

These docs are old and won’t be updated. Go to react.dev for the new React docs. Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function. The JSX code:

いまさらですがReact（react.js）をはじめてみました。 Virtual DOMばかりが話題にあがるReactですが、それにとらわれていると理解が進まない、と言うかReactで理解しなければならないのはVirtual DOMではないことがわかりました。 Reactについての良い資料はすでにたくさんありますので、末尾に参考資料としてあげています。 このエントリは自分がReactのチュートリアルをなぞりながら書いた自分用のメモですが「1エントリで概要をちゃちゃっと理解したい」という方に役に立ったら良いな、とも思っています。 Reactチュートリアル http://facebook.github.io/react/docs/tutorial.html 基本 JavaScriptで書かれたライブラリ。react.jsをインクルードして使う。 （MVCで言うところの）Viewのみを担当する。

注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで

##参照 パーフェクトJavaScript ##イベントドリブンプログラミング あるイベントに対して、どのような処理をするのかを登録する ブラウザがイベントを起こすたびにその登録した処理が実行される 登録する処理のことを「イベントハンドラ」「イベントリスナ」と呼ぶ ##イベント例 ある要素をクリックする ある要素の上にマウスを動かす キーボードで特定のキーを押す ページが読み込まれたり、別のページに遷移する時に起こるイベント ##DOM Level2 モダンブラウザは、DOM Level2に準拠 IE8は'独自のイベントモデル'を実装している。APIとして別物なので注意が必要 ##古い書き方　「イベントハンドラ」 1つの要素/イベントについて1つしか設定できない ####「古い書き方1」HTML要素の属性に指定する　(直書き)

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 春ですね！人の配置がリファクタリングされ、コードもリファクタリングの季節です。 では僕がここでモダンなJavaScriptとES2015の利点を語る役をやるので、みなさんはチームを説得する役をやってください。 JavaScriptの歴史 まず最初にJavaScriptの歴史を踏まえることで、今学ぶべきものとその理由を確認しましょう。 なぜ2016年の記事でES2016ではなく、ES2015なのか、と疑問に思った方もいるかもしれません。それは、ES2015がただの年次アップデートではなく、これから始まる毎年のメジャーバージョンアップの起点