JavaScript関連のことを調べてみた2020年07月03日

javascriptの要素アクセス諸々

## HTML要素のタグ内のドキュメント取得
innerHTML：HTMLタグを含めた文字列
textContent：HTMLタグを除いた文字列

## HTML要素のタグ内のドキュメント設定
textContent：HTMLタグがない場合
HTMLタグ含めたい場合はcreateElementやcreateTextNodeでタグ要素を生成して
appendChildで挿入する

##HTML要素の親子取得

“`html

• suzuki
• tanaka
• sato

“`

“`javascript
// ul要素取得
let ul = document.getElementById(‘login-users’);
// 添え字アクセス
let _user = ul.children;
_user[0];
_user[1];

// 子要素をループで回す
Array.from(ul

Webhooksを使ったReactアプリのデプロイとUbuntuでのSlackの統合

このチュートリアルでは、Ubuntuを使用したAlibaba Cloud Elastic Compute Service (ECS)インスタンス上で**Webhooks**を使用してSlackの通知をトリガーします。

*本ブログは英語版からの翻訳です。オリジナルは[こちら](https://www.alibabacloud.com/blog/how-to-deploy-react-apps-using-webhooks-and-integrating-slack-on-ubuntu_594116)からご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。*

#前提条件
1、Alibaba Cloud Elastic Compute Service (ECS)を有効化し、有効な支払い方法を確認する必要があります。新規ユーザーの場合は、Alibaba Cloudアカウントで無料アカウントを取得することができます。ECSインスタンスのセットアップ方法がわからない場合は、このチュートリアルまたはクイックスタートガイドを参照してください。

なぜサーバーサイド言語と合わせて、JabvaScriptを理解しておく必要があるのか。

PHPは通信を行わないと変化が起こらない。サーバーサイド。
例：現在時刻は、リロードした時にだけわかる。
JavaScriptは、通信がなくても変化が起きる。クライアントサイド。
例：現在時刻は、毎秒変わる。

javascriptのデメリットは、データの保存ができない。その時その端末のみのアクション、データ、記録。

Ajax(非同期通信)=JavaScript

JavaScript: EventTargetでイベントを送受信する方法

この投稿ではJavaScriptの`EventTarget`を使って、ブラウザ上でイベントを送信したり受信したりする方法を紹介します。

サーバサイドでNode.jsを使っていると、ビルトインライブラリにeventsがあり、[EventEmitter]クラスでイベントの送受信ができて便利ですが、これはNode.js固有のものなのでブラウザでは使えません。代わりに、クライアントサイドでは[EventTarget]を使うことで、EventEmitterのようなことができます。

[EventEmitter]: https://nodejs.org/api/events.html
[EventTarget]: https://developer.mozilla.org/ja/docs/Web/API/EventTarget

## EventTargetは多くのブラウザが対応

`EventTarget`は、多くのブラウザが対応しており、特に外部ライブラリのインストールを必要としません。

JSですべての子孫要素に処理する

“`js:js
let parentNodeList = document.querySelectorAll(‘#parent *’);
changeAllDescendants(parentNodeList);

function changeAllDescendants(nodeList) {
for (let elm of nodeList) {
console.log(elm); //やりたい処理
}
}
“`
もしくは

“`js:js
let parentElm = document.querySelector(‘#parent’);
changeAllDescendants(parentElm);

function changeAllDescendants(parent) {
console.log(parent); //やりたい処理
if (!parent.hasChildNodes) {
return
}
// 次の子へ
for (let child of parent.childNodes) {
chang

【javascript】一言で、　Javascript　他ファイルの呼び出し　おまけ付き

##【ゴール】
他jsファイルを呼び出し、読み込む

##【メリット】
■javascript　理解度向上
■コードの可読性向上　整理出来るので

##【開発環境】
■ Mac OS catalina

##【コード】
**以下2点処理必要**

###①importを使用
＊読み込ませたいファイルに
＊ファイルの一番最初に記述
＊**’ ’**内は**ファイル名**

“`js:hoge.js

import HogeHoge form ‘./hogehoge’;

class Hoge{
.
.
.
}

“`

###②exportを使用
＊呼び出したいファイルに記述
＊ファイルの末尾に記述
＊default後は**クラス名**

“`js:hogehoge.js
class HogeHoge{
.
.
.
}
export default HogeHoge;
“`

##【番外編】定数、変数の呼び出し
＊**基本的には同じ**

###import

“`js:hoge.js

import content form ‘./hogehoge’;

class H

【JavaScript】Base64変換ライブラリで速度対決

こんにちわ。
皆さんもBase64は使われているかと思います。
バイナリを文字列で表現できるのは何かと便利ですよね。

しかしJavaScriptには、こうサクっと1発でバイナリ配列とBase64文字列を変換できる実装が用意されていないので、何かしらの手を加える必要があります。

今回は、バイナリとBase64の相互変換を行える3つの方法について、どれが1番速いかを検証してみようと思います。

# 方法1, 標準実装
– [TextEncoder – MDN](https://developer.mozilla.org/ja/docs/Web/API/TextEncoder)
– [TextDecoder – MDN](https://developer.mozilla.org/ja/docs/Web/API/TextDecoder)
– [atob – MDN](https://developer.mozilla.org/ja/docs/Web/API/WindowBase64/atob)
– [btoa – MDN](https://developer.mozilla.org/j

条件付きレンダリングって？

# 条件付きレンダリングてなだろう？
プログラミングにおいて複数の反応を用意して、一定の入力によって様々な出力へと変化するいわば**制御構文**というものがあります。これは一般的には`if文`を用いることで可能になるんですが私が今勉強しているVue.jsで条件付きレンダリングにおいては`v-if`や`v-else`というものを使って表現するらしい！
まぁ簡潔に言えば条件付きレンダリングとは**制御構文**であると言えますね！
## 百聞は一見に如かず！
とりあえず何かしらこの`v-if`とやらを使ってみるのが一番わかりやすいと思うのでサンプルプログラムを作ってみましょう。

“`sample.html

This is correct display!

uncorrect display!!!!!!!

【JavaScript】Promiseをしっかり理解したい【その1】

## 初めに
今まで非同期処理の実装は`async` `await`を使用してきましたが、根本的な理解ができておらず非同期処理の実装の度に頭にハテナがついて回っています。なのでまずはPromiseの理解を深め、まとめていきたいと思います。

## Promiseとは

>Promise オブジェクトは非同期処理の最終的な完了処理 (もしくは失敗) およびその結果の値を表現します。

PromiseはJavaScriptのビルトインオブジェクトであり、JavaScriptが動作する環境であればどこからでも呼び出すことができます。その実体は非同期処理を抽象化したオブジェクトであり、非同期処理を操作するための仕組みでもあります。

またPromiseはコンストラクタ関数であり、オブジェクトを生成、使用する際には`new`でインスタンス化します。

“`js:promiseオブジェクト生成
const promise = new Promise((resolve, reject) => {
asyncFunc(){…}
});
“`

## コールバック関数との比較

非同期処

htmlテーブルのDOM操作の罠

# 罠とは
htmlのテーブルのdom操作について、罠があります。端的に言いますと、テーブルの木構造のことですが、どうも隠れている要素があり、それを無視してしまうと、うまくDOM操作できません。
通常ですと、以下のhtmlコードについて

“`html

test1	test2
test3	test4