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

JavaScriptを基本からまとめてみた【10】【classList.addメソッド】

##はじめに

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

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

##classListとは
『classList』とは特定の要素のクラス名を追加したり、削除したり、参照したりすることが出来る便利なプロパティで、
classListの後にメソッドを定義することにより、追加削除などの機能を指定することができる。

#####classListに用意されているメソッド

|メソッド名 |機能 |
|——–|——|
|add |クラスを追加する |
|remove |クラスを削除する |
|contains |クラスが含まれているか確認する |
|toggle |クラスが含まれていれば削除、含まれていなければ追加する |

##addメソッドとは

『

JavaScript　配列　オブジェクト

JavaScriptの学習の備忘録と振り返りの記事です。
何かの参考になれば幸いです。
付け足しや訂正などある場合ご教授いただけると
大変嬉しく思います！！

#配列とは
複数の値(要素)をまとめて管理するときに用いるもの
**書き方**
[値１,値２,値３]

**代入の仕方**
const 定数名 = [“値１”,”値２”,”値３”];

“`js
const favorite = [movie,interior,art];
“`

**要素の取得の仕方**
console.log(配列名[インデックス番号]);

“`js
console.log(favorite[movie]);
“`
:::note warn
インデックス番号は「０」から数える
:::

**値の更新の仕方**
配列名[インデックス番号]　= 新しい値;

“`js
favorite[1] = “shopping”;
“`

