JavaScript学習記事一覧

# 概要
javascriptを学習し、理解した内容を記事にすることで知識の定着を図る。
マークダウン記法についての理解も深める。

# 記事一覧
+ [【JavaScript】JavaScriptとは](https://qiita.com/kw35670/items/923206a716755a4d3aa2)

まだまだ少ないですが逐次更新していきます。

javascript: array.sort((a, b) => a – b) にどこまで迫れるか

（思いついたら追加していこうかと）

# 経緯
こちらのソートアルゴリズムの記事を拝見し、
https://qiita.com/fuwasegu/items/0f27a7eee2ec72035855
いっちょあたくしも考えてみっか、と思い立ちまして。

javascript で並べ替えと言えばこれです。
“`sort.js
source.sort((a, b) => a – b);
“`
ということで、javascript エンジンはどれも、これが最速になるよう実装してそうです。（たぶん）
よって勝つのは難しそうですが、どこまで迫れるか、考えてみます。

# 条件
・javascript で実装
・Windows 10 Home 21H2 19044.1766 （64 ビット）
・Chrome 103.0.5060.66（Official Build） （64 ビット）
　DevTools の Console にコードを貼り付けて実行
・並べ替え対象の配列
　・要素は下記表の範囲の乱数（※）
　・要素数は十万
“`sourceArray.js
const source = [..

いつも忘れる .filter で undefined を除去する方法 【TypeScript】

## ユーザー定義のType Guard の話

`[‘test1’, undefined].filter(Boolean)` だと `(string | undefined)[]` という型のままでしんどいときの話。

“`typescript
const test1 = [‘test1’, undefined].filter(Boolean)
// const test1: (string | undefined)[]
console.log(test1);
// [LOG]: [“test1”]

const test2 = [‘test2’, undefined].filter((v): v is string => v != null)
// const test2: string[]
console.log(test2);
// [LOG]: [“test2”]
“`

以下でTypeScriptをWeb上で試せます。
https://www.typescriptlang.org/play?#code/Q

## 参考

– [ユーザー定義のType Gua

javascript 深い配列から取得

“`
data =[{
id:1,
value:[‘a’, ‘b’, ‘c’]
},
{
id:2,
value:[‘d’, ‘e’, ‘f’]
},
{
id:3,
value:[‘g’, c’, ‘h’]
},
]
“`
‘c’のみを取得したいと思います。
“`
let r = data.map(d =>{
return d.value
})
.flat()
.filter(v=> v === ‘c’)

console.log(r)
// [ ‘c’ , ‘c’ ]
“`
できました。

【新規事業】SkyWayでモザイク加工したカメラ映像を送ってみるよ（前編）【プロト開発】


# はじめに
株式会社マイスター・ギルド新規事業部のウサギーです。
弊社新規事業部では、新規サービスの立ち上げを目指して
日々、アイディアの検証やプロトタイプの作成を行っています。

アイディアの検証のために、先日作成した[SkyWay*の1対1通信アプリ](https://qiita.com/Shinkijigyo_no_Usagi/items/1d4e1cccbb6de9aa4526)に自分たちの機能を載せていこう！となる中で

**①カメラ映像に加工すること**
**②加工した映像をSkyWayを通じて送ること**

が必要になりました。

*[SkyWay](https://webrtc.ecl.ntt.com/)…NTTコミュニケーションズが提供する、ビデオ・音声通話を簡単に実装できるSDKとAPIです

# この記事の位置づけ
普段

javascript で学んだこと １章

# 読んだ本

ステップアップJavaScript

https://books.circlearound.co.jp/step-up-javascript/

大学の研究室で渡された本です。演習みたいなものが載っているので、自分なりの解答を残します

初学者の方も解答を一緒に考えたら力がつくと思います。

## 第一章で作ったもの

ストップウォッチを作りました

“`index.html

svgとJavascriptでシンプルな花火を打ち上げたい

# 概要
今回、初投稿ということで研修の一環でJavascriptを用いてsvgで描画したイラストを動かして花火をあげてみたので調べた内容をまとめてみました。

自分なりの解釈も混じっていますので、間違っている内容があればご指摘いただければと思います。

# 完成イメージ

See the Pen
firework1 by Yusuke Mori (

【Javascript】webページでドラッグできるダイアログを作ってみた

# 完成物
『Dialog』をドラッグして、動かしてみてください。
右上のCODEPENのアイコンを押すと、コードが見やすくなりいます。

See the Pen
qiita_draggableDialog by matsuura77 (@m

【JavaScript】JavaScriptとは

# JavaScriptとは
+ 主にブラウザ（GoogleChrom、Firefox、MicrosoftEdgeなど）上で動作するプログラミング言語。
+ Webサイトにアニメーション（ハンバーガーメニュー、スムーススクロールなど）をつけることが出来る。
+ ブラウザがあれば動作するため開発環境の構築が必要なく初学者にも学習しやすい。

# 特徴
+ ライブラリ（jquery、react、vueなど）が豊富なためアニメーションを付けるだけでなく、iOSやAndroidアプリの開発など幅広い分野の開発が可能。
+ node.jsを使えばサーバーサイドにも対応可能。

# 長所
上記と被るが
+ ブラウザがあれば動作するため、環境構築が必要ない。
+ ライブラリが豊富なため、幅広い分野で効率的に開発が可能。
+ node.jsの存在によりサーバーサイドの開発も可能。

# 短所
+ 他のプログラミング言語に比べて処理速度が遅い。
+ ブラウザによって共同が異なることがある。

## 参考サイト一覧

https://www.modis.co.jp/candidate/insight/co

Node.jsでAbortControllerを使って、child_processを強制的に終了させる方法

はいさい！ちゅらデータぬオースティンやいびーん！

# 概要
AbortControllerを使って、Node.jsで実行した`child_process`を強制的に終了させる方法を紹介します。

## 背景
本記事は、前回投稿した、Node.jsでffmpegを使って動画を変換する記事を元に作成しています。

変換の作業に時間がかかりすぎて、サーバーの負荷が過ぎないように、ある一定の時間が経っても子プロセスが終了しなかったら、強制的に終了させる必要があります。

ここで、Abort Controllerを使ってShellに終了のシグナルを送ることができますので、解説していきたいと思います。

## 事前知識
前回の記事を読んでいただければわかりやすいかと思います！

https://qiita.com/tronicboy/items/f3f5d2dbcade2a8e01d9

# コード
前回のコードのPOSTのところを修正します。

`spawn`の引数の設定オブジェクトに、`signal`を追加します。
“`typescript:src/index.ts
…

app.po

Node.js・Expressでffmpegを実行し、アップロードした動画を変換する方法

はいさい！ちゅらデータぬオースティンやいびーん！

# 概要
本記事では、Node.jsの`child_process`の`spawn`を使って、アップロードされた動画をffmpegで変換する方法を紹介します。

## 背景
Node.jsでPythonなどのスクリプトを実行して、その結果を持ってレスポンスを返すようなコードが書きたいことが動機で本記事の内容を勉強することになりました。

Node.jsのイベントループシステムは非常に強力で、TypeScriptも共に使うと、JavaScriptの弱点も補ってほぼ無敵だと思います。

しかし、JavaScriptはイベントループがあっても、スレッドは一つ。そこで問題になるのは、大量のリクエストを捌くIOというより、時間がかかるプロセスが問題です。

また、Pythonの機械学習モデル、他言語のスクリプトなど、JavaScriptでは実行できないプロセスもあります。

そこで、助けになるのは、Node.jsの`child_process`機能です。

child_processは、サーバーのshellでコマンドを実行し、その結果を持ってN

なぜnpx create-react-appすると”export default” Appなのか？

## はじめに
最近Reactを勉強していますが、export（名前付きエクスポート）とexport default（デフォルトエクスポート）に惑わされています。
どちらを使えばいいのか疑問に思い軽く調べたところ、「exportでは〜ができます。export defaultでは〜ができます。」というややズレた答えが散見され、「exportなのかい？export defaultなのかい？どっちなんだい！！？？（きんに君風）」と思っていました。

（stackoverflowでも「全部の質問読んだけど、わかんねえ、、、」という記事がありました。）

https://stackoverflow.com/questions/46913851/why-and-when-to-use-default-export-over-named-exports-in-es6-modules

exportとdefault exportの違いは[こちら](https://qiita.com/Jassy/items/fa4d7a784ea9d0b9f89a)

## exportとexpor

JavaScriptのinheritanceについて part2

# 初めに
前回でコンストラクタ関数の継承方法をまとめて紹介しました。
[JavaScriptのinheritanceについて（Constructor Function）](https://qiita.com/hu-yu/items/13635160a4616d6d1c0d)
今回はコンストラクタ関数を使わない方法をまとめたいと思います。

↓は今回デモの初期コードです。
“`jsx
const Person = {
nation: ‘Japan’
}

const Occupation = {
career: ‘Business Man’
}
“`

# `object()`
これは`json`の発明者Douglas Crockfordの発想です。
“`jsx
function object(obj) {
function F() { }
F.prototype = obj
return new F()
}
“`
コンストラクタ関数でなく、一般関数の内部に空関数のプロトタイプに継承対象のプロパティやメソッドを受け継がせ、新しいイスタンスを返すという方法です

【JavaScript】ループするスライドショーをJavaScriptのみで実装した

# 1. はじめに
JavaScriptの勉強を始めて約2週間くらいの人間による備忘録です。
間違い、冗長なコードがあります。
頑張ってんな～。くらいの気持ちで見ていただけると幸いです。

## 1-1. 動作確認
* ボタン押下で画面遷移
* 4秒間ボタン操作がない場合、自動でスライドを遷移する
* スライド時間は0.7秒
* スライド遷移中（0.7秒間）はボタン操作禁止

### 自動画面遷移
時間経過（4秒）で自動画面遷移

### ボタンを押下時の画面遷移
* ボタン押下で、時間処理クリア
* 0.7秒間はクリック禁止
![click.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/29c640e8-5788-dc9e-f0ec-51595

社内でデスクトップアプリ(GUI)を開発する手段まとめ

社内でWindowsデスクトップアプリが作りたーーーい。
しかし自由なソフトウェアやパッケージの導入ハードルができなーーーい。
そんなときの検討材料として、開発手段とメリデメを一覧する。

私的なメモに近いので気になる手法はご自身で深掘りしてみてネ。

## Visual Studio (IDE)で C# を使用
### メリット
– GUI（人が操作する画面）が一番作りやすい
– デスクトップアプリ開発のデファクトスタンダード
– チュートリアルやインターネット上の知見が抜群に多い
– Microsoft製のためOffice等との連携がしやすい
– EXE化もできる
### デメリット
– 機能が多いため操作習得には時間がかかる
– エンタープライズ企業では無料のcommunity版が使えない
大企業でも使えるProfessional版は買い切り6万円弱、サブスクは月額45ドル
– ちょっとしたものを作るにはオーバーかも

## Python ＋ Tkinter（標準ライブラリ）
### メリット
– 無料で使える
– 標準ライブラリでGUIアプリが作れるので追加インストール不要
–

【Ruby on Rails】トップに戻るボタンの作成

# 目標

よくWebページで見るトップへ戻るボタン（画像右下）を作成します。


# 開発環境
Rails 6.1.4
ruby 2.6.3

# 目次
– Viewページの作成
– CSSファイルの作成
– jQueryの定義（jsファイルの作成）

## Viewページの作成

まずトップへ戻るボタンとして使用したい画像を用意します。
今回は下記の画像使用。


下記のように記述します。

“`html:index.html

React18で追加されたAutomatic Batchingとは

先月ついにReact18の正式版がリリースされました。
今回のリリースで追加された機能をコード付きでざっくり解説していきたいと思います。

紹介する機能は公式のReact Blogの下記記事に掲載されているものとなります。

https://reactjs.org/blog/2022/03/29/react-v18.html

## Automatic Batching

`useState`を使った下記のようなコードがあるとします。

“`jsx
function Sample1() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);

const increment = () => {
setCount(count + 1);
setFlag(!flag);
};

console.log(“rendering”);

return (

jsonの要素を全て表示する方法

## 概要

JSONで値の取り出し方を毎回ググっているので、具体例を以下においておきます。

“`javascript
var json = {
one: [11, 12, 13, 14, 15],
two: [21, 22, 23],
three: [31, 32]
}

for(var key in json) {
console.log(key);
for (var key1 in json[key]) {
console.log(json[key][key1])
}
}
“`

## 結果
“`
one
11
12
13
14
15
two
21
22
23
three
31
32
“`

## 参考
https://www.microverse.org/blog/how-to-loop-through-the-array-of-json-objects-in-javascript

【JS、rails】要素の外側をクリックすると、その要素が閉じる

# 実装したいこと
クリックすると要素が変化し、要素外をクリックすると要素が元に戻るという機能を実装します。

今回の例は、自分のオリあぷに実装したものです。
検索フォームにホバーするとアンダーバーが表示されます。
検索フォームをクリックすると、アンダーバーの表示が維持されます。
検索フォーム以外をクリックすると、アンダーバーが消えます。
わかりにくいですがGifを参照ください。
https://gyazo.com/a36d20cbf9d2dd2b66f00d4b73b437b3
# 結論
JavaScriptを利用します。
“`javascript:JavaScript
function search_box() {
const search_box = document.querySelector(“#search-box”); // クリックした時にイベントを発火させるための要素を取得
if (!search_box) return null; //　目的の要素がないページでは何も処理しないようにする。⇨ページの挙動がよくなる
const line = doc

defaultとexport defaultの違い

はじめに

最近Reactを勉強していますが、exportとexport defaultによく惑わされるので、違いを整理しました。

※あくまでできるかできないかの整理となりますので、実際のプロジェクトでこういった書き方がされているかは存じ上げません。

概要

|No.| 項目 | 名前付きエクスポート
（export） | デフォルトエクスポート
（export default） |
|:-:|:-:|:-:|:-:|
|1| import時の{ }の必要性 | ○ | × |
|2| エイリアスの可否 | ○ | ○ |
|3| １ファイルからの複数エクスポート可否 | ○ | △ |

1. import時の{ }の必要性

名前付きエクスポート

“`FruitsBasket.jsx
export const FruitsBasket = () =>

FruitsBasket?

“`

“`App.jsx
import