JavaScript関連のことを調べてみた2023年01月21日

論理和演算子( || )の短絡評価を利用した分岐Tips

“`Javascript
function updateRecords(records, id, prop, value) {
if (value === ”) {
delete records[id][prop];
} else if (prop !== ‘tracks’) {
records[id][prop] = value;
} else {
records[id][prop] = records[id][prop] || []; // <= Short-circuit evaluation records[id][prop].push(value); } return records; } ``` 短絡評価（Short-circuit evaluation）を利用すれば、下のif文が1行で書ける。 ```Javascript if (!records[id][prop]) { records[id][prop] = []; } records[id][prop].push(value); ```

TypeScriptで多重extendsを具現する

typescriptは、extendsによる多重相続を提供しないです。
その代わり、mixin という手法を用いて、多重継承を実現させることができます。
mixinもクラスを利用して継承を実現するが、クラスのextendsを使用しません。
クラスをまるで関数のように、あるいは単独のオブジェクトのように眺めながら、
必要な場合ごとにクラスを合成して新しい機能に拡張していく技法です。
そのため、extends を使用するときのように、クラスでのクラスの上下関係は不明です。

まず、extendsを通じたクラス、NewsFeedApiとNewsDetailApiはApiのgetRequestを呼び出しています。

“`typescript:extends
class Api {
ajax: XMLHttpRequest;
url: string;

constructor(url: string) {
this.ajax = new XMLHttpRequest();
this.url = ur

GitHub Actionsのcronが60日で止まる件対応をしてみる

こちらの記事になるように60日間動きがないとcronが止まってしまう模様です。

https://zenn.dev/hellorusk/articles/fc6d4696f5b269

定期的に定期実行処理が止まってる。。

## 現在時刻をもとにファイル作成してGit Pushしてみる

– 現在時刻取得
– JSONファイル作成
– GitHub Actions側からGit Push

をして定期実行すれば常に動き(commitやpush)がある状態になりそう。

## JavaScriptの処理でJSONファイルを書き出す

現在時間を取得してJSONに書き出す処理です。
時間はday.jsを使用

“`js

const fs = require(‘fs’);
const LOGFILE_NAME = `log.json`;

