JavaScript関連のことを調べてみた2021年01月27日

JavaScriptで追加した要素にクリックイベントが処理されない

http://www.finefinefine.jp/jquery/kiji2117/

いやー素晴らしい記事ですね。やっとAjaxを使って非同期でデータを取得できるようになったと思ったら、追加した要素にクリックイベントが反映されていないという「なんでやねん！」って一人でツッコミを入れてたけど、すぐに記事が出てきましたね。

>イベントで追加された要素やAjaxローディングを使って読み込んだDOM要素に対して処理を実行する場合、意図した通りに動かない場合があります。
例えば、次のような「ボタンをクリックしてdiv要素を追加する」という記述（scriptの2〜4行目）をした場合、最初からあるdiv要素に対しては、「div要素をクリックしたら背景色をredにする」と言った処理（scriptの5〜7行目）は有効ですが、ボタンクリックで追加された要素に対しては反映しません。

これは素晴らしい！

“`javascript:
\\ これだと後から追加されたdiv要素には反映されない
$(“div”).click(function() {
$(this).css(‘backgrou

eslintのススメ

## まとめ
### eslintとは

– 「どっちでも書ける記述方法のうちこっちにして」と決めたルールセットとそれに違反しているかどうかを自動検出・訂正するツール。
– つまり、いわゆる静的解析ツールのうちの`リンター`。プラグイン次第では改行位置やクオート、セミコロンなど見た目が変わるだけの`フォーマッター`も兼ねられる。

### eslintの良いところ

– 人によってバラバラになってしまいがちな記述方式に一定の統一感を出せる。コードを読む速度が上がる。
– どっちでもいい時に迷わなくて済む。時短。
– 変更合戦になりにくくなる。これも時短。
– ルールの追加などをプラグイン方式で行うので、チームで好きにルールの厳しさを決められる。
– プラグインはルールセットなんだけど、その中でも個別にオンオフできるし、全部オンとか、`react/recommended` などおすすめルールセットもある。
– みんな使ってる。（情報少ないとかでは多分困らない。）

## 導入方法

“`
yarn add -D eslint
“`

そして `packege.json` の `scr

Javascript バイナリサーチ

“`js
function binary_search(numbers, value) {
let left = 0;
let right = numbers.length – 1;
while (left <= right) { let mid = Math.floor((left + right) / 2); if (numbers[mid] == value) { return mid } else if (numbers[mid] < value) { left = mid + 1 } else right = mid - 1 } return - 1 } let data = [0,9,1,8,2,7,3,6,4,5,10].sort((a,b) => a-b)
console.log(data)
console.log(binary_search(data, 4));
“`

参考:

– https://tech-blog.s-yoshiki.com/entry/195
– https://uraway.hatenablog.co

classNameを上書きできるReactコンポーネントを作る方法

classNameにクラス名を割り当ててスタイリングしたコンポーネントを実装すると、
単純に実装しただけではコンポーネントの呼び出し時にclassName属性を新たに追加(注)した際に元々のスタイリングが全て消えてしまう。

注: これをやるには元々のHTMLタグが持つpropsを受け継がせる必要がある

解決策は、classNameの指定部分にクラス名を挿入可能にすればよい。

“`App.css
.text-red {
color: red;
}

.text-bold {
font-weight: bold;
}

.text-big {
font-size: 24px;
}
“`

