f@ctor

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

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

動的幾何環境でオブジェクトに定義を追従させる

## はじめに
最近GeoGebraやDesmosなどのグラフソフトが流行っています。Twitterで関数アートや○○を可視化した様子にグラフが使われていることもしばしば。さらには、大学受験の共通テスト(旧センターテスト)の模試にそれらが登場することもあるようです。ここでは、グラフソフトによって書かれた曲線などのオブジェクトにその定義を追従させてみようと思います。

![スクリーンショット 2021-09-23 10.36.13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/1822110d-3c6c-606a-3685-d42ebcf75973.jpeg)

## GeoGebraをソフトではなくwebページ上に貼り付ける
GeoGebraはhtml上に貼り付けることができます。方法については[こちら](https://qiita.com/Hyperbolic_____/items/40e317d0d9bfd8e06be6)で書いています。

“`html

元記事を表示

JavaScriptの返り値・引数がどうしてもよくわからない初心者のために、時間をかけて説明をしてみた（動画あり）

こんにちわ。
MENTAで初心者向け（というかプログラミング未経験者向け）にJavaScriptを教えている中で、
「関数の返り値や引数についての理解がむずかしい！」と相談され、長々と説明することがおおいので、
すこしでも教える時間を短くできるように、どうせ長々と説明するなら動画にしよう、ということで動画を撮影してみました。

カンペもないはじめてのYouTube撮影でぐだぐだになってしまったので、
要点はQiitaにまとめることにしました。（本末転倒）

返り値や引数を学びたいときは、使うときのやりかたと、作るときのやりかた
別々に分けて理解したほうがわかりやすいのではないかな？と思い、別々に解説しています。

また、使い方の章では、実際にJavaScriptにもともと存在している関数を例に説明します。

1. `String()`･･･数値を渡しても配列を渡しても、文字列に変換して返してくれる（返り値にしてくれる）関数。
言い換えると、返り値は「変換後の値（=文字列）」となる。
2. `console.log()`･･･検証ツールの「コンソール」画面に値を表示する関数。

元記事を表示

kintone hack の予選で披露したアプリ「メッセージヨマセール」の作り方

# みなさァ～ん、kintone hack ・・・知ってますか?？？

サムネでやりすぎと言われていますがｗ
こんな作品で[kintone hack 予選会](https://page.cybozu.co.jp/-/kintonehack2021)に参加してきました。

今回はそんな私が作った、「メッセージヨマセール」の作り方を紹介したいと思います。

# アプリの準備

| フィールド種類 | フィールドコード | 備考 |
|:-:|:-:|:-:|
| ラジオボタン | 確認 |未

元記事を表示

1kmメッシュ滞在人口（全国人流オープンデータ）をMapbox GL JSで表示してみました

# はじめに
– [1kmメッシュ滞在人口（全国人流オープンデータ）](https://www.geospatial.jp/ckan/dataset/mlit-1km-fromto)をMapbox GL JSで表示してみました。
– Mapbox GL JSの表示部分は、[こちらのブログ記事](https://tech-blog.optim.co.jp/entry/2019/05/14/173000)を参考にさせていただきました。
– 国土交通省が2019年・2020年を対象に、[全国の「1kmメッシュ別の滞在人口データ」を全国人流オープンデータ](https://www.geospatial.jp/ckan/dataset/mlit-1km-fromto)として公開していますので、今回はこちらのデータを用いています。
– Mapboxのアクセストークンが必要になります。

# アウトプットイメージ

JavaScriptのClosureを使ったへんてこなプログラム

ちょっと、初心者の方は理解しにくいかもしれません。（私も理解しているつもりになっているだけかも）

ポイントとしては、下記の通りです。

1. JavaScriptでは、通常、あるファンクションの内側で宣言した変数の値をそのファンクションの外側から書き換えることはできません！
2. ところが、それができてしまう場合があります => Closureと呼ばれる変態的なスコープを使います！

Closureの説明にlexical scopingという言葉が出てくる場合がありますが、lexicalという形容詞の意味を辞書で引くと、

1. of or relating to words or the vocabulary of a language as distinguished from its grammar and construction
2. of or relating to a lexicon or to lexicography

ということで、何のことだかよくわかりません。

ここでの意味は、その文脈の関係を引きずっている・・・そんな感じで考えておきましょう。
下記のサンプ

元記事を表示

ZIG SIM と Node.js のプログラム（osc.js を利用）との間で UDP による OSC通信を軽く試す（OSC Data Monitor の話も）

この記事は Node.js による OSC通信を試してみた時の話で、以下の記事を書いていた流れの続きです。

– [ブラウザで OSC を扱う初めの一歩（osc.js、osc-js、p5.js用ライブラリを見てみたりなど）【2021年9月】 – Qiita](https://qiita.com/youtoy/items/efe9b07be57454dec5d5)
– [ブラウザ上の p5.js のプログラムで OSC を使う（サーバー・クライアントは osc-js で実装） – Qiita](https://qiita.com/youtoy/items/b537b5c9c5b4465d23b3)

送信側にはスマホ（iPhone）を使い、受信側にはノートPC（Mac）を使います。

## 今回利用するもの
### 構成
冒頭に書いた機器間で OSC （over UDP） による通信を試すのですが、その際に以下のアプリ・ライブラリを使います。

– スマホ（iPhone）
– [ZIG SIM](https://zig-project.com/)
– ノートPC
– [OSC

元記事を表示

[Javascript] キーの同時押しを取得する

# はじめに
Javascriptでゲームを作っていた際、addEventListenerでユーザーのキー入力を取得していたのですが、同時に複数キーが押された時のキーの取得に詰まったので、メモとして残しておきます。

# もともとやっていた方法
addEventListenerについては[こちら](https://www.sejuku.net/blog/57625)

“`javascript
//keyが押されたなら
document.addEventListener(‘keydown’, (event) => {
if(event.key == “ArrowUp”){
//上キーが押された時の処理
}
if(event.key == “ArrowDown”){
//下キーが押された時の処理
}
if(event.key == “ArrowLeft”){
//左キーが押された時の処理
}
if(event.key == “ArrowRight”){
//右キーが押

元記事を表示

TailwindCSS フォントに使えるユーティリティまとめ

# フォントに使えるユーティリティまとめ
TailwindCSSでは、たくさんのユーティリティが用意されています。本記事はフォントに使えるユーティリティをまとめました。
[公式ドキュメント](https://tailwindcss.com/docs/font-family)

https://tailwindcss.com/docs/font-family

## フォントを変更する
* [公式ドキュメント](https://tailwindcss.com/docs/font-family)

“`html:index.html

The quick brown fox jumps over the lazy dog.

“`

https://tailwindcss.com/docs/font-family

## 文字のサイズを変更する
* [公式ドキュメント](https://tailwindcss.com/docs/font-size)

“`html:index.html

Th

元記事を表示

サイクルコンピュータのGPSログデータをMapbox GL JSで表示してみました

# はじめに
– サイクルコンピュータ（Garmin）のGPSログデータ（gpxファイルをgeojsonファイルに変換したデータ）をMapbox GL JSで表示してみました。
– Mapbox GL JSでの表示部分は、[こちらのMapboxさんのドキュメント](https://docs.mapbox.com/jp/mapbox-gl-js/example/live-update-feature/)を参考にさせていただきました。
– Mapbox GL JSのバージョンはv2になります。
– Mapboxのアクセストークンが必要になります。

# アウトプットイメージ

元記事を表示

JavaScriptの基本

#目次
[1.はじめに](https://qiita.com/Stack_up_Rising/items/41d94539e736ba465e87#1-%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB
)
[2.JavaScriptとは？](https://qiita.com/Stack_up_Rising/items/41d94539e736ba465e87#2-javascript%E3%81%A8%E3%81%AF)
[3.用語](https://qiita.com/Stack_up_Rising/items/41d94539e736ba465e87#3-%E7%94%A8%E8%AA%9E
)
[4.JavaScriptの身近な利用例](https://qiita.com/Stack_up_Rising/items/41d94539e736ba465e87#4-javascript%E3%81%AE%E8%BA%AB%E8%BF%91%E3%81%AA%E5%88%A9%E7%94%A8%E4%BE%8B)
[5.おわりに](https://qiita.

元記事を表示

JavaScriptの0

JavaScriptにおいて0は「false」と判定される。0の存在を忘れて真偽値判定していると知らぬ間に0をfalse側にぶち込んでいることがある。

“`
let a = 1;
function fn(num) {
num = num || -1; //←右辺のnumにundefineもnullもNaNも0も入る
console.log(num);
}
fn(a);
“`

引数をデフォルト引数“`num=1“`にすればいいだろうと思ったけれど、0はよくとも“`null“`などの場合にはデフォルト引数がセットされず、nullがセットされてしまうらしい。なぜ……
（num自体をif文判定してデフォルトの値を引数にセットする記述を追加する必要がある）

0をfalse判定されるとまずいことにならないかどうか、プログラム上で気にかけておく必要がある……がうっかり忘れそうなので、真偽値判定にかける値に0を含めないようにするか、“` === 0“`など直に判定を記述した方がいいかもしれない。

元記事を表示

【JavaScript】コピペで使える都道府県の配列（読み仮名・ローマ字つき）

“`
[
{
“kanji”: “北海道”,
“yomi”: “ほっかいどう”,
“roma”: “hokkaido”
},
{
“kanji”: “青森県”,
“yomi”: “あおもり”,
“roma”: “aomori”
},
{
“kanji”: “岩手県”,
“yomi”: “いわて”,
“roma”: “iwate”
},
{
“kanji”: “宮城県”,
“yomi”: “みやぎ”,
“roma”: “miyagi”
},
{
“kanji”: “秋田県”,
“yomi”: “あきた”,
“roma”: “akita”
},
{
“kanji”: “山形県”,
“yomi”: “やまがた”,
“roma”: “yamagata”
},
{
“kanji”: “福島県”,
“yomi”: “ふくしま”,
“roma”: “fukushima”
},

元記事を表示

ブラウザでjancodeを認識したい

#動機
socket.io を介してzbarで認識させれば、できそうなのでやってみました

#ブラウザ上での認識率比較
zxing < zbar < dynasoft #インストール sudo apt install libzbar0 pip3 install pyzbar pip3 install flask pip3 install flask-socket.io #スクリプト Jsとpythonのやりとり部分は、この記事と同じです https://qiita.com/im02kai/items/e460fa86be1501474275 #zbar用に変更 ```python:app.py from pyzbar.pyzbar import decode @socketio.event def image_barcode(img_base64):#base64 im = Image.open(io.BytesIO(base64.b64decode(img_base64.split(',')[1]))) data = decode(im

元記事を表示

GitHub Actionsでthree.jsの単体テスト

## はじめに

この記事は、GitHub Actions上でthree.jsの単体テスト方法を記録、共有するためのものです。

node.jsでWebGLを利用したコードを単体テストし、GitHub Actions上で処理します。ヘッドレスブラウザやelectronは使用しません。

### 想定する読者

この記事は、以下の読者を想定して書かれています。

– JavaScriptの開発経験がある
– Jestを使ったことがある
– three.jsを使ったことがある
– リポジトリをGitHubで管理している / 管理したい

JavaScriptの解説やJestのインストールガイドはこの記事には含まれません。

### 想定する環境

この記事は、以下の環境を想定して書かれています。記事を読む前に、お手元の環境をご確認ください。

“`yml
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [12.x, 14.x, 16.x]

元記事を表示

Vueのpropsと$emitを使ってコンポーネント間でデータをやりとりする

# はじめに

Vue で親コンポーネントと子コンポーネントの間でデータをやり取りする方法について、今まで何となくやっていたので改めて勉強しました。
分かりにくい部分だと思うので、よかったら参考にして頂ければと思います。

# 対象者

* 基本的な JavaScript のコーディングができる方
* Vue で開発をしたことがある方

# 環境

* Vue.js 2.6.10
* Vuetify 2.1.0

# 勉強しながら作ったもの

名前と血液型を入力する子コンポーネントを作りました。
親コンポーネントから初期値を渡して初期表示したり、子コンポーネントで入力した名前・血液型を親コンポーネントに渡したりできるようにしています。

下の画像がスクリーンショットで、氏名から【反映】ボタンまでの３段が子コンポーネントで、`parent:` の段が親コンポーネントです。

![スクリーンショット 2021-05-22 17.03.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525650/5eb8

元記事を表示

これからReact始めたい人のための今日だけでできるTODO #5

## 実際に動かしてみる
### CDNを活用する
書籍を購入して読んだところ3つのCDNを読み込むことでReactはすぐに動かせます。

“`js



“`
### vscode-live-serverの活用
エディターは「Visual Studio Code」を利用しています。
ローカルでの開発はVisual Studio Codeの「[Live Server](https://github.com/ritwickdey/vscode-live-se

元記事を表示

フロントエンド初心者でもReactは簡単？Reactの文法を学んでみた～序章～

自社開発企業でWebアプリケーションエンジニア（※名前はいろいろあるので都合よく解釈してください）、Webアプリのうち各サブシステムを開発しているエンジニアです。

今回はReactという最近流行りのモダンなJavaScriptのフレームワークを学んでみたということで、
そもそもJavaScriptもそんなに詳しくないので（多少は書ける）、興味本位でProgateを使って学んでいきます。

※なお著作権等に引っかからないよう、文法的な書き方部分だけ抜粋していく感じ(Re-Write)で行こうと思います。

参考

https://prog-8.com/courses/react

#Hello World

“`react
import React from ‘react’;

class App extends React.Component {
render() {
return (

Hello React

);
}
}

export default App;
“`

– Reactからreactをimportする
– R

元記事を表示

【Javascript】オブジェクトの配列をuniqueにする（重複を削除する）ときはfilterではなくMapオブジェクトを使う

# はじめに

単純な配列は以下のように`Set`を使うと重複を削除できるというのがよく知られてます。

“`js
const numbers = new Set([1, 2, 1, 1])

const uniqueNumbers= Array.from(numbers)
//uniqueNumbers は [1, 2]
“`

以下のようなオブジェクトの配列の重複を削除する方法はあまり紹介されていなかったのでメモとして書きます。

“`js
const users = [{“id”: 1, “name”: “Alice”}, {“id”: 2, “name”: “Bob”}, {“id”: 1, “name”: “Alice”}, {“id”: 1, “name”: “Alice”}]
// [{“id”: 1, “name”: “Alice”}, {“id”: 2, “name”: “Bob”}] にしたい
“`

# Mapを使って重複を削除する

データ量が多いときは[Array.prototype.filter()](https://developer.mozil

元記事を表示

React Testing Library 入門編

# まず始めに

テストでReact Testing Libraryを検討している方へ向けて、[公式ドキュメント](https://testing-library.com/)を参考に作成しています。

記事内容に関して間違っていることがあれば、気軽にコメントしていただけると助かります。

# 目次

| 項目 |
|:————-|
| [1. React Testing Library とは](#react-testing-library-とは) |
| [2. 何ができるのか](#何ができるのか) |
| [3. 使用するメリット](#使用するメリット) |
| [4. Jestとの違い](#jestとの違い) |
| [5. 導入方法](#導入方法) |
| [6. 実際に使ってみる](#実際に使ってみる) |

# React Testing Library とは
Reactコンポーネントをテストするための非常に軽量なライブラリで、ユーザーが操作するテストに近いテストを行うことができます。

`Dom Testing Library`というライブラリがベースにあ

元記事を表示

OTHERカテゴリの最新記事