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

1画面だけのWEBアプリをオフラインでも動くようにするためにServiceWorkerを使う

# 概要

このエントリでは、1画面だけのWEBアプリをオフライン（コンピュータがインターネットにつながっていない時）でも動作するために、Service Workerを使うときについて紹介します。
Service Worker に関する詳しい説明は、末尾の参照先をご確認ください。

## できること

– Qiitaに「[PDFをブラウザ全画面モードにしてスライドショーができる、ビデオ会議で便利かもしれないツールを作ってみた](https://qiita.com/hrkt/items/18e53ce031859e8a059b)」というエントリを以前書いたのですが、こういった簡単なWEBアプリをオフラインでも動かせるようになります。

以下を含みます。

– このエントリでは、ServiceWorkerのAPIを直接利用するときについて説明しています。
– 初回インストール後のアップデートについて説明しています。
– なるべく小さな変更で実現できるようにしています。（Service Workerの機能をすべて使うことを目的とはしません）

## このエントリだけだと扱っていないこと

–

Flex Messageがしんどいメモ

LINE Bot開発話です。

Node.jsのSDKだとFlex MessageのJSONをラップしつつさらにJSONでtype指定を行う感覚なので、[シミュレータ](https://developers.line.biz/flex-simulator/)で生成されたJSONをどこからどこをコピペして使えるのかがいつも忘れます。

> 

## コピペ用テンプレ

こちらの記事を参考にしつつ

https://qiita.com/n0bisuke/items/c2d80be33a85d944b294

“`js
return client.replyMessage(event.replyToken, {
type: “f

IntelliJ などの JetBrains IDE で React をデバッグする

# 概要

JetBrains IDE で React をデバッグする手順を書きます。
調べても最新のが出てこなかったので、、、

React に限らず、 パッケージマネージャーを使用して実行しているアプリケーションはこの方法で行けるはずです。
参考記事には Angular での実行方法も乗っています。（応用すれば Vue もいけると思われます）

# これまでとの相違点

– JetBrains IDE Support という Chrome 拡張機能を使用しない

以前は必要だったみたいですが、手元で試したらなくても行けました。

# 前提条件

– 説明は macOS で行う
– 手順はメニューバーからの選択を始めとしているが、ショートカットやIDE上のアイコンからの操作も可能
– Node がインストールされていること
– Node のパッケージマネージャー（ex. `npm` ）がインストールされていること

# 手順

## NodeJS プラグインのインストール

– Menu > IntelliJ IDEA > Preferences > Plugins を開く
– `N

【JavaScript】コールバック関数について

## はじめに
　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

## コールバック関数について

### コールバック関数とは
コールバック関数とは、関数を呼び出す時に、引数に指定する別の関数のことです。
以下の`printHoge`がコールバック関数となります。

“`.js:コールバック関数

// printHogeを定義
const printHoge = () => {
console.log(‘Hoge’);
};

// callbackにprintHogeを代入
const call = (callback) => {
const.log(‘コールバック関数を呼び出す’);
//callbackを呼び出し
callback();
}:

// 引数にprintHogeを渡して、関数callを呼び出し
call(prin

[JS]HTMLの要素を取得する方法

アウトプットとして

JavaScriptの特徴として「HTMLの要素をJavaScript上で取得し操作する」というのがあるので、HTMLの要素を取得する方法について説明できたらと。

#HTMLを取得する
###documentオブジェクト
ブラウザ上の情報を操作する事ができるオブジェクトです。
documentオブジェクトを用いてHTMLを取得する方法は大きく分けて3つ

①id名から取得する
②class名から取得する
③セレクタ名から取得する

##①id名から取得する
###document.getElementById(“id名”)
DOMツリーから特定のHTMLの要素を取得するためのメソッドの1つです。引数に渡したidを持つ要素を取得します。

“`javascript:例
//id名がhogeの要素を指定する場合
document.getElementById(“hoge”)
“`

##②class名から取得する
###document.getElementsByClassName(“class名”)
classを指定して取得する際に使用します。気をつけたいのは

jQueryの$(document).on(‘click’, ‘セレクタ’, function(){〜});を生JS（Pure JavaScript）で書きたい

はじめまして、ARCHETYPの副社長テクニカルディレクターの神谷です。

プロジェクトでがっつりコードを書くことがめっきり減ってしまいまして、アウトプットする場所がなくなってしまったので、ちょっとしたTips系の記事などを気の向くまま書いていきたいと思います。

今回は**jQueryを使っていたところを生JSに変更していく**時のコードを書いてみました。
まずは動的に追加される要素にも対応可能にするイベントハンドリングの例です。

サンプルとしてアコーディオンUIで考えてみたいと思います。
タイトル部分をクリックすると中身の表示非表示を切り替えるサンプルです。

##HTML
ここは非常にシンプルに、タイトル（.title）とコンテンツ（.panel）が存在している状態。

“`html

title

aaaaaa
bbbbb
ccccc

useState更新タイミング/useEffect初回レンダリング、非同期処理

たぶんVueからReactに来た人ははまるんじゃないかポイント

useState

初めて見ると変わった書き方だが、ただ状態管理してくれるもの

“`react
const Qiita = () => {
const [data, setData] = useState(0)
const up = () => {
setData((data) => data + 1)
}
return

{data}

;
};

“`

クリックしたら１づつ上がる関数である

更新タイミング

ここで私は躓いた
例えば、クリックされプラス1されたとき、この数字をバックエンドに送りたい時なんかを考える

“`react
const Qiita = () => {
const [data, setData] = useState(0)
const up = () => {
setData((data) => data + 1)

Amplify CLIで作ったGraphQL APIクエリするテンプレ + Authenticator コンポーネントのまとめ

## 何をするか
Amplify CLIで以下を作成する。

– Cognitoで認証されたユーザーだけがクエリを実行できるGraphQL API
– React.jsのコード
– Authenticatorコンポーネントによる認証
– Cognitoで認証されてAPIへクエリする　(認証とUIのテンプレなのでクエリ内容は固定、しかも結果もコンソールに表示するのみ)
– 認証状態が変わるとボタンの表示非表示が変わる
– material-ui入れる (今回のコードではボタンしか使っていないため、@aws-amplify/ui-reactだけでもいい)

Amplifyのドキュメントは必要情報自体はあるけれど、情報が散在しているためシンプルな構成をガガッと試したい時に結構時間かかる。今回一番苦労したのはAuthenticatorコンポーネントが何者なのかというところ(複数のバージョンがあり紛らわしい)。

ログイン前の画面
![スクリーンショット 2022-01-23 22.30.19.png](https://qiita-image-store.s3.a

Chrome拡張機能でスクレイピング結果をダウンロードする

#Chrome拡張機能のプロジェクトを作成する
## ファイルを設置
任意のディレクトリに以下のファイルを設置する。
manifest.json
script.js

## ディレクトリをChromeから読み込む

１．拡張機能管理ページを開く。　(URLは→　chrome://extensions/)
２．「デベロッパーモード」をONにする。
３．「パッケージ化されていない拡張機能を読み込む」ボタンを押してディレクトリを選択する。

参考：[Chrome拡張機能の作り方。誰でもかんたんに開発できる！](https://original-game.com/how-to-make-chrome-extensions/)

# manifest.json
“`manifest.json
{
“name”: “Scra

new TextEncoder() するのは最初の1回だけでいい件

`TextEncoder`や`TextDecoder`は、Uint8Arrayと文字列を相互に変換するAPIです。crypto周りのコードでよく使われています。しかし、書き方によってはパフォーマンスが低下する可能性があります。

## `new TextEncoder()`や`new TextDecoder()`を呼び出すタイミング

以下は文字列をUint8Arrayに変換し、SHA-256でハッシュ化する関数です。

“`ts:よくあるパターン
import * as hex from “https://deno.land/std@0.122.0/encoding/hex.ts”;

/** SHA-256を使用して文字列をハッシュ化する関数 */
export async function hash(message: string) {
// 関数が呼び出されるたびに毎回`new TextEncoder()`されている
const encoded = new TextEncoder().encode(message);
const hashBuffer = awa

【React Native】ListItemを勉強したのでサンプルを作ってみた

# 【ReactNative】の ListItem の簡単なサンプル

## 概要

ReactNativeのListItemを勉強したので簡単なサンプルを作成してみました。

## 実行環境

– Expo snack

## コード

“`react
import React from ‘react’;
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from ‘react-native’;
import { ListItem } from ‘react-native-elements’;

const DATA = [
{
fruitName: ‘れもん’,
id: ‘First Item’,
},
{
fruitName: ‘りんご’,
id: ‘Second Item’,
},
{
fruitName: ‘ぶどう’,
id: ‘Third Item’,
},
{
fruitName: ‘マン

パスワード入力フォーム表示・非表示

##はじめに

現在、自己学習の為、既存サイトを模倣したサイトを作成しています。
調べて実装した内容を自分なりにまとめてみました。
※参考にさせて頂いた記事・サイトは[最後](https://qiita.com/meowave/items/465fcb91a9fd06c4a8b3#%E5%8F%82%E8%80%83%E5%BC%95%E7%94%A8)に記載しております。

####今回の目標
目のマークを押すと表示・非表示が切り替わる パスワード入力欄の実装
色々なサイトで見かける機能ですが、今まであまり気にせず利用していました。
改めて、何故こんな機能が必要なの？？と思い調べると、パスワードは表示すべきか非表示にすべきか、過去、思った以上にたくさんの議論が交わされていた問題のようでした。知らなかった。。。
表示・非表示はどちらにもメ

React のライブラリのソースコードを読む時に役に立ったサイト

みなさん、React のライブラリのソースコードを読んでますか？

「そんなの難しくて読めない」と思っているあなたに朗報です。
世の中には、React のライブラリのソースコードを、短くしたコードを公開しているサイトがたくさんあります。

ここでは、そんなライブラリを短くしたコードを公開しているサイトを紹介して、皆様の React のライブラリのソースコード読みをより充実 or 始めるきっかけ作りができればと思います。

## redux

https://gist.github.com/gaearon/ffd88b0e4f00b22c3159

下の方の、createStore の部分が読んでて参考になる。

# react-redux

https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/React/react-redux

まだ全部は読んでないけど、素のソースコードより短くて読みやすい。

# react-router

https://zenn.dev/stin/articles/

【コード品質】綺麗なReactコード 基本7例

# 初めに
– Reactは，HTMLやJSを混同して記述できるJSXが使われているだけあって多様な書き方で実装できてしまう
– 多様な書き方のコードが複雑に絡み合えば，説明，保守は難しくなる
– 最低限統一するルールは持つべきである

##### 超基本
✅ Prettierやformatterの設定は，開発者間で共有されていること
✅ Warning, 例外処理
✅ 無駄なconsoleはない
✅ 最低限度のコーディング規約は把握していること

# 良いコード例 基本
最低限意識して欲しいポイント7つを紹介します
## 1. 文字連結は直感的で分かりやすく

“`jsx
// NG
const apiUrl = origin + ‘/api/v2/user/’ + userId;

// Good?
const apiUrl = `${origin}/api/v2/user/${userId}`;
“`

## 2. ifの乱用は行数を多く取る
“`jsx
// NG
if (status == ‘JPN’) {
return ;
}

googoleアカウントでログイン（OAuth認証）で少しハマった

## 概要

需要は少ないと思いますが、ハマる人もいるかもしれないと思ったので覚書。
下記は、googleアカウントでログインのサンプルコードです。
ここで、コールバック関数**onSignIn**の定義に**let onSignIn = fucntion(){…}**を使用すると、コールバック関数が呼ばれなくなりました。
詳細は、下記詳細をご覧ください。

“`sample.html