##オブジェクトとは
オブジェクトは配列と同じく複数のデータをまとめて管理するのに用います。
それぞれの値にプロパティと呼ばれる名前をつけて管理します。
**書き方**
{

D3jsのselectionとdata joinを実験する

# 概要
SVGを表示するために [D3js](https://d3js.org/) を利用したいのだが、JSコード上で動的に操作するデータに対応するSVGツリーの構築方法が特徴的だったので実験してみた。

JS 上でデータ配列を操作したときに、データ配列の各要素に対応する DOM element を追加、更新、削除する。（最終的には SVG の要素の操作が目的だが、ここではシンプルに HTML DOM 要素を用いて実験した）

実験内容は、[Codepen](https://codepen.io/ken_miyashita/pen/xxdBBbb?editors=1001) で実行することができる。

# 構成
– D3js (ver4)

# 既存 DOM element 集合を見つける： selectAll()

参照： [D3.js – selections](https://www.tutorialspoint.com/d3js/d3js_selections.htm)

これは jQuery と基本的には同じ考え方。`selectAll()` で指定した条件を満たす DOM

React.js&Next.js超入門 第2版の無限ループのバグ修正

[掌田津耶乃　React.js&Next.js超入門 第2版](https://www.shuwasystem.co.jp/book/9784798063980.html)で学習を進めていていますが、Chapter5の「fetch APIでJSONデータにアクセスする」のサンプルコードで無限ループが発生しブラウザがフリーズしたので、その点を修正するコードを掲載します。

また、この本にはステートの更新とコンポーネントがいつ再実行されるかについての記述が不足していると思われるので、その点についても補足しています。

またこの本にはChapter 4の最後の簡易メモにもバグがあるので次を参照してください。

[React.js&Next.js超入門 第2版の簡易メモのバグ修正](https://qiita.com/kmat/items/01addf420839cb1089bc)

この記事で指摘されているように、Amazonレビューでもサンプルコードが動かないことが指摘されており、困っている方もいるかと思うので記しておきます。またこの記事同様、この方法が最良の方法とは限らないことをご了承く

moment.js を使った日付の計算

## 準備
### 知識
HTML,JSの超基礎
### CDNの追加

https://cdnjs.com/libraries/moment.js

こちらより最新のCDNを読み込むだけで実行可能です。
一応コピペできるように載せておきます。
1つ目が本体で、2つ目が日本語用のjsファイルの読み込みです。

“` html


“`

## 日時の取得とセット
### 日時の取得
内部的にはDate() を　moment()にうまく置き換えていると考えてもらっていいともいます。もちろん書き方は多少異なります！

出力のformatはかなりたくさんあるので公式HPから取得したいデータを取れるようにしておくとか

自作のnpmパッケージをGitHub Packagesにworkflowで登録する（初心者）

Node.jsを利用して書いた自作のコマンドラインツールをnpm installして使えるようにしたくて、npmパッケージを作って[GitHub Packages](https://docs.github.com/en/packages)に登録することにしました。が、ドキュメント読んでもやり方が飲み込めず、試行錯誤。なんとか実現できたので、ここに手順のメモを残します。

npmパッケージを作るためのソースとして、”hello world”を出力するだけの小さなJavaScriptプログラムを使います。本記事で作成したリポジトリはこちら：
https://github.com/kazhashimoto/hello

**実行環境**

– macOS Big Sur 11.5
– Node.js 16.4.0
– npm 7.18.1
– git 2.30.1 (Apple Git-130)[^1]
– エディタ: Atom 1.58.0[^2]

[^1]: macOSプリインストール版のgitです。Atom内蔵のgitは別に存在します。
[^2]: v1.58.0現在、Atom内蔵の

[JavaScript]今日のエラー(未解決)

# はじめに
本記事では、クレジットカード機能を実装するため、
JavaScriptファイルでコードを記述していますが、
コンソール上でエラーが発生しています。
完全に自分本位な記事で恐縮ですが、備忘録として、ここに残します。

# エラー内容

https://gyazo.com/6477ea762b677b9bec99ffe57a6db877

商品購入をするページ（index.html.erb）に遷移後、
createアクションで購入しようとするも、

“`
Uncaught TypeError: Cannot read property ‘removeAttribute’ of null
at Object. (card.js:26)
at (index):1
“`

というエラーが出てしまう。
`空の’removeAttribute’のプロパティは読めない。`
直訳したらそう怒っているように思う。

# コード

“`card.js
const pay = () => {
Payjp.setPublicKey(“pk_test_

Windows 10 + Node.js + VSCode で React の開発環境を準備する

## はじめに

Javascript というかフロントエンドが苦手なので、UIフレームワークのひとつである React を触りながら、少しずつ仲良くなっていこうと思います。

まずは環境の準備から始めてみます。最終的には以前開発したホロジュールアプリのリニューアル版の開発に繋げていきたいです。

## 利用する環境

下記構成の環境を利用しました。

* Windows 10 Pro 21H1
* Visual Studio Code 1.59.0
* PowerShell 7.1
* Git for Windows 2.32.0.windows.2

## Reactとは

[React](https://ja.reactjs.org/) は、フロントエンドのユーザーインターフェイスを構築するためのオープンソースの JavaScript ライブラリ

完全なアプリケーションフレームワークを提供する他の JavaScript ライブラリとは異なり、React は、状態を維持し、UI 要素を生成する **コンポーネント** と呼ばれるカプセル化されたユニットを使用してアプリケーションビ

【Handsontable】セル内グリッド表示(Nested Grid)の実現

# はじめに
Handsontableで、1レコード複数行入力を実現できないか調査しています。
前回、その段階として複数ヘッダーを実現しました。

https://qiita.com/yaju/items/d42e74fc22126792ff65

Handsontableの有料版には、`nestedRow`オプションがありますが、Excelのグループ化したアウトライン機能のようなものですね。

https://handsontable.com/docs/row-parent-child/#preparing-the-data-source


自分のイメージとしては、１レコードにグリッドを入れ子に出来れば、1レコード複数行入力ができるかもと調べた結果、下記のサンプルを見つけました。
しかし、セル内のグリッドのテキストを編集しようとしてもフォーカス

マジックナンバーをやめてデータベースの情報からステータスの切替をする方法

# ステータスの管理
どんなシステムを作っていても、ステータスの管理は出てきます。
例えば顧客の状態とか。

“`
SELECT * FROM customer;
+—-+———————–+————+
| id | name | status_id |
+—-+———————–+————+
| 1 | おおがき | 1 |
| 2 | さとう | 3 |
| 3 | すずき | 2 |
| 4 | いとう | 3 |
+—-+———————–+————+

SELECT * FROM m_status;
+—-+———————–+
| id | name

[React]フックを使ってより扱いやすいコンポーネントにする

# はじめに
フックとは何か知っていますでしょうか？2020年に追加された新機能で、今までクラスコンポーネントでしか出来なかったことが関数コンポーネントでも出来るようになったものです。今はまだ開発で必須というまではいかないかもしれないですが、今後はポピュラーになっていくと思うので、今のうちに理解しておくと良いでしょう！

# React Hooksとは
Reactのバージョン16.8.0で追加された機能で、関数コンポーネントで利用できる関数のことです。これまで、クラスコンポーネントでしか利用できなかったstateなどの機能が関数コンポーネントでも利用できるようになったので、より理解しやすいコードを書けるようになりました。

## 特徴
– ステートを持ったロジックを、コンポーネントの階層構造を変えることなしに再利用できる
– テストもしやすくなる。

– 関連する機能に基づき、1つのコンポーネントを複数の小さな関数に分割することが可能

– より多くのReactの機能をクラスを使わずに利用できる
– クラスコンポーネントに比べ、コード量も減らせる

– thisを使わず

初級：Javascript勉強

###コンソールに文字を出力する

“`
console.log(“Hello World”);
console.log(“3 + 1”); // 「’」 「”」で囲うことで文字列として出力できる
“`

###数値を計算する
“`
足す：
console.log(8 + 2);

引く：
console.log(3 – 1);

かける：
console.log(9 / 3);

割る：
console.log(2 * 4);

割って余りを求める：
console.log(7 % 2);
“`

###文字列を結合させる

“`
console.log(“東京都” + “練馬区”);
console.log(“20” + “21”);
“`

JavaScript　繰り返し処理

JavaScriptの学習の備忘録と振り返りの記事です。
何かの参考になれば幸いです。
付け足しや訂正などある場合ご教授いただけると
大変嬉しく思います！！

#繰り返し処理とは
`ある条件を満たす間に行われる処理`を繰り返し行う処理の事
##種類
**while文**・・・条件式がtrueの間、{ }内の処理を繰り返すことができる
**for文**・・・while文と同じ　&　`while文よりもシンプルに記述できる`

##書き方

**while文**

while(`条件式`){
`処理`
}`;`セミコロン入れない

::: note warn
値を更新するコードを書き忘れると無限ループになるので忘れないように！！
↓↓↓
while(month <= 12){ console.log(month); 'month += 1; '　←更新コード } ::: ```js let month = 1 while(month <= 12){ console.log(month); mon

Vue.jsで簡単なアプリをつくってみた

この記事では、私がVue.jsの練習がてらつくったかんたんなアプリについて、コードの紹介を中心にまとめます。

https://github.com/yatsurugi55/vuetify-example

# 前置きなど
私がこのアプリを作る上で確認したかったことは、

– **Vuetify できれいなデザインのアプリがつくれること**
– **Vuetify でのサイドメニュー、ヘッダーなどのつくりかた**
– **Vuex で管理したデータを複数ページからアクセスすること**
– **Atomic Design などの設計原則を Vue.js でためしてみること**

などです。
私は普段 Laravel をメインでつかうのですが、フロント側をつくっていて感じることのひとつに、「JavaScriptできれいにコードかくのむずかしくない？」ということがありました。

バックエンドをつくるときには、業務に関する情報はドメインに、DBに関する情報はリポジトリに集めようといった方針でつくることが多いですが、JavaScript ではどういう単位で、どういう指針で分割すればいいんだろう、

自分専用のブラウザー拡張機能を作っている話

## はじめに

Web ブラウジング体験をプチ改善したいことって本当によくあります。 Partially Persistent Headers のようなユーザーを邪魔するだけの要素は本当にイライラするので撲滅したい。

– スクロールで出たり消えたりするヘッダー（Partially Persistent Headers）をページ上部に固定したい（「マイナビニュース」「DevelopersIO」など）
– テキスト選択時に出てくるポップアップを間違えて押さないよう非表示にしたい（「Medium」「note」「Yahoo!ニュース」など）
– Amazon の商品ページの URL を `/dp/{asin}` 形式に正規化したい
– ブコメの熊を消したい

いずれも数行の CSS または JS で実現で

閏年の判定方法について

こんにちは！
前回「『閏年判定アプリ』を作った」にて
`new Date()`を使用した判定方法をコメントで教えていただきました。
時間が関係する処理を書くとき、何かと閏年の判定は必要になると思うのでメモとしてここに残します。

詳しくは　[前回記事](https://qiita.com/huwg2787x/items/c3265f89d0f9ff74e155)　のコメント欄をご参照ください。

---

まず一般的な方法として

“`javascript
const isLeapYear = year => year%4 === 0 && year%100 !== 0 || year%400 === 0;
“`

という方法があります。
年数が　４で割り切れて　かつ　１００で割り切れない　または　４００で割り切れる
閏年の定義をそのまま当てはめて、判定する方法です。

---

それとは異なり`new Date()`を使用した方法は以下のようになります。

“`javascript
const isLeapYear = year => new D

Codesandboxの動作がおかしくなった際の対応

Codesandboxはすごくいいサービスですが、なんか時々動作が不安定になることがあり残念だなーと思っていました。

>安定すれば有償コース申し込むのに・・・といつも思ってます。

## おかしくなる現象

Codesandboxではソースを変更しSaveすると即座に結果が反映されます。が、時折、それが行われなくなり、一度そうなってしまうと後は何をしてもうんともすんとも言わない状態になります（プロジェクトを捨てるしかない）。

> Node.js系かつプロジェクト名称を変更した際に多い気がします。

## 動かなくなった際の対応

ずっと放置していたのですが、本家のissuesに対症療法的解決案っぽいのがあり、それを試したところ動いたのでメモしておきます。

* 参考にした元記事
* https://github.com/codesandbox/codesandbox-client/issues/4381
*

私なりの検証情報を付け加えてまとめると

* codesandbox.ioにアクセスしている状態でApplicationのStorageを消す（記事通り）
* 一

［JavaScript］fetch メソッド

#### コード
“`sample.html



検索