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

　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が三つの機能を一つに集約してしまったのが原因です

GASで簡単に作るDiscord Bot

GAS(Google Apps Script)を使うと、簡単にDiscordのボットが作成できたので作り方を紹介します。
# Discordで開発者モードを有効にする
– Discord左下の歯車を右クリック > 詳細設定 を選択します。

– 開発者モードを有効にします

# DiscordのWebHookURLを作成する
– 左サイドバーのボットを導入したいサーバのアイコンを右クリック > サーバー設定 > 連携サ

【Node.js, TypeScript】天気予報アプリをLINE MessageAPIで作ってみた！

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

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

多分初めてQiitaのトレンドに乗りました。

嬉しいですね〜☺️
見てくださった方ありがとうございました。

ということで今回はNode.jsとTypeScriptで作ってみました。

完成形としては以下の通りです。

以前作成したLaravelに関してはこちらからどうぞ。

https:/

【入門】はじめての Cypress

## はじめに

Cypress の勉強のため、[公式ドキュメント](https://docs.cypress.io/guides/overview/why-cypress)の概要～入門を簡単にまとめました。
皆様の参考になれば幸いです。

## この記事で分かること

– Cypress の概要
– Selenium との比較
– 入門 (サンプルアプリの作成)
– Next.js + TypeScript + Cypress の簡単なサンプルアプリの作成

## 環境

“`json
{
“cypress”: “^7.5.0”,
“typescript”: “^4.3.4”
}
“`

## 1. Cypress とは

Github: [cypress-io/cypress: Fast, easy and reliable testing for anything that runs in a browser.](https://github.com/cypress-io/cypress)
公式 Doc: [Why Cypress? | Cypress Docum

Chrome拡張作ったら異世界転生した件

# 詠唱

配列(文字列)からランダムに要素を取り出すコードを書くじゃろ

“`js
// ランダムに要素を取り出す関数
const randomPick = (items) => {
const index = Math.floor(items.length * Math.random());
return items[index];
};

randomPick(“123456”); // 1〜6のどれか
“`

文字列の範囲を展開するコードを書くじゃろ

“`js
// 文字列の範囲を展開する関数
const expandCharRange = (str) =>
str.replace(/.-./g, (range = ‘a-z’) => {
// ハイフンを挟んだ文字列を全て置換
const first = range.codePointAt(0); // 1文字目の文字コード
const last = range.codePointAt(2); // 2文字目の文字コード
const length = last – first

【Javascript】配列によく使われる関数ー学習ノート

# 初めに
javascriptの配列によく使われる関数について学習した内容のoutput用記事です。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。
※こちらの記事はあくまでも個人で学習した内容のoutputとしての記事になります。

# slice()メソッド
配列の中身を何番目から何番目までを切り出して、新しい配列を生成するメソッド。元の配列の値は変更されない。

# 使ってみる
indexは0から始まるので配列の左から4番目の値からスタートします。何番目までかを指定する第２引数は省略することができ、その場合は最後までがindexになります。

“`javascript
let names = [‘Tanaka’, ‘Suzuki’, ‘Honda’, ‘Matsuyama’, ‘Kobayashi’];

console.log(names.slice(3));
//(2) [“Matsuyama”, “Kobayashi”]
“`
第２引数を指定した場合、その引数の含まないindexが範囲になります。以下のように第２引数として４を指定した場合、新しく生

Alpine.js 5分で説明するよ

はこです、こんにちわ。
今日は [Alpine.js](https://alpinejs.dev/) の話をします。


# Alpine.js 何？

Alpine(アルパイン: 英語風発音) は 『アルプスの・転じて登山用の』を意味します。

– アルペン: Alpine のドイツ語読み。スノーレジャーやアウトドアグッズとかのお店。
– アルパインブーツ・アルパインウェア: 雪山や高山に適した超軽量かつ高機能な服や靴。
– [モンベルのアルパインクッカー](https://webshop.montbell.jp/goods/disp.php?product_id=1124690) など…。
– Alpine Linux: 超軽量Linux. Small Simple Secure が合言葉。
– Alpine.

【GitHub Actions】DenoのカバレッジをCodecovで出す

自分はちょっとした書き捨てのスクリプトのために、よく使う関数をGitHubにまとめて置いています。とりあえずGitHubに置いておけば、rawファイル用のURLを用いてどこからでもimportできるので便利なんですよね。

GitHubに置いたついでに、GitHub ActionsとCodecovを使ってDenoのカバレッジツールを試してみました。

## カバレッジとは

Denoには組み込みのテストランナーがあります（`deno test`コマンド）。コード全体のうち、テストが実行された割合（カバレッジ）を出力してくれる機能もあります（`deno coverage`コマンド）。
今回は、GitHubと連携してカバレッジを表示してくれる[Codecov](https://about.codecov.io/)というサービスを使って、GitHubへのpush時にカバレッジを自動で表示させたいと思います。

## GitHub Actionsの設定

`/.github/workflows/test.yml`ファイル内に設定を書いていきます。

### Git Checkout

リポジト

Vue.jsでカスタムページネーションを作る

Vue.jsには[Vue Pagination 2](https://www.npmjs.com/package/vue-pagination-2)というpagination用のライブラリがありますが、仕組みを理解したいと思い自作しました。今回はそのカスタムページネーションについて記事にします。ソースコードは[GitHub](https://github.com/JunNishimura/CustomVuePagination)にて公開しています。

手っ取り早く実装したい方は上記ライブラリを使うことをお勧めします。時間があり、仕組みから理解したい人は読んでくれたら嬉しいです。

# 完成図
手の込んだことはしておらず、ページボタンを押すと表示するアイテム一覧が変わるだけの簡単な実装にしています。

# 対象読者
– 普段p

JavaScriptでカウントダウンタイマーを作る

HTML + CSS + JavaScript でカウントダウンタイマーを作りました。ソースコードに直接記述した日時までカウントダウンします。


URL
https://cordelia-sixth.github.io/countdown_timer_js/

ソースコード
https://github.com/cordelia-sixth/countdown_timer_js

### ディレクトリ構成

“`
app
├── index.html
├── script.js
├── style.css
└── background.jpeg
“`

“`html:index.html

リアルタイムチャートをDjango ChannelsとEpoch.jsでつくってみた

# はじめに
あるとき、モーションセンサデータをリアルタイムで可視化したいなと思うことがありました。そこで、ネットでリアルタイム可視化ツールについて調べてみると、近年のIoTブームもありたくさんのツール、製品が世の中に出ていました。無料のツールだと、「[Grafana](https://grafana.com/)」などがあります。個人的には「[Node-RED](https://nodered.org/)」の[dashboard](https://flows.nodered.org/node/node-red-dashboard)も気に入っています。

では、**なぜDjangoでリアルタイムチャートを作ろうと思ったのか？**
理由は3つです。

– **Webアプリケーション**であるためWebブラウザから手軽に利用できる
– 可視化をちょっと試してみたい、ちょっとカスタマイズしたいとき、**言語がPythonだと嬉しい人が多そう**（フロントエンド部分は結局jsに頼るのですが。。）
– **自分の勉強のため**

自分の勉強がてら、誰かのお役に立てれば幸いです。

# システム構成

死活監視をGASを使ってSlackへ通知させてみた〜①〜

今回はタイトル通り、死活監視をGASで書いてSlackに通知させてみたよというお話です。
綺麗なまとめというより自分自身の思考の流れも書いています。
※まだまだ知識不足で説明不十分や間違っている部分もあるかと思いますので、
もし気になる点があればコメントいただければと思います。

##この記事を読む対象者
・「死活監視」って何？という方
・GASってなに？ガス？ギャス？という方
・JavaScriptは少し触ったことがある方
・GASで書いたものをSlackに通知させてみたい方

##死活監視とは？
**コンピューターやシステムが正常に稼働しているかどうか、外部から継続的に監視すること**。

これはWEBサイトの場合、ユーザーから見た場合にサイトが見れない状態だと通知が来るといった流れになるかと思います。
他にも監視のレベルは様々あるかと思いますが、死活監視は**最低限、致命的なものを防ぐ**、といったイメージです。

![pool_kanshiin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws

[JavaScript] HTMLを取得するメソッド三種

##はじめに
HTMLを取得する三種のJavaScriptメソッドを紹介します。
HTMLの要素を取得する方法としてはid名を指定して取得する方法と、class名を指定して取得する方法と、セレクタ名を取得する方法が存在します。
それでは一つずつ紹介していきます！よろしくお願いします。

##document.getElementById(“id名”)
これは引数に渡したidを持つ要素を取得することができます。

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

この場合はhogeというid名のHTMLの要素を取得することができます。

##document.getElementsByClassName(“class名”)
使い方はidを使って取得する方法と同じですが、このメソッドの名前のなかの**Elements**が複数形になっていることに気をつけましょう。

idとの使い分けとしては、HTMLの中で同じ名前のidは存在できないので取得する要素は一つだけになります。
しかし、classはHT

ES7 ECMAScript 2016 入門

### はじめに
今回ですが個人的にES７以降の新機能や構文で追えていない知識がありましたので、自分用のメモとして記述します。今更感も否めないですがそこはご了承くださいませ?‍♂️
また、今回はES7のみですが、次回以降でES8以降の機能も順番に書いていきたいと思います。

### そもそもECMAScriptって？
最初ですので簡単にECMAScriptに触れておきます。
ECMAScriptは、European Computer Manufacturer Associationの略称で、Ecma Internationalによって標準化されたJavaScriptを実装する上での仕様です。ES６（ECMAScript 2015）以降は、毎年６月に公開され、正式な仕様となっております。

* ECMAScriptのバージョン（ES6以降）

| バージョン |略称（通称) | 公開日 |
|:————:|:————:|:————:|
| ECMAScript 2015 | ES2015(別名ES6) | 201

JSでワード検索

一次元オブジェクト配列のワード検索で完全一致

“`javascript
const objArray = [{id: 1, name: ‘hogeo’, address: ‘shibuya’},{id: 2, name: ‘hogeko’, address: ‘shibuya’},{id: 3, name: ‘hageo’, address: ‘shinjuku’},{id: 4, name: ‘hageko’, address: ‘shinjuku’}];
const word = ‘hogeko’
const searchByWord = objArray.filter((object)=>{
const searchValues = Object.values(object);// [1, ‘hogeo’, ‘shibuya’]
return searchValues.some((str)=>{return String(str).includes(word)});
//’1’==’hogeko’, ‘hogeo’==’hogeko’, ‘shibuy

ウェブアプリを独立表示させる方法

##ブラウザの現在のページをシンプルな別ウィンドウで表示するブックマークレット
・任意のブラウザを表示する。
・下記のブックマークレットを実行

“`javascript
javascript:(()=>{window.open(location.href,null,’width=500,toolbar=yes,menubar=yes,scrollbars=yes’)})()
“`

##Discordのウェブ版をアプリ化しよう
訳あってデスクトップ版のアプリが使用できないためDiscordをこのブクマに登録してみる。

“`javascript
javascript:(()=>{window.open(‘https://discord.com/channels/@me’,null,’width=500,toolbar=yes,menubar=yes,scrollbars=yes’)})()
“`

SUCCESS!

【Javascript】axiosエラーハンドリング共通化を考えてみた

Vue.jsの開発で非同期通信に`axios`を使用している。
非同期通信時のエラーハンドリングのロジック自体は同じで、各`axios`実装箇所で行っていた。

開発の効率や、ソースコードの可読性、後々メンテナンス、拡張などを考えた時のために共通化を考えてみた。

## axios実装のビフォーアフター

### Before
【既存のaxios実装】
axiosの各呼び出し箇所で下記のようなエラーハンドリングしており、同じロジックコードが散在している。

“`js
axios.post(url, params)
.then(response => {
// 成功時の処理
}).catch(error => {
// 失敗時の処理
switch (error.response?.status) {
case 401:
// HTTPステータスに応じて処理
case 403:
default:
// 例外処理
}
});
“`

###

npm package をアップデートしたい時の便利なコマンド

# npm package をアップデートしたい時のコマンド
npm packageをアップデートしたい時によく使用するコマンドについてまとめます。

今回packageを見ていくのは [vue-hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0) をです。

“`
$ git clonse https://github.com/vuejs/vue-hackernews-2.0.git
$ cd vue-hackernews-2.0
“`

## npm outdated
outdatedコマンドは、レジストリをチェックして、インストールされている（または特定の）パッケージが現在古くなっているかどうかを確認する。
デフォルトでは、ルートプロジェクトの直接の依存関係と構成されたワークスペースの直接の依存関係のみが表示する。
–allすべての古いメタ依存関係も検索するために使用する。

https://docs.npmjs.com/cli/v7/commands/npm-outdated

### 実行

“`
$