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

for, for in, for of, forEach まとめ

##for
– 基本的な書き方

“`
const colors = [“red”, “yellow”, “green”]

for (let i = 0; i < colors.length; i++) { console.log(colors[i]) } ``` ##for of - ES6 - for文をより簡潔に記述できる - 配列要素の繰り返し処理 ``` const colors = ["red", "yellow", "green"] for(color of colors){ console.log(color) } ``` ##for in - ES6 - ブジェクトのプロパティ(キー)分ループしてくれる ``` const colors = { one: "red", two: "yellow", three: "green" } for (key in colors) { console.log(`${key} : ${colors[key]}`) } ``` ##forEach - ES6 - 配列要素の繰り返し処理（for of と

jQuery checkboxの流れ

今回、チェックをつけた項目をアラートに表示させる実装をしました。
備忘録として、コードの流れを記録します。

コード全体はこう

“`javascript
$(function() {
$(‘form’).on(‘submit’, function(e) {
let output = ”;
let checkboxes = $(this).find(‘input[type=”checkbox”]’);
checkboxes.each(function(i, checkbox) {
checkbox = $(checkboxes[i]);
if (checkbox.prop(‘chec

PHPのdate()やmktime()をjavascriptでも使いたい

同様の処理を行うライブラリとしてはdayjsやMoment.jsがメジャーかと思いますが、個人的にはあれほど多機能なものは要らなかったので作成してみました。

`toLocaleDateString()`や`toLocaleTimeString()`等でも色々な表現はできますが、個人的にはやっぱり使い慣れたフォーマット文字列での指定が楽です。

基本的にPHPの`date()`、`mktime()`とほぼ同様に扱えるかと思いますが、以下の既知の相違があります。

####mktime()####
第7引数 **is_dst** はありません。
第6引数 **year** にマイナスの値を渡した場合の結果がPHPの`mktime()`とは異なります。

####date()####
フォーマット文字は個人的に必須のもの(YmdHis)といくつかの簡単そうなもののみの実装で、PHPで使えるものすべてには対応していません。
PHPの`date()`ではフォーマット文字を`\`でエスケープすることでフォーマット文字を置換せずそのまま表示させることができますが、未対応です。

###参考###

SVGを書くのが面倒なので入力補完できるようにしてみる

　「素直にInkscapeとかイラレ使えば？」で片付く話なんですけども…お付き合いいただきたい。

これ ↓ 作ってるときの話です。
GitHub: [mafumafuultu/svg.js dev ](https://github.com/mafumafuultu/svg.js/tree/dev)

### SVG書きたい！主要タグは知ってる！…属性…うっ…頭が…

IDEなどでは割とHTMLの属性の補完は効くんですが、SVGになるとどうも弱い。
``のd属性の書き方とか、シェイプ・画像・テキストレンダーの品質の設定とかそこそこ忘れるし,
``の`x1` `y1` `x2` `y2`属性とか書くの面倒くさいですね。
``の`points`属性も、長くなると数値の羅列の迷路をさまようことになり、
「こっちのN番目と、こっちの N’番目を入れ替えて、ここのN”番目とN”’番目をN””番目の後ろに…今、何番目….？」と迷子になりがち（個人差あり）

### 問題点
* スペルの長い属性なんか覚えてない。故に何を

@nuxt/contentでmarkdownにテキスト処理をしたい

## TL;DR

@ nuxt/content でmarkdownに前処理したいときどうしたらいいんだろうと思ってたんですけど、ソース読んで無理なことを理解したので、ローカルremarkプラグインで強引にテキストとして前処理するってのをやりました

— ねぎまぐろ (@kume_negitoro) July 11, 2020

## はじめに

こんにちは、ねぎまぐろです。

突然ですが最近追加された **@nuxt/content** かなりイイですよね。表示用のコンポーネ

モジュールの結合度

モジュールの結合度について説明する。

ここでのモジュールとはサブルーチン・関数・クラス・構造体など、およそ**プログラムの部品化に用いられる**ものを指す。

端的に言ってしまえば、結合度とはあるモジュールにおける変更が他のモジュールへ影響を与える度合で、依存度と置き換えても差し支えないと思われる。

一般的には結合度が低いほど、良い設計とされる。

また、結合度は、結合している or していない、のイチゼロではなく、その形態によって度合が異なる。

よってこの記事では、それらの形態を**結合度が高い順**に説明していく。

# 手続き型プログラミングにおける結合

## 1. Content Coupling（内容結合）

先に行っておくと、多くの高級言語では Content Coupling はほぼ発生しえない。

しかしアセンブリ言語などの低水準言語ではそれが許されることがある。

例えば、あるルーチンAが別のサブルーチンBにジャンプしたとする。

設計上サブルーチンB内部でのみ使用されるべきメモリ領域・レジスタを、Aが参照してしまっているとする。

この場合、サブルーチンB

TypeScriptを使ってノベルゲームを作ろう


こちらはQiita夏祭り2020の「〇〇（言語）のみを使って、今△△（アプリ）を作るとしたら」というテーマに沿って投稿した記事です。

# 完成イメージ

# 0. はじめに

> この章は読み飛ばして「1. 環境構築」に進んでも問題ありません。
> *TLDR: Phaser3を使うならTypeScriptがおすすめです。*

やってみたいとは思いつつも中々難易度が高いゲーム制作。
Unityなんかにも挑戦してみたいけどハードルが高く、webに慣れ親しんだ身

Jest で new Date() をモック化する

JavaScript でアプリケーション開発をしていく際に、日付をつかさどる `Date` オブジェクトを使うことがちょくちょくあると思います。[^1]

`Date.now` のようなメソッドをモック化することはとても簡単で、単に `jest.fn()` で置き換えてしまえばよいです。

“`javascript
Date.now = jest.fn(() => 1482363367071);
“`

公式ドキュメントにもやり方が記載されています↓↓↓
[2. Tests should be deterministic](https://jestjs.io/docs/ja/snapshot-testing#2-tests-should-be-deterministic)

しかし、`Date` は実行時によって値が変わってしまいますので、ちょっとテストではそのまま使うのは難しく、できれば `Date` をモック化して同じ時間を返してくれると色々都合が良いです。

[^1]: もちろん [moment](https://momentjs.com/) や [dayjs](https:

[AWS]S3でReact.jsを超爆速簡易型Webホスティングする

Reactを勉強中、それとなくおもしろおかしいWebページをスクラッチで作成することができたので、メンバーに~~自慢~~公開した。

今までメンバーに~~自慢~~公開する際には、Heroku、GitHub ioなどを使用していたが、S3で爆速にできることが判明したので備忘録として残す。

# はじめに
ドメインとの紐付けやSSL対応などは実施しておりません。
なので公開する際には十分に気をつけてください。

# ReactPjの準備
[公式ドキュメント](https://ja.reactjs.org/tutorial/tutorial.html)参照。

“`
$ npx create-react-app my-app
$ cd my-app/
$ yarn build
“`

# S3で公開するデプロイようのバケットを作成
S3のコンソールから「バケットを作成する」を押下。
![スクリーンショット 2020-07-12 0.04.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300430/6

Nuxt.js入門

# nuxt入門

Nuxt.jsに入門してみましたので投稿します。

## 環境

Ubuntu(WSL Windows10 Home)を使っています。ここに作っていきます。

|category |value |
|:————–|:————————|
|platform |Ubuntu 18.04.4 LTS (WSL) |
|Package Manager|npm 6.14.4 |
|JavaScript |Node.js v12.17.0 |
|frameworks |@nuxt/cli v2.13.2 |
| |@nuxtjs/vuetify 1.11.2 |

## 準備

開発環境を作成するには、node.js, npmをインストールするだけです。

“`shell:
sudo apt install -y nodejs

