【JS】addEventListenerが機能しない理由についてご教示ください
プログラミング初心者です。 初歩的なミスかと思いますが原因が分からず どこにミスがあるのかご教示いただけないでしょうか。 よろしくお願いします。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ###前提・実現したいこと ボタンをクリックすることで、ボタンに書いていある文字をinnerHTMLで変更したい。 ###発生している問題・エラーメッセージ クリックしても文字が変更されません。 JSコンソールでは以下のようなアラートで、addEventListenerが機能していなとのことです。 Uncaught TypeError: Cannot read property 'addEventListener' of null ###ソースコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Stop at 00
【DOM基礎】ノードの取得／属性の取得・設定 - Qiita
DOMとは Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。端的に言えば、Web ページをスクリプトやプログラミング言語とつなぐような機構です。 （DOM | MDNより） つまりDOM APIを使うことでドキュメントを制御できます。JavaScriptを使えばDOM APIにつなぐことができます。 このことから、JavaScriptとDOMは分かれて扱われています。 DOMツリー WebページはDocumentオブジェクトによって表されていて、ブラウザがwebページにアクセスしHTMLを解析すると、文書の内容を表すオブジェクトのツリー構造が構築されます。 この構造のことをDOMツリー（またはドキュメントツリー）といいます。 ノード DOM
jQueryからネイティブJavaScriptへ置き換えの第一歩 - Qiita
この記事はJavaScript Advent Calendar 2016の9日目の記事です。 jQueryのセレクタはめちゃくちゃ楽なので多用しているのですが、最近ちょこちょこRiot.jsを使い始めたこともあり、jQueryを使うのもいいけど出来れば外部ライブラリは最小限にして書きたいよねーってことで、jQueryでこうやって書いてたの、ネイティブのJavaScriptで実現する場合どうやるんだっけ？という備忘録。 jQuery3.1.1 GoogleChrome54で検証 HTML5が解釈できるWebブラウザなら動くはず (IE？知らない子ですね……) セレクタ Selectors API jQueryでお馴染みCSSセレクタライクのセレクタをネイティブなJavaScriptでも使えるように実現しているのがSelectors APIです。 覚えるのはたった2つだけ！ document.
CodeceptJSで、非エンジニアでも読みやすいテストコードを書く - Qiita
はじめに この記事は我が名は神龍……どんなテストもひとつだけ自動化してやろうの焼き直し……もとい、利用した技術のちゃんとした解説です。 決して元記事がバズったから二匹目のドジョウを狙っているわけではありません。本当です。 エピソード 突然ですが、あなたは非エンジニアです。 あなたの仕事はテスト手順書に従って、リリースの前に手動でテストをすることです。 Chromeで https://kids.yahoo.co.jp/ にアクセス 検索ワードに ねこ と入力して さがすをクリック 検索結果にネコ - Wikipediaが含まれていることを確認 検索結果に 買い方 を追加 さがすをクリック さがしているのは？と表示されることを確認 クリックすると猫の飼い方で再検索されることを確認 ある日、あなたの前にエンジニアがやって来て、こう言いました。 「テスト大変そうだったから自動化してみたよ！どう？」
awaitできるsetTimeoutを1行で書く方法 - Qiita
await new Promise(resolve => setTimeout(resolve, 3000)) // 3秒待つ // ... 3秒後の処理 ... // よくある長めの実装 const sleep = () => new Promise(resolve => { setTimeout(() => { resolve() }, 3000) }) await sleep() // ステップ1: () => { resolve() } は resolve に短縮する const sleep = () => new Promise(resolve => { setTimeout(resolve, 3000) }) await sleep() // ステップ2: resolve => {} は resolve => に短縮する const sleep = () => new Prom
JavaScriptのcallbackをstub/mock化できるようにしたいのでbind(this)する
まとめJavaScript の callback メソッドを testable にしたい。 testable にするには独立して呼べることが大事。つまり独立メソッドにし、名前をつけることが必要。独立メソッドを callback として渡すにはリファレンスにするリファレンスとして渡されたものは実行時に this が決定するのでそのまま実行すると同じ class 内でも this を見失うリファレンスを bind(this) しておこう例
【初心者向け】JavaScriptの非同期処理を理解する callback、Promiseそしてasync/awaitへ - Qiita
【初心者向け】JavaScriptの非同期処理を理解する callback、Promiseそしてasync/awaitへJavaScriptNode.js初心者向け 非同期処理は最近のフロントエンド開発において、もはや必須ともいえるようになってきました。 WebAPIに対して問い合わせる際や、ファイルを読み込む処理などJavaScriptではいたるところで非同期処理を実装する機会があります。非同期処理にすることでパフォーマンスを向上するようにNode.jsが設計されていることもあるのですが、同期的な処理を得意とする言語ばかり書いてきた人からするとどうしてもJavaScriptの非同期処理は受け入れづらいところがあるようです。 今回はJavaScriptの非同期処理として実装される３パターンを理解してみましょう。 コールバックによる実装とその地獄 コールバック地獄を解決するPromiseによ
ウェブ上でのレンダリング | Articles | web.dev
ウェブ デベロッパーが下す必要がある重要な意思決定の 1 つは、アプリケーションにロジックとレンダリングを実装する場所です。ウェブサイトを構築する方法は非常に多いため、これは難しい場合があります。 Google は、ここ数年間に Chrome で大規模なサイトと連携して得た知見に基づいて、この分野を理解しています。一般的に、完全なハイドレーション アプローチよりも、サーバーサイド レンダリングまたは静的レンダリングを検討することをおすすめします。 選択するアーキテクチャをより深く理解するには、各アプローチをしっかりと理解し、それらについて説明する際に一貫した用語を使用する必要があります。レンダリング アプローチの違いは、ページのパフォーマンスの観点から、ウェブでのレンダリングのトレードオフを示すのに役立ちます。 用語 まず、使用する用語を定義します。 レンダリング サーバーサイド レンダリ
新しいフレームワークを学ぶならTodoMVCではなくRealWorldを参考にしよう - Runner in the High
よく新しいフレームワークを学ぶにはTodoアプリを作ってみるのがよい、と言われる。実際、Todoアプリを様々なフレームワークで作ってみたサンプルをまとめたサイトもあったりする。 ところが、実際に業務で作るようなアプリケーションはTodoアプリの範疇を超えている。とくにSPAにもなると、画面遷移やWebAPI連携、大規模な状態管理などなどの条件が増えるので、Todoアプリを作っているときには考慮できていなかった大変さが出てくる。 そこで参考になるのが RealWorld example apps と呼ばれるプロジェクト 端的に言うと、TodoMVCの大規模版。 規定のスペックに沿って、様々なウェブフレームワークで作られたアプリケーションのリポジトリがリストアップされている。 スペックについて "Conduit" is a social blogging site (i.e. a Medium
最新版で学ぶwebpack 5入門 - Babel 7でES2023環境の構築(React, Vue, Three.js, jQueryのサンプル付き) - ICS MEDIA
最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略：ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules（impo
レガシーシステム上のJavaScriptをモダンビルドにしていくwebpack利用実例 - Qiita
Livesense Advent Calendar 3日目の記事です。 この記事では自分たちが業務でやってきたJavaScriptコードのwebpack + babel導入実例ついてまとめていきたいと思います。一部でも参考になれば幸いです。 まえがき・前提 今回取り扱うこと 今回この記事では下記の観点で進めていきます JavaScriptのビルドのお話し CSS関連は取り扱わない（ちょっと触れる） 実践的なwebpackの利用方法・ノウハウ 入門的な部分は扱わない 既存コードが存在するプロダクション環境で既存のコードを置き換えることを前提とした泥臭めな話中心 ワークアラウンドとしてダーティな手法を利用している部分も含まれる 新規開発を始める際などは結構違う文脈なところが多い。 別なプロジェクトでは一部機能のみBabelビルドしたり、完全に最初からフロントエンドビルド部分をwebpackに任
【Vue.js】 v-forディレクティブを使っていたらエラーが出た - Tomcky's blog
v-for を使ってたら何やらエラーが出た。 error: Custom elements in iteration require 'v-bind:key' directives ... ... component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info. エラーメッセージに従って以下を参照してみる。 https://vuejs.org/guide/list.html#key なるほど、 key 属性を与えないといけないのか。 <div v-for="(value, key, index) in values" :key="index"> ... </div> key 属性は一意なものであれば良いので、配列のイン
jQueryで動的にhiddenのinputタグを生成する方法 - 万年素人からHackerへの道
stackoverflow.com $('<input>').attr({ type: 'hidden', id: 'foo', name: 'foo[]', value: 'bar' }).appendTo('form'); とやれば、 動的に <input type='hiddne' id='foo' name='foo[]' value='bar'></input> ができる。 jQuery最高の教科書 作者: 株式会社シフトブレイン出版社/メーカー: SBクリエイティブ発売日: 2013/11/26メディア: 単行本この商品を含むブログ (5件) を見る
一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog
一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます（スマホで開くか、PCの場合はUAをスマホに偽装する必要があります） https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか？ どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
初めてのVue.js（jQuery脳からの移行をメインに） - Qiita
記事概要 jQueryベースでWebブラウザベースのアプリ書いている人がVue.jsに手を出すとしたら、「こんな風にやってみると分かりやすいかも？」と言う話。ES5 前提です。 Vue.jsの特徴として、他のフレームワークとの混在が容易、ってのがある。なのでjQueryとの共存も可能。今回の例では「inputタグなどの入力インターフェースにのみVue.jsを適用し、設定パネルのスライドダウン／アップなどの表示系DOMの操作はjQueryでのコードをそのまま流用」という方針で組んでみた。 「Vue.jsとは何ぞや？」は下記の公式ガイドを参照のこと。 https://jp.vuejs.org/v2/guide/ Vue (発音は / v j u ? / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolith
jQueryへの依存を外す方法 - dely engineering blog
こんにちは！dely でフロントエンドエンジニアをしている @all__user です。 この記事は dely Advent Calendar 2018 の8日目の記事です。 Qiita: https://qiita.com/advent-calendar/2018/dely Adventar: https://adventar.org/calendars/3535 昨日は、iOSエンジニアのほりぐち（ @takaoh717 ）が「iOS版クラシルの開発からリリースまでの流れ」というタイトルで投稿しました。 tech.dely.jp iOS 版 kurashiru の開発体制の遍歴がよく分かるような内容となっていますので、ぜひチェックしてみてください！ はじめに ここ一年間で Web 版 kurashiru のフロントエンドは Rails から Vue の SPA へと少しづつ置き換えられ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
大手Webサービスがクライアント側で発生したJavaScriptのエラーをどう収集しているのか まとめ - Qiita
ES6の import / export - Qiita
RxJS 6: Observableで非同期の処理を行う - Qiita
jQueryで動的に追加した要素はクリックイベントが発火しない？いやそんなことはないぞ - Qiita
