JavaScript関連のことを調べてみた2021年08月15日 │ f@ctor

1. JavaScriptを基本からまとめてみた【11】【onchangeイベント】
2. 【JavaScript】海外Teck系YouTuberを真似てみた！(part 5) Typing Game
3. Selenium（JavaScript環境）のtakeScreenshotでエラーが出たときの対応
4. JavaScript: 画像から色を抽出してくれるColor Thief
5. JavaScriptで個人的によく使う操作
6. nuxtjsにfabricjsを導入するときの手順
7. web会議が終わったらお礼メール自動作成　PADで業務をスリムに !
8. これだけはおさえておきたいTypeScriptの機能
9. 文字コードを指定してハッシュ値を算出する（Node.js）
10. 【React / Next.js】環境変数を呼び出せなくてハマった
11. 【Handsontable】セル内HTML要素の表示(Nested HTML)の実現
12. 【初心者向け】６時間で完成。Vue.jsを学び始めて４か月の成果として、子どもの勉強復習用アプリを作ってみた。
13. 【Webpack】webpack.config.jsの内容がいまいちわからない方々へ
14. React Hooksを理解し、無限ループを防ぐ
15. 連想配列に関数を保存して呼び出す
16. #つぶやきProcessing で気になった作品を p5.js Web Editor で動かしてみる【その2】
17. JavaScriptを基本からまとめてみた【10】【classList.addメソッド】
18. JavaScript　配列　オブジェクト
19. D3jsのselectionとdata joinを実験する
20. React.js&Next.js超入門第2版の無限ループのバグ修正

JavaScriptを基本からまとめてみた【11】【onchangeイベント】

##はじめに

####学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##JavaScriptのonchangeイベントとは
『onchangeイベント』とは、入力欄の内容を変更した時のイベント。JavaScriptでプログラミングを行っていると、ユーザーの入力に合わせて動的に表示内容を変えたい場合に便利なのがonchangeイベントで、HTML要素の値の変更が完了した時に発生するイベント。