“`App.tsx
import “./App.css”;
import classnames from “classnames”;

type RedTextProps = { children: React.ReactNode; className?: string };

function RedText({ children, className }: RedTextPr

Javascriptでソート

# Bubble Sort

“`js
function bubble_sort(numbers) {
const len_numbers = numbers.length;
//調べる範囲の開始位置を１つずつ後ろへ移動するfor文
for (let i = 0; i < len_numbers; i++) { //後ろから前に向かって小さい値を浮かび上がらせるfor文 for (let j = len_numbers - 1; j > i ; j–){
if(numbers[j] < numbers[j-1]){ let tmp = numbers[j]; numbers[j] = numbers[j-1]; numbers[j-1] = tmp; } } } return numbers; } let nums = [2, 1, 5, 8, 7,

サブネットマスクの正当性検証

サブネットマスク文字列のバリデーションコードです。
調べてもドンピシャの情報を見つけきれなかったので記録に残します。評価結果はいずれもbool値。
以下のようなそもそもIPv4アドレスとして正しいかの検証は、多くの言語でライブラリが存在すると思うので事前にそれを使用してください。

– 2進表示が8ビットを超えていない（255以下である）
– オクテットの個数が4

##サブネットマスク記法

###Javascript

“`javascript:
“255.192.0.0”.split(“.”)
.map(x => (‘00000000’ + Number(x).toString(2)).slice(-8))
.join(“”).match(/^1+0+$/) != null
“`

###Scala
“`scala:
“255.192.0.0”.split(“\\.”)
.map(x => {
val binStr = “00000000” + x.toInt.toBinaryString
binStr.slice(binStr.length – 8, binStr.l

初心者必見！固定値（キー、URLなど）は.envファイルに書いて再利用しよう！！

皆さんこんにちは！

今日は.envファイルについて書いていきます。

ところで皆さん、例えばバックエンドとのやり取りを行う際、URLはどういう風に書かれていますか？

“`
axios.get(‘http://127.0.0.1’)
“`

こんな風に書くと思います。

ただ、これを毎回コピーして持ってくるのって正直めんどくさいかと。

また、実際にサーバーにあげる時って、“http://127.0.0.1“のようなローカルホストとは通信を行いませんよね？？？

他にも、シークレットキーなど第三者に知られてはいけない情報をファイルに直接書き込むのは良くありません。

ここで、登場するのが**env**ファイルです！

聞き覚えのある方もいれば、全く聞いたことがないという人もいます。

全く知らなくても大丈夫！

この記事を見て、.envファイルを使いこなしていきましょう！！

一度使うと恐らくやめられないくらい便利なので、ぜひ見て下さい！

それでは順を追って説明しています。

#.envと.env.productionの作成#

プロジェクト直下に“.env“と“.e

モーダルウィンドウ表示

前回の続きです。
PHPでログイン機能：https://qiita.com/x49_n/items/07b80a1e88c483f7256a
#予定入力欄作成
予定を入れたい日を選択すると、モーダルウィンドウが表示され予定を記入できるようにしたい。
前回作成したカレンダーのクリックイベント（jQuery）に追加します。

“`javascript:cal_script.js
$(function() {
$(“td”).on(“click”, function() {
// 選択部分の色変更
$(“td”).removeClass(“select”);
$(this).addClass(“select”);
// tdの値(日にち)を取得し出力
$(“#select_day”).text($(this).text());
// スケジュール記入欄表示
$(‘#plan-modal’).fadeIn();
});
// 閉じるボタン
$(‘.close-modal’).on(“click”, function() {

React開発者向けオンラインサロン「React Fan」のランディングページをExcalidrawで作った

これまで運営していたMeteor Fanというコミュニティを実態に合わせて「React Fan」に変えて、オンラインベースに移行しました。

React FanはSlackを使ったコミュニケーションの場を中心とします。[connpassのイベントページ](https://meteor-fan.connpass.com/event/202235/)にはSlackの招待リンクがあるのですが、そもそも入り口のページが存在しないことに気づき、ランディングページを作ることにしました。

ランディングページをユニークでありつつ手軽に作りたいと思い、試しに[Excalidraw](https://excalidraw.com)で作ってみたのですが、思いの外面白かったので共有します。

作ったサイトはこちらです。

[React Fanのサイト](https://react-fan.axlight.com)

スクリーンショットを貼るよりも、開いた方がわかると思います。

フルSVGになっています。ちなみにホスティングはGitLab Pagesを使ってみました。SVGはExcalidrawでエクススポ

Vue.jsのv-forについて

Vuejsで配列やオブジェクトなどを、v-forで表現することが多くなりました。

ちょっと基本的な内容をメモっておきたいと思います。

####配列で使用する場合

####1. v-for = “要素 in 配列”
(要素の変数名は任意)

“`javascript:js
Vue.createApp({
data:function(){
return {
items: [‘item-1’, ‘item-2’],
}
},
}).mount(‘#app’)
“`

“`html:html

{{ item }}

result:

item-1

item-2

“`

####2. v-for = “(要素, インデックス) in 配列”
要素、インデックスの変数名も任意

“`html:html

JavaScript でコンストラクタをプライベートにする

# はじめに

* コンストラクタを不可視にしたい
* 即時関数でもできるが、読みづらいので他の方法を考えてみた
* 可視性の境界をモジュール単位にするのがシンプルっぽい

# やりかた

インスタンスを生成する関数だけエクスポートする。

“`js:Point.js
class Point {
constructor (x, y) {
this.x = x
this.y = y
}
}

// ファクトリーメソッド
function pointAt(x, y) {
return new Point(x, y)
}

// ファクトリーメソッドだけ export する
export { pointAt }
“`

“`js:利用側
import { pointAt } from ‘./Point.js’

let p = pointAt(0, 1)
“`

# 使いどき

インスタンスの生成方法を強制したいとき。
Java の [Integer クラス](https://docs.oracle.com/javase/jp/15/docs/api/ja

【Vue.js基礎第2回】コンポーネント基礎・データの渡し方

##はじめに
Vue.jsの基礎について複数回に渡ってまとめていきます(自分用メモ)。今回は「コンポーネント基礎」・「コンポーネント間のデータ渡し」についてです。※内容は初学者向け

【第1回】環境構築・ディレクティブ：https://qiita.com/tatsuya_1995/items/13478027539b7db76e06
【第2回】コンポーネント基礎・データの渡し方(今回)

##基本概念
・Vue.jsは「小さく、自己完結的で再利用可能なコンポーネント」の組み合わせで大規模アプリケーションを構築する。
・「コンポーネント」は予め定義されたオプションを持つVueインスタンス。
・Vueインスタンスを利用するために、「グローバル登録」や「ローカル登録」を行う。
※コンポーネントは構成要素や部品という意味。

##コンポーネントのグローバル登録

“`
Vue component(‘<コンポーネント名>‘,{<オブジェクト>})
“`

①第1引数にコンポーネントの名前、第2引数にオブジェクトとしてコンポーネントの情報を持つ

【JavaScript】日付(Dateオブジェクト)の使い方を全てまとめる

#プログラミング勉強日記
2021年1月26日
日付や時間を操作することのできるDateオブジェクトについてまとめる。

#Dateオブジェクトの使い方
　Dateオブジェクトを使って日付や時間を操作するためには、`new`を使ってインスタンスを作成する。
　引数なしで利用する場合、現在の日時を取得する。

“`js
let now = new Date();
console.log(now);
“`

“`:実行結果
Tue Jan 26 2021 21:25:35 GMT+0900 (日本標準時)
“`

　引数を指定すると、3種類の取得方法がある。

“`js
let today1 = new Date();
// 文字列から求める
let today2 = new Date( ‘2020/10/04 12:30’ );
// 年月日時分の数値を順番にカンマ区切りで指定する
// (※月は1引いた数を指定する)
let today3 = new Date( 2020, 9, 4, 12, 30 );
// 1970年1月1日 00:00:00からの経過ミリ秒で日時を求め

【育児負荷低減の為のエンジニアリングその1　ポケモン図鑑編　JavaScript + Chromeアドオン】

# 何を作ったか

– chrome上で、ひらがなしかまだ読めない子供がポケモン図鑑を調べられるようになるものを作りました
– https://zukan.pokemon.co.jp/ こちらの公式サイトで、カタカナで書かれたポケモンの名前の上にひらがなでルビが振られます。
– 以下が、使用前と使用後の動作の違いです


# なぜ作ろうと思ったか

– 子供がポケモンに興味を持って毎日図鑑を見てくれるのはいいのですが、毎日、「このポケモンの

JavascriptでSingletonを実現する方法

function Singleton () {
// すでにSingleton.instance が存在する場合にはSingleton.instance を返す
if(typeof Singleton.instance === ‘object’) {
return Singleton.instance;
}

// Singleton.instance は自身を参照する。
Singleton.instance = this;

return this;
}

var obj1 = new Singleton(); // new を使ってSingletonオブジェクトを作成する
var obj2 = new Singleton(); // new を使ってSingletonオブジェクトを作成する
console.log(obj1 === obj2); // true 2つは同じオブジェクト

SPA(Single Page Application)についての理解があいまいだったので、整理するためにまとめてみる

これまで独学でReactを勉強をしてきたのですが、「Single Page Application(以下SPA)ってなに？」と友達に聞かれて上手く説明出来ませんでした。つまり、SPAについてしっかりと理解せずにここまできてしまったので、ここで一度基礎に戻って理解を深めよう、という思惑でこの記事を書いています。

## SPAってなに？

現時点で`SPA`でググって上位表示されているページを引用してみます。

>①SPAとは単一のWebページでアプリケーションを構成する設計構造の名称です。[引用元](https://digitalidentity.co.jp/blog/creative/about-single-page-application.html)

>②SPAとは「Single Page Application」の略で、単一のページでコンテンツの切り替えを行うWeb アプリケーションのアーキテクチャの名称です。SPAではブラウザによるページ遷移を行わずにコンテンツの切り替えなどを行うことで、ユーザー体験（UX）を大きく向上させることができます。 従来のWeb ページでは遷移

初心者向けchrome拡張開発、最初の1歩

# 概要

* 作業効率化のためchrome拡張の開発に興味を持ったので自分用にメモ。
* Progate1周したくらいの初学者でも、この記事を読みながらサンプルを自分で動かせるのを記事の目標とします。
* この記事はハンズオン形式で進めますが、chrome拡張についての概要は省きます。
* (このあと応用部分を加筆するかも。)

公式URL：[拡張機能とは何ですか？](https://developer.chrome.com/docs/extensions/mv3/overview/)
(あとで日本語翻訳ツール使いながら流し読みすると良いです)

# 動かすのに最低限必要なもの

* Google Chrome ブラウザ
* エディタ

# さっそくHelloサンプルコード

google拡張のボタンを押したら**Hello Extensions!!!** と表示するだけのものです！
最小の手間で動くものを見たい人向けに。
(自分はこのあと特定のECサイト上でボタンポチして必要な情報をgoogle spreadsheetに転記するようなものを作る予定です。)

![スクリーンショット

【Vue.js + Googleマップ】売上データをGoogleマップ上に可視化する

# はじめに
つい先日仲の良いクライアントさんから、とある相談を受けたときの一幕。

?‍♂️「全国にある小売店の**製品別売上データ**があるんだけど、これを**GoogleMap上で可視化**できないかな？ なんか棒グラフが積み上がっててどこの小売店で何がよく売れてるか一目で見れるようなやつ。元データがCSVなんだけど。」

僕「調べてみますね。あー、簡単なグラフでよければできそう。CSVもらえます？」

?‍♂️「あ、本当に？そしたらお願いします。これCSVね。」

僕「了解?‍♂️」

※ フェイクが入っていますが、要するに売上データをGoogleMap上に可視化するというのが今回のミッションです。

# 成果物
こんな感じでどの地域でどんなものが売れているのか、積み上げ棒グラフで可視化しました。赤から上に伸びていきます。棒グラフをクリックすると小売店名と各製品の売上高が表示されます。スクショあげたかったんですがGoogleMapのスクショが著作権的にNGなようなのでイメージ図です。白地図は[白地図専門店](https://www.freemap.jp/)さんからいただきました

p5.jsでラインで結ばれたパーティクルを実装する

ラインで結ばれたパーティクルの実装の仕方を紹介します。ちょっと言葉でうまく説明できないので、画像をみてみましょう。


Webサービス系とか情報、未来を連想させるイメージとしてよく背景に設定されていたりしますよね。

**コード**
https://editor.p5js.org/mtoutside/sketches/sEhRVPhl

## 実装のポイント
今回はパーティクルを表示させるためクラスを使います。コンストラクターのほか4つの関数を持ちます。

– update -> 描画を更新する
– draw -> 描画する
– edge -> 境界線の判定
– checkParticles -> パーティクル同士の距離を計算して、パーティクル同士が一定距離近づいたらラインで結ぶ

## コード
“`particl

JavaScript カウントダウンタイマー

## はじめに

### 概要

このページではJavaScriptを使ってカウントダウンタイマーを実装します。

※この章は`JavaScript「超」入門 第2版`のchapter5-1「カウントダウンタイマー　時間の計算とタイマー」の内容をさらに噛み砕いた解説ページです。chapter4までの内容を理解している前提で進めますので、用語などわからない箇所があれば入門本を振り返りましょう。

※コードはシンプルさを追求し独自のものを用意しているので、本ページの通りに進めてください。

### 本章の目的

– Dateオブジェクトを理解する
– 時刻の表示方法を理解する
– 1秒ごとに再計算する処理をマスターする

## テキスト

### 残り時間を計算するファンクションを作る

カウントダウンタイマーを作るには`未来の時刻から現在の時刻を引いて残りの時間を算出する`というファンクションを書いてあげる必要があります。

次のテンプレートを用意して一つ一つ実装していきましょう。

“`
新規ディレクトリ・ファイルを作成
monigate/javascript/lesson1
∟ i