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

vue-pdfで文字が表示されない時、cMapを指定して解消する

“`
let pdfSrc = pdf.createLoadingTask({
url: pdfのパス,
cMapUrl: ‘https://cdn.jsdelivr.net/npm/pdfjs-dist@2.6.347/cmaps/’,
cMapPacked: true,
});
“`

一覧画面でテーブルの集計値をjsワンライナー計算

さすがに、すべてをワンライナーで書くと長いので計算部分のみ、

“`js:total.js
(() => {
‘use strict’;
kintone.events.on(‘app.record.index.show’, (event) => {
console.log(`(合計) ${event.records.reduce((total, record) => total += record[‘テーブル’].value.reduce((value, row) => value += Number(row.value[‘数値’].value), 0), 0)}`);
});
})();
“`

**注意**:
一覧画面で表示中のレコードのみの計算になるので、
最高で100件まで。

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

#はじめに
今までは基本的にサーバサイドの記事が多かったのですが、今回はゲームということでクライアントサイドになります。
ここではJavaScriptを使って作っていきたいと思います。

#Webシステムとゲームの違いについて
今まで記事にしていたWeb系のシステムとゲームですが少し作り方が違います。
それぞれの動き方ですが、概ね以下のようになっています。

[Webシステム]
1.ページアクセス
2.サーバプログラム実行(セッション、データベースから値取得など)
3.クライアントプログラム実行(画面表示)
※ここで終了、別ページへのリンクをクリックするとまた1から実行される

[ゲーム]
1.プログラム実行
2.タイマー起動
3.タイトル画面、ゲーム画面など(タイマーの中で画面遷移)
※2のタイマーがずっと実行されていて終了することがない

主にこのような違いがあります。

#JavaScriptで作れるのか？
冒頭でJavaScriptで作ると書いているのですが、そもそも作れるのか？と思う方もいるかもしれませんので、どういったことが実現出来ればゲームが作れるのか簡単に整理したいと思

Firebase Authenticationのユーザを一括削除する方法

Firebase Authenticationのユーザを一括削除できないか試してみました。

Firebase Authenticationのユーザ一覧が表示されている場所で、chromeのコンソールに下記のjsを入力すると順次削除してくれます。

“`
const interval = setInterval(() => {
if ($(‘.edit-account-button’).length === 0) {
clearInterval(interval)
} else {
$(‘.edit-account-button’).first().click()
$(‘button:contains(“アカウントを削除”)’).click()
$(‘.confirm-button’).click()
}
}, 1000)
“`

var と let でfor文の中で違い

ブロックスコープだとか、関数スコープとかで、言うけど、なんとなく一緒だと思ってたけど、明確にふるまいが違うのが、発生した。

“`javascript:qiita.js
for(let i = 0 ; i < 10 ; i++){ console.log(i); } ``` と ```javascript:qiita.js for(var i = 0 ; i < 10 ; i++){ console.log(i); } ``` は同じ。 1,2,3,4,5,6,7,8,9 これは、その時点でconsoleが発動されるので納得できる。 1ミリ秒でも後に実行されるもので確認してみる ```javascript:qiita.js for(let i = 0 ; i < 10 ; i++){ setTimeout(()=>console.log(i),1)
}
“`
は同じ。
1,2,3,4,5,6,7,8,9

“`javascript:qiita.js
for(var i = 0 ; i < 10 ; i++){ setTimeout(()=>console.log(i)

【JEST入門】テストコードを書いてみよう　~環境構築とBabelの設定~

# はじめに
　最近フロントエンドの開発が多くなり、Jestでテストコードを書く機会が多くなりました。これまで、テストコードは、他のコードを真似しながら書いていたこともあり、しっかり勉強したことがありませんでした。そこで、Jestを０から学び直したいと思います。この記事は学び直しの備忘録です。

## Jestとは

* Jestとは、Facebook社が開発しているOSSのJavaScriptのテストフレームワークです。
* Babel, TypeScript, Node, React, Angular, Vue などで利用されています。
* [JestのGitHubリポジトリ](https://github.com/facebook/jest)
* [公式ドキュメント](https://jestjs.io/docs/getting-started)

## 実行環境

* OS: macOS Big Sur 11.5.2
* Node.js: 14.17.6
* npm: 6.14.15
* jest: 27.1.1

## Jestのインストール
はじめにJestを動かすための

【初学者向け】JavaScriptのmapやfilterについて

##はじめに
今回はJS勉強し始めた方向けにmapやfillterの解説をしていきます。(※Mapオブジェクトの方ではないです)
後半の【レベルUP】は少し難しく感じるかもしれないので飛ばしてもらって構いません

##mapとfilterとは
２つとも配列に関して使用できる関数です。
配列処理でfor文を使わなくて済みます。

ぞれぞれの**イメージ**を記号を使って表すと

map: 配列に同じ処理をして新しい配列を生成
[?, ?, ?].map(○ → □) → [?, ?, ?]

filter: 条件を満たす要素のみ取り出し新しい配列を生成
[?, ?, ?, ?].filter(□) → [?, ?]

##mapの使い方
今回はある配列にmapを使って『２倍にする』という処理をしていきます。

“`js
//まずは配列arryを用意
const arry = [1, 2, 3, 4];