//日本時間
const dayjs = require(‘dayjs’);
const utc = require(‘dayjs/plugin/utc’);
const timezone = require(‘dayjs/plugin/timezo

Dogelog Player: New PyPy offers significant Speed-Up

## Introduction
Dogelog player is a Prolog system written 100% in Prolog targetting the JavaScript and the Python platform. We have adopted the core benchmark suite from formerly Jekejeke Prolog and usually run it for both nodeJS and PyPy.


The benchmark suite gives some proof that the new PyPy v7.3.10 offers a significant speed-up of ca. 25% over its previous versions.

Markdown + reveal.js + GitHub Pages でバージョン管理可能なスライドを作成 & 公開する

## はじめに
本記事は、[reveal.js](https://revealjs.com/) と [GitHub Pages](https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages) を用いて、**バージョン管理可能なスライド**を作成し、公開する手順についてご紹介したものです。

成果物は以下のようになります。
https://tatsurou-yajima.github.io/Head-first-for-study-meeting/chapter-9.html#/

↓画面イメージ

（キーボードの矢印キーで遷移できます！）

## 特徴
今回作成するスライドは、以下のような特徴を持っていま

Javascript 比較仕様 備忘録。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Less_than

両者が文字列の場合は、Unicode値による比較。

文字列　文字列　＝＞　Unicode値　Unnicode値

両者が文字列でない場合は、非数値型を数値に変換し比較。

＜ 変換仕様 ＞

true -> 1

false -> 0

null -> 0

“数値” -> 数値　（ “5” -> 5 ）

“数値でない文字列” -> NaN　（ “p5” -> NaN ）

undefined -> NaN

**いずれかの値が NaN の場合、演算子は false を返す。**

片方がBigInt型の場合も比較可能。

“5” < 7n　＝＞　true 5n < 3 　＝＞　false

Node.jsの基礎をまとめる1

node.jsとはJavaScriptでサーバーまで作れるよという設計手法のことである。

JacaScriptやReactというのはクライアントサイドをつくるものである。

そして、非同期処理を得意とするため、リアルタイムの処理を得意とする。処理の速さも優秀である。

プロジェクトのディレクトリを作成したら、以下のコードを入力する。

“`
npm init -y
“`
これを行うとpackage.jsonが作成される。これによって、作成するプロジェクトの依存関係を管理してくれる。

そして、モジュールをインストールするやり方を示す。
httpモジュールをインストールするには以下のように入力する。

“`
npm install –save-dev http
“`
そうすると、package.jsonのdevDependenciesのところにパッケージが追加されているのが分かる。

![Untitled (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2971002/82832b38

vue3でvue-confirm-dialogが使えなかったので確認画面を使えるようにしてみた

vue3では[Teleport](https://v3.ja.vuejs.org/guide/teleport.html)を使ったモーダルを作成できます。
vue2では[vue-confirm-dialog](https://github.com/aslanon/vue-confirm-dialog)の[API](https://github.com/aslanon/vue-confirm-dialog#api)機能を使ってモーダルを作成していました（関数内からモーダルを呼べて便利）。
ですが、vue3に対応していなかったので[API](https://github.com/aslanon/vue-confirm-dialog#api)機能を使いたかったので一部機能を自作してみました。

## ディレクトリ構成

`ディレクトリ内`
※ 使用していないものは省略しています
“`
├─ public/
│ └── index.html
└─ src/
├── components/
│ └ ConfirmDialog.vue
├──

paizaラーニング レベルアップ問題集 二分探索メニュー JavaScript 太巻きを分けよう (おなかペコペコ)

太巻きを分けよう (おなかペコペコ) (paizaランク A 相当)

https://paiza.jp/works/mondai/binary_search/binary_search__application_step2

# 解説
>切れ目の選び方を工夫したとき、最も短い太巻きの長さを最大でいくつにできるかを答えてください。

とあるので、最も短い太巻きの長さについて、二分探索ができそうです。

最も短い太巻きの長さと、与えられたAの情報から、何か関係式が作れないか考えます。

***

与えられた情報から、太巻きの切れ目ごとの長さを求めます。

ある最も短い太巻きの長さをmidとすると、太巻きを切った長さは、少なくともmid以上でないといけません。

太巻きの１つ１つの長さを調べていきます。

midに満たなかったら、切らずに次の太巻き１つと長さを出します。
mid以上ならば、切ります。

これを繰り返して、切り身が何個になったか調べます。
n人で分けないといけないので、nに満たない場合は、もっとmidを短くして、再度調べます。
nを満たしたら、midをもっと長くできます。再

Reactのhooksをおさらいしておく

株式会社ココロファン – エンジニアリング事業部所属のhazamaです。
サイト制作・運用業務をメインに行っています。

ここ最近はずっとReactを触って過ごしています。
その中でhooksの理解がたまにぼやけてしまうので、備忘録も兼ねておさらいをしておこうと思います。
## useState
よく使われるhooksの1つ。
stateという言葉の通り、「状態」を表し管理している。
次のように配列の形で1つめはstateの変数、2つめはそのstateを更新する関数を入れる。
命名は自由につけられるが、2つめの関数は暗黙的に「set（1つめのstateの変数名）」とすることが一般的。
“`react
const [state, setState] = useState(0);
“`
以下はuseStateを使ったカウントアップ機能の実装例です。
ボタン押下時に再レンダリングされて、「＋」押下の度に数値が1つずつ増えていきます。
“`react
import { useState } from ‘react’;

function App() {
const [count, s

確実に動くGWT開発環境を作る

2023年1月　windows10 で開発できる環境を用意

・GWT(旧Google Web Toolkit)は情報は多いものの、古かったり、動かない事例が紹介されており、苦労した挙句に開発環境が作れない状態です。
　そこで、かなり初期から開発しているワイですが、確実に動く、GWT開発環境をzipファイル化して、作成手順をまとめましたので、ご利用ください。

■Eclipse 4.6 + GWT プラグイン
https://drive.google.com/file/d/1-IaQOlnH1IsYzSbBbHO7_pzST4hbJq4L/view?usp=sharing
(*)ちょい古いですが、動作確認しています。

■セットアップ方法
(1)ダウンロードする
(2)ファイルを解凍
(3)回答したフォルダの中のpleiades-4.6をCドライブ直下へ移動
　　(*)GWTの設定がCから基準になっているので
　　C:\pleiades-4.6\pleiades\eclipse
　　こんな感じになっていればよい
![image.png](https://qiita-image-stor

Web音楽プレイヤー

Web音楽プレイヤーアプリのソースコードです。

“`HTML

月
セレクトボックスの選択肢や値を取得したい時

# 結論
取得したセレクトボックスは一旦配列に変換しないといけない。
下記のようにセレクトボックスのelementを配列に変換してから操作する?
```
// セレクトボックス要素を取得
formElem = document.getElementById(セレクトボックスのid)

// 選択肢のvalueを配列で取得
Array.from(formElem.options).map(option => option.value)
// 選択肢の表示部分を配列で取得
Array.from(formElem.options).map(option => option.text)
```

## なぜ変換？？
```
formElem = document.getElementById(セレクトボックスのid)
formElem.options
=> HTMLoptionsCollection[option,option...]
```
このように　取得したセレクトボックス要素.optionsで選択肢達は取得できている...が
この状態で配列の操作をしようとすると上手くいかない

`

元記事を表示

paizaラーニング レベルアップ問題集 二分探索メニュー JavaScript 効率よく盗もう

効率よく盗もう (paizaランク A 相当)

https://paiza.jp/works/mondai/binary_search/binary_search__application_step1

# 方針

>盗み出す財宝を適切に選んだ結果、平均価値が最大でいくつになるかを答えてください。

以上の問題文より、平均価値で二分探索ができそうです。

***

k個の財宝の平均価値がx以上なら、それ以下の平均価値y(y<=x)も、もちろん達成できます。なので、二分探索ができます。 k個の平均価値は問題文の定義より`(v_1 + v_2 + ... + v_k) / (w_1 + w_2 + ... + w_k)`で求められます。 平均価値がx以上になるなら、 `(v_1 + v_2 + ... + v_k) / (w_1 + w_2 + ... + w_k) ≧ x` と表現できます。 このままだと考えにくいので、これを、**財宝１つ１つの表現にできないか考えます。** 財宝１つ１つの表現を目指して、式変形をします。 `(v_1 + v_2 + ... + v_k) -

元記事を表示

【JavaScript】書き方による関数の違いまとめ

# はじめに
JavaScriptでは、関数の定義方法が複数あります。
いつもなんとなくで書いていたのですが、調べてみると書き方によって少しづつ違いがあったのでまとめてみようと思います。

# 関数の定義方法4つ
関数の定義方法は以下４つです。
### 1. function命令で定義
```.js
function getTaxIncludedPrice(price, tax) {
return price + price * tax
}
```
### 2. Functionオブジェクトを利用して定義
```.js
const getTaxIncludedPrice = new Function('price', 'tax', 'return price + price * tax')
```
### 3. 関数リテラルで定義
```.js
const getTaxIncludedPrice = function(price, tax) => {
return price + price * tax
}
```
### 4. 関数リテラルで定義（アロー関数）
``

元記事を表示

type aliasをinterfaceに変える

typeをinterfaceに変えてみる

変数のタイプを決めるにあたって、type alias方法とinterface方法がある。
interfaceとtype aliasの違いとしては
①interfaceは"="を使わない。
②タイプを結合させたり組み合わせたりする方式の違い

①interfaceは"="を使わない。

下の二つは同じ定義です。
二つの違いはtype aliasは"="を使っていますが、interfaceは"="を使いません。

```react
// Type Alias
type NewsFeed = {
readonly points: number;
readonly comments_count: number;
read?: boolean; // ? はoptional
}

// interface
interface NewsFeed {
readonly points: number;
readonly comments_count: number;

元記事を表示

Lodashインポート時のファイルサイズを削減する

## まとめ

* `import _ from "lodash"`
* 圧倒的にやめたほうがよい
* `import { get } from "lodash"`
* ファイルサイズ削減にはならない
* が、削除しようという意思があるので、そう自分のプロダクトに書いてあったら自分を褒めましょう
* `import get from "lodash/get`
* この書き方が一番よい
* 関数数個の import だと、lodash 全体の 20%くらいに収まる気がする
* すべての関数をインポートすると逆に重くなる（1.5 倍くらい？）
* 100 くらいのインポートの wrapper ファイル作るくらいならよさそう

## 解析結果


Gzipするなら144関数インポートしてもよさそう

元記事を表示

node.jsのアプリケーションをAWS ElasticBeanstalkにデプロイしてみる。

node.jsの非常に簡素なアプリケーションをAWS ElasticBeanstalkを用いて公開するやり方をまとめていく。
これは下の動画に従ったものであるので下の動画を見てもいい。また、公式のドキュメントにもnode.jsとExpressを用いたアプリケーションの公開の仕方があった。この記事では最低限のことしか書かないので実際に実用性のあるアプリケーションを公開する際には公式ドキュメントを参照してほしい。

https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/create_deploy_nodejs_express.html

まず、作業に移る前に必要なことがいくつかある。

Gitへの登録とAWSアカウントの作成である。
こちらは行っていることを前提に進めていく、難しい作業ではないので各自調べて行ってほしい。

そして、ElasticBeansをコマンド上で操作するためにEB CLIのダウンロードをする必要がある。

ht

元記事を表示