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

超簡単！Mock API開発：json-serverを試す

今更ながらjson-serverを試します。

## 準備

node.jsが必要な以外は特にありません。
作業場作って（どこでもいいです）、json-serverをインストール。

“`bash
cd
mkdir mock-api
cd mock-api

npm install -D json-server”
“`

## API定義（実装）

### 定義ファイル生成

jsonなら名前とかは何でもいい。

“`bash
touch api.json
“`

### サンプルデータを実装

基準となるデータを入れる。

“`json:api.json
{
“users”: [
{
“id”: 1,
“name”: “hoge”,
“age”: 11
},
{
“id”: 2,
“name”: “foo”,
“age”: 22
}
]
}
“`

### 実行

これでREST APIサーバが起動します。

“`bash
npx json-server a

JavaScriptでアプリを作成しました【4】【3択クイズ】

##はじめに

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

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

##【仕様】
– 開始ボタンを押すと、問題が始まる。
– 回答する度に次の問題へ移行する。
– 10回問題が終わると、正答数が表示される。
– 最初に戻るボタンを押すと、最初の画面に戻る。

##参考サイト
[Java Scriptで3択クイズを作ろう【プログラミング】]
(https://www.youtube.com/watch?v=9T6zL_iuKFE&t=44s)

javascriptでselectの値を取得する方法

javascriptでselectで選ばれた値を取得する方法

“`html
12345
“`

“`javascript
const Num = document.getElementById(‘select-num’)

Num.onchange = function(){　 /* onchangeでselectが変更されるたびに値を取得しています */

alert(this.value);
}
“`

【GAS】clasp pushコマンド実行時に出たエラーの対処

## User has not enabled the Apps Script APIというエラー
GASをローカルで開発する際に便利なCLIであるclasp導入時に発生したエラー。
初期設定として`clasp login`が完了しているにも関わらず、`clasp push`を実行すると下記エラーメッセージが表示されて、pushに失敗する。

“`
GaxiosError:User has not enabled the Apps Script API.
Enable it by visiting then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.
“`
結論、開発で使用するGoogleアカウントの設定で`Google Apps Script API`の利用をオンに設定してあげる必要があった・・・。下記のリンクから設定可能。

https://script.google.com/home/us

[React]フラグメントって？なんそれ！

# フラグメントとは
コンポーネントが複数の要素を返す際に、フラグメントを使うことで、DOMに余分なノードを追加せずに子要素をまとめることができるようになります。
以下のようにすることで、まとめられます。

“`react
render() {
return (





);
}
“`

## フラグメントを使わない際の問題点
以下のようなコンポーネントがあったとします。その場合、無駄に

タグを生成することになってしまい、余分なノードを追加することになります。

“`react
class Table extends React.Component {
render() {
return (

);
}
}

c

JavaScript/PHP 月末付近でも月を繰り上げずに○か月増減した日付を取得

例えばJavaScriptで8月31日の1か月後を取得しようとして

“`js:
const date = new Date(‘2021/08/31’);
date.setMonth(date.getMonth() + 1);
“`

としても、9月は30日までしかないので月が繰り上がり、実際に得られる日付は10月1日になってしまいますが、そのような日数の異なる月を目標月とした場合でも末日で丸めた9月30日として取得できるようにした関数です。

JavaScript/PHP版ともに、目標月+1月の0日を指定することで一旦目標月の末日にし、得られた末日と元の日付の「日」のうち小さいほうで「日」を再設定することで求めたい日付を取得しています。

####JavaScript版####

“`js:
function addMonth(date, num) {
const d = new Date(date);
d.setMonth(d.getMonth() + num + 1, 0);
d.setDate(Math.min(d.getDate(), date.getDat

Javascriptでローカルにある設定ファイル(json形式)を読み込む

#やりたいこと

ローカル上にあるJSON形式で書かれたファイルを読み込みJavascript上で扱えるようにする。

#HTML
“`html:index.html

