JavaScript関連のことを調べてみた2020年11月29日

Bootstrap4.5.3で違和感のないパスワード一致バリデーションを行う

Bootstrap は、ver.4 から、入力エラーのメッセージを表示するための **invalid-feedback** クラスが用意されており、簡単にUIからユーザーにバリデーション結果を伝えることができるようになっています。ほとんど CSS を自分で書く必要がありません。

たとえば、こんなように。

|Valid|Invalid|
|—|—|
|||

実際、ソースコードとして見ると、

“`html:index.html

JavaScriptが実行できるツール

JavaScriptにはコードを実行したらすぐに結果が表示されるツールがあります
デベロッパーツール
—

ブラウザ開発者ツール、検証ツールなどとも呼ばれます。一般的なブラウザに付属し、誰でもすぐに使うことができます。デベロッパーツールでは主に以下のようなことができます。

表示しているサイトのHTMLの要素の確認・編集
表示しているサイトのCSSの確認・編集
JavaScriptの実行

HTMLやCSSの確認・編集　
→ **Elements（エレメンツ）**パネルで操作できます。
JavaScriptの実行　　
→ **Console（コンソール）**パネルにて行うことができます。

デベロッパーツールの使い方
—

ブラウザ上で二本指クリックする　→　「検証」を選択する

コンソールパネルの使い方
—

テキストエディタ(vscodeなど)で用意したファイルにソースコードを記述して、JavaScriptを実行することもできます。
手軽に書く時は、コンソールにJavaScriptの記述をし、実行していきます。

コンソールに文字を表示させる方法
—
**con

お問い合わせフォーム、jsバリデーション【改】

“`javascript:contact.js
window.addEventListener(‘DOMContentLoaded’, () => {
// 「送信」ボタンの要素を取得
const submit = document.querySelector(‘#contact-submit’);

// エラーメッセージと赤枠の削除
function reset(input_infomation, error_message){
const input_info = document.querySelector(input_infomation);
const err_message = document.querySelector(error_message);
err_message.textContent =”;
input_info.classList.remove(‘input-invalid’);
};

// 「お名前」入力欄の空欄チェック関数

[Node.js] response.writeHeadとresponse.setHeaderって何が違うの？

# はじめに
Node.jsを勉強していて、setHeaderとwriteHeadって何が違うの…？となったのでソースコードなどから調べてみました。

# setHeaderのソースコードを見てみる
setHeaderの実装部分を示します。setHeaderはheadersに名前と値を格納しているだけということがわかります。
headersに値を格納しているので、例えばgetHeader(name)によって値を取得することができます。

“`javascript
OutgoingMessage.prototype.setHeader = function setHeader(name, value) {
if (this._header) {
throw new ERR_HTTP_HEADERS_SENT(‘set’);
}
validateHeaderName(name);
validateHeaderValue(name, value);

let headers = this[kOutHeaders];
if (headers === nul

Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～JavaScript × axios編～

#制作環境

Windows 10
Laravel : 6.18.35
Laravel/ui : 1.0
Laravel-mix : 5.0.1
Bootstrap : 4.0.0
axios : 0.19
Vue : 2.5.17
XAMPP
PHP : 7.4.3
Visual Studio Code

#はじめに

この記事はプログラミングをはじめたばかりの素人が、できたことをメモするのに利用しています。
内容には誤りがあるかもしれません。

前回のつづきになります。

#関連記事

[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～事前準備編～](https://qiita.com/Charry/items/737085257784bd9fb6e2)
[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～JavaScript編～](https://qiita.com/Charry/items/f60

【React】state を使ってみる useEffect

# はじめに

React を習得するまでの軌跡をメモっていく備忘録的な記事です。

## state を使って１秒毎にカウントアップするタイマーを作る

~~~jsx:index.js
import React, { useState, useEffect } from ‘react’;
import ReactDOM from ‘react-dom’;

const Timer = () => {
const [time, setTime] = useState(0);

// クリーンアップ関数を登録（return）する
useEffect(() => {
const timerId = setInterval(() => setTime(time + 1), 1000);
return () => clearInterval(timerId);
});

return(

{time}

)
};

ReactDOM.render(
,
document.getEle

【React】stateを使ってみる useState

# はじめに
React を習得するまでの軌跡をメモっていく備忘録的な記事です。

##

クリックすると数字が増えていくというやつです。

~~~jsx:index.js
import React, { useState } from ‘react’;
import ReactDOM from ‘react-dom’;

const Counter = () => {
const [count, setCount] = useState(0);

return(

count: {count}

{/* onClick={} の中に関数を書くとその関数が実行されます。*/}
setCount(count + 1) }>click!

);
}

ReactDOM.render(
,
document.getElementById(‘root’)
);
~~~

![スクリーンシ

【React】配列を繰り返し処理で回して props に渡してみる

# はじめに
React を習得するまでの軌跡をメモっていく備忘録的な記事です。

## 配列を繰り返し処理で回して props に渡してみる

defaultPropsを使ってpropsに値が入らなかった時のデフォルトも設定してみました。

~~~jsx:index.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;

// User に入れる用のデータ
const profiles = [
{ name: ‘太郎’, age: 10 },
{ age: 30 },
{ name: ‘花子’, age: 25 },
{ name: ‘太郎’ },
]

const User = (props) => {
return (

私の名前は{props.name}で、年齢は{props.age}です。

)
};

// 値がなかった時のデフォルトを設定
User.defaultProps = {
name: ‘名無し’,
age: 20
};

const

【React】 props を使ってみる

# はじめに
React を習得するまでの軌跡をメモっていく備忘録的な記事です。

## props を使ってみる

~~~jsx:index.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;

const User = (props) => {
return (

私の名前は{props.name}です。

)
};

ReactDOM.render(
,
document.getElementById(‘root’)
);

~~~


表示成功

## まとめ

– コンポーネントの引数に props と入れる。

– コンポーネントの中

【React】component を作る

# はじめに
React を習得するまでの軌跡をメモっていく備忘録的な記事です。
https://qiita.com/u_query/items/51b4140a450ee5d51dcc の続きです

## component を表示してみる

create-react-appで作ったデフォルトのファイルは中身は全部消して一から作ります。

~~~jsx:index.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;

const App = () => {
return (

Hello, World

)
};

ReactDOM.render(
,
document.getElementById(‘root’)
);

~~~

![スクリーンショット 2020-11-28 23.43.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559794/adac2c85-f

Qiita記事のコメント欄を内容直下に移動するユーザースクリプト

コメント欄を記事内容直下に移動し、スクロールの手間を減らします。
[greasemonkey](https://www.greasespot.net/) や [tampermonkey](https://www.tampermonkey.net/) でご利用ください。

ページ読み込み直後に一瞬カクつくのは仕様です。（ある程度スクロールしないとコメントが表示されないため、最下部までスクロールさせて戻しています）

コメントの確認を目的としていたので、移動後のコメント入力欄が問題なく動作するかは未確認です。

“`js
// ==UserScript==
// @name Qiita記事のコメント欄移動
// @version 1.0
// @match *://qiita.com/*/items/*
// @grant none
// ==/UserScript==

(function() {
‘use strict’;

const scrollX = window.scrollX;
const sc

【React】環境構築から起動まで

# はじめに

React を習得するまでの軌跡をメモっていく備忘録的な記事です。

## 環境構築
yarn は installしておく

~~~
$ yarn global add create-react-app
~~~

## React アプリに必要なファイル群を作成

~~~
$ create-react-app sample_app
~~~

## アプリの起動

~~~
sample_app $ yarn start
~~~

localhost:3000 にアクセスすると…


表示成功

FizzBuzz(通常 / 再帰 / クラス)

# はじめに

なんか書き殴りたくなったので書きます。

プログラム始めたばかりの時は、

**「オブジェクト指向…？？」**

**「再帰？？？」**

みたいな印象だったのですが、気付いたら書けるようになってました。嬉しい。

備忘録的に残しておきます。
壮大なもの書こうかと思ったんですが、初心に帰ってFizzBuzzで

## 補足

①この記事では「これがFizzBuzzだ」みたいな話はしません
定義は下記に記しますがその定義があっているかどうかは議論しません。

②再帰的な書き方だったりクラスの書き方はもっと良い方法あると思います。
そんな時は是非マサカリが欲しいです。

> 定義
・1~100を順番に表示する
・3と5の倍数の場合[FizzBuzz]と表示する
・3の倍数の場合[Fizz]と表示する
・5の倍数の場合[Buzz]と表示する

## 通常ver

“`js
for (let i = 1; i <= 100; i++) { const Fizz = 3; const Buzz = 5; if (i % (Fizz * Buzz) === 0) {

Nuxt.js、Firestore、axiosでデータの投稿日時表示、ソート機能実装

#この記事の概要

↓以前書いた記事で作った掲示板アプリの追加実装を行います。
[Nuxt.js、Firebase、axiosでパパッと掲示板！](https://qiita.com/higa08/items/b33fc013d26426dc042a)

**※※※**
**前回からの続きになっております**
**以下、適宜axiosメソッドに渡しているURLの`YOUR_PROJECT_ID`を自分のプロジェクトIDに置き換える必要があることに注意してください。**
`YOUR_PROJECT_ID`のままだと以下のエラーが出ます。
***

追加するのは

**・投稿日時の表示**
**・投稿日時順にソート**

# 目標物
![demo](https://gyazo.com/05315455

フロントエンドやるなら入れておくべきESlintってなに？

#プログラミング勉強日記
2020年11月28日
[昨日の記事](https://qiita.com/mzmz__02/items/12d198b696efa8b29bda)でPrettierについて扱ったが、Prettierと合わせて使用することのできるESlintについて紹介する。

#ESlintとは
　ESlint(読み方：「イーエスリント」)は、JavaScriptやTypeScriptなどの静的解析ツールである。ESlintを導入することで、単純な構文エラーやプロジェクト固有のコーディング規約を定義することができる。厳密なルールを定義することで、複数人で開発する場合でもシステム全体のコードの一貫性を維持することができる。

#ESlintの特徴

– 自由に多くのルールを設定できる
– 独自ルールを作成するAPI
– 固有のライブラリー、フレームワーク、および実践のルールを持つ多数のプラグイン
– ES6、ES7、JSXの内蔵サポート
– 迅速に開始できるように、推奨ルールだけでなくサードパーティの設定利用が可能
– Sublime、Vim、JetBrainsの製品およびV

ポートフォリオにiframeタグでyoutubeの動画を組み込むときのすゝめ

#本記事の概要
初投稿になります！
本記事は、ポートフォリオにyoutube動画を組み込んだ時におきた問題についての記事になります。

##問題点
ポートフォリオにyoutube動画を大量に組み込んだ際に、下記問題点が起こりました。

– 埋め込みyoutubeの動画の含まれるHTMLの読み込みと表示が非常に遅い
– リクエストが途中で途切れる・一瞬で遮断される
– コンソールでエラーがまれに発生する

埋め込みタグのコードは下記になります。

“`html

こちらの記事が参考になりますが、本当に簡潔に言ってしまえば、
ページ推移を高速にする機能、と言えます。rails4以降は標準装備されているようです。

一方で、使うことによるデメリットも多く、私が勉強した教材の中でもとりあえず作動しないようにしておくという冷待遇を受けていた悲しい機能です。それでも、PF作成において画像が重いページ等もあり、全体的な動作は早い方がよくね？って思ったのでこの度何とか消さずに実装できないか抗ってみました。実際1秒ぐらい違います。

※大前提として、勉強まだ10週間の初学者が作っているPF内でのことなので、動的な機能がてんこ盛りの複雑なアプリではもっと色々設定しなきゃならないと思われます。

#実装

まず、rails6においてturbolinksは

“`ap

Reactでfor文を使う

#したかったこと
JSX内で表の列をfor文を用いることで、繰り返し処理する。
理由）デザインを変える時に、一つ一つ変更するのが面倒だった。

“`react:解決前のコード

1set kg 回 2set

JavaScriptの関数の様々な利用方法

#はじめに
脱初心者にむけてアウトプットをしていこうと思って記事を書いております。
私は、まだ現場に出たことのない完全にど素人です。
間違ったことがありましたら、ぜひコメントいただけると幸いです。

##この記事の目的
JavaScriptの関数についてわからない方に向けて、わかりやすいようにまとめております。私自身、初心者で同じ境遇の方々もいると思うので、そういう方にむけてわかりやすく解説できたらと思っています。
####関数にはいろいろな使われ方があり、今回がそのうちの3つを紹介しようと思います。

#サブルーチンとしての関数
サブルーチンとしての関数とは繰り返しおこなわる機能をまとめ、それに名前をつけて参照するだけでその機能を実行可能にしてくれるもの。
つまり、特定のタスクを行うための「アルゴリズム」をひとまとめのユニットにする目的で使われる。

#####例えば
“`
const year = new Date().getFullYear(); //年（西暦）を得る
if(year % 4 !== 0) console.log(`${year}年は閏年ではない。`)
e

JavaScriptにおけるCookieにデータを保存・参照する方法

# Cookieにデータを保存する方法

“`
document.cookie = ‘id=1’;
“`

# Cookieのデータを参照する方法

“`
alert(document.cookie);
“`

# サンプルコード
“`index.html

クッキー

保存する
読み出す

“`

“`main.js
// 「保存する」ボタンをクリックしたとき
document.querySelector(‘.btnSave’).addEventListener(‘click’, () => {
// クッキーを保存する
document.cookie = ‘id=1’;
document.cookie = ‘age=30’;
document.cookie = `name=${encodeURICom