f@ctor

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

JavaScript関連のことを調べてみた2020年09月04日
目次

TypeScript + Jestでaws-sdkをmockする

## この記事について
最近よくTypeScriptでAWSのリソース操作を行うのですが、動作確認を行うたびにリソースを作ったり消したりするのが面倒くさいと感じていました。
ましてやユニットコードなんて書いてもその時のリソース状況にがっつり依存するなあ・・・と少しナイーブになっていました。

そんな中、最近やっとaws-sdkのモック化に成功したのでメモとして残しておきます。

動作確認元のDynamoDBテーブル定義や詳細は[この記事](https://www.ooooouchi.info/entry/2020/09/04/094500
)を参照してください。
CloudFormationの内容と実プロジェクトのリポジトリを記載しています。

## Jest
https://jestjs.io/
Facebook製のテストフレームワークです。
概要や基本的な書き方は[この記事](https://qiita.com/chimame/items/e97883fd46b67529d59f)が参考になります。

## Jest導入
“`sh
yarn add jest @types/jes

元記事を表示

【Javascript】if文をワンライナー（1行）で書ける三項演算子とは？

Javascript 三項演算子（if文を一行で書く）
# なにこれ
Javascriptを学習中に、下記のコードを見て「ワンライナー？何これ？」と思ったので、
備忘録として記事化しました。（確か前にも同じ箇所でつまずいた）

“`
count += todo.done ? 100 : 1;
“`

# 答えは三項演算子
if文をワンライナー（一行）で書く方法の一つ
構文は下記

“`
条件式 ? trueの時 : falseの時
“`

# 例文
trueの場合

“`test.js
test = true;
console.log(test ? 100 : 1);
// 表示結果：100
“`
falseの場合

“`test.js
test = false;
console.log(test ? 100 : 1);
// 表示結果：1
“`

# 余談
紛らわしいのでif文で書きたい（本音）
でもワンライナーで書いた方がコードが短くなって可読性上がる。この葛藤。

元記事を表示

[JavaScript]addEventListener(‘load’）が発火してくれない問題

問題・window.addEventListener(‘load’, change)と記述しているのに
更新ボタンを押さないとイベントが発火してくれない

前提
changeは変数自分で命名する

“`
change.jsの記述内容
function change(){
item.addEventListener(‘keyup’, function(){
keyupした時の処理内容
})
}
window.addEventListener(‘load’, change)
“`
window.addEventListener(‘load’, change)と記述すれば
windowがloadされた時にchangeの内容が処理されるようになる

#解決方法
app/javascript/packs/application.jsの内容を書き換える

“`
require(“@rails/ujs”).start()
require(“turbolinks”).start()#消す
require(“@rails/activestorage”).start()
require(

元記事を表示

簡易progate(html)

#はじめに
HTML/CSSを書くときは、`一度コードを書いて後ブラウザで実行する`という作業が必要です。
一連の流れについて、ウインドウを切り替えるのが煩わしい、という人もいるでしょう。
これを解消してみたいと思いました。

Progateをはじめとしたプログラム学習サイトでは、
コードを入力してボタンを押すと、プログラムが実行されます。
これを再現してみれば、一連の煩わしさが解消されると考えました。

本記事では、Ruby on railsを使用して、
HTMLのコードを書いてスイッチを押すと、その同じ画面にそのコードを元にしたビューが現れるプログラムのコードを紹介します。
非常にシンプルで、１００％当初の目標を実現できているわけではありませんが、
このコードを改良すれば目標達成できるものと思っています。

#実行

HTMLは次のように書きます。（RUby on railsを使用しているので、hamlで書いています。）

“`haml
.header 左にhtmlコードを入力してボタンを押せば、右にその結果が表示されるぞ
.body
.body__left
.bod

元記事を表示

Nuxt.jsのありがちな詰みパターンに対応した汎用性のあるlink用コンポーネント

“`html:~/components/atoms/Link/index.vue



```

##【CSS】

```css

.black {
background: #333;
}
```

##【JavaScript】

```javascript

const checkBox = document.getElementById('check');

checkBox.addEventListener('click', () => {
document.body.classList.toggle('

元記事を表示

Chart.jsのアニメーションを無効にする

Chart.jsではデフォルトで独自アニメーションが入ってしまうので、それを無効化するにはanimationをfalseにする。

```
options: {
animation: false
}
```

元記事を表示

『括弧文字列』簡易パーサ実装例まとめ

どんなパーサかというと，次のPythonの実行例のような処理を行うものです．

```python
>>> p_syn(p_lex(input()))
((10 + 20)*(30 - 40))
[['10', '+', '20'], '*', ['30', '-', '40']]

>>> p_syn(p_lex(input()))
{ "color": [ "red", "green" ] }
[['color'], ':', [['red'], ',', ['green']]]
```

当方，[諸般の理由](https://qiita.com/ytaki0801/items/a11c8143c5c63a406c7f)で簡易S式パーサを様々なプログラミング言語で作成している最中なのですが，ちょっと修正すれば簡易JSONパーサとかにもなるんじゃ？と気がつきつつ，JSONパーサにもS式パーサにも，あるいは，括弧ベースの独自のデータ構造表現のパーサにも，少しの手直しと処理の追加で簡易実装できる記述例をまとめようと思った次第．括弧文字列限定の[字句解析](https://ja.wikip

元記事を表示

vue-composition-apiでFirestoreを扱うreact-firebase-hooks風のComposition Functionを作った

`composition-api`を使って`Firebase`の`Firestore`からデータ/ローディング/エラーなどを読み取ることができる`Composition Function`を作りました。

`useCollection.ts`と名付けており、`useCollectionData`というメソッドを`export`しています。

ソースコードはこちらの`Gist`に上げていますが、本記事ではこの内容についてざっと解説していこうと思います。
https://gist.github.com/TeXmeijin/380e52febdae921f31afe382af1bb40f

## `useCollection`活用の全体像

まずはこの`Composition Function`はどういった仕様か、また、どのように`Component`で活用できるかを説明します。

```useCollection.ts
export const useCollectionData: useCollectionData = (

元記事を表示

Web画面初心者の教育用メモ１

#はじめに
会社でWeb画面作成の教育係になった。。ということで教育用メモ
（社内用の画面のためSEO対策などは不要）

#Web画面を作るにあたっての基礎知識
Web画面は基本的なものとして３つの要素から作られる
　・HTML　　　　…　表示するコンテンツの構造を定義するもの
　・CSS　　　　　…　表示するコンテンツのデザインの定義
　・JavaScript　　 …　コンテンツの動きを定義

#HTMLでできること（私がよく使うもの）
・文字の表示
・改行
・画像の表示
・表の作成
・コンテンツをグループ化してまとめる
・ボタンの表示
・クリックにて違う画面に遷移
・データを入力
　セレクトボックス、テキストボックス、ラジオボタン、チェックボックス等
・違う画面に遷移するときにデータを渡す
等

#CSSでできること（私がよく使うもの）
・背景の色を変更
・文字の色・サイズを変更
・要素のサイズを変更
・枠線を変更
・位置を変更
・表示非表示を変更
等

#JavaScriptでできること（私がよく使うもの）
・ユーザが入力したデータを参照
・テキストデータ書き換え
・HTMLの要

元記事を表示

【javascript】モジュールの使用

こちらの記事は以下の書籍を参考にアウトプットとして執筆しました。
[入門JavaScriptプログラミング](https://www.amazon.co.jp/dp/B07M8T65SM/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)

Reactの勉強を指定いてimportとexportがよくわからなかったため

#モジュールの場所を指定
importを使うときは、「何を」、「どこから」を指定する。

```javascript:基本構文
import X from Y
```
|項目|説明|
|---|---|
|X|インポートするもの|
|Y|モジュールの場所|

例

```javascript
import myFunc from './my_format.js'
```
参考：[入門JavaScriptプログラミング](https://www.amazon.co.jp/dp/B07M8T65SM/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)

モジュールの場所とモジュールから何をインポ

元記事を表示

URLのエンコード・デコードするツールを作ってみた

# URLのエンコード・デコードするツールを作ってみた

---
__《目次》__
[ツールの動作環境](#ツールの動作環境)
[ツールの概要](#ツールの概要)
[ソース](#ソース)
[ソース解説](#ソース解説)

---

# ツールの動作環境

* __OSはWindows10__
* バージョン：1903(OSビルド18362.1016)

* __使用ブラウザは以下の3種類で実施__
* Microsoft Edge
* バージョン：44.18362.449.0
* Microsoft Inter

元記事を表示

doxasさんのサンプルコードを頑張って読んでみた

いきなりですが、これを投稿しているぽっぽこエンジニアは昨年、[WebGL総本山](https://webgl.souhonzan.org/)やWebGLの開発支援サイト[wgld.org](https://wgld.org/)を運営している、[杉本 雅広さん](https://twitter.com/h_doxas)によるGLSLの講義を受けていました。
今さらながら、その中で配布されるJSのサンプルコードを、ぽっぽこエンジニアが頑張って読んでみました。

残念ながらコードは公開しないので、描画まではどんな流れなんだろう？なメモになっています。（読みにくくてすみません）

内容に入っていく前に
前置きとしてこの記事内では、**gl は WebGLコンテキスト**を指します。

## WebGL を実行するための初期化処理を行う。
- canvas を取得する。

- canvas から WebGL コンテキストを取得する。
- const gl = `canvas.getContext(contextType);`
- contextType: ここでは We

元記事を表示

Vue.jsのSPAでログインセッション切れの後、ログインをして、元の画面に戻す方法

# 課題

ログイン後の画面をSPAで作成しています。
ログインセッションが切れた場合、ログインからやり直します。
ログイン完了後は、元の画面に戻したい。

SPAは、ブラウザで動作しているので、ブラウザ側でなんとかしたい

# 回答

SessionStorageを利用する。

（重要）SessionStorageはタブ/ウィンドウごとにある。

1. ログインセッション切れを検知
2. sessionStorageに、現在のURLをログイン後の遷移先として保存する
3. ログイン画面に遷移
4. ログイン成功後、SessionStorageを参照して、遷移先の画面が指定されていれば、読み出し後削除して、その画面に遷移する。なければデフォルトの画面に遷移する。

# 参考文献
* [JavaScriptでブラウザタブを識別する方法はありますか？](https://www.it-swarm.dev/ja/javascript/javascript%E3%81%A7%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%82%BF%E3%83%96%E3%82%

元記事を表示

keydownとkeyupの違いに気をつけて！IME入力時に順番が違う！

### はじめに
フロントエンド開発していると、日本語入力確定時のEnterキーが、確定時のEnterキー打鍵と判別がつかず更新されてしまう事象に悩むことは誰しも遭遇したことあることかと思います。

![ workload.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252687/daef4129-beb7-e2b4-a32b-16e17a1dc9ce.gif)
↑↑例）調査という文字を打って、漢字変換を確定Enterを押したらそのまま更新になっちゃう

そんな時は、[compositionイベント](https://developer.mozilla.org/ja/docs/Web/API/Element/compositionstart_event)を利用すれば良いのですが、不可解な事象に少しハマってしまい数時間溶けてしまいました。

同じ事象でハマる人が減りますように :pray:

### compositionイベントの使い方
一般的には以下のように、`data`に`composing`の

元記事を表示

JSONのkeyが数字の時

#扱うJSONデータ
[こちら](
https://qiita.com/next1ka2u/items/1d7e63c37d9a205219b6)のデータを扱わせてもらいました。

```json:qiita.json

[
{
"01": {
"id": "01",
"name": "北海道",
"short": "北海道",
"kana": "ホッカイドウ",
"en": "hokkaido",
"city": [
{ "citycode": "0010001", "city": "札幌市中央区" },
{ "citycode": "0010002", "city": "札幌市北区" },
{ "citycode": "0010003", "city": "札幌市東区" }, ...
```

#なかなかデータを取り出せなかった原因

**ブランケット記法を忘れていた**

この書き方しか頭になくわけもわからず時間を浪費した。

```javascr

元記事を表示

firestoreでcollectionGroupを使ってorderByしたい。

``collection``に対しては特に何もしなくてもindexが作成されているみたいなので``orderBy``が使える。
だけど``collectionGroup``になるとindexは自動では作られないとの事

#collection
コレクションの取得

```javascript

const db = firebase.firestore()

db.collection("images").orderBy("timeStamp", "desc").limit(5).get()
```
これはちゃんと降順に取得できる

#collectionGroup
コレクション内にあるサブコレクションの取得

####フィールド
```
message: "テスト"
displayName: "testUser"
timeStamp: 2020年9月3日 14:10:46 UTC+9
```

```javascript

db.collectionGroup("comment").orderBy("timeStamp", "desc").limit(10).get()

元記事を表示

OTHERカテゴリの最新記事