Event.currentTargetプロパティとEvent.targetプロパティの違い イベントハンドラやイベントリスナーを登録したあと、イベントが発生すると登録したコールバック関数が呼び出されます。この時、一番目の引数に発生したイベントの情報が格納された Event オブジェクトが渡されてきます。 <input type="button" value="button" id="xxx"> <script> function butotnClick(event){ console.log('Hello'); } let button = document.getElementById('xxx'); button.addEventListener('click', butotnClick); </script>

event.target と event.currentTargetは違う イベントが発生した時に、イベントリスナーでイベントオブジェクトを取得することができるが、このイベントリスナーの event.target と event.currentTarget は「異なる性質」を持つので注意したい。 確認：イベントリスナーとは イベントリスナーとは、イベントターゲット(HTMLの各種要素=ノード等)に対して、イベント(clickやhover)が発生した際に実行する「関数、もしくはオブジェクト」を関連付ける仕組みのこと。具体的には、あるdivがマウスオーバーされた時に特定の関数を実行する、といった機能を実装する際に使われる。 //ES6です 'use strict'; class AddHover { constructor(target) { this.target = target; thi

CanCan を使うとユーザモデルが各リソースに対してアクセスする際の CRUD 権限を付与できるが、 ユーザモデルが複数になった場合、それぞれに異なった権限を設定したくなるかと思います。 例 User モデルと Admin モデルがそれぞれ以下のような役割を持つ ■User ・一般ユーザには各リソースに対して参照権限と修正権限を付与 ・特別なユーザには各リソースに対して作成権限、参照権限、修正権限、削除権限の全てを付与 ■Admin ・カスタマーサポートには各リソースに対して参照権限を付与 ・サービス管理者には各リソースに対して参照権限、修正権限、削除権限を付与 このような場合は、Ability クラスを複数に分けて権限を設定すると、幸せになれます。 モデルを作成して役割を与える 今回はユーザモデルの作成に devise を使用し、役割の判別は Rails 4.1 より追加された enu

先に結論・感想 私は主にRuby on Railsのフレームワークを使用するので、Railsを使うための環境構築メインです。 (Slackとか周辺アプリもついでにインストールしているけど。。。) 個人用で利用予定のMacとして購入しました。 個人で開発・普段使いする範囲では今のところ問題ないかなという印象です。 ただDockerはまだ利用できない状況なので、実務ではまだM1チップのMacは使わない方がいいかな〜という感じかな。 Dockerさん頑張っているっぽいので、もう少しの辛抱かと思われますが https://www.docker.com/blog/apple-silicon-m1-chips-and-docker/ Dockerプレビュー版は公開されたらしいです。(2021.1.17現在) まだプレビュー版のため正式版はまだのようです。 https://matsuand.github

ソースコードを git で管理しているとき、差分を確認するには VSCode 上で GitLens 拡張機能を使うと便利です。 VSCode に GitLens 拡張機能を追加する 環境 Visual Studio Code バージョン: 1.62.3 GitLens バージョン: 11.7.0 インストール手順 クリックして「拡張機能」を選択 “gitlens” で検索 「インストール」をクリック コミットの変更を表示する 「axios」を例にするので、ローカルにクローンしました。 「ソース管理」をクリック 「COMMITS」を開く コミットを開くと変更したファイルが分かるので、見たいファイルを選択 で確認することができます。 コミット間の差分を表示する 比較元のコミットを右クリックしてメニューから選択すれば OK です。 Compare with HEAD → HEAD と比較 Com

お久しぶりです。 M1 Macにしてからたくさんエラー出てゲンナリしてるのですぐ見返せるようにメモしておきます。 エラー ruby 3.0.2 を入れたとき $ rbenv install 3.0.2 Downloading openssl-1.1.1l.tar.gz... -> https://dqw8nmjcqpjn7.cloudfront.net/0b7a3e5e59c34827fe0c3a74b7ec8baef302b98fa80088d7f9153aa16fa76bd1 Installing openssl-1.1.1l... Installed openssl-1.1.1l to /Users/***/.anyenv/envs/rbenv/versions/3.0.2 Downloading ruby-3.0.2.tar.gz... -> https://cache.ruby-

Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up

環境 date: 2021/04/26 (事象が起きたのは2月後半ですが、本記事執筆日に再現することを確認) heroku cli: 7.52.0 docker desktop: 3.3.1 (63152) docker engine: 20.10.5 build 55c4c88 先に結論 自分の場合は、armアーキテクチャ向けのDocker ImageをBuild/Pushしていたため、失敗していました。(Heroku側がx86なのでしょう、多分) x86アーキテクチャ向けのDocker ImageをBuild/Pushすることで、正常に動作するようになりました。 方法は後述します。 はじめに 友人たちとオンラインでボードゲームをしている時に使うツールの開発[1]で、バックエンドをHerokuにしようとしていました。[2] Herokuを使うのは約4年ぶりだったのですが、知らない間にDo

