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

TypeScript + React + Sass + Babelを利用したWebpack環境構築

# TypeScript + React + Sass + Babel利用したWebpack環境構築

最近, TypeScriptを勉強し始めたので
今回はTypeScript + React + Sass + Babelを利用した
Webpackの環境構築を行っていきたいと思います。

## 前提
– ターミナルが利用できる
– Node.jsを利用環境がある
– npm, yarnの利用環境がある

## 環境
– `2020/2/20` 時点での最新モジュール
– `Node v11.10.1`
– `ES6+`
– `TypeScript v3.7.4`
– `React.js v16.12.0`
– `Webpack v4.41.2`

## ファイル構成
ファイル構成は以下の通りです。
【JavaScript】querySelectorなどでCSSセレクターを使うときに](ブラケット)を閉じないとSafariで動いてくれない

次のように、`querySelector`で要素を取得する際にうっかり`]`を書き忘れた場合でも、Chromeでは普通に動いてくれます。

“`foo.html

“`

Chromeの場合

しかし、Safariで同じことをやろうとすると、次のようなエラーを吐いてしまいます。
`The string did not match the expected

Chart.jsを使用して複数軸のグラフを表示する(Javascript)

##はじめに
– [こちらの投稿（【Qiita API】いろんな方法で Views、Likes、Stocksを取得（JavaScript、Google Script、Python, Vue.js）](https://qiita.com/yoshi_yast/items/a0dacc4dd33106e66752)で、Qiitaの自分の投稿について、QiitaAPIの情報を取得し、「ページビュー（View）」・「いいね（Like）」「ストック（Stock）」などをテーブル表示をさせました。

– そのときに、定期実行(1日1回)にて、データベースに毎日の情報を貯めていました(Python使用)。そのデータを使って、視覚的に見れるように、グラフ表示(複数軸)をさせようと思いました。

##やりたいこと
＜グラフ表示＞
・現在日付から過去1カ月のデータを取得する。
・取得したデータをchart.jsにてグラフ表示する。
（X軸：日付、Y軸1-棒グラフ：Qiita-View数、Y軸2-折れ線グラフ：Qiitaいいね・ストックの合計）

＜テーブル＞
・取得したデータの中で最新日付のデータをテーブ

Javascript入門書のソースコードを写経する際に工夫した方がいい３つのこと

未経験のプログラミング言語を学ぶ際は、大抵の人が

・入門書を手に入れる
・環境を整えてみる
・実際に入門書に書いてあることを打ち込んでみてその通り動くか確認する

という手順で開始することになります。完全に初学者ならばそれでもいいと思いますが、もし過去少しだけ触ったことある人や、別言語経験者ないし、言語は経験があるけど新しいフレームワークを学び始めた（たとえばJavascriptは経験していて、これからReactを学ぶなど）際は、それだけだと物足りない…というか大して学びはありません。

実際、progateでも、ある程度一つの言語で業務経験あるならば未経験の言語とはいえカリキュラムをこなすだけなら退屈です。

また、入門書の後半には多少実用的なソースコード（「TODOリスト作ってみました」等）があるケースが多いですが、そのままですと「関数化されていない」「変数がリークしてしまう」など、実務上ではレビューを通すのは難しいものが殆どです。

そこで、主にウェブ系のプログラムが対象ですが、もし入門書の写経が終わった人や、他言語・他フレームワークの経験がある方は、以下のことに工夫してみる

RailsにReactやVueはいらない？ ajaxでviewを非同期で操作するgem(ActionPartial)を作りました。

# ActionPartial

個人で**[Crover(クリエイターズプラットフォーム)](https://crover.me)**というサービスを企画&開発&運営している**[nir](https://twitter.com/nir_searchright)**と申します。

**[Crover](https://crover.me)**の開発で動的な`view`の実装が必要になったので、`gem`を作ることにしました。

それで出来上がったのが、`Rails`で動的な`view`を簡単に実現できる`gem`の`ActionPartial`です。

Crover(クリエイターズプラットフォーム)
→ https://crover.me

github(ActionPartial)
→ https://github.com/nir-searchright/actionpartial

なぜ、`React`や`Vue`を使わなかったかというと
– 学習コストが高い
– フレームワークにフレームワークを組み込むことに違和感がある
– 設計思想的な問題(`Rails`を`Rails`のま

Promiseとリトライとリトライ制御とキャンセル

## Promiseで処理が失敗したらリトライしたい

Promiseの結果次第でリトライをかけたい場合があります。簡単な実装は以下で、これはググるとすぐに出てきます。

“`js
function retry(func, retryCount) {
let promise = func();
for (let i = 1; i <= retryCount; ++i) { promise = promise.catch(func); } return promise; } ``` ``` js // 失敗時に5回までリトライ retry(() => fetch(“url”), 5).then(…)

