f@ctor

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

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

InDesign JavaScript XML ストーリーの段落を要素に

ストーリーの段落を要素にするスクリプトは、これで良いのかな・・・？

~~~JavaScript
/*
このスクリプトを利用して起こった不具合の責任は取れません。
ご了承下さい。

更新 2021/10/31
*/

// アプリ指定
#target “indesign”;

// スクリプト名
var scriptName = “ストーリーの段落を要素に”;

//スクリプトの動作指定（一つのアンドゥ履歴にする、及び、アンドゥ名）
app.doScript(function(){

// ダイアログ
var dialogueFlg = confirm(“ストーリーの段落を段落の「終わりの記号」を除いて要素にします。” + “\r\r”
+ “段落の先頭に「索引マーカー」がある場合は追加された要素にその「索引マーカー」は含まれないので注意して下さい（手抜き仕様）。” + “\r\r”
+ “ストーリーの要素を選択してスクリプトを実行して下さい。”
,””, scriptName);

// Noの場合
if(dialogueFlg

元記事を表示

【JavaScript】関数とオブジェクト⑯　クラス

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/f95766c27d099ed686ba

#目的

* 関数とオブジェクトについての理解を深める

#本題
###1.クラス

コンストラクター関数をクラス表記したもの
→　シンタックスシュガー

####例1

““js
function Person(name, age) {
this.name = name;
this.age = age;
}

Person.prototype.hello = function() {
console.log(‘hello ‘ + this.name);
}
““

上記のPersonコンストラクターをクラスに書き換えていく

““js
// クラスを用意
class Person {
// constracterで関

元記事を表示

ランダムなダミーの温湿度の値で急激な変動がない値を生成する（Node.js で simplex-noise を利用）

「デバイス＋センサー」が MQTTクライアントになった構成の開発をしている中で、MQTT の値を受信する MQTTブローカーの部分や別クライアント側に手を加える開発をするのに、以下のような物理部分をセットしなくても開発できるようにしたくて、今回の内容を進めました。

javascript演習　１１日目/３０日

覚えたこと

videoタグ

paused と　pause()

“`javascript
if(video.paused){
video.play();
}else{
video.pause();
}

//こうも書ける

const method = video.paused ? ‘play’ : ‘pause’;
video[method]();
“`

video.currentTime　と　this.dataset

“`javascript


“`

name属性を使って連動させる

“`javasc

元記事を表示

[いよいよ年明けリリース!?]WebTransportでもechoがしたい!

# WebTransportがChromeM97でいよいよリリースです!

Webを愛する皆さんこんにちは。
去年、一昨年、WebsoketやWebRTCの新しい技術として注目を集めたWebTransportがいよいよ年明けにもリリースされるようです。
いやぁ、WebRTCが2014ごろにリリースされてから早7年、ようやくという感じです。

今回はCanaryがM97となり、Origin Trials不要になったので公式サンプルを修正して動かしてみます。
そもそもWebTransportとはなんぞやみたいな話は[NTTコミュニケーションズさんの記事](https://qiita.com/yuki_uchida/items/d9de148bb2ee418563cf)が詳しいのでそちらをご覧ください。

## 大きな変更点まとめ

元記事を表示

remy氏が書いたActiveLinkコンポーネントに型を付けた【Next.js】

https://qiita.com/TK-C/items/ba5c07124d33ee9b8b41

https://gist.github.com/remy/0dde38897d6d660f0b63867c2344fb59

上の記事で@TK-Cさんが使い方の説明をされています。
本家はGitHubの@remy氏のJavaScriptを参照。

今回はこのコードの動きを解説しつつ型を付けました。

“`tsx:ActiveLink.tsx
//Git Hub remy氏 (EN)
//Qiita @TK-C (JA)

import { withRouter, NextRouter } from ‘next/router’;
import React, { Children, ReactElement } from ‘react’;
import Link from ‘next/link’;

type Props = {
router: NextRouter;
children: ReactElement;
href: string;
activeClassN

元記事を表示

Webブラウザだけでビデオ会議的なことを考える

#はじめに
最近のWebブラウザはカメラ画像とか簡単に取得できるらしいのでやってみた。
JavaScriptで、navigator.mediaDevices を使えばいいらしい。
あくまでも「考える」ということで、こうやればできそうという話だけ。
ついでにまずはカメラ画像だけ。

#カメラ画像の取得
navigator.mediaDevices.getUserMedia() でカメラのストリームが取得できて、それを `

具体的なコードは以下の通り。ただ、今のブラウザだと https のページでないと使えない模様。
（httpだと getUserMedia が失敗する）

ちなみにvideo_constraints の中身は video:true だけが最低限の指定。

“`




camera test

自分のポートフォリオを触っているときに、ちょっと表示の有無を設定したいと思いました。
今回表示の切り替えをしていのは、ログインや新規登録を促す画面です。
私が作っているのは写真投稿サイトです。タグを用いて検索した場合はこの表示を消したいと思います。
ログインなしでも投稿の閲覧はできるため、あってもいいかなと思いました。

#実装

cssの切り替えですが、基本的にはjavascriptを用います。
最低限のjavascriptで簡単にできないかなと考えました。

javascriptで何か動きをするにはイベントを設定しないといけません。
例)　click, dbclick, onload,,,,,

[イベント一覧はこちら](https://web-designer.cman.jp/javascript_ref/event_list/)

javascriptでcssの値を変えるには

“`
$(‘cssセレクタ’).css(‘プロパティ : 値’)

#change-colorクラスの値を赤にしたい時

$(‘.change-color’).css(‘color : red’)

元記事を表示

ブラウザゲームを作ってみよう(その2)

#はじめに
[その1](https://qiita.com/noji505/items/efe131d7b2d32b6ee918)ではWebシステムとゲームの作り方の違いを解説しました。
今回は文字表示を行っていきたいと思います。

#表示方法について
既に前回のタイマー表示で文字表示は出来ているのですが表示要素がDOM(Document Object Model)になっており、少しこのままだと扱いにくいため「キャンバス」を使って表示するようにしたいと思います。

#タイマー表示サンプル(キャンバス版)
キャンバスを使って表示したサンプルが以下になります。

【Vue.js】監視プロパティのオプション　deep

#はじめに
こんにちは！
今回は【Vue.js】監視プロパティのオプション　deepについてアウトプットしていきます！

#deepとは
deepとは、ネストされたオブジェクトも監視するためのオプション

#書き方・解説
“`HTML:HTML

  • {{ color.name }}

“`
“`Vue.js
var app = new Vue({
el: “#app”,
data: {
colors: [
{name: ‘Red’},
{name: ‘Green’},
{name: ‘Blue’}
]
},
watch: {
colors: {
handler: function(newValue, oldValue) {
console.log(‘Update!’)
},

元記事を表示

【JavaScript】関数とオブジェクト⑮　プロトタイプ継承

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/4f71c04f7af4938aefa1

#目的

* 関数とオブジェクトについての理解を深める

#本題
###1.プロトタイプ継承

プロトタイプ継承とは別のコンストラクター関数のプロトタイプを引き継いで機能を使えるようにすること

そもそも**継承**とは、別のコンストラクターを受け継ぐこと。

###例1

下記のコードを継承してJapaneseという関数を作成する

““`js
function Person(name, age) {
this.name = name;
this.age = age;
}

Person.prototype.hello = function() {
console.log(‘hello ‘ + this.name);
}

//

元記事を表示

0歳の俺がモダンJavaScriptを勉強する②

こんにちは！今日もモダンJavaScriptについて学んだことをアウトプットしていきたいと思います！
今日は分割代入、デフォルト値、スプレッド構文についてです。

# 分割代入

“`javascript
const myProfile = {
name: ‘ジョーダンヘンダーソン’,
age: 31,
}

const message = `私の名前は${myProfile.name}です。年齢は${myProfile.age}歳です。`
console.log(message);
“`

着目すべきはテンプレート文字列の値を呼び出す部分。コレ今回はmyProfileから2つのプロパティを呼び出すだけで済みましたが、設定するプロパティが増え、取得する回数が増えたり、オブジェクト名が長い時とかいちいち記述するのめんどくさいですよね。

そこで分割代入です。

“`javascript
const myProfile = {
name: ‘ジョーダンヘンダーソン’,
age: 31,
}

const {name, age} = myProfile;

元記事を表示

【学習記録⑪】ミックスインを用いて同じ処理を一つにまとめる！

# はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回は`ミックスイン`を用いて各コンポーネントで記載されている同じような処理を一つの処理にまとめてみたいと思います。

## ミックスイン(Mixin)
ミックスインを用いると、各コンポーネントで作成している処理に同じ処理があった場合にそれらを一つにまとめることができます。

https://v3.ja.vuejs.org/guide/mixins.html

例えば以下のような感じ。

“`vue:Morning.vue

`
``
`

`

css property
`.id{text-align:left;
color:;}``

参照
https://qiita.com/shizen-shin/items/a997bc228fa2850c9fce

元記事を表示

SUUMOの賃貸物件検索からレオパレス物件を除外する拡張機能(userscript)を作る

初投稿です．

# なにこれ

SUUMOで賃貸アパートを探していると，レオパレス物件ばかり出てきて嫌になりませんか？
私もSUUMOで検索するとレオパレス物件ばかり(しかも何部屋も募集があってスクロールが大変)だしレオパレス物件の評判についてTwitterで調べると

> インターネットが最悪！壁が薄すぎて隣人のいびきすら聞こえる！雨漏りする！天井が剥がれた！マナーが最悪！家具家電付きで相殺されないほどのマイナス！なんだかんだ全部足したら月費用普通に高い！

など，**普通かそれ以下か** の2択らしく除外したくなりました．
しかしSUUMOにNGワード機能はないらしいので，Greasy Forkでuserscript×2を作りました．

# 機能

+ SUUMOの賃貸物件検索から物件名に **"レオパレス"が含まれる物件** を除外 ⇒ [SUUMOからレオパレス物件を除外(Exclude Leopalace from SUUMO)](https://greasyfork.org/ja/scripts/434556-suumo%E3%81%8B%E3%82%89%E3%83%AC

元記事を表示

モダンJSの基本

## const、varについて
- letは上書きは可能だが、再宣言はできない
- constは上書きも再宣言もできない
- constで定義したオブジェクトはプロパティの変更が可能
- constで定義した配列の値の変更が可能

## テンプレート文字列

${}で変数を表示できる、＋を使わなくてよくなる

```javascript
const name = "ハム";
const age = 27;
const message = `私の名前は${name}です。${age}歳です`;
console.log(message);
```

## アロー関数

```javascript
// 従来の関数
const func1 = function (str) {
return str;
};
console.log(func1("func1です"));

// アロー関数
const func2 = (str) => {
return str;
};

console.log(func2("func2です"));

```

## 分割代入

オブジェクト

```j

元記事を表示

OTHERカテゴリの最新記事