Promise Test

“`js
function sampleResolve(value) {
return new Promise(resolve => {
setTimeout(() => {
resolve(value);
}, 1000);
})
}

function sample() {
let result = 0;

return sampleResolve(5)
.then(val => {
console.log(result, val)
result += val;
return sampleResolve(10);
})
.then(val => {
console.log(result, val)
result *= val;
return sampleResolve(20);
})

Chrome拡張でJSONファイルを手軽に読み込んでみよう！

以下のような構造のChrome拡張のファイルがあったとします。

“`
my-extension
├── src
│ ├── config.json
│ └── main.js
└── manifest.json
“`
では、`main.js`から`config.json`を読み込んでみましょう。なに、難しいことは考えず、以下の関数をコピペしてください。

#コード
“`javascript:main.js
function getJSON(filename) {
return new Promise(function(r) {
var xhr = new XMLHttpRequest();
xhr.open(‘GET’, chrome.extension.getURL(filename), true);
xhr.onreadystatechange = function() {
if(xhr.readyState == XMLHttpRequest.DONE && xhr.stat

【Vue】配列の追加・削除には注意が必要?

[【Vue】オブジェクト追加・削除には注意が必要? ](https://qiita.com/_masa_u/items/d87c5aea5ecd12006005)の配列版です。
オブジェクトと同じく、参照するだけなら普通のJSと同だが、要素の追加・削除で嵌るポイントがあったので備忘録として。
↓の記事も参考に。

– [Vue.jsは気難しい（配列編）](https://qiita.com/tmak_tsukamoto/items/e303328681f20a036530)
– [リアクティブの探求
](https://jp.vuejs.org/v2/guide/reactivity.html#%E5%A4%89%E6%9B%B4%E6%A4%9C%E5%87%BA%E3%81%AE%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85)

次のようなVueインスタンスの`data()`に`charas`という空の配列がセットしてあるとする。

“`javascript
export default {
data () {
return {

【GAS×LINEmessagingAPI】秘書BOTを作ってみた。JavaScriptのアウトプット

#はじめに
この記事はプログラミング未経験だった僕が、プログラミングを学び、アウトプットとして作ったLINEBOTのお話です。

初めての投稿なので、改善点やアドバイス、感想などあればコメントお願いします

#目次
1.きっかけ
2.つくるもの
3.使う技術
4.作り方

#1.きっかけ
コロナウイルスの影響でオンライン授業が増え、就活も始まり、増えたタスクをもっとシンプルに管理したいと思ったからです。

Inteeリアルカレッジ中級編のポートフォリオとして作成しました！
（リアルカレッジについての記事もまた書きます！）
#2.つくるもの
・毎朝自動でスケジュールを通知してくれるLINE BOT
・Twitterの積み上げ投稿に生かせる型
・スプレッドシートで管理可能
・秘書として人間味を感じること！！
・作った後、毎日使いたくなるほど便利なこと！

#3.使う技術
主にこの３つを使いました！

・LINE messaging API
・Googleスプレッドシート
・gas

次に具体的な作り方について紹介します！
#4.作り方
####4-1.LINE developersの登録

ウソ穴 Ver 5 Type A / GStreamer

## はじめに

個人開発`ウソ穴`の作り方を紹介します。

## ウソ穴とは

`ウソ穴`は、ライブ映像 or 動画とARを組み合わせて、壁に穴が空いた錯覚を作り出します。

Webサイトなので、ユーザーはアプリのインストール無くウソ穴を使用できます。

## ウソ穴 Ver 5 Type A / GStreamer

今回は、GStreamer によるライブ配信と組み合わせる `ウソ穴 Ver 5 Type A` を紹介します。

– Webサイトは、Windows10環境のブラウザ Chrome, FireFox で動作を確認
– iPhone,Androidでは正常に動作せず

## 構成図


※ウソ穴 Ver 5 Type A は、iPhone, Android 非対応

## デモ映像

Node.jsで作る簡単なWebアプリケーション

今回はNode.jsで作成する簡単なアプリケーションの作り方を解説していきます。
※nodeとnpmはインストール済みであることを前提としてます。

##プロジェクト作成

まず、プロジェクトを作成していきます。
今回はsampleという名前のプロジェクトを作成します。

##package.json作成
vacode上で先ほど作成したフォルダを開き、
ターミナルで下記のコマンドを実行し、package.json を作成していきます。

`npm init`

このとき、プロジェクト名などを聞かれまずが、
entrypointのみ”app.js”に変えましょう。

##必要となるパッケージをインストール

必要となるパッケージをインストールしていきます。

今回使うのは下記の3つのパッケージです。
・express
・ejs
・bootstrap

それではインストールしていきましょう。

インストールは以下のコマンドで実行できます。
`npm install express ejs bootstrap –save`

インストールが完了すれば準備OKです。

##必要なディレクトリ

元記事を表示

ReduxのReducerでのState操作の基本

# 目次

– [概要](#概要)
– [ReducerでState操作](#reducerでstate操作)
– [オブジェクトのキー補間構文](#オブジェクトのキー補間構文)
– [まとめ](#まとめ)

# 概要
この記事では、Reduxを使用したときのStoreにある**StateをReducerで操作する際の基本**として、主にCRUDアプリケーションをはじめとした非常に多くの場面で利用される**「追加、更新、削除」**についてまとめています。
ReducerでのState操作の方法が分からなくなった時にこの記事を参考にしていただけるようであれば幸いです。
なおこの記事では、Reactを使用していることを前提としています。

### 前提知識

– Reduxの基本的な知識を身につけている(Reduxの基本については[こちらの記事](https://qiita.com/jima-r20/items/4a5d0074e24add0df3fc)にまとめています)
– JavaScript(ES2015以降)で使用できる構文をある程度知っている

### 環境

| 導入ライブラリ

引数について（100 days of code）

#はじめに
100 days of codeを始めて7日目。
今日は引数について復習しました。

#引数とは？
引数とは、関数を実行するときに関数に渡す値を指します。
他にも引数の特徴として、値や変数をセットすることができます。
引数を受け取る値の個数は関数によって変わってきます。
alertは引数を1つだけ受け取れる。
console.logであれば引数を複数受け取れる。（何個でもOK）

#例
“`index.js
const hello = function (name, age) {
console.log(name + ‘さんは’ + age + ‘歳です。’);
}
hello(Yuki, 27);

// 出力結果
“Yukiさんは27歳です。”
“`

#終わりに
引数を用いたコールバック関数はJavaScriptをやってて避けて通れないので、簡単に復習しました。
今日学習した引数は初歩的な部分なので、実践で使えるようにできればと思います。
明日も頑張ります。

Vuexでstoreのstateを初期化する

## はじめに
Vuexを使用しているとき、ログアウト処理などでstoreのstateを初期状態に戻したいことがあると思います。いくつかやり方はあると思うのですが、私が手軽だと思った情報を記載します。

## 方法
こんな感じです。実際に利用する際はactionsなどから呼び出すことになると思いますが、ここでは最低限のコードのみ記載しています。
[こちら](https://tahazsh.com/vuebyte-reset-module-state)を参考にしました。参考というよりそのまま持ってきただけですが。。

“`javascript:store/sample.js

// stateの初期値としたい任意のデータを定義する
function getDefaultState() {
return {
idToken: null,
uid: null
}
}

// stateを初期化する
export const state = getDefaultState()

export const mutations = {
// stateを初期化する

jsで配列を分解した全パターンを取得する

#やりたいこと
わかりやすく言葉で説明できないので、完成イメージをかきます！

“`js
console.log(allSubArray([1,2,3]);
/*
[
[[1], [2], [3]],
[[1, 2], [3]],
[[1], [2, 3]],
[[1, 2, 3]]
]

(順番の入れ替え([[1, 3], [2]]など)は考慮しません)
*/
“`

何に使うの？とか言わないでください 🙂

#考え方
###再帰使えるかな・・・

“`js
const allSubArray(array) => {
// 再帰終了条件
if(array.length === 0) return [[]];

cosnt result = [];
// array = [1,2,3,4]とする
/* 最初は0番目の要素[1]とそれ以外[2,3,4]に分割して考える　*/
const subArrays = allSubArray([2,3,4]);
// subArrays = [[[2], [3], [4]],