//配列arryにmapを使用して新しい配列

Chrome Extensionでオブジェクトの配列をCSVとして保存する方法

“`typescript:background.ts
// オブジェクトの配列(例)
const data = [
{ title: ‘aaa’, published_at: ‘2021-09-12T06:24:12.175882’ },
{ title: ‘bbb’, published_at: ‘2021-09-11T07:12:14.174731’ },
];

const convertJsonToCsv = (json: T[]): string => {
const header = `${Object.keys(json[0]).join(‘,’)}\n`;
const body = json.map((d) => Object.values(d).join(‘,’)).join(‘\n’);
return header + body;
};

// ダウンロードを実行
const downloadCsv = () => {
const csv = convertJsonToCsv(data);
const blob = new Blo

絶頂度の計算方法についてそれなりに真剣に考えた

少し前にバズっていた以下の記事があまりに面白かったので

https://anond.hatelabo.jp/20210408000218

この絶頂度計算なるものを誰か編み出してくれないかなーと思っていたのですが誰もやってくれないので自分で考えてみました。

結論としてあまり良い結果は得られませんでしたが、firebaseで公開しましたのでよかったら遊んでみてください。

https://crimax-metrics.web.app

# 記事内容からの仕様読み取り

> 「あえぎエディタ.xls」と題されたエクセルファイルは、前任者が残したあえぎ声専用のマクロ

Excelのマクロ（VBA）で作成されている。この場合、分かち書きなどはできないはずなので、特定の発言をしていればポイントを高くするなどの文章解析処理にあたるものは行なっていない可能性が高い。

> 縦に並んだセルにセリフを一つずつ入力していくと、各セリフに含まれる母音・子音等の音声的要素が自動で数値化される。
> さらに、その数値を足し引き計算することで、「絶頂度」と呼ばれる値が算出される仕組み

母音・子音に分解し、

JavaScript　配列のメソッド

JavaScriptの学習の備忘録と振り返りの記事です。
何かの参考になれば幸いです。
付け足しや訂正などある場合ご教授いただけると
大変嬉しく思います！！

##pushメソッド
#####配列の最後に新しい要素を追加するメソッド
pushメソッドの後の()の中に追加したい要素を入力する

“定数.push(追加したい要素);“

“`js
//const numbers = [1,2,3];
//console.log(numbers);
numbers.push(4);
//console.log(numbers);
“`
出力結果:[1,2,3,4]

##forEachメソッド
#####配列の中の要素を1つずつ取り出し、全ての要素に繰り返し同じ処理を行うメソッド

“配列名.forEach((引数) => {処理内容});“

“`js
//const numbers = [1,2,3];
/

【簡単3 steps】Vue.jsサンプルをLaravelアプリに実装する方法


今回の記事は下記の方におすすめです！

:::note info
Laravelの基礎はOK
Vue.jsの基礎はOK
でもLaravelでVue.jsサンプルを使う方法が不明
:::

自分でゴリゴリコードを書くのもありですが、最初のうちは「Vue.js」のサンプルをLaravelのサイトに埋め込むところから始めるのはありかもしれません。

今回は、「Vue.js」のサンプルが多数紹介されている海外のサイトを紹介しつつ、サンプルを実際の自分のプロジェクトに埋め込む方法について共有いたします！

今回の記事が参考になれば幸いです:relaxed:
なお、間違いやご指摘ありましたら、コメント下さると幸いです。

—

# 実行環境
– PHP 7.4
– Laravel 6.2
– V

Slickでslick-slideのheightを100%にする方法

通常は下のような感じ（オプションなし）

“`javascript
$(‘.slider’).slick();
“`

ここでslick-slideのheightを100%にする場合は

“`javascript
$(‘.slider’).slick()
.on(‘setPosition’, function(event, slick) {
slick.$slides.css(‘height’, slick.$slideTrack.height() + ‘px’);
});
“`

これでOK

分割代入を利用したstate[ ]の更新

