f@ctor

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

JavaScript関連のことを調べてみた2022年05月01日
目次

カードをひっくり返しているように見せる！【css+jQuery】

初投稿です！！

初心者ですが一生懸命書いてゆきますので、間違っているところなどございましたらご指摘お願いいたします。

今回は、カードがひっくり返って見える実装をしました。

【HTML】

“`html





くるっとさせるcss


元記事を表示

【React】 メニューとスクロール位置の連動を実装

### 動作

– メニューのクリックで特定の位置までスクロールする
– スクロール位置によってメニューの選択状態が追従する
![anchor-scroll-demo-1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946419/3dc95838-eced-b40d-1759-36dd20a6e4c7.gif)

### リポジトリ

https://github.com/Yoshifumi14/react-anchor-scroll

中身的にはこの記事とほぼ変わりません。コードさえ読めればこちらだけで十分かもしれません。

## `useAnchorScroll`

ロジックの本体です。使い回しが簡単になるようにカスタムフックとして切り出しています。

“`ts:AnchorScrollHook.ts
import React from “react”;

import { range } from “utils/ArrayUtils”;

/**
* @param elementsLengt

元記事を表示

JSの基本的な文法

# JavaScriptとは
ブラウザを動かすためのプログラミング言語です。
将来性のある言語1,2位に入るほどです。

コードだけ出しておくのでJSを触ったことない人は色々動かしてみてください。

環境構築面倒な場合はこれを使ってください。

https://paiza.jp/

# JS入門
簡単な出力です。
“`js
pochi = ‘ポチ’;
console.log(pochi);
//ポチ
“`

# 変数　　
変数を定義するときは“`let“`を使います。
“`js
let pochi = ‘ポチ’; //letで定義
pochi = ‘ピーコ’; //ピーコに書き換える
console.log(pochi);
//ピーコ
“`

# 定数　
書き換えができないつまり文字列を書き換えない時に使う
“`js
const pon_ta = ‘ポン太’; //間の単語を大文字にしたり、_にしたりする。半角スペース入れると動かなくなる
pon_ta = ‘ポン子’; //定数
console.log(‘pon_ta’);
//Uncaught TypeError:

元記事を表示

JavaScriptの省略

# 省略が多いJavaScript
JavaScriptの省略形はES6以降かなり多くなっています。
この記事ではJavaScriptの省略形について説明して行きます。

# アロー関数
まずは“`　=>(矢印)“`を使うアロー関数から説明して行きます。
まずは基本形です。

“`js
function fn(arg) {
//処理
}

const fn = (arg) => {　　//無名関数を　=>で省略
//処理
})
“`

実際のコードをみて行きます。

まず***無名関数をアロー関数で定義した省略無し***のコードです。

“`js
const message = (count) => {
return count + 1;
};

const count = 10;
const result = message(count);
console.log(result);
//11と出力
“`
次に***アロー関数の後ろのブロック省略***、***return省略***したコードです。

“`js
const message = (count) =

元記事を表示

google analycs4 (ga4) の遅延読み込み

### なんとなくいけてる気がしますので、掲載してみます。

“`lazy-gtag.js
var MEASUREMENT_ID=”G-xxxxxxxx”;

$(function() {
setgtag();
});

function setgtag() {
setTimeout(function() {
var gtc = document.createElement(“script”);
gtc.innerHTML=’window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag(“js”,new Date());gtag(“config”, MEASUREMENT_ID);’;

// 下記はデバッグモード用
//gtc.innerHTML=’window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag(“js”,new Date());g

元記事を表示

sinonのuseFakeTimersはsetTimeoutと一緒に使用できない

[Sinon.JS](https://sinonjs.org/)でuseFakeTimersを使って現在時刻を変更して単体テストをしていたとき、setTimeoutがおかしくなったので調べてみました。

## 公式サイトのドキュメント

[sinonのAPIリファレンス](https://sinonjs.org/releases/latest/fake-timers/)に説明がちゃんと書いてありました。
（なのでもうここまででこの記事は99%の内容になります。あとは蛇足です。）

APIリファレンスには以下のように書かれていました。

> Causes Sinon to replace the global setTimeout, clearTimeout, setInterval, clearInterval, setImmediate, clearImmediate, process.hrtime, performance.now(when available) and Date with a custom implementation which is bound to the

元記事を表示

Progate:js　学習日記　1day　メモ

**文字列の出力**：console.log(”文字列”）;

**変数の定義**：let 変数名 = 値；

⚠︎変数名は英単語を用いて2語以上の場合は大文字で区切る。数字から始まってはいけない　ex)oddNumber

**変数の出力**：console.log(変数名);

**変数の更新**：変数名 = 値；

⚠︎更新時は let 必要ない！

**定数の定義**：const 変数名 = 値；

⚠︎定数（const)は後から更新できない！

${定数}で文字列中に定数や変数入れられる！⚠︎文字列全体を`文字列`で囲む

**条件分岐**：if(number>10){

console.log(”１０より大きいよ”);

}

**elseを使ってfalseの場合の処理追加**

if(number>10){

console.log(”１０より大きいよ”);

} else {

console.log(”１０以下です);

}

**else ifを使って更に条件分岐追加**

if(number>10){

console.log(”１０より大きいよ”);

} e

元記事を表示

40代おっさんJavaScriptの即時関数を学ぶ

## 本記事ついて

本記事は プログラミング初学者の私が学習していく中でわからない単語や概要をなるべくわかりやすい様にまとめたものです。
もし誤りなどありましたらコメントにてお知らせいただけるとありがたいです。

### 即時関数の使い方

関数の中で使える変数や、関数を区別するために使う

“`javascript
let c = (function() {

console.log(‘called’);
let privateval = 0;
let publicval = 10;

function privateFn() {
console.log(‘privateFn is called’);
}
function publicFn() {
console.log(‘publicFn is called’);
}

return {
publicval,
publicFn
};
})();

c.publicFn();

console.

元記事を表示

40代おっさんJavaScriptのクロージャーを学ぶ

## 本記事ついて

本記事は プログラミング初学者の私が学習していく中でわからない単語や概要をなるべくわかりやすい様にまとめたものです。
もし誤りなどありましたらコメントにてお知らせいただけるとありがたいです。

## クロージャー

クロージャーとは
レキシカルスコープの変数を関数が使用している状態

“`javascript
function fn1() {
let b = 1;
function fn2() {
console.log(b);
}
fn2();
}
fn1();
“`

このようにfn2から外側のfn1のlet bを呼び出している状態

これを使って以下の関数を作ることができる

### プライベート変数の定義

例えば

“`javascript
let num = 0;

increment();
increment();
increment();

function increment() {

num = num + 1;
console.log(num);
}
“`

これのログを

元記事を表示

40代おっさんJavaScriptのスコープを学ぶ

## 本記事ついて

本記事は プログラミング初学者の私が学習していく中でわからない単語や概要をなるべくわかりやすい様にまとめたものです。
もし誤りなどありましたらコメントにてお知らせいただけるとありがたいです。

## スコープとは

実行中のコードから値と式が参照できる範囲
JavaScriptにおけるスコープとは、変数がどの場所から参照できるのかを定義する概念

### 5種類のスコープ

#### グローバルスコープ

・プログラムのトップレベルで宣言された変数は、グローバル変数となり、プログラム全体のどこからでもアクセス可能なグローバルスコープ

・varやfunctionで値を保持するとWindowで値が保持される
これがグローバルスコープになる

#### スクリプトスコープ

一般的にはスクリプトスコープもグローバルスコープと呼ばれる
letで値を保持するとScopeで保持される
もし同じ変数があったとして、varとletに格納すると優先されるのはletである
そのためグローバルスコープとスクリプトスコープでは少し違いがある

#### 関数スコープ

“`javas

元記事を表示

React歴4ヶ月でアプリをリリースした

## はじめに

所属する会社が提供しているサービスでReactを使っており、私はカスタマーサクセスなのでガチエンジニアではないけどもトラブルシューティングや仕様の理解でソースを読むべき機会は多々ありました。ベンチャー企業でもあり、エンジニアのリソースが限られていることから、より業務範囲を広げるため、また、エンジニアとのよりスムーズなコミュニケーションのために言語理解を深める必要がありました。

バックエンドの実装やAIモデルの構築等はそれなりに経験があるものの、フロントエンドはほぼ未経験(とはいえ、宣言的なプログラム言語でいうとFlutterは少しだけ書けるので、全くの素人よりは多少のアドバンテージがあるかもしれません)であっため、必要に迫られて2022年の後半からReactを勉強し始めました。その過程で自分のサービス作れそうだな! 作りたいな! という気持ちになり、サービスを作りながら本ページを記載しています。

バックエンドまで作り込みたかったのですが、平日は本業が忙しく、ほぼ週末の限られた時間で開発しているため、一旦はAWS Amplifyで手抜きしました(といってもAmpli

元記事を表示

JavaScriptでFizzBuzz作成してみた

# FizzBuzzとは
プログラミングの問題（課題）のことです。
プログラミング力を図るものです。
下の記事に説明があります。

https://wa3.i-3-i.info/word18535.html

# FozzBuzz作成
以下を出力させます。

1. ***1から1000までJavaScriptで出力させてください。***
2. ***そして３の倍数がFizz,5の倍数がBuZZを出力させてください。***

“`js
function fizzbuzz() {
for (i = 1; i <= 1000; i++) { if (i % 3 === 0 && i % 5 !== 0) { console.log("Fizz"); } else if (i % 3 !== 0 && i % 5 === 0) { console.log("Buzz"); } else if (i % 3 === 0 && i % 5 === 0) { console.log("FizzBuzz"); } else {

元記事を表示

JavaScriptのいろいろな引数

# 引数
JavaScriptには色々な引数があります。
それぞれみていきます。

# デフォルト引数

“`js
function execute(arg = ‘デフォルト引数’) {
return arg;
}

//関数
const result1 = execute();
console.log(result1);

const result2 = execute(‘JS’);
console.log(result2);

//デフォルト引数
//JS
“`

# キーワード引数
***{}が引数***になります。
“`js
function execute({ arg1, arg2, arg3 }) {
return { arg1, arg2, arg3 };
}
const result = execute({ arg1: ‘test1’, arg2: ‘test2’, arg3: ‘test3’ });
console.log(result);

//{animal1: ‘犬’, animal2: ‘猫’, animal3: ‘猿’}
“`

元記事を表示

【Google Apps Script】英文のGoogleドキュメントをDeepL APIで翻訳してドキュメントに書き込む

## 実現したこと

**英文のGoogleドキュメント** を **日本語に翻訳** して、**Googleドキュメントに書き込む**

![app](https://user-images.githubusercontent.com/47489629/166102834-db1aef02-4024-4c69-ab28-c6b05c1533c5.gif)

## 今回のきっかけ

以下3つがきっかけでした。

– [ウェブ版のDeepL](https://www.deepl.com/ja/translator?referrer=https%3A%2F%2Fwww.google.com%2F)だと、無料プランでは一度に5,000字までしか翻訳できない（2022/04/30時点）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401966/3d9b95fe-7b54-ec2d-09c3-edbef3a884b5.png)

– ウェブ版で翻訳できても、その後にGoogleドキュメントに手動

元記事を表示

「No ‘Access-Control-Allow-Origin’」が出た時に疑うこと・解決策リスト

# 普段の環境
・Vue CLI（4系）
・Laravel（6系）
・XAMPP
・Vue ⇔ Laravel間はaxiosを使用

# 疑うこと・解決策リスト

### 1. レスポンスヘッダーに「Access-Control-Allow-~~~」を入れているか

Vue.jsとLaravelなどで開発を行う場合、フロントエンド・バックエンドのドメインが異なる場合もあるかと思います。
（例えば、Vue.js→「[http://localhost:8080](http://localhost:8080)」、Laravel→「[http://localhost:8001](http://localhost:8001)」など）
この場合、axiosなどで普通に通信しようとすると、タイトルのCORSエラーが出るので、レスポンスヘッダー（バックエンド側）で、下記のような記述をしてあげましょう。

“`php
header(‘Access-Control-Allow-Origin: http://localhost:8080’); // ←アクセスを許可したいドメインを設定
header(‘

元記事を表示

JavaScriptの関数の定義方法についてまとめてみた

# はじめに
JavaScriptの関数を定義する方法は複数あります。そして、アプリケーションの開発では様々な方法で関数を定義していきます。しかし、学習して間もない時は複数ある関数の定義方法について混乱したり、理解が曖昧なことがあると思います。そのため、それぞれの記述方法や特徴をまとめました。

# 関数宣言
function、関数名、引数、関数の処理を記述して関数を定義します。引数がない場合も()を記述する必要があります。
“`JavaScript
function 関数名(引数){
// 関数の処理
}
“`
関数宣言で定義した関数は先に読み込まれるため、関数を実行する記述が前でもエラーになりません。
“`JavaScript
example()

function example(){
console.log(‘example’)
}

// エラーにならない
“`

# 無名関数
function、引数、関数の処理を記述して関数を定義します。
“`JavaScript
function (引数){
// 関数の処理
}
“`
関数宣言と比較すると、関数名

元記事を表示

【JavaScript問題】「700 / 500 | 0 」の出力結果は？

なんだこの書き方は？っというのがあったので調べて理解したので、投稿しておきます

# 答え

“`
700 / 500 | 0
= > 1
“`

# 理由

まず、700 / 500 = 1.4 です。
“|”はビットの論理和であり、整数の演算子です

※補足
> 整数・・・実数の分類の1つで、正の整数（自然数）、ゼロ、負の整数のみ
> 実数・・・有理数と無理数

これを使った時点で、左側が実数から整数に変換され、小数点が消えて、”1″になります。
右の値が”0″なのでそのまま左の整数の値”1″が得られます。

# 補足
5 | 3 = 7 です

理由は以下です
“`
const a = 5; // 00000000000000000000000000000101
const b = 3; // 00000000000000000000000000000011

console.log(a | b); // 00000000000000000000000000000111
// expected output: 7
“`

# 最後に一言
何

元記事を表示

Ankiで早押しクイズ その2 —パラレルの強調表示

少し前に、暗記カードアプリ「Anki」を使って早押しクイズをするカードの実装について書きました。

Ankiで早押しクイズ：https://qiita.com/WaTTson496/items/66f6052be1a16905805a

これを使うと、このような形で早押しクイズの練習をすることができます：