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

Jamstackセミナー開催予定

今回はBejamas社のブログ記事のご紹介ではなく
無料のJamstack_Webセミナーについて告知させていただきます:loudspeaker:

2021年7月6日（火）15時00分〜16時30分で
Jamstackのデモを見ていただきつつ、
「Webサイト改善」をテーマにお話しさせていただきます。

:warning:詳細はConnpassでの告知をご確認ください:warning:
https://connpass.com/event/215681/

最新のWeb開発事情にご興味のある方は、良ければご参加ください:bow_tone2:

Jamstack事例 ～国連COVID-19の場合～

今回も前回に引き続きBejamas社が取り組んだJamstackの事例についてご紹介したいと思います:mega:

クリエイティブなユーザー生成コンテンツで健康に関する重要なメッセージを世界中に広めようとしているTalenthouseと一緒に開発ができたことは、これまでで一番やりがいのある仕事になりました。

著者：トム・クルーパ　2020年10月5日
原文：https://bejamas.io/blog/case-study-united-nations/


私たちはコロナの影響で前例のない時代に生きています。COVID19のパンデミックで依然として世界の多くが封鎖されています。しかしそれと同時に、今まで以上につながりを深めることができました。このような困難な時代には、大小問わず変化をもたらすことが不可欠です。

国連COVID-19の レスポン

【Node.js】LINE MessageAPIで作った天気予報アプリをAWSでデプロイしてみる！

先日、Node.jsでアプリを天気予報アプリを作成しました。

https://qiita.com/Ryo9597/items/bf93618663f28e9d8f7f

この記事内ではデプロイは、`Glitch`を使いました。

https://glitch.com/

まぁ無料なわけで色々問題があります。
・プロジェクトは、利用されていないときは5分でスリープ状態になる
・4000件/1hのリクエスト制限がある(Error: 429 too many requests)

ということでAWSにデプロイすることにします。
それではアーキテクチャに関してみていきましょう。

## アーキテクチャ


ちなみにAWSのアーキテクチャなどを作るときは、`drawio`がおすすめです。
VSCodeから使えるので是非使ってみてください。

Next.js 11 リリースノート全訳!! Conformance, next/image, Script Optimization, Next.js Live, CRA マイグレーション etc

## はじめに

2021/06/16、Next.js11がリリースされました???

