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

Vue.js v3でLeafletの開発環境を構築してみた



この記事は、「[Vue Advent Calendar 2020](https://qiita.com/advent-calendar/2020/vue)」の5日目の記事です。

### Vue.js v3でLeafletの開発環境を構築してみました :tada:

Vue.js v3でLeafletを利用されているかたはまだ少ないと思うので、Vue.js v3向けのラッパーライブラリを利用して開発環境を構築してみました！

Mapbox GL

BootstrapのCardにtransitionをかける方法

#はじめに
Vue.jsの便利機能の一つのtransition。今回はそちらを使ってBootstrapのカードを並べるタイプの表示に対してtransitionをかけていきたいと思います。

#具体的なシチュエーション

#ソースコード
“`song.vue

{{ item.Title

Webpackビルド時のエラー対応まとめ

#Webpackビルド時のエラー対応まとめ

**経緯**
色々とモジュールを追加していたら、ビルドできなくなったのでエラー対応を行った。

**エラー内容**

“`
user@DESKTOP ~/Documents/Dev/project/webpack (master)
$ npx webpack –mode=development
C:\Users\user\Documents\Dev\project\webpack\node_modules\html-webpack-plugin\index.js:59
compilation.hooks.htmlWebpackPluginAlterChunks = new SyncWaterfallHook([‘chunks’, ‘objectWithPluginRef’]);
^

TypeError: Cannot add property htmlWebpackPluginAlterChunks, obj

Expressとexpress-graphqlで簡易なGraphQLサーバーを立てる

Expressとexpress-graphqlで簡易なGraphQLサーバーを立てることについては、
すべてGraphQL.js公式に書いてあります(じゃあなんでこの記事書くんだ)

Getting Started With GraphQL.js
https://graphql.org/graphql-js/
Running an Express GraphQL Server
https://graphql.org/graphql-js/running-an-express-graphql-server/

その前に、段階を踏んでGraphQLクエリが試せるこちらの記事を最初にやってみるのがおすすめです(npmモジュールは違うもの使ってる)

Web API初心者と学ぶGraphQL
https://qiita.com/SiragumoHuin/items/cc58f456bc43a1be41b4

下記コードも、GraphQL.js公式のものに少し処理(引数やらforやら)を加えているので、やっぱり公式を見ていただいた方がわかりやすいです(じゃあなんでうんぬん)

## 概要
・ex

Cloud Firestore でさくっとオンライン対戦ゲームを作ろう

「[Applibot Advent Calendar 2020](https://qiita.com/advent-calendar/2020/applibot)」 5日目の記事になります。
前日は @taroshun の [3Dモデルから２D画像を自動生成する方法について](https://qiita.com/taroshun/items/b9e6bf4017730908a2ec) という記事でした。

#はじめに

趣味アプリ開発、してますか？

縛られず自由に開発ができるアプリ開発は楽しいものです。
が、趣味である故に以下のように考える事もあるかと思います。

– なるべく手軽に作りたい
– 時間を作るのも大変、興味の鮮度も大事
– ちょっと変わった事がしたい
– 既存 + α で変化をつける、あわよくばバズるかも

……そんなとき **「オンライン機能」** を手軽につけられたらどうでしょうか？

できます。*そう、Cloud Firestore ならね。*

#この記事の概要

– Cloud Firestore を用いて、**なるべく簡単に**オンライン機能

JAVA, Python, JavaScript, C# あなたはXML処理ソフトをどの言語で書きますか？

#Java Python Javascript C# XMLならどれで書きます？　
短歌形式

中間報告
2020120511000時点

|言語|投票・返信|
|:—-|:—-|
|Java|0|
|Python|0|
|JavaScript|0|
|C#|0|
|C++|0|
|Ruby|1|
|awk|1|
| 合計|2|

あなたがXML処理プログラムを組んでと頼まれたらどの言語で書きますか？４つ以外はコメントでお願いします。#java #python 【JavaScript】PlayCanvasを使ってブラウザ上で動くオンラインの展示会場を作ろう！【WebGL / JavaScript】

※ この記事は11月Ⅱ開催したハンズオン資料をQiitaに掲載したものになります。
特に掲載をしていなかったため、資料としてQiitaに掲載いたしました。

質問などがありましたらTwitter: [mxcn3](https://twitter.com/Mxcn3)へお願いします。
# PlayCanvasを使ってブラウザ上で動くオンラインの展示会場を作ろう！

PlayCanvasはオープンソースのゲームエンジンです。HTMLとWebGLを使ってブラウザゲームや3Dのコンテンツを作ることのできるJavaScriptのライブラリです。豊富な機能を揃えた3Dエンジンとクラウドホスティングされた開発環境およびツールセットを備えています。

PlayCanvas | 日本公式サイト [https://playcanvas.jp/](https://playcanvas.jp/)

このハンズオンはオンラインの展示会場を作るハンズオンとなっております。内容としては、基本的なPlayCanvas Editorの使い方やPlayCanvasで開発を始めるために必要な基本的な流れを手を動かしながら体

元記事を表示

RxJSをSubscribeなしで使う / AsyncPipe

## 前置き
AsyncPipe使った方が良いよ！っていうことを最近教えてもらったので、色々調べてまとめてみました。
AngularとかAsyncPipeとかRxJSについて一応知ってはいるけど、まだあまり使ったことないっていう方向けなので、
RxJSって何？Observableって何？って方は、先に [RxJS公式ドキュメント](https://rxjs-dev.firebaseapp.com/guide/overview)などをご参照ください?

## なんでSubscribe使わないの？
> “NO SUBSCRIBING MEANS… NO UNSUBSCRIBING!” ([参考動画](https://www.youtube.com/watch?v=Z76QlSpYcck))

(SUBSCRIBEしないってことは… UNSUBSCRIBEしないでいいってことじゃん！)
AsyncPipeを使うと自分でUnsubscribeする必要がなくなるので便利＋Unsubscribeし忘れもなくなります??

## もうちょっと説明します
まずはsubscribeを使って書いて

【jQuery】スムーススクロールの実装

#はじめに
スムーススクロールは、同じページ内を滑らかに移動させる機能のことです。
何か項目をクリックすると、画面がぬるっと動くというWebサイトをよく見かけると思いますが、まさにあの動きを実現するためのものです。
自分のWebサイトに実装する際、実際に触ってみて学んだことを整理しました。

#想定読者
・JavaScript、jQueryを学習中の方
・自作Webサイトに何か動きをつけたい方

#実現すること
スムーススクロールを実装し、ページが指定の場所に滑らかに移動するようにします。

#前提
純粋なJavaScriptやCSSだけでも実装する方法はありますが、今回はjQueryを使います。
jQueryの導入方法については、下記URLのサイトが分かりやすいかと思います。
本記事では「Google CDN」を活用しています。
「3.x snippet:」のscriptタグの記述を、そのままhtmlファイルにコピペすればOKです。

(参考)

【入門】jQueryの導入方法から使い方まで！わかりやすく解説します

#ソースコード・挙動
“`index.html

条件分岐　if文

Rubyと同じように、条件を満たしているかで実行内容を分岐する処理。

“`csharp:Sample
if (条件式1) {
// 条件式1がtrueのときの処理
} else if (条件式2) {
// 条件式1がfalseで条件式2がtrueのときの処理
} else {
// 条件式1も条件式2もfalseのときの処理
}

“`

条件分岐の特徴
・条件式は()でくくる
・条件式の後に続く波括弧{}内の処理が実行されること
・複数条件を指定する場合は、elseのあとに続けてif文を記述すること
※ } else if (条件式2) {　← ここの記述

実際に条件式と処理を書いて、確認してみます。
↓

“`csharp:Test

const num = 60

if (num % 15 == 0) {
console.log(`${num}は3と5の倍数です`)
} else if (num % 3 == 0) {
console.log(`${num}は3の倍数です`)
} else if (num % 5 == 0) {
consol

Flash Advent Calendar 4日目 – JavaScriptでClass設計 –

バイナリを分解・解読できた後は、クラスへ情報を適用していきます。

Flashのクラス設計に準拠してクラスを作っていきます。

# 目次
* Flashのクラス構成をJSへ置き換える
* Flashで定義されてるプロパティと関数を設置

# Flashのクラス構成をJSへ置き換える
沢山クラスがあるのですが、一番小さいクラスShapeを作っていこうと思います。
(当時はes6はそこまでサポートされていなかったので、es5形式で書いていきます。)

[Shapeの機能一覧](https://help.adobe.com/ja_JP/FlashPlatform/reference/actionscript/3/flash/display/Shape.html)

継承は以下のようになります

Shape > DisplayObject > EventDispatcher > Object

小さいクラスではあるのですが、機能は盛り沢山ではあります。

まずは必要なクラスを作成

“`javascript
const EventDispatcher = function () {};

npmについてまとめ

#npmとは

**Node Package Manager**の略

Node.jsの**パッケージ管理システム**である。

2010年に**Isaac Z. Schlueter**氏によって開発された。

#パッケージ管理システムとは

> パッケージ管理システム（パッケージかんりシステム）は、オペレーティングシステム (OS) というひとつの環境で、各種のソフトウェアの導入と削除、そしてソフトウェア同士やライブラリとの依存関係を管理するシステムである。

要は世界の凄い人たちが作って公開しているモジュールをパッケージとして管理し、検索、閲覧、及びダウンロードして使えるよ〜というシステムです。

また、使用したいパッケージの依存パッケージ、そのバージョンまで自動で管理してくれます。

#npmを使わないとどうなる？

例えば**[express](https://www.npmjs.com/package/express)**というパッケージを使用したいとします。
**express**は30ものパッケージと依存関係にあります。
![スクリーンショット 2020-12-04 21

【javascript】空の配列に対するevery/someメソッド

こんなの知らなかった。。。
忘れないようにメモ。

#everyメソッド

“`javascript
[].every(x => false); //true
“`

> 注意: このメソッドを空の配列に対して呼び出すと、無条件に true を返します。

#someメソッド

“`javascript
[].some(x => true); //false
“`

> 注: このメソッドは空の配列ではあらゆる条件式に対して false を返します。

TypeScriptで文字列を配列に変換する方法。（＋エラーが出た時の対処方法）

# 文字列を配列に変換する
スプレット演算子を用いると文字列を配列に変換できます。
これはJavaScriptでもTypeScriptでも同じです。

“`
//[…文字列]という形がスプレット演算子です。
const str = “konnitiwa”;
const array = […str];
console.log(array);

// split()でも変換できます。
const array2 = str.split(“”);
console.log(array2);

“`

結果はどちらも同じになります。

“`
[
‘k’, ‘o’, ‘n’, ‘n’, ‘i’, ‘t’, ‘i’, ‘w’, ‘a’
]
“`

スプレット演算子を使ったほうがスマートですね。

スプレット演算子とは？
>スプレッド構文 (…) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値のペア (オブジェクトリテラルの場合)

Garmin Connectから自分のデータを取得する~ランサムウェアへの超個人的抵抗~(その2)

本記事は、株式会社ピー・アール・オーアドベントカレンダーの5日目です。

# 実際に作っていきましょう
[前回](https://qiita.com/pro_matuzaki/items/5812b86f8b35b773449c)は、やりたいことと方針のみグダグダと書いてしまいましたが。今回からはいよいよ実際の機能を作っていきたいと思います。

# 今回のゴール
Garmin Connectから取得可能なデータのうち、日々の活動記録の方をChrome拡張からダウンロードできるようにしてみます。なぜ日々の活動記録を選んだかというと、こっちの方がURLに日付が含まれるため、自動でURLを作るのが楽だからです。もう一方のアクティビティはアクティビティID取得したりしないといけないんで、そっちは追々追加します。
そしてダウンロードする際の要件はなんとなく以下で考えてみました。

– 拡張機能独自のメニューを持つ
– メニューでは以下を設定可能にする
– ダウンロードON/OFF
– 日時（いつからのデータをダウンロードするか？）
– ダウンロード場所を指定させる
– ダ

[VSCode] javascriptのSnippet作成

# Snippet作成
### 1.[歯車マーク]-[User Snippets]-[javascript]を選択


### 2.Snippet登録
“`json
{
“Print to console”: {
“prefix”: “test”,
“body”: [
“console.log(‘${1|おはよう,こんにちは,こんばんは|}’);”,
“$0”
],
“descri

enebular x 導電布で空席を検知する

この記事は2020年12月1日に開催された [【オンライン】enebular developer meetup](https://enebular.connpass.com/event/193989/) で発表した内容をベースにしています。

# はじめに

UXデザイナーの どたてつや です。

普段はUI設計やUX開発などの仕事の傍ら、趣味でプロトタイプなどを作ったりしています。
先日、Eテキスタイルを使ったインプットモジュール「[nüno](https://github.com/tendots/nuno)」を[nanbwrks](https://qiita.com/nanbuwks) さんと作りました。
nünoの最新バージョンはver.2ですが、
今回は~~余ってる~~nüno ver.1を使用しての空席通知システムを作ってみました。

nünoについては2018年12月の記事「[enebularで布センサーからLINEに通知できるようにしたよ](https://qiita.com/tendots/items/4506b998e28c4416dd02)」も参考にしてください！

素数一覧を求めるワンライナー各言語まとめ

お遊び記事です．【追記】お遊びのつもりが，とても秀逸な別解がコメント欄に集まりましたので，そちらもぜひ御参照下さい．とりあえず，J言語すげえ．

# アルゴリズムと実装

主に関数型リスト処理を用いて，**$x$を$2〜x-1$の各整数で割った余りのリストに0が含まれていなければ$x$を素数と判定**しています．このため，任意範囲の整数リスト生成（`range`等），リスト各要素への関数適用（`map`等），リストに特定の値が含まれているかの判定（`include`等），条件を満たした要素のみをリストから取り出す処理（`filter`等）を行う関数があると，より短いワンライナーとなります．

# 各言語での記述例

$1> ->n{(2…n).reject{|x|(2…x).map{|z|x%z}.include?(0)}}[100]
=> [2, 3, 5, 7, 11, 13, 17, 19, 23,

?を押したら●●が見える実装方法公開

## パスワードマスキングとは…

[](https://gyazo.com/8e09bb88411a16de7a5cda5f95cd77f2)

コレですね！　言葉では説明しません。

#### 導入することで解決することができる課題

> 1. 入力ミスによる認証失敗が防げる

> 2. 誤った情報を登録した場合には、ログインができなくなってしまう場合がある

> 3. パスワードを覗かれる可能性がある→セキュリティの観点で良くない

#### 個人的見解

・ユーザーにストレスを与えない、離脱率を減らす観点で、導入するに越した事はないのではないのかという見解です。導入の為への工数も少ない為、コスパの良いユーザビリティ向上手段だと感じました。

#### 有名企業のWEBサイトのパスワードマスキング導入有無の調査

・有名な企業のwebサイトで導入されているかを確認してみました。ザッと思いついたWEBサイトを４件調べて

C4DとThree.jsで製品の3D表示ページの開発

完成品の表示ページ：

https://capricorncd.github.io/blog/dist/three/index.html#/ClockObj

## C4D

### 1. C4Dモデリング

C4Dを使って製品のモデルを作成する。


ご注意：

Discの使用を避けること、ブラウザで解析できないため。

各ジオメトリをマップする必要があります。グループマップは使用しないほうがいい。

### 2. `*.obj`ファイルをエクスポートする

“`shell
file -> Export -> Wavefront OBJ(*.obj)
“`

![export.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/929657/8318927b-9474