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

GoogleのISBN検索結果から著者名とタイトルを取得するブックマークレット GetAuthorTitle

#1. はじめに

ISBNから著者名とタイトルを取得したいと思いましたが、Amazonは自動取得禁止、APIを利用すべしとのことですが、APIを使うのも大変そう。
自動でGoogle検索してその結果から取得も考えましたが、Googleも自動でクエリを投げるのは禁止です。
それならば、Google検索を行うのは人手で行い、検索結果から著者名とタイトルを見つけるところだけブックマークレットにすればよいと考えました。

#2. ソース

ブックマークレット用1行版

“`GetAuthorTitle.js
javascript:(function(){ var i, div, a, h3, s1, s=””; for (i = 0; div=document.getElementsByTagName(“div”)[i]; i++) {if (div.className == ‘g’) {a=div.getElementsByTagName(“a”)[0]; if (a.href.startsWith(“https://www.kinokuniya.co.jp”)) {h3 = div.g

Railsで架空のCafeのHPを作ってみよう!【16日目】『colorboxのスクロール固定』編

#概要
基本Railsの記法に則り書いていきます！
１から全ての説明ではなく
その中であれ？どうやるの？と
疑問に思った点や実装に困った箇所を
ピックアップして紹介していきます♩

#設定と準備
・Rails
・HTML
・CSS
・Javascript(jQuery)

↑上記の言語とフレームワークを使い
架空(自分で考えたテキトーなもの)のCafeの
HPを作っていこうと思います！

#16日目の作業内容:round_pushpin:
・colorboxを導入しモーダルを作成

#16日目の気になった箇所:zap:
モーダルを作成できたのは良いが
スクロールすると一緒にスクロールされて
モーダルが見えなくなってしまうの固定したい！

#仮説:pushpin:
position: fixed;
などを使えば上手くいくのかな。

#結論:star:
調べてみたが理解するのが今の自分には非常に難しかったので
今回はどうすれば上手くいくのかだけの紹介になります。

どのような方法でも良いので
JSのファイルがモーダルを使っているHTMLで読み込めるようにしてください。
方法をしましてはco

PromiseとAsync/Awaitについて

# PromiseとAsync/Awaitについて
Promiseとasync/awaitについて自分の中では理解しているけど、上手く説明できなかったので整理します。
一言で説明できるようになることを目的とします。

# JavaScriptは処理を待てません！

“`js
console.log(“1”);

// 1秒後に実行する処理
setTimeout(() => {
console.log(“2(1秒後に実行)”);
}, 1000);

console.log(“3”);
“`

“`js
1
3
2(1秒後に実行)
“`

# Callback
JavaScriptは処理を待てないので、、、

“`js
function loadScript(src) {
スクリプトを読み込む処理
}

loadScript(“/myScript.js”);
newFunction(); ← この関数はmyScript.jsを読み込みが終わるのを待ちません
“`

このnewFunction()がmyScript.jsの内容を使用する場合にはnewFunction()

今更 React Redux に入門

前々からReact Reduxを勉強していて、いまいちピンと来ていなかったのですが、ある記事を見てピンと来たので、入門者ながらまとめておきます。

お世話になったサイト
https://reffect.co.jp/react/react-redux-for-beginner#Redux-2

# React Reduxとは？
Reactの状態管理ライブラリです。
Reactで状態を管理するときはuseStateを使いますが、useStateで管理できるのはそのコンポーネント内のstateだけです。つまり、他のコンポーネントからアクセスしたり書き換えたりというのはできません。
そこで様々なコンポーネントでstateを共有できるようにしたのがReduxです。

# Reduxの予備知識
様々なコンポーネントでstateを共有するために、ReduxではStoreと呼ばれる倉庫を用意します。
各コンポーネントは倉庫の中のstateを読んだり、倉庫の中のstateを書き換えたりします。
つまり、stateを共有するために**Storeをあらかじめ作っておく必要があります**。
なので入門者はまず

[個人開発]プログラマーなら気になっちゃうWebサービスを作ってみた。

# まえがき
こんにちは、北海道札幌市で活動しているWebエンジニアチーム「fact」です。
弊チームは2020/5より活動開始したチームです。現在エンジニア歴１〜２年のメンバーが2名で活動しています。メンバー募集中！（特にWebデザイナーが欲しい）

今回は、プログラミング言語を学習した人、学習する人なら一度は気になる「アレ」を可視化してみました！

この記事では、今回作成したサービスの概要から使用技術、どのような過程で作成したかを記載します。
個人開発に興味のある初学者にとっても有益な情報かもしれません！

ぜひ、最後までご覧ください。

# 目次
[1.作ったWebサービス](#1-作ったWebサービス)
[2.作成の流れ](#2-作成の流れ)
[3.使用技術について](#3-使用技術について)
[4.今後について](#4-今後について)
[5.あとがき](#5-あとがき)

#1. 作ったWebサービス

サービス名：プログラミング言語ランキングサイト
URL：　https://programming-ranking.com
サービス内容：GitHubのプログラミング言語別リポ

create-react-appでjestを使う方法

create-react-appにてJestを導入するのにエラーや手順がわからず困ったので、成功した方法をここに書き残しておく。

主に参考にしたもの?

https://jestjs.io/docs/getting-started

https://babeljs.io/docs/en/configuration#whats-your-use-case

## 環境
– jest: 27.0.6
– babel-jest: 27.0.6
– @babel/preset-env: 7.14.9
– @babel/preset-react: 7.14.5
– react: 17.0.2

## やったこと
兎にも角にもまずは`create-react-app`を実行

“`
$ npx create-react-app jest-practice
$ cd jest-practice
“`

まずはドキュメント通りに手順を踏んでみる

https://jestjs.io/docs/getting-started

“`
1. npm install –save-dev jes