この記事は、[Next.js 11 リリースノート](https://nextjs.org/blog/next-11)の 日本語訳です。

## Next.js 11

Next.js 11では、最高の開発環境を提供するという使命のもと、次のような特徴を備えています。

– Conformance: 最適なUXをサポートするために慎重に作られたソリューションを提供するシステム。
– パフォーマンスの向上: コールドスタートアップの時間を短縮するための最適化により、より早くコーディングを開始できます。
– `next/script`: サードパーティ製スクリプトの読み込みを自動的に優先させ、パフォーマンスを向上させます。
– `next/image`: サイズの自動検出とブラーアッププレースホルダーのサポートにより、レイアウトのずれを減らし、よりスムーズなビジュアルエクスペリエンスを実現します。
– Webpack 5: すべてのNext.jsア

【エラー解決方法】Delete `␍` eslint(prettier/prettier)

## 概要
Nuxt.jsで アプリ開発中に以下のエラーが所狭しと出力されたので、その対処方法について記載します。

“`
Delete `␍` eslint(prettier/prettier)
“`

## 開発環境

– OS : Windows
– IDE : Visual Studio Code
– Nuxt.js : 2.15.3
– eslint : 7.22.0
– prettier : 2.2.1

## 対処方法
先に結論から。
“`package.json“` の lintコマンドにオプション “`–fix“` を追記します。

“`json:package.json
“scripts”: {
“dev”: “nuxt”,
“build”: “nuxt build”,
“start”: “

JavaScriptファイルをParcelでビルドする方法まとめ

備忘録も兼ねて、初心者さん用にParcelを使ったビルドの仕方をまとめました。

## コーディングが終わったら
コーディングが終わったら、ビルドを経て一つの大きなファイルにアウトプットし、リリースできる状態にします。

具体的には、
①ビルド
・モジュールごとに開発していたらそれをひとまとまりのファイルにアウトプット
・使わないコードを削除してファイルを圧縮
②トランスパイル/Polyfilling
・古いブラウザでもコードが読み込まれるよう、モダンJavaScriptのコードをES５の文法へ揃える
　（⇨BABELというツールが行ってくれます）

これはもちろん自分でやるのではなく、ビルドツールを使い上記の作業を行っていきます。
この記事では、Parcelというビルドツールを使います。

### Parcelとは
ビルドツール。
webpackはParcelより有名だが、設定ファイルなど作るのが難しい。
Parcelなら設定ファイルの作成が不要でサクッとビルドができます。

## ビルドの仕方
npmを使ってツールをプロジェクトフォルダにインストールしてビルドしていきます。

##

InDesign スクリプト 変数値と一致するテキストを変数に

変数値と一致するテキストを変数にするスクリプトは、これで良いのかな・・・？

~~~JavaScript
/*
更新 2021/6/22
*/

// アプリ指定
#target “indesign”;

// スクリプト名
var scriptName = “変数値と一致するテキストを変数に”;

//スクリプト動作指定（一つのアンドゥ履歴にする、及び、アンドゥ名の指定）
app.doScript(function () {

// ダイアログ
var dialogueFlg = confirm(“カスタムテキスト変数の値と一致するテキストを変数に置換します。”
+ “\r\r” + “選択がない場合はアクティブドキュメント全体で置換、選択がある場合は選択内で置換します。 “, “”, scriptName);

// Ｎｏの場合
if (dialogueFlg == false) {

// スクリプトを終了
exit();
}

// 置換数
var replaceNumber = 0

ルパンのサブタイトルをVueを使って再現してみた

# はじめに
“Vue.js“の勉強がてら何か動きのあるページを作ってみようと思い、今回のものを作りました。
初めて“Vue“を触った+基礎しか理解できていないということでコードが雑になっています。
あしからず。
# 概要
ルパンのサブタイトル（ググれば出てくる）を再現できるWebアプリを作ってみた。
理由は最初にある通り。細かく言えばVue独特の**双方向のデータバインド**を試したかった。
# 環境
## 開発環境
– MacOS Sierra(10.12)
– vue(2.6.12)
– Vim

## 実行環境（サーバサイド）
– AWS
– EC2(Amazon Linux)
– Route53
– S3
– nginx

AWSの構成図はこんなかんじ

## 実行環境（クライアントサイド）
–

JavaScriptの === について

最近、仕事でよくJavaScriptを使用するようになったのですが、その中で「===」という演算子が出てきたのが気になったので調べてみました。
相変わらず自分用メモです。

「===」は、「===厳密等価演算子」と言って、「型を変換することなく厳密に等しいかどうか」をチェックする演算子です。
Javaなどでよく使われる「==等価演算子」は、たとえば数値型の「1」と文字列型の「1」なら、自動的に文字列型の「1」を数値型に変換し、変換後の値が等価であればTrueを返してくれます。
しかし、「===厳密等価演算子」は型を変換せずに「等価であるか」を判定するため、上記のような例の場合はFalseを返します。
「===厳密等価演算子」でTrueの結果を得たい場合は、型、値の両方が一致していなければならないのです。

また、「===」の否定は「!==」となります。記述するときに迷ったので書き残しておく。
当然ながら、先程とは逆で数値型の「1」と文字列型の「1」の場合はTrueを返し、数値型の「1」同士ならFalseを返します。

JavaScript オブジェクト 未定義判定（途中の添字も含む）

私はよく、JavaScriptで多次元のオブジェクトを使います。今回はオブジェクトの未定義の判定についてです。途中で未定義になる場合の対処について書いてみます。

単純に、オブジェクトが未定義、または null であるかは以下のように判定できます。

“`
const test = {“id”:1,”name”:test};
if(test[“age”] == null){
console.log(“未定義です。”);
}
// 未定義です。
“`

しかし、以下のような場合はエラーとなります。

“`
const test = {
apple: {
2019: { A: 15000, B: 16000, C: 12000, D: 21000 },
2021: { A: 15000, C: 16000 },
},
};

if(test[“apple”][2020][“A”] == null){
c

JavaScript 関数をキャッシュする(Reactとかで使えるかも)

React でJSX内に、アロー関数式を書いたりしていると、毎度呼び出すときにレンダリングが走っちゃうんじゃないのかな、

ということを回避するための仕組みの試作です。

“`js
const _cashFuncMap = new Map();
const cashFunc = (func) => {
const strFunc = func.toString();
let result = _cashFuncMap.get(strFunc);
if (result === undefined) {
result = func;
_cashFuncMap.set(strFunc, func)
}
return result;
};

const f1 = () => ‘test’;
console.log(f1()); // “test”
const f2 = cashFunc(f1);
console.log(f2()); // “test”
console.log(f1 === f2); // true

const cf = cashF

InDesign スクリプト 変数名と一致するテキストを変数に

変数名と一致するテキストを変数にするスクリプトは、これで良いのかな・・・？

~~~JavaScript
/*
更新 2021/6/21
*/

// アプリ指定
#target “indesign”;

// スクリプト名
var scriptName = “変数名と一致するテキストを変数に”;

//スクリプト動作指定（一つのアンドゥ履歴にする、及び、アンドゥ名の指定）
app.doScript(function () {

// ダイアログ
var dialogueFlg = confirm(“カスタムテキスト変数の名前と一致するテキストを変数に置換します。”
+ “\r\r” + “選択がない場合はアクティブドキュメント全体で置換、選択がある場合は選択内で置換します。 “, “”, scriptName);

// Ｎｏの場合
if (dialogueFlg == false) {

// スクリプトを終了
exit();
}

// 置換数
var replaceNumber =

SAP Cloud SDK for JavaScriptを使ってみる （2）サービスの作成

##はじめに
この記事は、[SAP Cloud SDK for JavaScriptを使ってみる](https://qiita.com/tami/items/a0280ea080b24f087e68)シリーズの2回目です。この記事では、SAP Cloud SDK を使ってサービスを開発する手順について説明します。

ベースとするのは以下のチュートリアルです。

– [Create an App Using SAP Cloud SDK for JavaScript](https://developers.sap.com/group.s4sdk-js-cloud-foundry.html)
– [Build an Address Manager with the SAP Cloud SDK’s OData Virtual Data Model](https://developers.sap.com/group.cloudsdk-js-vdm.html)

チュートリアルでは、S/4HANAのOData APIである[Business Partner](https://api.sap.com

Engress（作成中）

# 事前準備

## コーディング手順

1. 対応ブラウザ、パスの指定方法、納品形式、フォルダの構造、アニメーションの実装などの仕様を確認。
2. デザインを見て、頭の中でコードを組み立てる。この際、「クラス名の命名」「共通要素の洗い出し」「実際のコーディングで直面しそうな問題の把握（実装の仕方がわからないなど）」を明確にする。
3. 画像の書き出し。画像ファイルの命名も「ttl_」「bg_」「ico_」「btn_」「img_」「nav_」などの識別子をつけ、画像がどのような意味を持つのか考えながら命名。 `「ページ名/ブロック名」_「識別子」_「連番」`の順で命名する。 また、背景透過、画質などを考慮し「png-8」「png-24」「jpg」「gif」などを適切な拡張子を選択する。 加えて、高解像度ディスプレイ対応のため２倍の大きさで書き出し。 さらに、ファイルサイズを考慮し、適切に圧縮をかける。
4. このテンプレートを使用し、まずは大枠、共通部分のコーディング、それから細部のコーディングを進める。
5. コーディング完了後はW3Cのバリデーションツールで文法のエラーをチェック。

Vroid→blender→Mixamo→PlayCanvasでオリジナル3Ｄキャラを操作できるようにする！

オリジナルの3DキャラクターをPlayCanvas上で動かしたい！と思っても中々ハードルが高いかと思います。そこで、VroidとMixamo、Blenderを使い、無料且つ専門知識や技術を使わずオリジナルキャラを走り回らせてみようと思います。
使用するコンテンツは以下のモノです。
**Vroid**:キャラクターを作成します。
**Blender**:キャラクターの調整をします。
**Mixamo**:キャラクターにアニメーションを付けます。
**PlayCanvas**:キャラクターのアニメーション制御、ビルドを行います。

#Vroidでキャラクターメイキング
キャラクターを作成していくには、通常、BlenderやMAYA、3dsMAXなどの3D作成ソフトからポリゴンモデリング、テクスチャ作成、リギング等の作成を行う必要があり、かなりハードルが高いです。
そこで、キャラクターをカスタマイズし、VRMでエクスポート出来る”Vroid”を使用します。
###Vroidをインストール
下記URLからDLし、それぞれの環境に合ったものをインストールしてください。
https://vroid

【javascript】addEventListener()の第1引数 よく使うイベントタイプ

よく使うイベントタイプをまとめました。

## ビューイベント

| イベントタイプ | 説明 |
|:———–|:————|
| resize | ドキュメントビューのサイズが変更された時。 |
| scroll | 画面がスクロールされた時。 |

## リソースイベント

| イベントタイプ | 説明 |
|:———–|:————|
| error | リソースを読み込めなかったとき。 |
| abort | リソース読み込みが中止されたとき。 |
| load | リソースの読み込みが完了したとき。 |
| beforeunload | アンロードされる前。 |
| unload | リソースがアンロードされたとき。 |

## キーイベント

| イベントタイプ | 説明 |
|:———–|:————|
| keydown | キーを押されたとき |
| keyp

Javascriptでエレメントをフリードラッギング

# 概要

Javascriptでドラッグ&ドロップするライブラリは山ほどありますが、画面にフローティングウィンドウのようなエレメントを配置して自由にドラッグできるようにしたかっただけなので、簡単に自分で実装できないかと思って試したら意外に面倒だったという話です。

# コード

“`js
export function draggable(element) {
element.style.position = ‘absolute’
// ドラッグ中のtransformの値を保持
const transformPos = {x: 0, y: 0}
// ドラッグスタート時のマウスとエレメントのオフセット
const dragStartOffset = {x: 0, y: 0}

// ハンドルにイベント登録
const handles = element.querySelectorAll(‘.draggable-handle’)
for (var i = 0; i < handles.length; i++) { handles[i].add

　javascriptでイベントで値を送る方法

メモ

取得用イベントを作る
document.addEventListener(“originalname”, function(e) {
console.log(e.detail); // Prints “Example of an event”
});

こっちは送信用イベント
var event = new CustomEvent(“originalname”, { “detail”: “hello world” });
document.dispatchEvent(event);

【JavaScript】オブジェクトについて

##はじめに
JavaScriptの基礎を勉強したらとても良い学びになったのでメモ
JavaScriptのオブジェクトについてです

こちらの本を参考にさせていただきました

https://www.amazon.co.jp/%E6%94%B9%E8%A8%82%E6%96%B0%E7%89%88JavaScript%E6%9C%AC%E6%A0%BC%E5%85%A5%E9%96%80-%EF%BD%9E%E3%83%A2%E3%83%80%E3%83%B3%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%AB%E3%82%88%E3%82%8B%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E7%8F%BE%E5%A0%B4%E3%81%A7%E3%81%AE%E5%BF%9C%E7%94%A8%E3%81%BE%E3%81%A7-%E5%B1%B1%E7%94%B0-%E7%A5%A5%E5%AF%9B-ebook/dp/B01LYO6C1N/ref=sr_1_5?dchild=1&keywords=javascrip

Reactアプリケーションを高速化するための方法

# Reactアプリケーションを高速化するための方法

## 結論から

無駄な再レンダリングを発生させない

### 処理しないこと

高速化とは処理しないことです
矛盾しているように思えますが、処理が減ればアプリケーションは高速化します

### Reactの処理を減らすためには

再レンダリングをしないことです
もちろん完全に再レンダリング無しというのは不可能なので、いかにそれを減らしていくかが重要です

## 再レンダリングの妥当性

### 妥当な再レンダリング

コンポーネントのstateに変化があって自身の挙動を変更しなければならないとしたら、その再レンダリングは妥当です

### 妥当ではない再レンダリング

コンポーネント自身がそのstateを必要としておらず、下位に配るためstateを保持しているとしたら、その際レンダリングは妥当ではありません
そういう構造を作ってしまえば、配下にいる全コンポーネントがstateと無関係に再レンダリングされます。

### 何故、こんな構造がまかり通ってしまうのか

useStateが三つの機能を一つに集約してしまったのが原因です