“`ts
const [state, setState] = useState({id:1, firstName:”taro”, lastName:”sato”});

const obj = {firstName:”hanako”, lastName:”sato”};

const pushFunction = (state) => {
setState( […state, {id:2, …obj}] )
}

// …state => {id:1, firstName:”taro”, lastName:”sato”}
// …arr => firstName:”hanako”, lastName:”sato”
// id:2, …arr => id:2, firstName:”hanako”, lastName:”sato”
// […state, {id:2, …obj}] => [{id:1, firstName:”taro”, lastN

【JavaScript】ハンバーガーメニューが閉じているのに中のリンクを押せる不具合の解消方法

#対象者

* ハンバーガーメニュー実装を考えている方
* メニューを閉じているのに中身をクリックできる不具合が出ている方

#目的

* ハンバーガーメニューの実装
* 不具合の解消

#実際の手順と実例
###1.前提とエラー

下記の記事を参考にハンバーガーメニューを実装しました。

【2020年最新！コピペだけ！】おしゃれなハンバーガーメニュー【21個まとめ】

しかし、閉じている状態でも中身のリンクをクリックできる不具合に遭遇したので、これを解消していきたいと思います。

###2.結論(解決策)

CSSが今回の原因でした。

before

““application.scss
/* ナビが開いた状態 */
nav.globalMenuSp {
position: fixed;
z-index : 2;
top : 0;
left : 0;
color: #fff;
background: rgba(0,0,0,0.7);
text-align: center;
width: 100

node.js実践編(Markdown導入編)

# 準備
以下のコマンドで必要なパッケージをインストールします。

“`
npm install markdown-it
“`
1から作る場合は以下のパッケージをインストールします。

“`
npm install express-session
npm install express-validator
npm install sqlite3
npm install knex
npm install bookshelf
npm install markdown-it
“`

# モデル作成
以下のコマンドでモデルを作成します。

“`
npx sequelize-cli model:generate –name Markdata –attributes userId:integer,title:string,content:text
“`
モデルファイルを修正、追記します。

“`javascript:models/markdata.js
‘use strict’;
module.exports = (sequelize, DataTypes) => {
con

【追記あり】ES2022 Array#at がちょっとおかしい #fix_ecmascript_at

【2021.9.13 追記】

既に Stage 4 になっているので諦めていたんですが、流石に見逃せないかなと思ったので TC39 の Discource にトピックをたててみました。意見がある方はこちらにお願いします。

https://es.discourse.group/t/fix-at/983

議論に伴って私が実際に欲しかったものをモジュールにして公開してみました。

https://github.com/petamoriken/safe-at

それといまいちユーザーからの声が伝わっていない感じがしたのでハッシュタグ [#fix_ecmascript_at](https://twitter.com/hashtag/fix_ecmascript_at) を用意してみました。協力をよろしくおねがいします。

【追記ここまで】

—

// ES2022
console.log([1, 2, 3].at(NaN));

— petamoriken (@petamoriken) September 7, 2021

これについて解説します。ちなみに答えは `1` です。

## 配列のプロパティアクセスについて

JavaScript

ほんやくコンニャクお味噌味を食べて論文を読もう！

# Abstract
ブラウザ上で論文を”Read online”で読む際に、DeepLを用いたページ翻訳もどきを行うツールを紹介する。このツールはChromeさえ入っていれば、会社などのインストールに制限がある環境でも実行できる利点がある。
[Github「TranslationGummyOmiso」](https://github.com/KYU49/TranslationGummyOmiso)に導入方法と使用方法を示してあるため、別途こちらも参考にしていただきたい。この記事は半分お遊びで執筆したため、技術的な内容に興味がない場合や、使用のみを目的とする場合はGithubだけを読むことを強く推奨する。

# Introduction
> ほんやくコンニャクお味噌味は「ドラえもん のび太の日本誕生」にて使用された、食べると未知の言語間でも会話が可能となるひみつ道具である。

……という話はここではおいておいて、このツールは2020年12月に[岩崎 修登](https://twitter.com/cabernet_rock) 氏が「[「ほん訳コンニャク」 を食べて 論文を読もう

ブラウザにROS画像の送信 ROS/Javascript

# 概要

ブラウザ上にROSのイメージトピックを配信

# インストール
– web-video-serverをインストール
– sensor_msgs/Imageをブラウザへ配信してくれる

“`
sudo apt install ros-noetic-web-video-server
“`

# 実行

“`
roscore
“`

“`
rosrun web_video_server web_video_server
“`

別端末で好きなイメージを引数に与えて,image_publisherの実行(静止画をROSメッセージとして送信してくれる)

“`
rosrun image_publisher image_publisher {イメージファイル}

ex.
rosrun image_publisher image_publisher temp.png
“`

# 結果

ブラウザからhttp://localhost:8080 へアクセス

すると以下の写真のようにトピックが選択でき,クリックするとそのストリームを見ることができる!

![Screens

【JavaScript】入力フォームを使ったHTMLページをスッキリした見た目にする

コードだけをみたい人は最後に全体を載せてますのでそちらへ。

それでは本題の前に、
まずは普通にhtmlでselect要素1つ、input-text要素1つを設置します。

“`HTML







202120222023年

“`

上のHTMLをブラウザで見るとselect要素とinput-text要素が表示されます。

これらを多用して「入力ページ」を作るのはいいのですが、
そのページを印刷してそのまま利用するわけにはいきませ

[JavaScript] named export と default export の違い

export とか import の構文をES Modulesと呼びます。
ES Modulesを使うために、Deno 環境を用意するとよいです。

Node.js でも package.json 記載すればうまく動きます。
この記事ではどちらでも動かしてみます。

“`js:fileA.js
export const funcA = () => {
console.log(‘funcA output’)
};
“`
これが named export 。関数名付きでファイルからexportしています。

“`js:fileB.js
const funcB = () => {
console.log(‘funcB output’)
};

export default funcB;
“`
これが default export 。名前なしでファイルからexportしています。

使い方はそれぞれこんな感じ。全て同一ディレクトリ内に配置してください。

“`js:index1.js
import { funcA } from ‘./fileA.js’
import func