next/routerのisReadyフラグ

# isReadyとは

`next.js`のRouterオブジェクトのisReady属性は、routerが完全に[準備](https://nextjs.org/docs/api-reference/next/router)できているかどうかを表すフラグである。

“`
isReady: boolean – Whether the router fields are updated client-side and ready for use.
Should only be used inside of useEffect methods and not for conditionally rendering on the server.
“`

– ルータの各項目がクライアント側で更新されてから初めて使えるようになる
– useEffect（やcomponentDidMount）でしか使わない。サーバ側レンダリングでそれの利用を避けるべき。

– 参照の仕方

“`js
import { useRouter } from ‘next/router’;

export HogeP

[xstate] machine間で親子関係（ツリー）によりstate、eventを管理する方法

# 問題

モデルをxstateに落とし込んでいくと、どうしてもmachineを分割して、1つのmachineが他のmachineを管理して全体としてのstateを管理したい事が出てくる。（例：one-to-many、many-to-many）

# 解決方法

– [spawn][1]
– [send][2]
– [sendParent][3]
– [pure][4]
– [sendUpdate][5]

## 親machineに子machineを持たせる

やり方は

1. contextに直接保持しておく
1. invokeでsrcにmachineを当てる

だけだと思う。

### contextに保持

“`ts
interface Context{
child: ActorRefFrom
}

…
{
states: {
idle: {
entry: [“setChild”] // どこでもどのタイミングでも問題ない
}
}
},
{
actions: {
setChild:

kintone Tips まとめ（私が書いたもののまとめ）

今までカキカキしてきたkintone関連記事がたまってきたので、まとめてみました。
（2021/08/03の時点で93件）
記事が増えるたびにコチラに追加していこうと思います。

# ?標準機能
## ?関数

### ?実務で使えそうな関数Tips

* [IF関数を試してみよう](https://qiita.com/juri_don/items/9a1c26a408ed232d9383)（IF関数）
* [IF関数で場合分けしよう](https://qiita.com/juri_don/items/b3daff3a2193146ef9a7)（IF関数）
* [チェックボックスで特定の値だけが選択されているとき～をベン図とIF関数とCONTAINS関数を使ってやってみる](https://qiita.com/juri_don/items/3abdb9ace1c316b59570)（IF関数、CONTAINS関数）
* [標準機能で「年度」を計算する](https://qiita.com/juri_don/items/c7002d0fc84c4cf089d1)
* [標準機能で、休憩時

JavaScript用語集

|用語|意味|
|–|–|
|トランスパイラー|新しいJavaScriptを従来のJavaScriptに変換すること ex)Babel|
|コンパイル|プログラミング言語から機械語(オブジェクトコード)に一括して変換すること|
|プラグイン|機能拡張用のソフトウェア|
|ビルド|コンパイルしたファイルを一つにまとめて、実行可能なファイルを作る事。|
|モジュール|アプリを機能単位に分割するもの。|
|イテレータ|オブジェクトの内容を列挙するための仕組みを備えたオブジェクト|
|ジェネレータ―|列挙可能なオブジェクトをより簡単に実装するためのもの|
|マジックナンバー|ソースコードに書かれた数値でその意味や意図が記述した
ex) 1.1と書かれている場合は消費税とはみんなが理解できるわけではない|
|ハードコード|マジックナンバーを書くこと、後で確認や変更が大変になるから避けるべし|
|リテラル|データ型に格納できる値そのもの、文字列や数字のことで変数に対していう ex) |
|関数リテラル|無名関数＝匿名関数＝変数に関数を代入して記述すること|
|テンプレート構文|バッククォ

JavaScriptを基本からまとめてみた【8】【getElementById】【随時更新】

##はじめに

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

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

##getElementById
『getElementById』はHTMLのタグ内で指定したid名にマッチするドキュメント要素を取得する
メソッド。次のように記述して使用する。

“`
document.getElementById(“id 名”);
“`

引数に HTMLタグ内で指定した id 名を指定する。

“`sample.html

Hello！

“`

“`sample.js
document.getElementById(“dat”);
“`

『document.getElementById(“dat”)』の返り値は Element オブジェクトで、その内容

vue.jsの使い方の基礎＃２【computed/methods/watch】

ドキュメントに沿って手を動かしたことを自分用教科書として書いていきます（算出プロパティとウォッチャの部分）
[公式ドキュメント](https://jp.vuejs.org/v2/guide/computed.html)とやっていることは基本的に同じです。覚えたことのアウトプットと、わからなかったことを調べて補足して書いている感じです。
誰かの参考になればうれしいです。
公式ドキュメントのはじめに～テンプレート構文までは前回記事にまとめたのでそちらもよければ見てみて下さい。

https://qiita.com/kty000/items/98aa7e83ec496daf3137

#算出プロパティの書き方【computed】
vueでは、単一の式であればテンプレート内にJavaScriptをかけます。

“`Index.vue

{{ message.split(”).reverse().join(”) }}

“`

上のサンプルでは`message`を逆にして表示しています。
１回ならいいのですがもし`message`を逆

Vue.jsでブラウザバックを検知する方法

## 概要
ブラウザバックを検知して、Vue.jsのプロパティに論理値をセットすることによってVueコンポーネント内でブラウザバックしたかどうかを判定できるようにする。

## プログラム
### Vue.jsのプロパティに「$browserBackFlg」をセット

“`js:app.js
// ブラウザバックを検知してコンポーネントで「this.$browserBackFlg」で使用できるようにする。
Vue.prototype.$browserBackFlg = false
history.replaceState(null, ”, null)
window.addEventListener(‘popstate’, function() {
Vue.prototype.$browserBackFlg = true

window.setTimeout(() => {
Vue.prototype.$browserBackFlg = false
}, 500)
})
“`

#### `history.replaceState(stateObj, title

[gulpエラー] gulp-sass 5 does not have a default Sass compiler

# 状況
1年くらい放置してたプロジェクトを進めようとnpm runしたら、前は問題なく動いていたのに急にこんな風に怒られちゃいました…。

“`
Error in plugin “gulp-sass”

gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the `sass` and `node-sass` packages are permitted.
For example, in your gulpfile:

var sass = require(‘gulp-sass’)(require(‘sass’));
“`

# 原因
どうやら2021年7月に[gulp-sass](https://www.npmjs.com/package/gulp-sass)がversion 4から5へとメジャーアップデートされた際に、プラグインの読み込み方も変更されたようです。

# 解決法
エラーでも紹介されている通り、sassの読み込み方を変えます。

まずは ` npm i

【JavaScript】Dateオブジェクトの使い方

# はじめに
アウトプットが苦手な自分が練習の一環として記事を書いてみる。

第二回目です。

以前Dateオブジェクトを使った日付の加算で少し躓いたところがあったので、
それについて記事を書こうと思ったのですが、
その前にまずは`Dateオブジェクトの簡単な使い方`について書いていきたいと思います。

# 現在の日時を取得する
new Date()を使用することでDateオブジェクトを生成します。
引数を指定しない場合、現在の日時でオブジェクトが生成されます。

“`javascript:現在日時を取得
const date = new Date();

console.log(date);
// 実行結果
// 2021-08-02T03:46:44.601Z
“`

# 任意の日時を取得する
先ほどのnew Date()に引数を指定して生成します。
指定の仕方は以下の3種類あります。

– 年月日時分秒ミリ秒（年月日のみ指定など省略可）
– 文字列
– 1970年1月1日(UTC)からの経過ミリ秒数

“`javascript:任意の日時を取得
// 年月日時分で指定
co

正しいuseCallback()の使い方

今回、useCallbackを理解する上で、参考にさせていただいた記事がこちらです。
[Your Guide to React.useCallback()](https://dmitripavlutin.com/dont-overuse-react-usecallback/)

こちらを翻訳してまとめたものになります。掲載許可済みです。
Dmitri Pavlutinさん、ご協力ありがとうございます?
「Good luck in your journey to mastering Frontend development!」
と、とても優しい方で、すっかりファンになってしまった。

## その前に、関数の等価性チェックを理解する。

“`jsx
function factory() {
re

javascript オブジェクトの参照とコピーについて

##挨拶
@hakeと申します。初投稿です！
オブジェクトの参照とコピーについて勉強し直したので記事にしました！
知っている方も復習する気持ちで読んでいただけると嬉しいです！

##以下のコードには問題があります！
“`Index.tsx
const [team, setTeam] = useState({
engineer: { reader: “kazu”, member: [“eita”, “yasu”] },
designer: { reader: “satoshi”, member: [“keita”, “tadashi”] },
});

// bad
const setEngeneerReader = () => {
// スプレッド構文でteamをコピーする
const newTeam = { …team };
// 深くネストされた値を変更する
newTeam.engineer.reader = “koki”;
console.log(
“prevReader”,

Vue.jsでプレビュー付きの画像アップロードを作った。

# はじめに
おはようございます。こんにちは。こんばんは。
Watatakuです。
今回はVue.jsでプレビュー付きのよくある画像アップローダーの作り方です。
⬇︎画像の選択後

# 対象者

– Vue.js初学者。

# 環境

– node.js: v15.11.0
– npm: v7.6.0
– @vue/cli: v4.5.13
– vue: ^2.6.11

# 作り方

“`vue