“`

#JavaScript
“`typescript:reader.ts
const profile_form = document.querySelector(“#profile_form”);
profile_form.addEventListener(“change”, (e) => {
var profile = e.target.files[0];
var data;
var filename = profile.name;
var type = profile.type;

if (window.File && window.FileReader && window.FileList && window.Blob) {
var reader = new FileReader();
rea

非同期処理を理解する　Javascript編

# 同期処理と非同期処理の違い

**同期処理**：１ずつ順番に処理を行うこと
**非同期処理**：複数の処理を同時に行うこと

※Javascript非同期処理は複数スレッドによる並列処理では無いので注意が必要です（後に[説明](https://qiita.com/NGSW_0000/private/bd20d0964cb5a8d9ba66#%E6%B3%A8%E6%84%8F%E7%82%B9)を記載してます

### ■同期処理の例

“`js
console.log(‘result1’);
console.log(‘result2’);
console.log(‘result3’);
“`
“`
— 実行結果 —
result1
result2
result3
“`
この場合、上から順番に処理が行われます。
そのため処理順序は下記図のようになります

![同期処理 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/705300/28b37b44-2127-50bb-7277-

JSの日時処理を理解する

# 現在日時を取得する

`new Date()`を使用することで現在日時を取得できる

“`javascript
var date = new Date();
console.log(date);
“`
“`
Sun May 30 2021 13:44:33 GMT+0900 (JST)
“`

上記のように現在日時が出力される

# 特定の日付、日時を取得する

`new Date()`の引数に取得したい日付、日時の値を設定することで特定の日付や日時を取得できる

引数の設定方法は下記の３種類

### ① new Date(dateString)

`dateString`には`Date.parse()`で変換可能な文字列を指定する

“`javascript
var date = new Date(‘2021/01/01 10:00:00’);
var date2 = new Date(‘2021-01-01’);
console.log(date);
console.log(date2);
“`

“`
Fri Jan 01 2021 10:00:00 GMT+

JavaScriptで複数の画像を読み込む

JavaScriptで複数の画像を読み込みたい。しかも高速に。
初心者にとっては鬼門の処理ですが、2021年現在だとこのように書きます。

“`js:load_images関数
function load_images(list){
async function load(src){
const img = new Image()
img.src = src
await img.decode()
return img
}
return Promise.all(list.map(src => load(src)))
}
“`

“`js:使い方※async関数内で使ってね
const images = await load_images([‘1.png’, ‘2.png’])
“`
引数に読み込みたい画像のパスが入った配列を渡します。
戻り値はPromiseで、成功時に**配列**が返ります。中身はImageオブジェクトが順番に入ってます。

jQuery導入

今回は、JavaScriptのjQuerykの導入のみの記事です！
ネットで調べても中々うまくできなかったので、、、

※jQueryの導入には、jquery-railsというGemを利用することもあります！
今夏は違う方法です

##◇jQueryをインストール
“`perl:ターミナル
% yarn add jquery
“`
##jQueryを管理化に
“`perl:config/webpack/environment.js　
const { environment } = require(‘@rails/webpacker’)
const webpack = require(‘webpack’)

environment.plugins.prepend(‘Provide’,
new webpack.ProvidePlugin({
$: ‘jquery’,
jQuery: ‘jquery’,
jquery: ‘jquery’,
})
)

module.exports = environment
“`
##jQueryを認識させる？？
“

JavaScriptでアプリを作成しました【5】【4択クイズ】

##はじめに

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

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

##【仕様】
– 開始ボタンを押すと、問題が始まる。
– 回答する度に次の問題へ移行する。
– 10回問題が終わると、正答数が表示される。
– 最初に戻るボタンを押すと、最初の画面に戻る。

##【作成にあたり学習した事】
– API
– fetch
– 非同期処理

##APIとは
『API』とは「アプリケーション・プログラミング・インターフェース（Application Programming Interface）」の略称。一言で表すと、ソフトウェアやプログラム、Webサービスの間をつなぐインターフェースのことを指す。具体的には、「機能を公開しているソフトウェア」と「その機能を使いたいソフトウェア」をつなげる窓口のようなもの。

Vue+Vuetify+αで実装するSEOに適した無限スクロールの作り方

# はじめに

無限スクロールとは、TwitterやPinterestなどのSNSに代表されるような、ユーザーのスクロールに応じて続きのコンテンツが読み込まれ、ページ遷移を行わせることなくコンテンツを次々と表示させる技術ですが、[Googleによれば](https://webmaster-ja.googleblog.com/2014/02/infinite-scroll-search-friendly.html)無限スクロールはSEOやユーザービリティ対策として、ページの分割が可能なような仕様になるように推奨されています。

すなわち
http://example.com/?page=1
http://example.com/?page=2
などといった具合に分割して複数のページに分けることを出来るようにすることがよいというわけです。

実際無限スクロールを運用するに当たってはAjaxで一定の項目毎に取得すると思いますが、その取得するタイミングをページと見立て、読み込みが終わったタイミングで「History API」の pushState() や replaceState()を使ってU

javascript メモ

# javascript –メモ–,

Math.random()

０以上１未満の浮動小数点の乱数を返す。

参考サイト元

> https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random

Math.floor()

引数に与えた数字以下の最大の整数を返す。

参考サイト元

> https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/floor

jQueryの.find()はIE対応でJavaScriptの.find()は非対応

jQueryには、要素の子要素を取得する方法に`.children()`と`.find()`があります。

`.children()`は子までを取得してくれるのに対して、
`.find()`は子と孫まで取得してくれます。便利ですね。

しかし、`.find()`を使ったページをIEで表示すると稀に「オブジェクトは ‘find’ プロパティまたはメソッドをサポートしていません。」というコンソールエラーが表示されます。なぜでしょうか。
それは**JavaScriptの`.find()`はIE非対応だから**です。
このコンソールエラーが表示されるということは、`.find()`がjQueryではなくVanilla JSと解釈されています。
## .find()の対象が配列の場合、IEでコンソールエラーが発生する
その条件は、**`.find()`の検索対象がjQueryオブジェクトか配列かの違い**です。
つまり、jQueryが`$(“任意の値”).find()`で
Vanilla JSが`Array.prototype.find()`と書き分けられる必要があります。
## コンソールエラ

[Next.js] Incremental Static Regeneration 時の getStaticPaths で渡すパスについて

Next.js + Vercelの組み合わせで Incremental Static Regeneration（以後ISRとします) したら、なんか思ったとおりにいかなかったというお話。
完全にドキュメントを読んでいなかった自分の責任だけど、ハマったので他の人がはまらないように

# Next.jsのISRとは？
Next.jsのISRについては

https://vercel.com/docs/next.js/incremental-static-regeneration
https://zenn.dev/ria/articles/b709ae94e919c76f814a

によくまとまってます

# 結論
結論から先に書きます。
`getStaticPathｓ` を使って動的ルートを利用するページ（ `[id].tsx` みたいなページ）で `ISR` をする場合は、
オンデマンドでビルドしたいページのパスを `getStaticPathｓ` で返さないようにします。

“`typescript
export const getStaticPaths: GetStaticPath

Google Apps Scriptを使ってGoogleスプレッドシートと外部APIを連携してみる

# この記事について

– **外部APIの結果をスプレッドシートに書き込みたい！** という方向けの記事です
– qiitaのLGTM数などを定期的に取得してスプレッドシートに書き込む等ができるようになります
– また、業務においてもでAPIを提供しているプロジェクト管理ツール（Backlogなど）と連携することで **チームメンバーのチケット一覧** などを作れるようになります

# GASについて

– スプレッドシートとAPIの連携はGAS（Google App Script）を利用して行います
– GASについては、こちらの[記事](https://www.acrovision.jp/service/gas/?p=339)がわかりやすいかったです

# 連携方法
今回はサンプルとして、qiitaのAPIと連携してみます

– 適当なスプレッドシートを作成します

– スクリプトエディタを開きます
ウェブサイト作成用備忘録・１６号：スマホのソフトウェアキーボードとOrbitControls.jsの不具合の解消

今回は自主課題の作成中に起きた問題を自分なりに解決する為に考えた内容について記録に残しておきたいと思います。

####問題：three.jsにOrbitControls.jsを適用して、canvasタグ内で自由にカメラ操作が可能な状態で、HTMLにinputタグやテキストボックスに文字を入力する際、スマートフォンの場合はソフトウェアキーボードを展開時に入力位置を調整する為の矢印ボタンがカメラのパン移動（カメラの角度を変えずに平行に移動すること）に割り当てられてしまう為、操作時に物凄くストレスになる。

####解決策１（カメラのパン移動を制限しても良い場合）：javascriptでOrbitControls.jsの設定時にenablePan = false;を加える。

この方法はカメラのパン移動を制限するので、画面中央に立体物を配置するようなレイアウト限定ですが、一行で問題を解決する事が出来ました。

本当は**HTMLのinputタグがフォーカス状態になった時にOrbitControls無しでカメラを再設定、フォーカス状態解除でOrbitControls有りでカメラを再設定**を

javascript・CSSを使って要素を表示・非表示にする。

javascriptを使ってhtmlの要素を表示・非表示にする方法。

表示されているものを非表示にする方法

“`html

　　非表示にさせたい。！

“`
“`css
.test1{
display: none;
}
“`
非表示にさせたい要素にclassまたはidをつけて上げて display: none;をcssに記述してあげることによって非表示にすることができます。

非表示にさせたものを表示したい。

“`html

　　非表示にさせたい。！

　
“`
“`css
.test1{
display: none; /* ページが読み込まれた時点で非表示 */
}
“`
“`javascri

JavaScript文字列操作関連 – 逆引きリファレンス的なやつ

例によって育てていきます。永遠に完成しない説

# 0. 利用に関する注意事項

・あくまで実現手段の例であり、特定のメソッドの使用を推奨するものではありません。

・記載内容や参考サイトの内容について、動作検証等は検証しておりませんので、内容が誤っている可能性があります。動作確認等の検証を実施した上でご利用ください。（JavaScriptに関しては趣味で使っているレベルなので、トンデモなことを書いている可能性もあります。）

・JavaScriptに限らず、サロゲートペア[^1]や結合文字列などの落とし穴があるので、基本は明示的にケアする必要があります。
日曜プログラミングの範疇では無視っててもよいと思いますが、世に出すものであればケアしときましょう。
[^1]: 簡単に（雑に）いうと、見た目は１文字なのに２文字分のデータとして扱われるヤベーやつです。
参考： [サロゲートペア・結合文字列・合字 – Qiita](https://qiita.com/Nabetani/items/8c69bdd8060f2503683c)

# 1. 部分文字列の取得

# 1-1.