対象のHTML要素はとで、値の変更が完了したタイミングは、 <input> と <textarea> は入力が完了して他の要素にフォーカスが移動した時、<select> は選択値が変わった時になる。</p> <p>##onchangeイベントの書き方 </p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>初心者</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/kanfutrooper/items/809b17b9a3c55d671b53'>元記事を表示</a></div> <h3 id="outline__2"><a href='https://qiita.com/iwasaki-hub/items/d1d12352dd878913eba0'>【JavaScript】海外Teck系YouTuberを真似てみた！(part 5) Typing Game</a></h3> <blockquote><p><img decoding="async" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/7533369e-2ef6-9b36-2243-819d852dc5dc.png?test=1&y=n" width="300"></p> <p>#１，はじめに<br /> この記事は、海外Teck系YouTuberの動画を参考に、同じプロジェクトを作成してみたものになります！<br /> 簡単にですが、動画を通して学べた技術や知識をまとめました！</p> <p>今回の完成品は、下記に載せています:bangbang:</p> <p>#２，学んだこと<br /> **async await**の記述方法<br /> **fetch**の記述方法</p> <p>#３，参考動画<br /> <iframe width="300" height="300" src="https://www.youtube.com/embed/R-7eQIHRszQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>async</div> <div class='tag-cloud-link'>fetch</div> <div class='tag-cloud-link'>await</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/iwasaki-hub/items/d1d12352dd878913eba0'>元記事を表示</a></div> <h3 id="outline__3"><a href='https://qiita.com/zaburo/items/e2d16302e1ffbce84055'>Selenium（JavaScript環境）のtakeScreenshotでエラーが出たときの対応</a></h3> <blockquote><p> JavaScript環境でScreenshot撮ろうと思ったらエラーが出たので対応メモ。</p> <p>### 場所の準備</p> <p>“`<br /> cd<br /> mkdir ss_test<br /> cd ss_test</p> <p>npm install selenium-webdriver chromedriver dayjs<br /> “`</p> <p>>dayjsはおまけ。</p> <p>### 実装</p> <p>“`js<br /> const { Builder, By } = require(“selenium-webdriver”);<br /> require(“chromedriver”);<br /> const fs = require(“fs”);<br /> const dayjs = require(“dayjs”);</p> <p>(async()=>{<br /> const driver = await new Builder().forBrowser(“chrome”).build();<br /> await driver.get(“http://www.yahoo.co.jp”);<br /> const img = await driver.takeScreenshot();<br /> const fi</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>Selenium</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/zaburo/items/e2d16302e1ffbce84055'>元記事を表示</a></div> <h3 id="outline__4"><a href='https://qiita.com/e99h2121/items/9c23824c9330bae00305'>JavaScript: 画像から色を抽出してくれるColor Thief</a></h3> <blockquote><p>[10 Trending projects on GitHub for web developers – 13th August 2021](https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-13th-august-2021-4bf2) で紹介されていた Color Thief というもの。</p> <p>https://lokeshdhakar.com/projects/color-thief/#examples</p> <p>https://github.com/lokesh/color-thief</p> <p>「例」引用:<br /> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/6e985eb5-208e-b8b0-7432-396c3d40d91f.png)</p> <p>## 画像から色を抽出してくれる Color Thief</p> <p>![image.png](https://qiita-image-store.s3</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>Node.js</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/e99h2121/items/9c23824c9330bae00305'>元記事を表示</a></div> <h3 id="outline__5"><a href='https://qiita.com/dainabeblog/items/6273403c42cf20be5e00'>JavaScriptで個人的によく使う操作</a></h3> <blockquote><p>## URLを操作<br /> ### URL各要素取得</p> <p>“` JS<br /> let url = new URL(location);</p> <p>let href = location.href;<br /> let host = location.hostname;<br /> let port = location.port;<br /> let path = location.pathname;<br /> let query = location.search;<br /> let protocol = location.protocol;<br /> “`</p> <p>###ブラウザー履歴エントリに state, title, url をセット<br /> 画面に更新をかけたくはない。<br /> けどURLを更新したいというときに使ってます。</p> <p>“` JS<br /> const url = new URL(window.location);<br /> url.searchParams.set(‘foo’, ‘bar’);<br /> window.history.pushState({}, ”, url);<br /> “`</p> <p>### 参照</p> <p>https://developer.mozilla.org/ja/docs/Web/API</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/dainabeblog/items/6273403c42cf20be5e00'>元記事を表示</a></div> <h3 id="outline__6"><a href='https://qiita.com/greenteabiscuit/items/52bc842b686362314123'>nuxtjsにfabricjsを導入するときの手順</a></h3> <blockquote><p>nuxtjsにfabricjsを導入するときの情報が少なかったのでそのメモです。</p> <p>## 必要な項目のインストール</p> <p>“`<br /> yarn add fabric<br /> yarn add canvas<br /> “`</p> <p>package.jsonとyarn.lockに追加される。</p> <p>plugin直下に`fabric.js`ファイルを作成。</p> <p>“`fabric.js<br /> import { fabric } from ‘fabric’<br /> import Vue from ‘vue’</p> <p>Vue.use(fabric)<br /> export default fabric<br /> “`</p> <p>nuxt.config.jsに情報を追加</p> <p>“`nuxt.config.js<br /> // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins<br /> plugins: [<br /> {<br /> src: ‘@/plugins/fabric’,<br /> mode: ‘client’<br /> }<br /> ],<br /> “`</p> <p>## 実際のコード</p> <p>これは赤い四角形を表</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>canvas</div> <div class='tag-cloud-link'>fabric</div> <div class='tag-cloud-link'>Vue.js</div> <div class='tag-cloud-link'>nuxt.js</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/greenteabiscuit/items/52bc842b686362314123'>元記事を表示</a></div> <h3 id="outline__7"><a href='https://qiita.com/okinakamasayoshi/items/90c9b2d9b2a9d7568117'>web会議が終わったらお礼メール自動作成　PADで業務をスリムに !</a></h3> <blockquote><p>## メール作成の時間を圧縮したい!<br /> 　web会議、本当に多くなりましたよね。手軽に実施できる反面、日程調整でメール数往復。<br /> 　スケジューリングが大変だった会議ほど、終了後、毎回やっぱりメールでお礼を伝えたい。<br /> 　<font color="Red">**「web会議が終わり次第お礼メール作成」自動化できないかなぁ**</font></p> <p>## 「会議終わり次第　お礼メール自動作成」作ってみた</p> <p>　Power Automate Desktopで作成　(今回はTeamsでのweb会議に限定)<br /> 　<iframe width="560" height="315" src="https://www.youtube.com/embed/6qKL_DMR2RY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p> <p>　<fo</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>zoom</div> <div class='tag-cloud-link'>RPA</div> <div class='tag-cloud-link'>Teams</div> <div class='tag-cloud-link'>PowerAutomateDesktop</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/okinakamasayoshi/items/90c9b2d9b2a9d7568117'>元記事を表示</a></div> <h3 id="outline__8"><a href='https://qiita.com/Nakazawa-musc/items/171468674a735cd1840d'>これだけはおさえておきたいTypeScriptの機能</a></h3> <blockquote><p> 参考サイト：[これだけはおさえておきたいTypeScriptの機能](https://book.yyts.org/features)</p> <p>※体系的に学べるというよりも、実際の開発で頻繁に使用するもの、これだけはおさえておきたい機能を中心に取り上げる。<br /> [1.プリミティブ型] (https://qiita.com/Nakazawa-musc/items/171468674a735cd1840d#1%E3%83%97%E3%83%AA%E3%83%9F%E3%83%86%E3%82%A3%E3%83%96%E5%9E%8B)<br /> [2.リテラル型](https://qiita.com/Nakazawa-musc/items/171468674a735cd1840d#2%E3%83%AA%E3%83%86%E3%83%A9%E3%83%AB%E5%9E%8B)<br /> [3.anyとunknown](https://qiita.com/Nakazawa-musc/items/171468674a735cd1840d#3any%E3%81%A8unknown)<br /> [4.構造的部分型 (Structur</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>TypeScript</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/Nakazawa-musc/items/171468674a735cd1840d'>元記事を表示</a></div> <h3 id="outline__9"><a href='https://qiita.com/fukuchi0527/items/8b9df51a455e1d879cc3'>文字コードを指定してハッシュ値を算出する（Node.js）</a></h3> <blockquote><p># Node.jsでハッシュ値を算出する<br /> これは、私が業務でとあるAPIのリクエストを作成していた時のことです。</p> <p>そのAPIは、ある文字列からハッシュ値を算出して、<br /> そのハッシュ値が一致するかどうかで認証を行っていたんです。</p> <p>だから以下のようなコードからハッシュ値を算出して、リクエストを投げて、<br /> レスポンスを取得できていました。</p> <p>“`js<br /> const crypto = require(‘crypto’);</p> <p>const data = ‘abcdefg’;<br /> // ハッシュ値を算出（md5）<br /> const hash = crypto.createHash(‘md5’).update(data).digest(‘hex’);</p> <p>console.log(hash); // 7ac66c0f148de9519b8bd264312c4d64<br /> “`<br /> ビルトインモジュールの`crypto`を使うだけでハッシュ値を算出できるなんて、手軽でいいなあと思っていました。<br /> 何も問題は無かったんです。</p> <p>ハッシュ値を算出する文字列に、**マルチバイト文字**が含まれるまでは…。</p> <p>## hash.up</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>Node.js</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/fukuchi0527/items/8b9df51a455e1d879cc3'>元記事を表示</a></div> <h3 id="outline__10"><a href='https://qiita.com/tkmd35/items/1cb68eb41229cbd99492'>【React / Next.js】環境変数を呼び出せなくてハマった</a></h3> <blockquote><p># はじめに<br /> 普通の“React“と“Next.js“で環境変数の設定方法が異なることを知らず、“APIキー“を呼び出せずハマってしまった。</p> <p>かなり初歩的です。</p> <p># .env ファイルで定義<br /> まず、プロジェクトのルートディレクトリに“.env“ファイルを作成する。<br /> （“.gitignore“に記述して“git“管理外にしておく）</p> <p>“APIKEY“を設定する例としてます。</p> <p>### React の場合<br /> 環境変数定義の際、変数名の最初に“REACT_APP_“をつける</p> <p>“`..env<br /> REACT_APP_APIKEY=”xxxxxxxxxxxxxxxxxxxxxxx”<br /> “`</p> <p>### Next.js の場合<br /> 環境変数定義の際、変数名の最初に“NEXT_PUBLIC_“をつける</p> <p>“`..env<br /> NEXT_PUBLIC_APIKEY=”xxxxxxxxxxxxxxxxxxxxxxx”<br /> “`</p> <p># js（もしくはts）ファイルで呼び出す</p> <p>“React“の場合でも“Next.js“の場合でも“process.env.環境変数名“で</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>環境変数</div> <div class='tag-cloud-link'>React</div> <div class='tag-cloud-link'>next.js</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/tkmd35/items/1cb68eb41229cbd99492'>元記事を表示</a></div> <h3 id="outline__11"><a href='https://qiita.com/yaju/items/49b4197ccbe2de345d7b'>【Handsontable】セル内HTML要素の表示(Nested HTML)の実現</a></h3> <blockquote><p># はじめに<br /> 前記事で、セル内にグリッド表示を行いました。</p> <p>https://qiita.com/yaju/items/6856553510bca3ae913a</p> <p>参考にしたグレープシティ社のWijmo（ウィジモ）のグリッド：詳細行のページに「グリッドを表示」とは別に「HTML要素を表示」というのがあり、これなら前記事を応用すればすぐ出来そうだと思ったので作成してみました。</p> <p>https://demo.grapecity.com/wijmo/demos/Grid/Master-Detail/NestedGrids(RowDetail)/purejs</p> <p>Handsontableでは、セル内にHTML要素を表示させるのは図の表示やリンク先などで一般的に使用可能です。<br /> あくまで列ごとに表示形式を設定しています。</p> <p>https://handsontable.com/docs/cell-renderer/#rendering-custom-html-in-cells</p> <p>今回のは、階層で展開した行のセル内にHTML要素を表示するという違いがあります。</p> <p># 環境<br /> HandsontableはMITラ</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>Webアプリケーション</div> <div class='tag-cloud-link'>Handsontable</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/yaju/items/49b4197ccbe2de345d7b'>元記事を表示</a></div> <h3 id="outline__12"><a href='https://qiita.com/sgk-switch/items/fd75c0c84ddf2df8f6da'>【初心者向け】６時間で完成。Vue.jsを学び始めて４か月の成果として、子どもの勉強復習用アプリを作ってみた。</a></h3> <blockquote><p># はじめに　　<br /> 2021年6月からメンターさんに伴走してもらいながらVue.jsを学習しています。その前１～２か月ほどは独学で学習を進めていましたので、現時点で学習期間としてはだいたい４か月ちょっとです。<br /> 学習内容のアウトプットとして、簡単でもいいので何か自分でアプリを作ろうと思い、子どもが勉強の復習をするときに使えそうなアプリを作ってみました。</p> <p>## アプリの概要<br /> https://sgk-switch.github.io/vuesample1/ </p> <p>* 「問題一覧」で復習したい問題を入力します。（科目を追加したい場合は「科目一覧」から追加します）<br /> * 科目と問題数を選択し、STARTをクリックすると、登録されている問題からランダムに出題されます。（テストなどで間違えた問題を登録する→解きなおす、みたいなイメージです）</p> <p>![qiita-min.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1840063/dd2c4b5e-ebbb-430f-0244-b7c76e045aca.gif)</p> </blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>初心者向け</div> <div class='tag-cloud-link'>Vue.js</div> <div class='tag-cloud-link'>Vuex</div> <div class='tag-cloud-link'>Vuetify</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/sgk-switch/items/fd75c0c84ddf2df8f6da'>元記事を表示</a></div> <h3 id="outline__13"><a href='https://qiita.com/suzuki0430/items/ebc2ab53a6456b3372ec'>【Webpack】webpack.config.jsの内容がいまいちわからない方々へ</a></h3> <blockquote><p>#はじめに<br /> Webpackは、JavaScript, CSS, JPGなどのリソースを一つのjsファイルにバンドルする(まとめる)ツールです。<br /> バンドルすることで、各リソースの依存関係を気にする必要がなくなり、不適切な順序でファイルが実行されるような心配がなくなります。</p> <p>モダンなJS開発でほぼ必須のWebpackですが、設定ファイル`webpack.config.js`の中身についていまいちよくわかっていませんでした。<br /> 設定ファイルを自由にカスタムできるようになれば開発の幅も広がる気がしたので、以下の基本項目について学びなおしました。</p> <p>– Entry & Output<br /> – Asset Modules<br /> – Loaders<br /> – Plugins<br /> – Mode</p> <p>#Entry & Output<br /> バンドル設定の手始めとして、`entry`に入力ファイルのエントリーポイント、`output`にバンドル後の出力ファイル名`filename`と作成パス`path`を指定してあげる必要があります。<br /> 作成パスは絶対パスで記述する必要があるため、Node.jsの`path`モジュールを使い、`path.</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>初心者向け</div> <div class='tag-cloud-link'>webpack</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/suzuki0430/items/ebc2ab53a6456b3372ec'>元記事を表示</a></div> <h3 id="outline__14"><a href='https://qiita.com/SolKul/items/1cb6a4b9febde4a094e8'>React Hooksを理解し、無限ループを防ぐ</a></h3> <blockquote><p>ReactのHooksについて、ステートフックの更新、関数コンポーネントがいつ再実行されるかや副作用フックがいつ呼び出されるかについて、調べてもシンプルに情報がまとまって出てこなかったのでメモします。</p> <p>私はこの辺について理解していなかったために、ステートの更新で無限ループが発生し対処に苦しみました。</p> <p># 前提<br /> 以下のコードは`npx start creat-react-app プロジェクト名`で生成される`プロジェクト名/src`ディレクトリ内の`App.js`を編集してデバッグしていることを前提にしています。</p> <p># ステートフックの基本</p> <p>`useState`で設定したステートの値を更新すると、再レンダリング、つまり関数コンポーネントが再実行されます。下記コードでは`data`には初期値として文字列`foo`が設定されていましたが、ボタンをクリックすると、`bar`に変更されるので、コンポーネントが再実行されます。そしてそれ以降ボタンを押しても、ステートが更新されないので、これ以上再実行されることはありません。</p> <p>“`App.js<br /> import {useState} from </p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>hooks</div> <div class='tag-cloud-link'>フロントエンド</div> <div class='tag-cloud-link'>React</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/SolKul/items/1cb6a4b9febde4a094e8'>元記事を表示</a></div> <h3 id="outline__15"><a href='https://qiita.com/sarustar/items/9749401c6d4a367304dc'>連想配列に関数を保存して呼び出す</a></h3> <blockquote><p>キーボードショートカットを実装していて、関数を連想配列に保存して管理したくなった。</p> <p>#ダメな例<br /> 連想配列にそのまま関数を保存すると、読み込み時に実行されてしまう。</p> <p>“`javascript:dame.js<br /> const sc = {<br /> s:save(),<br /> l:load()<br /> };<br /> sc[‘s’]; //save()を呼び出したいけど失敗<br /> “`<br /> #成功例</p> <p>“`javascript:ok.js<br /> const sc = {<br /> s:function(){save()},<br /> l:function(){load()}<br /> };<br /> sc[‘s’](); //save()が実行される<br /> “`</p> <p>#ショートカット実装時のtips</p> <p>“`javascript:shortcut.js<br /> $(function(){<br /> const sc = {<br /> s:function(){save()},<br /> l:function(){load()}<br /> };<br /> $(document).on(‘keydown’,function(e){<br /> if(e.ctrlKey){ //コントロールキー押下判断<br /> var key=</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>jQuery</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/sarustar/items/9749401c6d4a367304dc'>元記事を表示</a></div> <h3 id="outline__16"><a href='https://qiita.com/youtoy/items/ac2f953d9a0ced3b881a'>#つぶやきProcessing で気になった作品を p5.js Web Editor で動かしてみる【その2】</a></h3> <blockquote><p>以前、以下のようなことをやりましたが、その第二弾です。</p> <p>●#つぶやきProcessing で気になった作品を p5.js Web Editor で動かそうとしてみる【 #GWアドベントカレンダー 2021/5/2 】 – Qiita<br /> 　https://qiita.com/youtoy/items/0806ba53db59261da3f8</p> <p>今回、動かすだけなら Processing用の処理を書いていたもの以外は何も書きかえる必要がなかったので、プログラムを短く書くために工夫された箇所をばらすような形で書きかえをしてみたのですが、 #つぶやきProcessing用の記法を知ることができました。</p> <p>## つぶやきProcessing で見かけた作品<br /> 今回、p5.js　で実装してみるものは、以下の5つです。</p> <p>### 1つ目</p> <blockquote class="twitter-tweet"> <p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/%E3%81%A4%E3%81%B6%E3%82%84%E3%81%8DProc</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>processing</div> <div class='tag-cloud-link'>p5.js</div> <div class='tag-cloud-link'>つぶやきProcessing</div> <div class='tag-cloud-link'>p5.jsWebEditor</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/youtoy/items/ac2f953d9a0ced3b881a'>元記事を表示</a></div> <h3 id="outline__17"><a href='https://qiita.com/kanfutrooper/items/32aab2b6d121b9f63b9a'>JavaScriptを基本からまとめてみた【10】【classList.addメソッド】</a></h3> <blockquote><p>##はじめに</p> <p>####学習するに至った経緯</p> <p>2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。<br /> 入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、<br /> 卒業後、フロントエンドのエンジニアを目指す事に。<br /> Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。</p> <p>##classListとは<br /> 『classList』とは特定の要素のクラス名を追加したり、削除したり、参照したりすることが出来る便利なプロパティで、classListの後にメソッドを定義することにより、追加削除などの機能を指定することができる。</p> <p>#####classListに用意されているメソッド</p> <p>|メソッド名 |機能 |<br /> |——–|——|<br /> |add |クラスを追加する |<br /> |remove |クラスを削除する |<br /> |contains |クラスが含まれているか確認する |<br /> |toggle |クラスが含まれていれば削除、含まれていなければ追加する |</p> <p>##addメソッドとは</p> <p>『a</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>初心者</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/kanfutrooper/items/32aab2b6d121b9f63b9a'>元記事を表示</a></div> <h3 id="outline__18"><a href='https://qiita.com/yuka-f/items/33db4e3bcae78570627c'>JavaScript　配列　オブジェクト</a></h3> <blockquote><p>JavaScriptの学習の備忘録と振り返りの記事です。<br /> 何かの参考になれば幸いです。<br /> 付け足しや訂正などある場合ご教授いただけると<br /> 大変嬉しく思います！！</p> <p>#配列とは<br /> 複数の値(要素)をまとめて管理するときに用いるもの<br /> **書き方**<br /> [値１,値２,値３]</p> <p>**代入の仕方**<br /> const 定数名 = [“値１”,”値２”,”値３”];</p> <p>“`js<br /> const favorite = [movie,interior,art];<br /> “`</p> <p>**要素の取得の仕方**<br /> console.log(配列名[インデックス番号]);</p> <p>“`js<br /> console.log(favorite[movie]);<br /> “`<br /> :::note warn<br /> インデックス番号は「０」から数える<br /> :::</p> <p>**値の更新の仕方**<br /> 配列名[インデックス番号]　= 新しい値;</p> <p>“`js<br /> favorite[1] = “shopping”;<br /> “`</p> <p>##オブジェクトとは<br /> オブジェクトは配列と同じく複数のデータをまとめて管理するのに用います。<br /> それぞれの値にプロパティと呼ばれる名前をつけて管理します。<br /> **書き方**<br /> {</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>配列</div> <div class='tag-cloud-link'>オブジェクト</div> <div class='tag-cloud-link'>初学者</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/yuka-f/items/33db4e3bcae78570627c'>元記事を表示</a></div> <h3 id="outline__19"><a href='https://qiita.com/ken-miyashita/items/a2aa78415c21a816ee2d'>D3jsのselectionとdata joinを実験する</a></h3> <blockquote><p># 概要<br /> SVGを表示するために [D3js](https://d3js.org/) を利用したいのだが、JSコード上で動的に操作するデータに対応するSVGツリーの構築方法が特徴的だったので実験してみた。</p> <p>JS 上でデータ配列を操作したときに、データ配列の各要素に対応する DOM element を追加、更新、削除する。（最終的には SVG の要素の操作が目的だが、ここではシンプルに HTML DOM 要素を用いて実験した）</p> <p>実験内容は、[Codepen](https://codepen.io/ken_miyashita/pen/xxdBBbb?editors=1001) で実行することができる。</p> <p># 構成<br /> – D3js (ver4)</p> <p># 既存 DOM element 集合を見つける： selectAll()</p> <p>参照： [D3.js – selections](https://www.tutorialspoint.com/d3js/d3js_selections.htm)</p> <p>これは jQuery と基本的には同じ考え方。`selectAll()` で指定した条件を満たす DOM</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>SVG</div> <div class='tag-cloud-link'>d3.js</div> <div class='tag-cloud-link'>Visualization</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/ken-miyashita/items/a2aa78415c21a816ee2d'>元記事を表示</a></div> <h3 id="outline__20"><a href='https://qiita.com/SolKul/items/20e178a76b68af5c66bf'>React.js&Next.js超入門第2版の無限ループのバグ修正</a></h3> <blockquote><p>[掌田津耶乃　React.js&Next.js超入門第2版](https://www.shuwasystem.co.jp/book/9784798063980.html)で学習を進めていていますが、Chapter5の「fetch APIでJSONデータにアクセスする」のサンプルコードで無限ループが発生しブラウザがフリーズしたので、その点を修正するコードを掲載します。</p> <p>また、この本にはステートの更新とコンポーネントがいつ再実行されるかについての記述が不足していると思われるので、その点についても補足しています。</p> <p>またこの本にはChapter 4の最後の簡易メモにもバグがあるので次を参照してください。</p> <p>[React.js&Next.js超入門第2版の簡易メモのバグ修正](https://qiita.com/kmat/items/01addf420839cb1089bc)</p> <p>この記事で指摘されているように、Amazonレビューでもサンプルコードが動かないことが指摘されており、困っている方もいるかと思うので記しておきます。またこの記事同様、この方法が最良の方法とは限らないことをご了承く</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>React</div> <div class='tag-cloud-link'>frontend</div> <div class='tag-cloud-link'>next.js</div> <div class='tag-cloud-link'>useEffect</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/SolKul/items/20e178a76b68af5c66bf'>元記事を表示</a></div> </div> </section>  <aside> <ul class="socialList"> <li class="socialList__item"><a class="socialList__link icon-facebook" href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fmiofactor.com%2F2021%2F08%2F15%2Fpost-12024%2F&t=JavaScript%E9%96%A2%E9%80%A3%E3%81%AE%E3%81%93%E3%81%A8%E3%82%92%E8%AA%BF%E3%81%B9%E3%81%A6%E3%81%BF%E3%81%9F2021%E5%B9%B408%E6%9C%8815%E6%97%A5" target="_blank" title="Facebookで共有"></a></li><li class="socialList__item"><a class="socialList__link icon-twitter" href="http://twitter.com/intent/tweet?text=JavaScript%E9%96%A2%E9%80%A3%E3%81%AE%E3%81%93%E3%81%A8%E3%82%92%E8%AA%BF%E3%81%B9%E3%81%A6%E3%81%BF%E3%81%9F2021%E5%B9%B408%E6%9C%8815%E6%97%A5&https%3A%2F%2Fmiofactor.com%2F2021%2F08%2F15%2Fpost-12024%2F&url=https%3A%2F%2Fmiofactor.com%2F2021%2F08%2F15%2Fpost-12024%2F" target="_blank" title="Twitterで共有"></a></li><li class="socialList__item"><a class="socialList__link icon-line" href="http://line.naver.jp/R/msg/text/?JavaScript%E9%96%A2%E9%80%A3%E3%81%AE%E3%81%93%E3%81%A8%E3%82%92%E8%AA%BF%E3%81%B9%E3%81%A6%E3%81%BF%E3%81%9F2021%E5%B9%B408%E6%9C%8815%E6%97%A5%0D%0Ahttps%3A%2F%2Fmiofactor.com%2F2021%2F08%2F15%2Fpost-12024%2F" target="_blank" title="LINEで送る"></a></li></ul> </aside>   <aside class="widgetPost widgetPost-bottom"><aside class="widget widget-post"><h2 class="heading heading-primary">タグ</h2><div class="tagcloud"><a href="https://miofactor.com/tag/%e3%81%9d%e3%81%ae%e4%bb%96/" class="tag-cloud-link tag-link-13 tag-link-position-1" style="font-size: 8pt;" aria-label="その他 (1個の項目)">その他</a></div> </aside></aside>   <aside class="related"><h2 class="heading heading-primary">関連する記事</h2><ul class="related__list"> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2022/04/01/post-17892/" title="Python関連のことを調べてみた2022年04月01日"> <img src="https://miofactor.com/wp-content/uploads/2019/10/python-150x150.png" alt="Python関連のことを調べてみた2022年04月01日" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2022/04/01/post-17892/">Python関連のことを調べてみた2022年04月01日</a> <span class="icon-calendar">2022.04.01</span> </h3> <p class="related__contents">目次 1. ImageJ と cellpose を使って、細胞画像の輝度値を測定する。（４）2. Pythonanywhereのデプロイで　Modul[…]</p> </li> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2020/03/04/post-3145/" title="PHP関連のことを調べてみた2020年03月04日"> <img src="https://miofactor.com/wp-content/uploads/2019/10/php-150x150.png" alt="PHP関連のことを調べてみた2020年03月04日" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2020/03/04/post-3145/">PHP関連のことを調べてみた2020年03月04日</a> <span class="icon-calendar">2020.03.04</span> </h3> <p class="related__contents">目次 1. 【laravel】ErrorException file_put_contents(xxxxx): failed to open stre[…]</p> </li> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2020/05/09/post-4827/" title="Ruby関連のことを調べてみた2020年05月09日"> <img src="https://miofactor.com/wp-content/uploads/2019/10/ruby-150x150.png" alt="Ruby関連のことを調べてみた2020年05月09日" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2020/05/09/post-4827/">Ruby関連のことを調べてみた2020年05月09日</a> <span class="icon-calendar">2020.05.09</span> </h3> <p class="related__contents">目次 1. 【初心者向け】form_forヘルパーメソッド2. 浮動小数点数の非正規化数の存在意義と特徴3. Ruby と Perl と Java と[…]</p> </li> </ul></aside>      </main>   <div class="l-sidebar"> <aside class="widget"> <div class="searchBox"> <form class="searchBox__form" method="get" target="_top" action="https://miofactor.com/" > <input class="searchBox__input" type="text" maxlength="50" name="s" placeholder="記事検索"><button class="searchBox__submit icon-search" type="submit" value="search"> </button> </form> </div></aside><aside class="widget"><h2 class="heading heading-widget">Category</h2> <ul> <li class="cat-item cat-item-1"><a href="https://miofactor.com/category/other/">OTHER</a> </li> </ul> </aside><aside class="widget"><h2 class="heading heading-widget">Back number</h2> <ul> <li><a href='https://miofactor.com/2024/09/'>2024年9月</a></li> <li><a href='https://miofactor.com/2024/08/'>2024年8月</a></li> <li><a href='https://miofactor.com/2024/07/'>2024年7月</a></li> <li><a href='https://miofactor.com/2024/06/'>2024年6月</a></li> <li><a href='https://miofactor.com/2024/05/'>2024年5月</a></li> <li><a href='https://miofactor.com/2024/04/'>2024年4月</a></li> <li><a href='https://miofactor.com/2024/03/'>2024年3月</a></li> <li><a href='https://miofactor.com/2024/02/'>2024年2月</a></li> <li><a href='https://miofactor.com/2024/01/'>2024年1月</a></li> <li><a href='https://miofactor.com/2023/12/'>2023年12月</a></li> <li><a href='https://miofactor.com/2023/11/'>2023年11月</a></li> <li><a href='https://miofactor.com/2023/10/'>2023年10月</a></li> <li><a href='https://miofactor.com/2023/09/'>2023年9月</a></li> <li><a href='https://miofactor.com/2023/08/'>2023年8月</a></li> <li><a href='https://miofactor.com/2023/07/'>2023年7月</a></li> <li><a href='https://miofactor.com/2023/04/'>2023年4月</a></li> <li><a href='https://miofactor.com/2023/03/'>2023年3月</a></li> <li><a href='https://miofactor.com/2023/02/'>2023年2月</a></li> <li><a href='https://miofactor.com/2023/01/'>2023年1月</a></li> <li><a href='https://miofactor.com/2022/12/'>2022年12月</a></li> <li><a href='https://miofactor.com/2022/11/'>2022年11月</a></li> <li><a href='https://miofactor.com/2022/10/'>2022年10月</a></li> <li><a href='https://miofactor.com/2022/09/'>2022年9月</a></li> <li><a href='https://miofactor.com/2022/08/'>2022年8月</a></li> <li><a href='https://miofactor.com/2022/07/'>2022年7月</a></li> <li><a href='https://miofactor.com/2022/06/'>2022年6月</a></li> <li><a href='https://miofactor.com/2022/05/'>2022年5月</a></li> <li><a href='https://miofactor.com/2022/04/'>2022年4月</a></li> <li><a href='https://miofactor.com/2022/03/'>2022年3月</a></li> <li><a href='https://miofactor.com/2022/02/'>2022年2月</a></li> <li><a href='https://miofactor.com/2022/01/'>2022年1月</a></li> <li><a href='https://miofactor.com/2021/12/'>2021年12月</a></li> <li><a href='https://miofactor.com/2021/11/'>2021年11月</a></li> <li><a href='https://miofactor.com/2021/10/'>2021年10月</a></li> <li><a href='https://miofactor.com/2021/09/'>2021年9月</a></li> <li><a href='https://miofactor.com/2021/08/'>2021年8月</a></li> <li><a href='https://miofactor.com/2021/07/'>2021年7月</a></li> <li><a href='https://miofactor.com/2021/06/'>2021年6月</a></li> <li><a href='https://miofactor.com/2021/05/'>2021年5月</a></li> <li><a href='https://miofactor.com/2021/04/'>2021年4月</a></li> <li><a href='https://miofactor.com/2021/03/'>2021年3月</a></li> <li><a href='https://miofactor.com/2021/02/'>2021年2月</a></li> <li><a href='https://miofactor.com/2021/01/'>2021年1月</a></li> <li><a href='https://miofactor.com/2020/12/'>2020年12月</a></li> <li><a href='https://miofactor.com/2020/11/'>2020年11月</a></li> <li><a href='https://miofactor.com/2020/10/'>2020年10月</a></li> <li><a href='https://miofactor.com/2020/09/'>2020年9月</a></li> <li><a href='https://miofactor.com/2020/08/'>2020年8月</a></li> <li><a href='https://miofactor.com/2020/07/'>2020年7月</a></li> <li><a href='https://miofactor.com/2020/06/'>2020年6月</a></li> <li><a href='https://miofactor.com/2020/05/'>2020年5月</a></li> <li><a href='https://miofactor.com/2020/04/'>2020年4月</a></li> <li><a href='https://miofactor.com/2020/03/'>2020年3月</a></li> <li><a href='https://miofactor.com/2020/02/'>2020年2月</a></li> <li><a href='https://miofactor.com/2020/01/'>2020年1月</a></li> <li><a href='https://miofactor.com/2019/12/'>2019年12月</a></li> <li><a href='https://miofactor.com/2019/11/'>2019年11月</a></li> <li><a href='https://miofactor.com/2019/10/'>2019年10月</a></li> </ul> </aside> </div>  </div>  <div class="categoryBox"> <div class="container"> <h2 class="heading heading-primary"> <span class="heading__bg u-txtShdw bgc-darkgray">OTHER</span>カテゴリの最新記事 </h2> <ul class="categoryBox__list"> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36890/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/js-554x410.png" alt="JavaScript関連のことを調べてみた" width="554" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36890/">JavaScript関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36891/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/java.jpg" alt="JAVA関連のことを調べてみた" width="540" height="270" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36891/">JAVA関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36894/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/ios-554x410.png" alt="iOS関連のことを調べてみた" width="554" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36894/">iOS関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36888/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/rails-725x410.png" alt="Rails関連のことを調べてみた" width="725" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36888/">Rails関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36884/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/lambda.png" alt="Lambda関連のことを調べてみた" width="360" height="230" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36884/">Lambda関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36886/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/python-640x410.png" alt="Python関連のことを調べてみた" width="640" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36886/">Python関連のことを調べてみた</a> </h2> </li> </ul> </div> </div>  <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Article ", "mainEntityOfPage":{ "@type": "WebPage", "@id": "https://miofactor.com/2021/08/15/post-12024/" }, "headline": "JavaScript関連のことを調べてみた2021年08月15日", "image": { "@type": "ImageObject", "url": "https://miofactor.com/wp-content/uploads/2019/10/python-640x410.png", "height": "410", "width": "640" }, "datePublished": "2021-08-15T11:50:17+0900", "dateModified": "2021-08-15T11:50:17+0900", "author": { "@type": "Person", "name": "editor" }, "publisher": { "@type": "Organization", "name": "f@ctor", "logo": { "@type": "ImageObject", "url": "", "width": "", "height":"" } }, "description": "目次 1. JavaScriptを基本からまとめてみた【11】【onchangeイベント】2. 【JavaScript】海外Teck系YouTuberを真似てみた！(part 5) Typing Game3. Selenium（JavaScript環境）のtakeScreenshotでエラーが出たときの対応4. JavaScript: 画像から色を抽出してくれるColor Thief5. Jav […]" } </script>   <footer class="l-footer"> <div class="container"> <div class="pagetop u-txtShdw"><a class="pagetop__link" href="#top">Back to Top</a></div> <div class="widgetFoot"> <div class="widgetFoot__contents"> </div> <div class="widgetFoot__contents"> <aside class="widget widget-foot"><h2 class="heading heading-footer">タグ</h2><div class="tagcloud"><a href="https://miofactor.com/tag/%e3%81%9d%e3%81%ae%e4%bb%96/" class="tag-cloud-link tag-link-13 tag-link-position-1" style="font-size: 8pt;" aria-label="その他 (1個の項目)">その他</a></div> </aside> </div> <div class="widgetFoot__contents"> </div> </div> <div class="copySns "> <div class="copySns__copy"> © Copyright 2024 <a class="copySns__copyLink" href="https://miofactor.com">f@ctor</a>. <span class="copySns__copyInfo u-none"> f@ctor by <a class="copySns__copyLink" href="http://fit-jp.com/" target="_blank">FIT-Web Create</a>. Powered by <a class="copySns__copyLink" href="https://wordpress.org/" target="_blank">WordPress</a>. </span> </div> </div> </div> </footer>  <script type="text/javascript" src="https://miofactor.com/wp-includes/js/comment-reply.min.js?ver=6.4.1" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" src="https://miofactor.com/wp-includes/js/wp-embed.min.js?ver=6.4.1" id="wp-embed-js" defer="defer" data-wp-strategy="defer"></script> <script> function toggle__search(){ extra__search.className="l-extra"; extra__menu.className="l-extraNone"; menuNavi__search.className = "menuNavi__link menuNavi__link-current icon-search "; menuNavi__menu.className = "menuNavi__link icon-menu"; } function toggle__menu(){ extra__search.className="l-extraNone"; extra__menu.className="l-extra"; menuNavi__search.className = "menuNavi__link icon-search"; menuNavi__menu.className = "menuNavi__link menuNavi__link-current icon-menu"; } </script><script>Array.prototype.forEach.call(document.getElementsByClassName("css-async"),function(e){e.rel = "stylesheet"});</script> </body> </html>