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

初投稿

どうも　:shamrock:

エンジニア就職を目指している20代です

現在はTechCamp82期生として最終課題に取り組んでいます

就職までの学習を記録します

既存の内容も多く投稿することになると思います:airplane:

Array.map() あれこれ

# Array.map() あれこれ

関数の中でmapが好きなので、いろいろな言語のmapを調べてみました。

※ここで言うmapは、主に配列（言語によってはリスト）を受け取って、内部で処理して（多くは無名関数などのコールバック関数）、新しい配列を作って返すような言語に込み込みの標準関数を想定しています。

# mapの気に入っているところ

個人的に下記が気に入っている理由です。

* ループ処理を書かなくて良い
* 元の配列に影響しない
* コードが短くて済む

# JavaScript

JSは最近コード書くことが多いのですが、forやforEachよりもmapを良く使います。

* MDN ([Array.prototype.map()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

“`javascript

const array = [‘Perl’, ‘Ruby’, ‘Scala’];
console.log(a

[JavaScript] クロージャー(closure) をわかりやすくまとめてみた　No.1

#なんと、このコードもクロージャーなんです。

“`
const myName = ‘rika’

function printName(){
console.log(myName)
}

PrintName() // rika
“`
他の言語では、functionの内側の変数から外側の変数にアクセスすることは出来ないのですが、JavaScriptだとそれが可能になります。それを「クロージャー」と呼びます。

上の例でも、グローバル変数myNameをfunctionの中での使用することが出来るんです。

#一番使われるクロージャーの形はfunction内のfunction!

“`
function outerFunction(outerVariable) {
return function innerFunction(innerVariable) {
console.log(`Outer Variable: ${outerVariable}`)　//結果 outside
console.log(`Inner Variable: ${innerVa

5chの「なんJ」でAAが「貼れない」規制を突破できるようにAAを変換するサイト　（をgithub.ioで無料公開する方法）

# AAを貼れるように変換するサイトはこちら

https://j-j-j-j.github.io/

* 上のurlにアクセスするとAAを貼れるように変換できます

* 使い方は入力フォームにAAをコピーして「実行」ボタンを押すだけ
変換ずみのAAがクリップボードにコピーされます

=========================

現時点でも「なんj AA 貼れない」などと検索しても出てこないのでここで紹介しておきます。qiitaなら多分上位に来ると思うので
chmateなど専ブラがAA変換に対応してくれればいいのにって感じだけど
ちなみにこの記事の著者は製作者じゃありません

=========================

# なんJなど実況系板のAA規制とは

一定以上空白がある文章が書き込めなくなったため、5chの実況系板でほとんどのAAがはれなくなった規制。

# スクリプトの内容

この変換サイトだと

空白やらNG判定になりそうなところを読み込んで
置き換えて
新しい文字列の固まりとして出すのは
jsのプログラミング部分でやってる

それをクリックポチポチッてで

GitHubリポジトリのファイルをクロスオリジンで配信する超簡単な方法

小ネタです。

ちょっとしたスクリプトを配信したいな〜というとき。

GitHubリポジトリのファイル実体が保管されている`https://raw.githubusercontent.com`から直接`src`属性などで引っ張ろうとしても、レスポンスヘッダに`Access-Control-Allow-Origin: *`がないためCORSエラーで弾かれてしまいます。

“`html:CORS-Error

“`

# jsDelivrを使おう
– https://www.jsdelivr.com

実は、みんな大好きいつもお世話になっているjsDelivrさんからGitHubレポジトリのファイルへ **クロスオリジン** でアクセスできます!!

# 準備
jsDelivrでの配信準備はとても簡単。

1. タグを発行する
2. タグをpushする
3. おわり

タグがリモートリポジトリ

[高階関数/Higher-order function] 英語の記事・動画まとめ No.1

#The coding trainの解説
元動画: https://www.youtube.com/watch?v=H4awPsyugS0

“`
function hello () {
}
“`

上は普通のfunction。

高階関数とは2つ以上の関数(function)を使用するということ。それはparameterに入れたり、戻り値としてfunctionを設定したり、いろんなことが出来るんです。

“`
function hello(function) {
return funtion
}
“`

#具体的にみてみよう

1) 例えば以下のようにsingという関数がla la la — という文字数を出すとしましょう

“`
function　sing(){
console.log(‘la la la la la’)
}
“`
2) la la la laの他にも他の音を一緒に出したい時はどうしましょう？
このような時は、別でmeow meowというfunctionを作って、singの引数として渡してしまえるんです！

“`
function　sin

ReduxとFluxはどう違うのか

# Reduxはわかった。Fluxとはなんなのだ？
React/Reduxは昨今のWebフロントではよく見る構成なので、学んでいる方は多いと思う。
Reduxの関連文献を読むと度々Fluxという言葉が出てくるがあれは一体なんなのか。

この記事では、Reduxとの違いを意識しながらFluxを紐解いていく。

## Fluxとはアーキテクチャである
Facebookが生み出したクライアントサイドウェブアプリ用のアーキテクチャである。
Reduxはライブラリの名前であるが、Fluxはアーキテクチャの名前である。つまり特定のライブラリを指す言葉ではない。
（とはいえ[facebook/flux][3]がutilを提供しており、これが使われることが多い）

このアーキテクチャの実装を助けるライブラリが多数生まれたが、その中で一際人気を誇ったのがRedux。
ReduxはFluxのような単一方向のデータパスに基づく設計思想になっているが構成要素に違いがある。

## なぜFluxなのか　MVCでは難しい実装ケース
ReduxとFluxの話に入る前に、もう一つ有名なアーキテクチャのMVCの話を最

Dom国とJavaScript国の間の橋は狭い

# 昔聞いた先輩社員の名言
* DOM国とJavaScript国の間の橋は狭いので、頻繁に行き来しないように気をつけろと言われたのを思い出したので、ある意味初歩的なことではあるが、自戒も込めて記事にしておく

# 先に結論
* 要は`DOM操作は遅いので、JavaScriptの(特にループの中で)DOM操作を頻繁に行うと性能劣化につながる`というお話

# 経緯/背景
* 私の所属するプロジェクトの終盤で、性能問題が顕在化した
* パッケージ製品を使っており、パッケージの大幅な更改があったのだが、その前後で画面描画が倍以上遅くなっている
* パッケージが新しくなっているのに、よく使うデフォルト的な画面が圧倒的に遅くなるのはありえない。1ヶ月以内になんとかしろと言うことに
* その画面は表形式のデータを表示する画面で、数千行(一度の画面描画は150件程度)が処理対象になる
* 列は10項目程度

# 原因
* ソースコードレベルまで追跡した結果以下2点が判明

## 1. 画面描画時にリサイズイベントが呼ばれ、同じ関数が2回呼ばれている
* 画面ロード時に自身とリサイズイベントで

WordPressにプラグインなしで目次を自動生成する（style、スクロールアニメーション付き）

WordPressの投稿エリアにプラグインなしで実装できる目次機能をつくっていきたいと思います。

##今回作るものの要件

– h2、h3を読み取って自動的に目次を生成する
– h3は小見出しとして、h2にぶら下がるように表示する
– クリックしたらスクロールするアニメーションを付ける

##目次を自動生成するPHPスクリプト
WordPressでご使用中のテーマファイル内のfunctions.phpに以下をコピペします。
コードがごちゃごちゃするのが嫌なのでDOMDocumentを使ってHTMLを構築しています。

“`php:functions.php
class PHPDOM
{
public function __construct()
{
$this->doc = new DOMDocument(‘1.0’, ‘UTF-8’);
}

public function setNode(string $tagName, ?string $className = null, ?string $text = null): objec

[javascript]変数の書き方

#変数の書き方
javascriptでは変数の前にvarをつけることで、変数を宣言できます。
varはvariable(変数)の略称です。

“`
var hello = “Hello, World”;
“`

“`app.js
var hello = ‘Hello World’;
alert(hello);
“`

“`index.html








““

また、「Hello, World」は文字列なので、ダブルクオテーションで囲みましたが、
数値を変数に代入する場合は、ダブルクオテーションは不要です。

“`
var int = 5;
“`

[JavaScript] 複数の戻り値を個別の変数に入れたい時

#複数の戻り値を別々の変数にいれる場合の手順

1) 配列またはオブジェクトとして値をまず一つにまとめる
2) 分割代入を利用して、それぞれの変数に代入する

“`
function getMaxMin(…nums) {
return [Math.max(…nums), Math.min(…nums)];
}

let result = getMaxMin(5, 1-, 10, 20, 50)
console.log(50, -1)

//これをそれぞれの変数にいれる！分割代入を使う！
let [max, min] = getMaxMin(5, 1-, 10, 20, 50);
console.log(max) //50
console.log(min) //-1
“`

JavaScriptのクラスを学ぶ演習・課題

# 本記事の目的
– クラスの定義ができるようになること。
– クラスに関数を作れるようになること。
– コンストラクタを作れるようになること。

# 前提
JavaScriptの実行環境を作ることができる。
関数使える

# 演習1 Loggerクラスを生成する。
クラスとは何か？とかの説明は理解しづらいのでさくっと動くものを作っていく。

まず以下のようにhtmlを作る

“`index.html

可変長引数(Rest Parameters)の英語記事を日本語で説明

Rest parameter (…)
引用元：https://javascript.info/rest-parameters-spread

通常、ファンクション(関数)はいくつもの引数を使用することが可能！
以下、例

“`
function sum(a, b) {
return a + b;
}

alert (sum(1,2,3,4,5));//結果3
“`
この場合、最初の1,2のみが適応されるので、結果は3となります。

#…を使うことで複数ある引数をArray(配列)にいれることが可能
例えば以下↓

“`
function sumAll(…args) { // ここでいうargsは配列の名前になります
let sum = 0;

for (let arg of args) sum += arg;

return sum;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6

“`
この場合、引数が1であっても、

iPhoneをMacのローカル環境に接続し、Mac版Safariでデバック（Webインスペクタ）する方法

ウェブサービスとかを開発していると、エミュレーターでは起きないことが、実機で起きたりすることがままある。
iPhoneのjavascriptの挙動をconsole.logにだしてみたいこともある。
いちいちサーバーにプッシュして実機確認するわけにもいかないので、
ローカル環境にiPhoneをつないで、かつiPhoneのSafariのログをMacで取る方法を調べたが、
WifiにiPhoneを繋げてるとWebインスペクタが使えなかったり、そもそも情報が少なかったりするのでまとめました。

##用意するもの
– Mac(homebrewとかDockerで開発環境があるもの）
– iPhone
– ライトニングケーブル
– wi-fi環境

##事前準備
###共通
**iPhoneと、MacのSafariのバージョンを必ず揃えておく**
####Mac版Safari
Safari立ち上げ、メニューから、「Safari」＞「Safariについて」
![MacSafari.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.co

【JavaScript】要素の取得方法まとめ

#### ID名を指定して取得する。

– document.getElementById();

HTML

“`
 id = “js-exsample”
“`

javaScript

“`
document.getElementById(‘js-exsample’);
“`
 

#### タグ名を指定して取得する。

– document.getElementsByTagName();

– element.getElementsByTagName();
 

HTML

“`

Sample2

“`

javaScript

“`
document.getElementsByTagName(‘li’);
“`
 

#### クラス名を指定して取得する。

– document.getElementByClassName();

– element.getElementByClassName();
 

HTML

“`
class=”js-exsample”
“`

Vue3のComposition APIについての学習

## 概要
以下の動画の文字起こし＆理解の整理

## Composition APIとは
柔軟にコンポーネントをかける

### なぜ使うのか
– 保守性の向上
– 再利用性の向上

## Vue2 -> Vue3
Vue2で書かれたコード

“`vuejs
// src/components/CounterMouse.vue