// これは以下と同じ
fetch(“url”)
.catch(() => fetch(“url”))
.catch(() => fetch(“url”))
.catch(() => fetch(“url”))
.catch(() => fetch(“url”))
.catch(() => fetch(“url”))
.then(…

GE〇オンラインレンタルの55円キャンペーンメールを受信したらGoogleカレンダーに登録するGoogle Apps Script

#作成動機
なんとなくやってみたかった

#コード
“`javascript:Code.gs
function createEvents(mail) {
var calendar = CalendarApp.getDefaultCalendar();
var title = mail[‘subject’];
var startTime = new Date(mail[‘date’]);
var endTime = new Date(mail[‘date’]);
var location = ”;

if(mail[‘duedate’]) {
endTime = new Date(mail[‘duedate’]);
}

if(mail[‘location’]) {
location = mail[‘location’];
}

var option = {
description: mail[‘body’],
location: location
}

console.log(“add

Javascriptは書く順番が大切

Vue.jsを書いていて、どうしても動かずハマってしまった部分がありました。
FirebaseをWebアプリに連携しようとして、 `main.js` に以下のように記述していました。

“`javascript

```

これでVue.jsを使用することができるようになったので、次に進みます！

#2. インスタンスを作ろう！
Vueは、Vue関数でVueインスタンスを作成することによって起動されます、これを実行するためには？
JavaScriptの特性として、**new**演算子を使えばインスタンスを作ることができますのでやってみましょう！

インスタンスが分からないという方はこちら見れば理解できるかも・・・？→https://wa3.i-3-i.info/word1118.html

````j

javascriptで使えそうな自分用の関数をまとめてみた。

#はじめに
こちらはネットに落ちているものや自分が学習したものを改良して作ったものになります。
至らないコードもありますがご了承ください。

##配列から要素を排除する関数

```javascript
function unique(array) {
return array.reduce((prev, number) => {
if (prev.find(check_num => check_num === number) === undefined) {
prev.push(number);
}
return prev;
}, []);
}
const duplicationArray = [1,2,3,3,4,4,5,7,6,2,6];
console.log(unique(duplicationArray));
// [1, 2, 3, 4, 5, 7, 6]

```
####流れをざっくりと説明
prevの中に配列の要素が見当たらなければprevにpush。
prevに入っている値と同じものがあったらpushせずにそのままp

で、結局APIのパスパラメータ、クエリパラメータ、リクエストボディってどう違ってどう設計するが正しいの？

## 事の発端
基本フロントのお仕事をしているのですが、RESTfulAPIの設計をしてね、と言われてRESTfulAPIについて色々調べることがありました。
パスパラメータ、クエリパラメータ、リクエストボディの使い分けについてヘ〜〜〜と思ったので、その結果を備忘として残したいと思います。
（かなり基礎的な情報なので、初心者向けです。）

### この記事で書くこと
- パスパラメータ、クエリパラメータ、リクエストボディってHTTPリクエストで言うどれのこと？
- パスパラメータ、クエリパラメータ、リクエストボディにはどういう情報を持たせればいいの？

### この記事で書かないこと(この記事を読む上での前提知識)
- HTTPリクエストとは何か？
　これを読めば大体OKです。→
[「HTTPリクエスト」と「HTTPレスポンス」 / ITSakuraさん](https://itsakura.com/network-http-get-post)
- RESTful APIとは何か？
　　　これを読めば大体OKです。→
[RESTful APIとは何なのか /
@Na

ScrollReveal＋CSSアニメーションでWebページをちょっとだけオシャレにしてみる

この記事は「納期1日だけどオシャレなアニメーションもつけてイイ感じにして:innocent:」と言われた人間が、頑張って工夫したことをまとめたものです。

## タイトルにあるScrollRevealとは
[ScrollReveal](https://scrollrevealjs.org/)はスクロールアニメーション系のJavascriptライブラリです。
jQuery不要、CSS不要で手軽にスクロールアニメーションを実装できます。

## 事前準備
まずHTMLで**scrollreveal.js**を読み込みます。

```html:HTML

```

そして、アニメーションさせたい要素に**任意のclass**を設定します。

```html:HTML

アニメーションさせたい要素

```
ここでは`class="anime"`を使うことにしました。

## やりたいこと

- ページをスクロールすると要素がフワっと出てくる
- 要素が

javascript 配列とオブジェクト（連想配列）の違いと使い方

javascriptの配列(Array, Set, Map)とオブジェクトが似ているけど扱い方が違って混乱したので使い方をまとめました。
リストっぽいなにかを使いたいけど使い分けがわからない人はどうぞ。

#配列
###基礎
・[]で囲まれているのは配列
・値をリスト状に保持する
・Array, Set, Mapがある（配列って扱いでいいのか）

###Array
・単純に値をリストとして保持する
（key valueのような組み合わせはない）

```js
var arr= []
arr = [1,3,"aaa","aaa"]
```

#####値の出し入れ
```js
var arr= []
arr = [1,3,"aaa"]
//最後尾に追加
arr.push("bbb") // [1,3,"aaa","bbb"]
//最初に追加
arr.push("ccc") // ["ccc",1,3,"aaa","bbb"]
//値の取り出し
var firstElement = arr[0] // "ccc"
var therdElement = arr[2] // "3"

webpack入門して仲良くなりたい～開発環境編～

# 仲良くなりたい

- [基本編](https://qiita.com/gabochi/items/b0bc1d522b12fe124f90)
- 開発環境編 ←今ココ!!
- Loaders編　近日公開予定
- Plugins編　近日公開予定

Loadersのことを書こうと思っていたんですが、開発をもっと楽にできそうなのでその設定をここにまとめます

前回のファイル構成をここに載せておきます

```
webpack-friendly-basic
├ ─ ─ node_ modules
├ ─ ─ package.json
├ ─ ─ package-lock.json
├ ─ ─ dist
│ ├ ─ ─ bundle.js
│ └ ─ ─ index.html
├ ─ ─ src
│ ├ ─ ─ js
│ │ └ ─ ─ app.js
│ └ ─ ─ modules
│ ├ ─ ─ add.js
│ ├ ─ ─ subtract.js
│

Vue余裕すぎワロタwww...、Vuexわからん。。って方へ

Vueってなんだ？？

あー、Javascriptのフレームワークね。
意外と簡単じゃん。いや、これ余裕だわ。。
はははははh、Vuexってなんだ。。

そんな方に捧げます。

[株式会社entershare](https://entershare.jp/)の阿部です。

Vuexを勉強したので記事にしました。
少しでもご参考になれば嬉しいです。
質問、間違い等あれば、ご指摘ください！

## 説明すること
- Vuexとは何か？
- どうやって使うのか

## アジェンダ
- Vuexとは
- Vuexが必要となった背景
- 状態変更の流れ
- メリットデメリット
- 利用すべき箇所

## Vuexとは
Vue用の状態管理ライブラリです。
決められた手順に従ってstate(グローバル変数的なもの)を書き換えます。

よくわからないですね。
順を追ってVuexが必要となった背景を説明します。

## Vuexが必要となった背景
複数のコンポーネントの中で、同じ状態（変数）を参照、変更したいです。
ネストが浅いと、props（親から子）、emit（子から親）で完結します。

JointJSで組織図を書いてみる

# 概要
フロー図をブラウザ上でかけないか調べていて見かけたので使ってみる。

# JointJS
調べてみるとJointJSというものがヒットしたので、使ってみる。

- [www.jointjs.com](https://www.jointjs.com/opensource#Download-JointJS)

やってみたコードは以下のgithubに登録しています

- https://github.com/reflet/jointjs-leaning

# docker準備
npmコマンドを使うのでdockerで `node.js` を用意します。

```bash:コンソール
$ docker-compose build
```

# インストール
JointJSをインストールします。

```bash:コンソール
$ docker

戦車ラジコン：大砲の照準を作る

もう少し、[戦車ラジコン](https://qiita.com/poruruba/items/0c814783f89f42e65933) をいじります。

M5Cameraで映した画像のどこかにQRコードがあればロックオンとしていましたが、今回は、GamePadの十字キーでちゃんと照準を合わせないと、ロックオンしないようにします。

こっちが照準が敵にあっていない状態。この状態ではまだ攻撃できません。
照準は青い丸です。


こっちが照準があっている状態。青四角で囲われていますので、この状態で攻撃できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/f6a44184-c5b7-6933-6a02-b0309bc2e0bd.png