- 1. JavaScript 第8回 初歩のモードレスウィンドウ（必要最低限）
- 2. 【L2、L3】サーバーでWorkerを動かしてみる
- 3. VueプロジェクトでのMQTTの使用方法
- 4. JavaScript MQTT Client: MQTT.js 初心者向けガイド
- 5. electronでfirebase-authを使うときにlocalhostを承認済みドメインに入れたくない！
- 6. gulpfileをES Modulesに変換
- 7. D3 v7 応用 – Enter / Update / Exit
- 8. 【JS/ES6】@ts-checkを使ってJSファイルで型チェックする
- 9. ESMとCJSのimportとexport
- 10. 【JS/ES6】早期リターンって？
- 11. プチ話 友達に “うれしい” を 配列で伝えた話
- 12. HTMLファイル一つでPDF編集する試み
- 13. UMD版Hexabase JavaScript SDKを使ってTodoアプリを作る（タスク一覧表示・追加・削除）
- 14. [JavaScript] DOMの操作方法
- 15. canvasにマウスでカリグラフィペン
- 16. 【React】Input属性でタブを押したときの初期フォーカス位置を調整する
- 17. 有名OSSに軽くIssueを立ててみた話
- 18. ハッカソンで掃除をリズムゲーム化するアプリを作ってみた
- 19. Javascript + Reactで天気予報アプリを作ろう ～アプリケーション作成～
- 20. Nightbotで「グー」「チョキ」「パー」のじゃんけんをする
JavaScript 第8回 初歩のモードレスウィンドウ（必要最低限）
# はじめに
今回は、モーダルウィンドウの第一歩として、必要最低限のモードレスウィンドウを作成します。
今後、何回かにわけてモードレスウィンドウの表示をパワーアップして、インターネットによくあるようなモーダルウィンドウを作り出すことができればと思います。# 今回実施する内容
必要最低限のモードレスウィンドウを作成します。
画面のボタンを押下するとモードレスウィンドウが画面上部に表示され、ウィンドウ上の「ｘ」を押下するとウィンドウをクローズします。
モードレスであることを確認するため、もうひとつウィンドウを作ってもみます。
[Vue](https://vuejs.org/)は、ユーザーインターフェイスを構築するためのプログレッシブなフレームワークです。他の一枚岩のフレームワークとは異なり、Vueは段階的に採用可能な設計がなされています。コアライブラリはビューレイヤーにのみ焦点を当てており、他のライブラリや既存のプロジェクトと簡単に統合して使用することができます。一方で、現代的なツールとサポートライブラリと組み合わせることで、洗練されたシングルページアプリケーションを動かすこともできます。
[MQTT](https://mqtt.org/)は、公開/購読モデルに基づいた**軽量IoTメッセージングプロトコル**です。このプロトコルは、一対多のメッセージ配布とアプリケーションの非結合を提供します。低い伝送消費とプロトコルデータ交換、最小化されたネットワークトラフィッ
JavaScript MQTT Client: MQTT.js 初心者向けガイド
**目次**
– [はじめに](#はじめに)
– [インストール](#インストール)
– [MQTT ブローカーの準備](#mqtt-ブローカーの準備)
– [MQTT.js の簡単な例](#mqtt-js-の簡単な例)
– [MQTT.js コマンドライン](#mqtt-js-コマンドライン)
– [MQTT.js API 紹介](#mqtt-js-api-紹介)
– [MQTT.js Q&A](#mqtt-js-q-amp-a)
– [MQTT.js 上級](#mqtt-js-上級)
– [まとめ](#まとめ)## はじめに
[MQTT.js](https://github.com/mqttjs/MQTT.js) は [MQTT プロトコル](https:/
electronでfirebase-authを使うときにlocalhostを承認済みドメインに入れたくない！
*この資料はナレッジワークの社内勉強会で利用したものを公開したものです
—
# 問題点tl;dr
electronのrendererプロセスでfirebase-sdkを利用する場合、URLにlocalhostを使うことになるので、firebase-authの承認済みドメインにlocalhostを許可せざるをえないという問題があります
—
# 解決策tl;dr
以下のように解決します
– mainプロセスへfirebase sdkを利用する処理を逃がす
– sign inはサーバーを用意し、firebae-adminで `createCustomToken` を使って行い、そのtokenをmainプロセスで利用する
– ただし、mainプロセス（=nodeのプロセス)上ではfirebase-authのユーザーのPersistができず、アプリ立ち上げ時に過去に取得した認証情報を取ることができない問題がある。その対処としてelectron用に独自のpersistenceを実装することで問題を解決する（参照実装は[こちら](https://github.com/sisis
gulpfileをES Modulesに変換
## はじめに
今まで画像圧縮はオンラインツールを使っていたのですが、今さら自動化しようと思い
npm packageの[imagemin](https://www.npmjs.com/package/imagemin)を使おうとしたのがきっかけです。
imageminはVersion 8 からES ModulesになったようなのでgulpfileもCommonJSからES Modulesへ書き換えることにしました。
### 環境
- Node
- Ver. 20.9.0
- npm
- Ver. 10.1.0
- Gulp
- CLI Ver. 2.3.0 Local Ver. 4.0.2
- Gulpはnpxで実行しています
## 手順
1. gulpfile.jsの拡張子をgulpfile **.mjs** にリネーム。拡張子を変更したくない場合はpackage.jsonに `”type”: “module”` を追記
“`js
D3 v7 応用 – Enter / Update / Exit
[D3 v7 入門 – Enter / Update / Exit – Qiita](https://qiita.com/sand/items/8b5ca42d1bf511e61ccd)
[D3 v7 応用 – Enter / Update / Exit – Qiita](https://qiita.com/sand/items/999715cebe52ade66c0b)この前の記事では D3 の基本概念である **Data Join – Enter / Update / Exit** の基礎について説明しました。**これはデータセット（JavaScriptの配列）とView要素（DOM 要素）を結びつけるものです。** ハッキリ言ってこの基本概念は、使用例を見ないとわかりにくいと思います。本記事の目的は **Data Join – Enter / Update / Exit** の使用例をみることで、この基本概念の持つ意味を探ることです。
D3 は、提供されたデータのグラフを書き、その後、時々刻々と変化するデータを反映して、グラフも更新していきます。それを効率よく行うために考
【JS/ES6】@ts-checkを使ってJSファイルで型チェックする
# はじめに
JS勉強中に教えてもらった@ts-checkが便利だったので忘れないようにメモ。# @ts-checkを使ってJSファイルで型チェックする
JSでは関数や変数などの型を正しく記述する必要がある。
vocodeにはJSファイルをtypescriptのように型チェックできる機能がある！それが@ts-check！
例えば下記のような誤ったコードがあったとする。
通常のJSファイルだと特にエラー的なものは出ないが、
ファイルの最初に「@ts-check」を追加すると、pushに赤い下線が表示される。
 => {
//do something
}module.exports = somoFunc
“`
### 複数のモジュールのエクスポート
“`sample-1-2.js
const someFunc () => {
//do something
}
const hoge =”hoge”// その1 まとめてexport
module.exports = {
culc: someFunc
hoge: hoge
}
// その2 一つひとつエクスポート
exports.someFunc = () => {
//do something
}
exports.hoge = “hoge”“`
## ESMの場合のExport
### 一つのモジュールをエクスポートする場合
“`sample-2.js
//デフォルトのエクスポート その１
expo
【JS/ES6】早期リターンって？
# はじめに
JS勉強中に早期リターンについて考えることがあった。
そもそも早期リターンとは的なところから使い方までをメモ。# 早期リターンって？
早期リターンは、関数（メソッド）などの処理の中で、**条件を満たした時にすぐにreturnやcontinue/breakでその処理から抜ける方法**。早期リターンは**early return**ともいう。
if文のネストを減らせたり、無駄な処理を回避できたりするメリットがある。
## 早期リターンをいつ使うのか
### 条件を満たした場合
例えば、下記のようなif文があったとする。
“`
if(A != B){
if(A == C){
return true;
}else {
return false;
}
return true;
}else {
return false;
}
“`
これを早期リターンすると。
“`
if(A == null) return;
if(A != C) return;
return true;
“`
として早期リ
プチ話 友達に “うれしい” を 配列で伝えた話
こんにちはAtsu1209です。
今回はプチ話第二弾 うれしいを配列で伝えた話をしていきます。# Line
友達から誕生日にLineギフトがきて、欲しかったスタンプをギフトしてもらいました。
そこでこんな返信をしました。“`javascript
let feel = [
“怒り”,
“うれしい”,
“悲しい”
];console.log(furuit[1]);
“`
そしたら友達から
“`javascript
console.log(“感情表現に配列使うなw”);
“`
と帰ってきました。
なぜか友達もconsole.logで返信してきました
以上
HTMLファイル一つでPDF編集する試み
# PDFをjpgに変換するコード
“`
PDFをjpg変換アプリ
UMD版Hexabase JavaScript SDKを使ってTodoアプリを作る（タスク一覧表示・追加・削除）
[Hexabase（ヘキサベース）](https://www.hexabase.com/)は企業においても安心して利用できるBaaS（Backend as a Service）を提供しています。多くのBaaSがそうであるように、主にフロントエンド開発者に利用してもらいたいと考えています。そこで現在、TypeScript SDKの開発が進められています。
元々TypeScriptで作られていることもあって、Next.jsやVue.jsなどでimportして利用することができます。しかし、もっと普通のWebアプリケーションなどで使う際には、CDN経由で利用したいと考える方もいるでしょう。そこで、UMD版Hexabase JavaScript SDKを作成しました。
今回は、そのUMD版Hexabase JavaScript SDKを使ったTodoアプリのデモを紹介します。まずはタスク一覧の表示とタスクの追加、そして削除を行えるようにしました。
## デモ
デモはこちらのURLで体験できます。
[
“`### createTextNodeメソッド
テキストノードを作成する
**ノードを作成するだけのため、別途階層に追加する処理が必要**
“`javascript:createTextNode
document.createTextNode(テキスト)
“`
### appendChildメソッド
指定された要素を現在の要素の最後の子要素として追加する
“`javascript:appendChild
要素オブジェクト.appendChild(追加する子ノード)
“`
戻り値は子ノード### 例題
– 空のリスト、ボタンを配置する
– ボタンをクリックするとリストの項目が追加される
– 追加される文字列は”test”とする“`javascript:例題
canvasにマウスでカリグラフィペン
カリグラフィペン…縦だと細くて横だと太目な、万年筆っぽいアレ :writing_hand:
もともと[htmlのcanvas](https://developer.mozilla.org/ja/docs/Web/HTML/Element/canvas)にマウスでお絵描きするアプリがあったのですが、ちょっとだけカッコつけたくてこのペンを作りました。
結果的にカリグラフィではないかもしれません :bread:
## 結果
https://jsfiddle.net/koyayashi/juf4pyhb/212/
## どうやるか
アプリによって実装が違うみたいですが、基本的には楕円形で軌道を描くもののようです。
本来、圧や速度と手首の捻りで影響を受けるものでしょうが、マウスなのでこの方針。しかしcanvasで「楕円形で軌跡を描く」のは結構めんどくさそう…
なので平行四辺形にします。1. mousedownで斜め線を描く
2. mousemove毎に
1. 斜め線を描き、前回引いた線と合わせて平行四辺形を塗る## 結果：平行四辺形カリグラフィペン
めっちゃいろんなことを検索したけどreact関係なくwindow関数でやるのが便利だと思った次第。
普通にuseRefのドキュメントとか見てたけどこれでいいのでは。“`js
window.getSelection().collapseToStart()
“`## コードとコードサンドボックス
https://codesandbox.io/embed/cn9r7g?view=Editor+%2B+Preview&module=%2Fsrc%2FApp.js
“`jsx
import { useRef, useEffect } from
有名OSSに軽くIssueを立ててみた話
本記事は[Nihon University Advent Calendar 2023](https://qiita.com/advent-calendar/2023/nihon-u)の8日目の記事です。
# はじめ
[Bun](https://bun.sh/)というOSSにissueを立ててコントリビュートしました。
[Bun](https://bun.sh/)とは以下の引用の通り、テストランナー、バンドラー、トランスパイラー、ランタイムやパッケージマネージャーを兼ね備えているオールインワンのツールです。他のパッケージマネージャーやテストランナーより良いパフォーマンスが出ているとアピールしています。また、Lockfileがバイナリーファイルであるのが特徴的です。
>Develop, test, run, and bundle Java
ハッカソンで掃除をリズムゲーム化するアプリを作ってみた
# アプリの概要
掃除機のスライドを、取り付けたスマートフォンに搭載された加速度センサで検知し、リズムゲームの判定とするアプリです。
2020年の技育展で優秀賞をいただいた作品になります。
チームメンバーは私を含め3人で、私を除く2人はweb開発未経験でしたが2週間余りで作品を作ることができました。
github: https://github.com/ysdko/rhythmic-cleaner
デプロイURL: https://rhythmic-cleaner.vercel.app/## 主な機能
* 楽曲・難易度選択
の要求を吸い上げてからデベロッパ(開発者)が整理をし、重々認識合わせを行う必要がある重要な項目です。…ですが今回は利用者も開発者も自分なので
Nightbotで「グー」「チョキ」「パー」のじゃんけんをする
## グー、チョキ、パー…じゃんけん！
[Nightbotで「簡易的でない」おみくじを作る](https://qiita.com/curuusa/items/6f4d83bd0f4085ff678b)の続きです。
(「おみくじを作る」と言いながらじゃんけんしてますが)[Nightbot](https://nightbot.tv/) のコマンドには引数が使えます。
自作したカスタムコマンドでも、もちろん引数が使えます。今回は、Nightbotを導入したライブ配信で
「じゃんけん グー」とか「じゃんけん パー」と入力したら
その手を出してくれるコマンドを作ってみましょう。## 引数を使ってより複雑なおみくじにする
### １． [Nightbot](https://nightbot.tv/) 側の設定
Commandos > Custom からコマンドを追加しましょう。Messageにコマンドを入力。
新たな変数 [$(query)](https://docs.nightbot.tv/variables/query) を [$(urlfetch)](https://do
