redis-rails
redis-store/redis-rails
セッションの管理方法をクッキーストアではなく、radisで管理する。
使い方
Gemfileに'redis-rails'を追加する。
gem 'redis-rails'
config/environments/production.rbへ下記のような追記をします。
config.cache_store = :redis_store, "redis://localhost:6379/0/cache", { expires_in: 90.minutes }
以下をconfig/initializers/session_store.rbに追加して、Redisをセッションストアとして使用します
MyApplication::Application.config.session_store :redis_store,
servers: ["redis://localhost:6379/0/session"],
expire_after: 90.minutes,
key: "_#{Rails.application.class.parent_name.downcase}_session",
threadsafe: true,
signed: true,
secure: true
これらのオプションについて
・serversは、データの検索を試みるRedisサーバーの配列です。これは、：redis_storeと同じ構文を使用します
・expire_afterは、セッションキーのデフォルトTTLです。これは、セッションストアによって生成されたすべてのCookieの有効期限としても設定されます。
・keyはクライアント側のCookieの名前です
・threadsafeは、複数のインスタンスで実行されるアプリケーション用です。セッションデータのグローバルミューテックスロックを無効にする場合は、これをfalseに設定します。デフォルトではtrueです。つまり、ミューテックスが有効になります。
・signedは、署名/暗号化されたCookieを使用してクライアントセッションにローカルセッションを保存し、悪意のあるユーザーがそのコンテンツを改ざんするのを防ぎます。
・secureは、HTTP Cookieが安全な（HTTPS）接続でサーバーからクライアントに転送されるようにします。
・httponlyは、すべてのCookieのHttpOnlyフラグがtrueに設定されていることを確認します。
deviseよりsorceryの方が柔軟にログイン機能が実装できるという噂を調査
deviseよりsorceryの方が柔軟にログイン機能が実装できるという噂を調査
Sorcery: Magical Authentication GitHub
アクティベーション
Wiki先生によると、、
アクティベーションは、一部のソフトウェアをインストールした後、正規のライセンスを保持していることを確認するために行われる認証処理で、非合法に入手したソフトウェアやライセンス契約に反する使用（Warezやカジュアルコピー、2台以上のPCにインストールなど）を防止するために導入された。
ブルートフォース防御とは
使い方
Gemfileに下記を記載して、$ bundle installする。
# Gemfile gem 'sorcery'
次のコマンドを実行して、remember_meおよびreset_passwordサブモジュールの移行ファイルを生成し、初期化ファイルを作成（およびサブモジュールを追加）して、ユーザーモデルクラスを作成します。
$ bundle exec rails generate sorcery:install remember_me reset_password $ bundle exec rails db:migrate
コア移行ファイル、初期化ファイル、およびユーザーモデルクラスのみの生成の場合は、下記コマンドを実行する。
$ bundle exec rails g sorcery:install
rubocop使ってみた。
rubocop
RuboCopは、あなたのプロジェクトのrubyコードが「コーディング規約どおりに書かれているか」をチェックする静的コード解析ツールです。
設定ファイル(.rubocop.yml)を編集することにより、自分自身でコーディング規約を追加したり削除することができます。
rubocopのインストール
gemfileに下記を追加して、$ bundle installする。
group :development do … gem 'rubocop', require: false gem 'rubocop-rails' end
インストール後は、下記コマンドで実行する。
$ bundle exec rubocop
.rubocop.ymlの書き方について
$ touch .rubocop.yml
.rubocop.ymlという設定ファイル作成すると、 RuboCopはこれを自動的に読み取ります。 以下、.rubocop.yml内における、代表的な書き方を説明します。
RuboCopの対象から除外するファイルを指定する
RuboCopの対象から除外したい場合は、Exclude:を利用します。
今回はrailsが自動的に生成するファイル(db/schema.rb)や、vendor/bundle以下に配置されるgemなどをRuboCopの対象から除外することにしました。
db/schema.rbの様に記載すると、デフォルトで設定されているExcludeが無効化されてしまう為、'db/**/*'の様に記載しています。
AllCops:
Exclude:
- 'db/**/*'
- 'vendor/**/*'
- 'bin/**/*'
- 'spec/**/*'
- 'node_modules/**/*'
参照サイト：RuboCopをRailsオプションやLintオプションで使ってみよう
pryについて
【rails new】mysql2が`bundle install`出来ない時のエラー解決法
はじめに
新しくrailsプロジェクト作成の際に、
俺「railsインストールしてrails newしたし、次はbundle installだ」
と思い$ bundleしたのですが、がっつりエラーが発生しました。
結構時間が取られてしまったので（二日間くらい悩みましたw）、備忘録として対応方法を記載しておきたいと思います。
起こったこと
$ bundleすると、下記の様なエラーが出た。
$ bundle
（省略）
Bundler could not find compatible versions for gem "sprockets":
In snapshot (Gemfile.lock):
sprockets (= 4.0.0)
In Gemfile:
sass-rails (~> 5.0) was resolved to 5.1.0, which depends on
sprockets (>= 2.8, < 4.0)
rails (~> 5.2.3) was resolved to 5.2.3, which depends on
sprockets-rails (>= 2.0.0) was resolved to 3.2.1, which depends on
sprockets (>= 3.0.0)
Running `bundle update` will rebuild your snapshot from scratch, using only
the gems in your Gemfile, which may resolve the conflict.
そんなことよりコマンドだけ教えて
$ brew info openssl （省略） For compilers to find openssl@1.1 you may need to set: export LDFLAGS="-L/usr/local/opt/openssl@1.1/lib" export CPPFLAGS="-I/usr/local/opt/openssl@1.1/include"
exportで出たPATHを設定して、mysql2をインストールする。
$ bundle config --local build.mysql2 "--with-cppflags=-I/usr/local/opt/openssl@1.1/include" $ bundle config --local build.mysql2 "--with-ldflags=-L/usr/local/opt/openssl@1.1/lib" $ bundle install
これで出来ます！
やってみたこと
１、とりあえずエラー文に従ってコマンド打ってみる
「$ bundle update」
上記のエラー文より、bundle updateしろとのことなのでやってみる。
$ bundle update （省略） Gem::Ext::BuildError: ERROR: Failed to build gem native extension. current directory: /Users/ginokinh/workplace/insta_clone/vendor/bundle/ruby/2.6.0/gems/mysql2-0.5.2/ext/mysql2 /Users/ginokinh/.rbenv/versions/2.6.4/bin/ruby -I /Users/ginokinh/.rbenv/versions/2.6.4/lib/ruby/2.6.0 -r ./siteconf20191126-13836-1jt97r2.rb extconf.rb checking for rb_absint_size()... yes checking for rb_absint_singlebit_p()... yes checking for rb_wait_for_single_fd()... yes ----- Using mysql_config at /usr/local/opt/mysql@5.7/bin/mysql_config ----- checking for mysql.h... yes checking for errmsg.h... yes checking for SSL_MODE_DISABLED in mysql.h... yes checking for SSL_MODE_PREFERRED in mysql.h... yes checking for SSL_MODE_REQUIRED in mysql.h... yes checking for SSL_MODE_VERIFY_CA in mysql.h... yes checking for SSL_MODE_VERIFY_IDENTITY in mysql.h... yes checking for MYSQL.net.vio in mysql.h... yes checking for MYSQL.net.pvio in mysql.h... no checking for MYSQL_ENABLE_CLEARTEXT_PLUGIN in mysql.h... yes checking for SERVER_QUERY_NO_GOOD_INDEX_USED in mysql.h... yes checking for SERVER_QUERY_NO_INDEX_USED in mysql.h... yes checking for SERVER_QUERY_WAS_SLOW in mysql.h... yes checking for MYSQL_OPTION_MULTI_STATEMENTS_ON in mysql.h... yes checking for MYSQL_OPTION_MULTI_STATEMENTS_OFF in mysql.h... yes checking for my_bool in mysql.h... yes ----- Don't know how to set rpath on your system, if MySQL libraries are not in path mysql2 may not load ----- ----- Setting libpath to /usr/local/opt/mysql@5.7/lib ----- creating Makefile current directory: /Users/ginokinh/workplace/insta_clone/vendor/bundle/ruby/2.6.0/gems/mysql2-0.5.2/ext/mysql2 make "DESTDIR=" clean current directory: /Users/ginokinh/workplace/insta_clone/vendor/bundle/ruby/2.6.0/gems/mysql2-0.5.2/ext/mysql2 make "DESTDIR=" compiling client.c compiling infile.c compiling mysql2_ext.c compiling result.c compiling statement.c linking shared-object mysql2/mysql2.bundle ld: library not found for -lssl clang: error: linker command failed with exit code 1 (use -v to see invocation) make: *** [mysql2.bundle] Error 1 make failed, exit code 2 Gem files will remain installed in /Users/ginokinh/workplace/insta_clone/vendor/bundle/ruby/2.6.0/gems/mysql2-0.5.2 for inspection. Results logged to /Users/ginokinh/workplace/insta_clone/vendor/bundle/ruby/2.6.0/extensions/x86_64-darwin-19/2.6.0/mysql2-0.5.2/gem_make.out An error occurred while installing mysql2 (0.5.2), and Bundler cannot continue. Make sure that `gem install mysql2 -v '0.5.2' --source 'https://rubygems.org/'` succeeds before bundling. In Gemfile: mysql2
「gem install mysql2 -v '0.5.2' --source 'https://rubygems.org/'」する。
$ gem install mysql2 -v '0.5.2' --source 'https://rubygems.org/'
Fetching mysql2-0.5.2.gem
Building native extensions. This could take a while...
ERROR: Error installing mysql2:
ERROR: Failed to build gem native extension.
current directory: /Users/ginokinh/.rbenv/versions/2.6.4/lib/ruby/gems/2.6.0/gems/mysql2-0.5.2/ext/mysql2
/Users/ginokinh/.rbenv/versions/2.6.4/bin/ruby -I /Users/ginokinh/.rbenv/versions/2.6.4/lib/ruby/2.6.0 -r ./siteconf20191126-18347-15yfju7.rb extconf.rb
checking for rb_absint_size()... yes
checking for rb_absint_singlebit_p()... yes
checking for rb_wait_for_single_fd()... yes
-----
Using mysql_config at /usr/local/opt/mysql@5.7/bin/mysql_config
-----
checking for mysql.h... yes
checking for errmsg.h... yes
checking for SSL_MODE_DISABLED in mysql.h... yes
checking for SSL_MODE_PREFERRED in mysql.h... yes
checking for SSL_MODE_REQUIRED in mysql.h... yes
checking for SSL_MODE_VERIFY_CA in mysql.h... yes
checking for SSL_MODE_VERIFY_IDENTITY in mysql.h... yes
checking for MYSQL.net.vio in mysql.h... yes
checking for MYSQL.net.pvio in mysql.h... no
checking for MYSQL_ENABLE_CLEARTEXT_PLUGIN in mysql.h... yes
checking for SERVER_QUERY_NO_GOOD_INDEX_USED in mysql.h... yes
checking for SERVER_QUERY_NO_INDEX_USED in mysql.h... yes
checking for SERVER_QUERY_WAS_SLOW in mysql.h... yes
checking for MYSQL_OPTION_MULTI_STATEMENTS_ON in mysql.h... yes
checking for MYSQL_OPTION_MULTI_STATEMENTS_OFF in mysql.h... yes
checking for my_bool in mysql.h... yes
-----
Don't know how to set rpath on your system, if MySQL libraries are not in path mysql2 may not load
-----
-----
Setting libpath to /usr/local/opt/mysql@5.7/lib
-----
creating Makefile
current directory: /Users/ginokinh/.rbenv/versions/2.6.4/lib/ruby/gems/2.6.0/gems/mysql2-0.5.2/ext/mysql2
make "DESTDIR=" clean
current directory: /Users/ginokinh/.rbenv/versions/2.6.4/lib/ruby/gems/2.6.0/gems/mysql2-0.5.2/ext/mysql2
make "DESTDIR="
compiling client.c
compiling infile.c
compiling mysql2_ext.c
compiling result.c
compiling statement.c
linking shared-object mysql2/mysql2.bundle
ld: library not found for -lssl
clang: error: linker command failed with exit code 1 (use -v to see invocation)
make: *** [mysql2.bundle] Error 1
make failed, exit code 2
Gem files will remain installed in /Users/ginokinh/.rbenv/versions/2.6.4/lib/ruby/gems/2.6.0/gems/mysql2-0.5.2 for inspection.
Results logged to /Users/ginokinh/.rbenv/versions/2.6.4/lib/ruby/gems/2.6.0/extensions/x86_64-darwin-19/2.6.0/mysql2-0.5.2/gem_make.out
これでも出来ない。。。環境構築でのエラーかぁ。。。 苦手意識が出てきましたが、ここからいろいろ調べて試してみる。
２、いろいろ調べて試してみる。
https://github.com/brianmario/mysql2/issues/1005
↑ 「Homebrewにopensslのインストールしないと使えないよ！」 って書いてあったので、
$ brew install openssl
次に、 mysql2 gemインストール時のトラブルシュート
このサイトで、opensslのライブラリの場所を指定してgemをインストールできればいいとのことなので、
$ brew info openssl openssl@1.1: stable 1.1.1d (bottled) [keg-only] Cryptography and SSL/TLS Toolkit https://openssl.org/ /usr/local/Cellar/openssl@1.1/1.1.1d (7,983 files, 17.9MB) Poured from bottle on 2019-10-19 at 11:10:10 From: https://github.com/Homebrew/homebrew-core/blob/master/Formula/openssl@1.1.rb ==> Caveats A CA file has been bootstrapped using certificates from the system keychain. To add additional certificates, place .pem files in /usr/local/etc/openssl@1.1/certs and run /usr/local/opt/openssl@1.1/bin/c_rehash openssl@1.1 is keg-only, which means it was not symlinked into /usr/local, because openssl/libressl is provided by macOS so don't link an incompatible version. If you need to have openssl@1.1 first in your PATH run: echo 'export PATH="/usr/local/opt/openssl@1.1/bin:$PATH"' >> ~/.bash_profile For compilers to find openssl@1.1 you may need to set: export LDFLAGS="-L/usr/local/opt/openssl@1.1/lib" export CPPFLAGS="-I/usr/local/opt/openssl@1.1/include" For pkg-config to find openssl@1.1 you may need to set: export PKG_CONFIG_PATH="/usr/local/opt/openssl@1.1/lib/pkgconfig" ==> Analytics install: 514,827 (30 days), 1,802,993 (90 days), 2,294,743 (365 days) install_on_request: 42,646 (30 days), 137,368 (90 days), 414,016 (365 days) build_error: 0 (30 days)
注目すべきはここの部分！
export LDFLAGS="-L/usr/local/opt/openssl@1.1/lib" export CPPFLAGS="-I/usr/local/opt/openssl@1.1/include"
この$PATHを設定してmysql2をインストールすれば良い。
$ bundle config --local build.mysql2 "--with-cppflags=-I/usr/local/opt/openssl@1.1/include" $ bundle config --local build.mysql2 "--with-ldflags=-L/usr/local/opt/openssl@1.1/lib"
あとは、bundle installする！
$ bundle install （省略） Running `bundle update` will rebuild your snapshot from scratch, using only the gems in your Gemfile, which may resolve the conflict.
また、エラー出たと思いましたが、ちゃんと出来た！
$ bundle update
無事出来た！！
補足
$ bundle config --local build.mysql2 "--with-cppflags=-I/usr/local/opt/openssl@1.1/include --with-ldflags=-L/usr/local/opt/openssl@1.1/lib"
と、オプションを2つつけると通らないみたいなのです。
参考サイト： bundle install 時、mysql2でエラー
なぜか。エラー解決したもの？リネームして、グローバルRubyバージョンの変更に成功！
リネームして、グローバルRubyバージョンの変更に成功！
$ rbenv global 2.6.4 $ rbenv versions rbenv: version `2.5.1' is not installed (set by /Users/ginokin/workspace/.ruby-version) system 2.1.2 2.6.4 2.6.5 $ which rbenv /usr/local/bin/rbenv $ mv /Users/ginokin/workspace/.ruby-version /Users/ginokin/workspace/.ruby-version.bak $ rbenv versions system 2.1.2 * 2.6.4 (set by /Users/ginokin/.rbenv/version) 2.6.5
「検索エンジン最適化（SEO）スターター ガイド」を読んで
「検索エンジン最適化（SEO）スターター ガイド」を読んで
HTMLの理解とSEOについてどんなもんか。知りたかったので、Googleが推奨している下記のページを読んでみた。
被リンクとは
外部サイトから自サイトへ向けられたリンクのこと。 被リンクを多く獲得しているページは、「多くのユーザーから信頼され評価が高い＝有益なページ」と捉えられています。有益なページから被リンクを獲得することは他のユーザーの信認があると見なされるため、被リンク元となるサイトが有益なページであればあれるほど、さらに高い評価へとつながるのです。
canonical
HTMLのSEO対策用のタグ。
重複ページとして認識されてしまいそうなページの正規化したいURL（優先させたいURL）を決めて、それ以外のページにcanonicalを設置します。 canonicalはhead要素の中で使います。body要素の中で使っても、Googleは無視して処理してくれないので注意する。
【記述方法】
<head> <link rel="canonical" href="http://example.com/"> </head>
パンくずリスト
パンくずリストとは、サイトやブログなどの構造を 下記のように可視化したようなもの。
SEO Packトップ ＞ ブログトップ ＞ ブログ記事タイトル
こうしたパンくずリストは、通常であれば下記のように記述しがちです。
＜ul＞ ＜li＞＜a href=”https://seopack.jp/”＞SEO Packトップ＜/a＞ ＞ ＜/li＞ ＜li＞＜a href=”https://seopack.jp/seoblog/”＞ブログトップ＜/a＞ ＞ ＜/li＞ ＜li＞ブログ記事タイトル＜/li＞ ＜/ul＞
microdataによる構造化マークアップでの記述 これが、microdataによる構造化マークアップを用いると、下記のような記述となります。
＜ul＞ ＜li itemscope itemtype=”https://data-vocabulary.org/Breadcrumb”＞ ＜a href=”https://seopack.jp/” itemprop=”url”＞ ＜span itemprop=”title”＞SEO Packトップ＜/span＞ ＜/a＞ ＞ ＜/li> ＜li itemscope itemtype=”https://data-vocabulary.org/Breadcrumb”＞ ＜a href=”https://seopack.jp/seoblog/” itemprop=”url”＞ ＜span itemprop=”title”＞ブログトップ＜/span＞ ＜/a＞ ＞ ＜/li＞ ＜li＞ブログ記事タイトル＜/li＞ ＜/ul＞
こうすることで、ページタイトルと一緒に、パンくずリストも適切に検索結果で表示されるようになります。
参照サイト：SEOに効く「パンくずリスト」対策ガイド
robots.txtとは
簡単にいうと、クローラーの動きを制御できるファイルのことで、クローラーに正しくインデックスしてもらう為に設置するものです。
robots.txt を設置することによって、クローラーに読み取ってほしい情報と読み取ってほしくない情報のふたつを伝えることができます。不必要な情報を排除して、意図したとおりにホームページ内の情報を吸い上げてもらうことで、特定のキーワード検索において上位表示の可能性が高まります。
robots.txtの書き方
User-agent: (ユーザーエージェントを指定します。) Disallow:(ブロックしたいページを指定します。) Allow:(クロールさせたいページを指定します。) Sitemap:(クローラー用のサイトマップの場所を指定します。)
Sitemapの書き方
Googleが推奨するsitemap.xml（XMLサイトマップ）の基本的な作成方法が、以下のような例として紹介されてます。
＜?xml version=”1.0″ encoding=”UTF-8″?＞ ＜urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″＞ ＜url＞ ＜loc＞http://www.example.com/＜/loc＞ ＜lastmod＞2005-01-01＜/lastmod＞ ＜changefreq＞monthly＜/changefreq＞ ＜priority＞0.8＜/priority＞ ＜/url＞ ＜/urlset＞
上記のように、 UTF-8エンコードを宣言して専用のXMLタグを記述しながらファイルを作成していきます。 「urlset」「url」「loc」は、記述必須のXMLタグです。 その他オプションとして、「lastmod」「changefreq」「priority」のXMLタグが使用できます。
▼記述必須 ＜urlset＞ 全体を囲むタグで、現在のプロトコル標準を参照。 ＜url＞ 各 URL エントリの親タグ。 ＜loc＞ ページのURLを記述。 ▼オプション ＜lastmod＞ ファイルの最終更新日。 ＜changefreq＞ ページの更新頻度。 ＜priority＞ URL の優先度。0.0 から 1.0 までの値が指定できる
sitemap.xml（XMLサイトマップ）作成ツールの使い方
ツールを使うことで、手間をかけずにsitemap.xml（XMLサイトマップ）を作成することが可能です。 「sitemap xml editor」や「sitemap xml generator」などのツールが有名で簡単にXMLサイトマップを作成することができます。
下記のサイトの「sitemap.xml（XMLサイトマップ）作成ツールの使い方」を参照してください。
sitemap.xml（XMLサイトマップ）とは～作成方法（Google推奨の書き方）とeditor・generatorの使い方まとめ
作成した sitemap.xml をサーチコンソールに送信する
作成したsitemap.xml（XMLサイトマップ）をサーチコンソールから送信し、既存のページURLや新しいページURLを定期的にクロールしてもらうことが大切です。 そうすることで、最新のサイト状況を検索エンジンへ認識（インデックス）させる手助けとなります。
robots.txtを書く上での注意点
robots.txt を書く上で気を付けるポイントは最低2つです。
１.）ルートドメインに置く robots.txtは、ホームページのルートドメインに設置しましょう。 クローラーは被リンクからホームページに辿り着き、内部リンクを移動します。また、正しいrobots.txtは有効なインデックスにつながることから、ルートドメインに設置するようにしましょう。 ferretを例に挙げてみると、ドメインが「ferret-plus.com/」なので、「ferret-plus.com/robots.txt」と設置してください。
２.）不必要なページを重視する robots.txtは、クローラーに収集してもらう必要のない情報を示すことで、意図したとおりにホームページの特性を伝えることができます。robots.txtの「Allow」は「許可する」を意味し、クローラーに作業してほしいページを指定します。しかし、あくまでクローリングでは全てのページを読み取ることを前提としているので、何を「Disallow（許可しない）」のかを重視して書いていきましょう。
robots.txtをホームページに設置することで、検索エンジンでの順位表記に関わるクローラーに「どんな情報を読み取ってほしいのか」、そして「読み取ってほしくない情報」のふたつを伝えることができます。
参照：結局「robots.txt」ってなに？使う理由と基本の仕組みを解説
スニペットとは
Webページの要約文のこと。
description メタタグのメリット
description メタタグは Google にページのスニペットとして使用される可能性があるため重要です。「可能性がある」と述べたのは、ユーザーのクエリに適合しやすい場合は、ページに表示されるテキストの関連部分が使用されることもあるからです。Google がスニペットに使用するのに適したテキストを検出できない場合に備えて、各ページに description メタタグを追加することをおすすめします。
<meta name="description=" content="サイト要約文（description）">
description メタタグが検索結果のスニペットとして表示された場合に、ユーザーに情報を提供し興味を引くような説明を記述します。description メタタグのテキストには文字数の上限や下限はありませんが、検索結果で説明が完全に表示される程度の長さにすることをおすすめします。
リッチリザルトとは
リッチリザルトとは、Googleの通常の青色リンクとURL、スニペットで構成される通常の検索結果とは異なり、結果を表示する位置や形式をさまざまに変化させたものです。
参照サイト：リッチリザルトの種類と検索結果表示させるための方法
RSS フィード
RSS フィードは、ブログやオンライン マガジンなど、お気に入りの Web サイトの最新情報を常に入手できる簡単な方法です。 サイトが RSS フィードを提供していれば、投稿があると通知が届き、投稿の概要または投稿全文を読むことができます。
インタラクションとは
インタラクションとは英語の「 inter（相互に）」と「action（作用）」を合成したもので、その基本は「人間が何かアクション(操作や行動)をした時、そのアクションが一方通行にならず、相手側のシステムなり機器がそのアクションに対応したリアクションをする」
addEventListener()とは/querySelector()とquerySelectorAll()とは/forEach()とは/DOMとは/currentTargetとは/mouseoverできなかった時のメモ
javascriptでページに変化をつける
addEventListener()とは
一言でいうと、addEventListener()はJavaScriptからイベント処理を実行することができるメソッドです。
addEventListener()の構文について一般的には、イベントの「種類」と処理を実行するための「関数」を指定することになります。
document.addEventListener( 種類, 関数, false ) ※「document」は、documentオブジェクトと呼ばれ、Chrome等のブラウザ上で表示されたドキュメントを操作する事ができます。
第1引数にイベントの種類を指定することで、このイベントがどのようなケースに対応するのかを特定します。
第2引数に関数を指定することで、任意のイベントが発生した時に関数内に書かれた処理を実行できる。
第3引数は、イベント伝搬の方式を「true / false」で指定するのですが通常はfalseを指定しておきましょう。
【JavaScript入門】addEventListener()によるイベント処理の使い方！
querySelector()とquerySelectorAll()とは
querySelector()は、JavaScriptから任意のHTML要素を検出・取得することができるメソッドになります。
querySelectorAll()は指定した全てのHTML要素を検出してくれます。querySelectorは一つの要素しか取得できませんが、Allがつくと全ての要素を配列で取得してくれます。
例えば、view側でリスト形式で表示している物に対して、querySelector()で<li>を指定した場合、初めの一つまでしか検出されませんが、querySelectorAll()で指定した場合、<li>の全てを検出してくれると言うわけです。
【参照サイト】
【JavaScript入門】querySelector()によるHTML要素の取得方法まとめ！
JavaScript:簡単！便利なセレクタ querySelector と querySelectorAll の使い方
forEach()とは
rubyのeachメソッドの様な配列を処理する繰り返しのメソッドで下記の様な使い方をします。
var items = [ 'バナナ', 'リンゴ', 'メロン', 'ブドウ' ];
items.forEach(function( value ) {
console.log( value );
});
通常のjavascriptのループ文は下記ですが、forEachを使うことでとてもスッキリ書けています。
var array = [1,2,3,4,5];
for( var i=0; i<array.length; i++) {
console.log( array[i] );
}
参照：【JavaScript入門】forEach文の使い方と配列の繰り返し処理まとめ！
DOMとは
DOMとは「Document Object Model」の略だ。直訳すると、「ドキュメントを物として扱うモデル」になる。プログラムからHTMLやXMLを自由に操作するための仕組みだ。
DOMは以下のような特徴をもっている。
- ツリー構造とも呼ばれる階層構造を取る
- それぞれノードという言葉で説明される
- WEBページとJavaScriptなどのプログラミング言語とを繋ぐ
参照：JavaScript初心者でもすぐわかる！DOMとは何か？
currentTargetとは
イベントは DOM を横断するので、イベントの現在のターゲットを識別します。イベントが発生した要素を特定する event.target とは対照的に、常にイベントハンドラがアタッチされた要素を参照します。
参照サイト
event.currentTargetとevent.targetの違い
