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

TOPニュースを見れるLINEbotを作ってみた

#はじめに
社会人になり、ニュース見るようにしないといけないな、と思いつつも元々習慣づいていない私はたくさんあるニュースサイトからどれかを選んで面白そうな記事を探すということが面倒だと思っていました。
そこで、日常的に開くLINEで簡単に何個か最新のニュースを取れるようにしたいと思い、ワンタッチでニュースが取得できるLINEbotを作ってみました。

#完成イメージ
取得したいニュースのカテゴリーを選ぶと、カテゴリー名が送信され、当てはまるニュースが3つ返ってきます。
キーボードから一覧にないものを入力されると、「当てはまるニュースはありません」と返します。

#実装

##使用したもの
・Google App Script
・LINE bot
・NEWS API(https://newsapi.org/)

##LINEbotの設定

Markdown (とHTMLとCSS少し) でスライドを作るremark

## remarkとは

こういうのでいいんだよ、
「HTMLとCSSを使いこなせる人をターゲットにした、シンプルなブラウザ内マークダウン駆動のスライドショーツール」

https://github.com/gnab/remark

> A simple, in-browser, markdown-driven slideshow tool targeted at people who know their way around HTML and CSS

“`html

SyntaxError: Unexpected token < ``` 1. ./plugins/vue-pdf.jsを作成 ``` import Vue from 'vue' import pdf from 'vue-pdf' Vue.component('pdf', pdf) export default { // } ``` 2.main.jsに追記 ``` import Vue from 'vue' import App from '

ブラウザ上でcsvやxlsx等のシートを読み込む

csvデータをアップロードするための入力方法を色々まとめてみる。

## csvファイル

```js
const chardet = require("chardet")
const iconv = require("iconv-lite")

var csvReader = new FileReader();
csvReader.onload = (e) => {
let data = new Uint8Array(e.target.result);
let encoding = chardet.detect(data);
let csv = iconv.decode(data, encoding);
document.getElementById("").value = csv;
};

document.getElementById("").addEventListener("change", (e) => {
let sheetFile = e.target.files[0];
csvReader.rea

React 電卓作ってみた

# 気が向いたのでReact+Javascriptで電卓を作ってみました。

+ 「1+1」とか「3*10」みたいな **2つの整数の四則演算** にか対応していません。（細かすぎると趣旨から外れるので）
+ TypeScriptは使っていません。
+ ソースコードは[Github](https://github.com/TBSten/react-calc)にあげているので適当に見てください。

# 一緒に作りたい方向け
ハンズオン形式で作ってみたい方は以下を参照

## 想定しているレベル感
+ 公式のチュートリアルをやったり、いろいろな教材を触ってみたがいまいちピンと来ていない
+ useStateやpropsの使い方は分かるけどいつ使うべきかはわからない
+ Reactの基礎を学んだが何か自分で作ってみたい
+ Todoリストを作ったけどいまいちピンとこない

## 完成イメージ

![Animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1299829/4a9226ff-9057-c

JavaScript入門(ECMAScriptモジュール③)

# 概要
[...JavaScript入門(ECMAScriptモジュール②)](https://qiita.com/andota05/items/22676d733bf1b4db9809)の続きです。

JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

[JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)に他の記事をまとめています。

# ECMAScriptモジュール(その他構文)
これまで記載したECMAScriptモジュールについて、その他の構文についても記載する。
※下記「動作環境情報」を参考にし、開発者コンソールで結果を確認してください

動作環境情報はコチラ

**【環境】**
PC：Mac
エディタ：Visual Studio Code
プラグイン：`Live Serve

JavaScript入門(ECMAScriptモジュール②)

# 概要
[...JavaScript入門(ECMAScriptモジュール①)](https://qiita.com/andota05/items/d91086102326b2bd3dbb)の続きです。

JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

[JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)に他の記事をまとめています。

# デフォルトエクスポート/インポート
デフォルトエクスポート/インポートについてそれぞれ記載していく。
※下記「動作環境情報」を参考にし、開発者コンソールで結果を確認してください

動作環境情報はコチラ

**【環境】**
PC：Mac
エディタ：Visual Studio Code
プラグイン：`Live Server`というVisual Studi

JavaScript入門(ECMAScriptモジュール①)

# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

[JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)に他の記事をまとめています。

# ECMAScriptモジュール
モジュールには以下の利点がある。

**1. 保守性**
機能単位や関連性を持つ単位で切り離すことで、
`他のコードとの依存性が減少し、修正・変更時には他のコードへ影響しにくい。`

**2. 名前空間**
モジュールごとに`スコープ(範囲)が明確になる`ことで、
変数名の競合やどの機能を使用しているかの把握も容易になる。

**3. 再利用性**
後述する`エクスポート/インポート`することで、
必要な機能を必要な場所で(モジュールとして)再利用でき、修正時には１箇所の修正で対応可能。

> **モジュールとは(引用：Wikipedia)**
> モジュール（英: modu

【Jest入門】テストのグループ化

# はじめに

今回は、前回Jestが動く環境が作成できたので、テストのグループ化についてまとめたいと思います。

https://qiita.com/YSasago/items/6f23055c971a091f9993

## テストのグループ化

* Jestではテストを定義するために```test関数```を使います。
* test関数のエイリアスとして、```it関数```を利用することができます。
* テストをグループ化するためには、```describe関数```を利用します。
* テストをグループ化することで、グループ毎のテストができるようになり、わかりやすくなります。

## describe関数で、it関数とtest関数をグループ化

下記のコードは、引数で受け取った値がbirdであればtrueを返し、それ以外はfalseを返す簡単なコードです。

```javascript:src/group.js
export const isFly = (animal) => (animal === "bird" ? true : false);
```

```javasc

[React]onClickするたびに配列に要素を追加する

はじめに

ラジオボタンを押すと、押した選択肢のvalueが配列に追加するようにしたかった。
方法がわからず、記事を探しても中々見つからず苦労したので、こちらに記録しておきます。

実現したい事

２つのラジオボタングループがある。
それぞれ３つずつ選択肢があり、ユーザーがクリックした選択肢を配列に追加したい。


解決策

```typescript
const initialValue = Array(selections.length).fill('0');
const [formData, setFormData] = useState(initialValue);

const updateSelections = (index: number,

高速道路整備の変遷をMapbox GL JSで表示してみました

# はじめに

国土数値情報の[高速道路時系列データ](https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N06-v1_2.html)を用いて、高速道路整備の変遷（1962～2020年）をMapbox GL JS（v2）の[タイムスライダー機能](https://docs.mapbox.com/jp/mapbox-gl-js/example/timeline-animation/)で表示してみました。

- [高速道路時系列データ](https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N06-v1_2.html)は以下の国土数値情報の提供サイトよりgeojsonファイル（令和2年）をダウンロードして使用しています。
https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N06-v1_2.html

- 背景地図には[Mapbox](https://www.mapbox.com/)を使用しているため、別途、Mapboxにてアクセストークンの

あなたのプロジェクトを煌やかにするアニメーションライブラリ18選

Original article: https://dev.to/kerthin/18-amazing-github-repositories-that-will-help-you-make-a-beautiful-project-3pgo

以下はRoden( [Twitter](https://twitter.com/BelichenkoRoden) / [GitHub](https://github.com/Kerthin) / [Webサイト](https://kerthin.github.io/portfolio-templateSait/) )によるアニメーションライブラリ紹介記事、[18 amazing ? GitHub repositories that will help you ? make a Beautiful Project](https://dev.to/kerthin/18-amazing-github-repositories-that-will-help-you-make-a-beautiful-project-3pgo)の日本語訳です。
help

生産性を高めるすごいフロントエンド開発ツール10選

本記事は、[Mehdi Aoussiad](https://mehdiouss.medium.com/)氏による「[10 Awesome Front-End Development Tools to Boost Your Productivity](https://javascript.plainenglish.io/10-awesome-front-end-development-tools-to-boost-your-productivity-b1d2efc4c4ba)」（2021年2月5日公開）の和訳を、著者の許可を得て掲載しているものです。

#生産性を高めるすごいフロントエンド開発ツール10選
>使った方がいい便利なフロントエンド開発ツールを紹介します。

Photo by [ThisisEngineering RAEng](https://unsplash.com/@thisisengineering?utm_source=medi

JavaScript(変数)

#はじめに
JavaScriptは動的型付け言語
つまり変数宣言時に型を指定しない

#変数の種類
**プリミティブ型**
stringやnumber、booleanなどのデータ
変数には値が格納される
変数aは値を指し示す
一度宣言した値は変更することができない、immutable(不変)である

```javascript
//immutable
let a = 'hello'
let a = 'bye' //エラー

//例外
//変数aはHelloを参照していたが、Byeを参照へ切り替わった状況
//つまり一度宣言した値(Hello)を変更したわけではなく、参照が切り替わった状態であるからエラーにならない
let a = 'Hello'
a = 'Bye'
```

**オブジェクト型**
変数には参照が格納される
変数aはオブジェクトへの参照が格納される、またオブジェクトへの参照はキー(下のprop)を指し示し、キーはバリュー('Hello')を指し示す
プリミティブ型は変数aは値を直接指し示していたが、オブジェクト型の変数aはオブジェクトへの参照のみを指し示し、オブジ

JavaScript(スコープ編)

#はじめに
近年の駆け出しエンジニアにとって1つの懸念点

近年学習を開始したエンジニアは当初からすでに多彩なライブラリや便利なフレームワークが充実した環境で育ってきた
フロントエンド領域ではReactやVueがその筆頭で、簡単に格好良くてヌルヌル動くナウでヤングなイケてる実装が容易であり、それがまた魅力的でもあった

駆け出しエンジニアにとって現代は
**「学ぶこと多すぎ問題」**

HTMLを一通り学んだらJavaScriptへ、JavaScriptを一通り学んだらReact,Vueへ、React,Vueを一通り学んだらNext,Nuxtへ...
技術を浅く広くしか学んでいないのではないか？
その程度の知識で実務で通用するのか？

私自身もHTML,CSS,JavaScriptの基本的な使い方を学習したらすぐにReactの学習を進めた口である
Reactがある程度できるようになったらreduxやFirebase、PHPなどのバックエンドの領域にも手を出した

より成長するために.....

ReactもVueもその根本はJavaScriptである
一度原点に立ち返りJavaScr

JSやCSSにクエリストリングを与えてファイル更新時にブラウザ側のキャッシュクリアを行わせる

# はじめに
タイトルの内容で記事を書いた理由は、「キャッシュクリアの為にファイル名の後ろに数字をつけるアレ」と曖昧な覚え方をしていたからです。
曖昧な覚え方だとググることすらもできなかったので、備忘録として記事にしました。

# Cache Busting
Javascript、CSS、画像等のファイルの更新に合わせてクエリストリングを変更することで、ブラウザ側でキャッシュクリアをしなくてもいい状態にすることです。
ブラウザ側がサーバ側のファイルを読み込まずキャッシュを読み込むことでJavascript、CSS、画像の修正が反映されないことを防ぎます。

# 後ろにつけるアレの正式名称を覚えたい
- クエリ
- クエリストリング
- クエリ文字
- GETパラメータ
- パラーメータ

特に固定された呼び方はないのでしょうか。
個人的にクエリストリングがしっくりきたのでクエリストリングと呼びつつ他にこういう言い回しもあるという程度に覚えておきます。

# 具体例
Javascript、CSS、画像ファイルの後ろに`?クエリストリング`と記述します。
CSSファイルの読み込みを例として

Cognitoのtoken検証

Cognitoログイン時に取得した、idToken　及び　accessTokenの検証。
また、payloadを返却する。

# 事前準備
```
npm i --save jsonwebtoken jwk-to-pem
```

# ロジック
- 不正トークンや有効期限切れはこれで弾けるはず

```
import * as jwt from 'jsonwebtoken'
import * as jwkToPem from 'jwk-to-pem'

async decodeToken(token) {

const decode = jwt.decode(token, {complete: true})

// 検証用のデータ取得
// ここではhttp通信にnsetjsのライブラリ使っているが、取れればなんでも良い。
const result = await this.httpService.get(`${decode.payload.iss}/.well-known/jwks.json`).toPromise()

// kid一致した

すとんとくる再帰（ Recursion ）の三パターン

再帰、、、それはやりたいことは簡単なのに、コードを書こうとすると頭を混乱させる悲しいもの。私自身、再帰（Recursion）を学習したとき、すとんと来るまで時間がかかりましたが、いくつかのパターンに分けて理解すると、すっきりと分かりやすかったのでシェアします！:grinning:

#### 0. 基本形

```js
1 function 関数名（引数）｛
2 if (終わりの条件）｛
3 終わったときのリターン文
4 }
5 それ以外のときの処理
6 リターン文（この中でこの関数自体を使う＝再帰的）
7 ｝
```
2～3行目：延々と再帰しないように、まず、終わりの条件と終わるときのリターン文を書く。ここを「ベースケース」と呼ぶ。

5～6行目：続いて、それ以外の処理を書き、リターン文を書くがここで、定義しているこの関数自体を使うので、また関数の頭に戻って、ぐるぐる回る、これが「再帰的」。

ベースケース中のreturnは直感的に必要と分かるでしょうが、最終的に返すのはここだからと、6行目のr

vue-pdfで文字が表示されない時、cMapを指定して解消する

```
let pdfSrc = pdf.createLoadingTask({
url: pdfのパス,
cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.6.347/cmaps/',
cMapPacked: true,
});
```

一覧画面でテーブルの集計値をjsワンライナー計算

さすがに、すべてをワンライナーで書くと長いので計算部分のみ、

```js:total.js
(() => {
'use strict';
kintone.events.on('app.record.index.show', (event) => {
console.log(`(合計) ${event.records.reduce((total, record) => total += record['テーブル'].value.reduce((value, row) => value += Number(row.value['数値'].value), 0), 0)}`);
});
})();
```

**注意**:
一覧画面で表示中のレコードのみの計算になるので、
最高で100件まで。