プログラミング勉強日記 2021年2月12日 Herokuコマンドを使ってアプリを削除する方法 Herokuアプリとリモートリポジトリの設定を全て削除する。

Rubocop の構文チェックで "Avoid the use of Perl-style backrefs." と警告が表示されるRuby 正規表現を使用してマッチした部分文字列を返す際に、$1, $2 などを使用すると、Rubocop を使用して構文チェックした場合にデフォルトでは、Avoid the use of Perl-style backrefs. と警告が表示される。 どうも Rubocop は 部分文字列の取得は Regexp.last_match[n] の使用を推奨しているみたいです。 デフォルトの設定ファイルを確認すると、 https://github.com/bbatsov/rubocop/blob/9b7c8b410d2c7711a91915e6bf251e0bae4c04a2/config/enabled.yml#L452 Style/PerlBackrefs:

この記事の要約:autofill – CSS: カスケーディングスタイルシート | MDNchrome のフォーム自動入力で背景色が黄色なのを変更 | Remember The Time Google Chromeでinput要素をクリックすると、補完候補が表示されます。 そしてこれをクリックすると、背景色がついた状態で候補が入力されます（Google Chromeのバージョンによるのか分かりませんが、「白色」だったり「青色」「黄色」のときなど背景色は様々です）。 白色の場合はまだ気になりませんが、「青色」や「黄色」だと気になります。 発生条件これはGoogle Chromeに限らずですが、ブラウザでは<input>のname属性と入力した情報（value属性）を保存しているようです。 そして、他サイトも含めて、同じname属性の<input>をクリックしてフォーカスしたときに候補が表示さ

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

Dockerのバージョンアップに伴い、docker-compose.ymlを一部編集しました。 （2021/3/19 18:10 追記） Dockerを初めて勉強するとき、多くの方が「参考書」や「入門Dockerなどのサイト」で基礎的なところから学習すると思います。 しかし、Dockerとは何なのか、何のイメージも沸いていない状態で、様々な単語を羅列されても、さっぱりわからないという方も多いと思います。( 少なくとも私はそうでした。) なので極論、基礎すっ飛ばしてまず実際にDockerで仮想環境を構築しながら学んでいこうという話です。 そして何となくでいいのでイメージを掴んでから、基礎を学べば良いと思います。 Dockerを初めて学習する方の中で、Ruby on Railsで開発したアプリケーションをポートフォリオとしている方も多いのではないでしょうか。 なので今回は、Dockerを用いて

simple_formとは？ 入力フォームを簡単に作れるgemのこと。 Railsでフォームを作成するにはform_withやform_forを使えば実装できますが、simple_formというものを使えばより簡単にフォームを作成することができます。

数年前に挫折したReactを、じゃけぇ本（モダンJavaScriptの基本から始める　React実践の教科書）を参考にリベンジ（再学習）しているときに色々とハマったことがあったので、参考までに共有させていただきます。 まだ途中までしか読んでいないので、今後ハマり次第順次追記をしていきます。 環境 ・Windows 10 ・Node.js v12.16.3 4-1 React開発の始め方 Create React App時のエラー P93記載のReactプロジェクト開始のためのコマンド（npx create-react-app my-app）実行時に、以下エラーが発生。「global installationは対応してないから、以下のコマンド実行して」という内容。 ※global installationはちょっと調べててみたけどよくわからず。どなたか詳しい方教えてください。 （解決策） 画

はじめに みなさんこんにちは！ この記事は「必要最小限の努力で最大限実戦で使える知識を提供するRSpec入門記事」、略して「使えるRSpec入門」の第4回です。 今回はCapybaraを使ったフィーチャスペックについて説明します。 ただし、今までの記事とは異なり、フィーチャスペックのイロハよりも「Capybaraの使い方」に重点を置きます。 なぜなら、僕個人の経験からいって、フィーチャスペックで困るのは「このブラウザの操作って、どうやってコードで表現するの？？」というケースが大半だからです。 それ以外は第1回～第3回の内容をそのまま応用できるので、特に「フィーチャスペックだから困る」ということはないと思います。 今回は説明する主な項目は以下の通りです。 フィーチャスペックの基本 ページの移動や画面のクリック、フォームの操作など 画面やフォームの検証 画面の操作や検証の応用テクニック その他

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