- 1. p5.js Web Editor で opencv.js を動的にロードして利用する
- 2. えっ、Rubyってオワコン言語なの、初心者は何を勉強すればいいの？
- 3. 【個人開発】ライブイベントで流れてる映像にハートとスタンプを送れるシステムを作った
- 4. JavaScriptのクラスはトップレベルスコープで定義した方がパフォーマンスが良いの検証
- 5. 自動入力を阻止したいのに、autocomplete=”off”が効かない
- 6. ESP32 で Node-RED flow を動かすのを試してみた
- 7. 【Next.js】HTTP methods ハンドリングを抽象化してみる
- 8. defer属性がついたタグはHTML解析後、DOMContentLoaded前に実行される
- 9. JS使いがGather APIを利用して更に楽しむために行ったこと3選
- 10. JavaScriptでのモジュール化 import, export
- 11. Java、Python、JavaScriptでよく使われる構文や機能を比較した表
- 12. JavaScriptの非同期通信, Ajax通信
- 13. 未経験者と成果物（LP）を作成しました
- 14. DenoでクソデカCSVを読む
- 15. フロント開発で役に立つ、JavaScriptの関数についてのあれこれ
- 16. ノベルゲームの進捗機能を作ろうとしてハマった話
- 17. JavaScript で「 〇〇 と同じ 」的な チェックボックス によるフォームの 自動入力 を実装する
- 18. 【備忘】エンジニア歴2年、最近気を付けられるようになってきたこと コーディング編
- 19. 30時間かけてJavaScriptが練習できるアプリを作りました。
- 20. ページ: 途中下車ウォークの記録
p5.js Web Editor で opencv.js を動的にロードして利用する
以前、p5.js Web Editor で opencv.js を利用する、ということをやったのですが（※ 以下のツイートの内容など）、その時に行った内容の記事化です（[大晦日ハッカソン2022](https://omisoka-hackathon.connpass.com/event/269353/)絡みで活用いただけそうだったため、記事化し忘れていたのを書いて公開）。
【p5.js と OpenCV.js による画像処理の組み合わせ】#p5js でカメラ映像の取得・キャンバスの準備・描画の処理を行う構成で、
そのカメラ映像に対する画像処理を #OpenCV でやってみた！動画での、白い線の描画は、Canny法によるエッジ検出で、赤い線は Hough変換を使った線分検出の結果です。 pic.twitter.com/pw9lUAOD65
— you (@youtoy) August 2, 2022
当時からライブラリのバージョンがあがっているので、以下の最新版に変えてみて実行してみます。
– p5.js 1.5.0
– opencv.js 4.7.0## ソースコード
p5.js Web Editor で opencv.js を使うために過去に試行錯誤して、sketch.js のみに手を加えるやり方で動作させられた時のソースコードを以下に掲載します。
index.html と style.css は、p5.js Web Editor が生成するデフォルトそのままで OK です。また、画像処理
えっ、Rubyってオワコン言語なの、初心者は何を勉強すればいいの？
## 2022年Qiitaのアドベントカレンダーに見るオワコン言語、人気の言語
世の中にはたくさんのコンピュータ言語があります。一世を風靡し、そしていつしか忘れられていく言語もたくさんあります。皆さんは、いま流行りの言語は何で、これから伸びる言語は何だろう、オワコン言語は何だろうと思ったことはないでしょうか？また、YouTubeでインフルエンサーが「Rubyはオワコンだから」と言ったりしますが、「それってあなたの感想ですよね」、「なんかそういうデータあるんですか」と思ったりしていました。
そんな中 @Dosaidon は、Qiitaにアドベントカレンダーと言うコンピュータ言語別に記事を投稿するイベントがあるのを知りました。12月1日から12月25日までの25日間のカレンダーに投稿していくものです。（あれれっ、アドベントカレンダーって24日終わりじゃないの…）それはさておき@Dosaidonも[2022年アドベントカレンダー、Rubyカレンダー2、3](https://qiita.com/advent-calendar/2022/ruby)に参加しました（PR：Ruby初心者の方読んで
【個人開発】ライブイベントで流れてる映像にハートとスタンプを送れるシステムを作った
こんにちは。はじめまして。れとるときゃりー([@retoruto_carry](https://twitter.com/retoruto_carry))と申します。
普段は趣味で個人でウェブサービスなどをたくさん作っています。
# 今回作ったもの
「ライブイベントで流れてる映像にハートとスタンプを送れるシステム」を作りました。
観客が手元のスマホで開いたサイトから、ハートとスタンプを送れます。
実際のDJイベントにて導入し、VJとして映像演出を担当しました。
## サイト
## サイトからハートを送っているところ
JavaScriptのクラスはトップレベルスコープで定義した方がパフォーマンスが良いの検証
Qiita記事の`Webフロントエンドパフォーマンスチューニング75選`を読んでいたら、
JavaScriptの`クラスはトップレベルのスコープで定義する`というのがあったので、パフォーマンスの比較とその理由を調べてみました。https://qiita.com/nuko-suke/items/50ba4e35289e98d95753#クラスはトップレベルのスコープで定義する
## インスタンス生成時間のパフォーマンス比較
“`js
// 関数内でクラス定義
function createPeople(name, age) {
class People {
constructor(name, age) {
this.name = name
this.age = age
}
}return new People(name, age)
}// トップレベルでクラス定義
class People {
constructor(name, age) {
t
自動入力を阻止したいのに、autocomplete=”off”が効かない
### なぜ自動入力が起こるのか
自動入力はブラウザがinput要素の属性を認識し、その値がブラウザに保存済みの情報と何らかの関連があると判断した場合に発生します。
例：
input要素のname属性に”mail”等メールに関連する単語が含まれる場合、メールアドレスの入力欄として認識される。
または、type属性がpasswordとなっている場合、パスワードの入力欄として認識される。
etc.対処法として最初に検索結果に上がってくるのは、input要素についてautocomplete=”off”と記載する方法ですが、効果がない場合が多いようです。
今回は自動入力の原因となっている要素を画面ロード時、一時的に変更することで自動入力を阻止するコードをjQueryで実装します。
### 処理の流れ
1. 初期表示の段階では、ブラウザに認識されないような属性を設定しておく（例：メールアドレスの入力欄のname属性に”mail”という単語を含まない）
1. mousedownイベントで本来の属性に変更し、自動入力を誘発
1. setTimeout()でタイムアウトさせる以下のよ
ESP32 で Node-RED flow を動かすのを試してみた
ESP32上でNode-REDで作ったフローが動く！という話を聞いて、UbuntuとESP32 DevKitを使って試してみました。これに使用した、[Node-RED MCU Editionについてはここ](https://github.com/phoddie/node-red-mcu/blob/main/readme.md)をご覧ください。
今回、Lチカ、センサ駆動、クラウド連動を試してみましたが、ここではまず環境構築とLチカをやってみた流れまでを紹介します。センサ駆動やクラウド連動についても、また改めて記事にできればと思います。
#### ソフトウェア環境
Ubuntu: 22.04
Nodejs： 18.12.1
Node-RED: 3.0.2#### ハードウェア
ESP32-WROOM-32D (DevKitボード)
HCT31 (気温・湿度センサ)
VL6180（照度・近接センサ）
BMP280（ 気温・気圧センサ）
その他：ブレッドボード、LED、タクトSW、抵抗、など#### こんなことができました。
**1. Lチカ**
injectノードとRaspbe
【Next.js】HTTP methods ハンドリングを抽象化してみる
## やりたかったこと
Next.jsでHTTPメソッドごとの処理を書きたいが、[Next.js公式](https://nextjs.org/docs/api-routes/introduction)のこれ(以下のコード)はあまりやりたくない
“`typescript:index.ts
export default function handler(req, res) {
if (req.method === ‘POST’) {
// Process a POST request
} else {
// Handle any other HTTP method
}
}
“`
なぜなら…
– 各ファイルで`if (req.methods === ‘POST’) {`みたいな分岐を書くのが面倒。
– 各ファイルでレスポンス操作 (`res.status(‘OK’).json(response)`みたいなこと)するのが面倒。
– エラーハンドリングは共通にしたい。というわけで、API routesを共通化して各ファイルで使えるようにしたい
## やっ
defer属性がついた`で、HTML解析後、`DOMContentLoaded`前に実行される
- 複数のJavaScriptファイルがある場合、HTMLに表れた順に実行。
クラシックスクリプトって何だよと思ったんですが、モジュールじゃない奴をそう呼んでるんですね。
JS使いがGather APIを利用して更に楽しむために行ったこと3選
- リモートコミュニケーションツールとして[Gather](https://gather.town/)を利用しています。
- Gatherは基本機能以外の仕掛けが沢山あり、その中の1つが[ブラウザコンソール等で扱えるAPI](http://gather-game-client-docs.s3-website-us-west-2.amazonaws.com/classes/Game.html)の存在です。
- 「現在位置の取得」や「参加者情報の取得」など豊富に存在しており、それらを適切に組み合わせることで色々な操作を行うことが可能です。
- 今回はその中から**大人数で盛り上がりそうな組み合わせ3選**をご紹介いたします。
## 前提
- 以下の機能の利用は[一定の権限(Admin or Builder)](https://support.gather.town/help/user-roles)が必要です。
- 必要な方は管理者に権限を設定していただいてください。
## 1. 一括ダンス
- **全員で全身で喜びを表現したい時に利用できます。**
- 以下の内容をChromeコンソー
JavaScriptでのモジュール化 import, export
```javascript:/modules/area.js
export function triange(base, height){
return (base * height)/2;
}
export function circle(r){
return r * r * Math.PI;
}
```
```javascript:main.js
import { triange, circle } from './modules/area';
console.log(triange(3,8));
console.log(circle(10));
```
関数のほかに変数やクラスをexportすることもできる。
```javascript:/modules/constants.js
const THRESHOLD = 100;
const MAIN_COLOR = 'purple';
const MODAL_WIDTH = 800;
const LIST_LENGTH = 100;
const DEFAULT_SORT = 'created_at';
e
Java、Python、JavaScriptでよく使われる構文や機能を比較した表
## Java 、 Python 、 JavaScriptでよく使われる構文や機能を比較した表
| Java | Python | JavaScript |
|------|--------|------------|
| `public class` | - | `class` |
| `class` | `class` | `class` |
| `public static void main(String[] args)` | `def main():` | `function main()` |
| `System.out.println()` | `print()` | `console.log()` |
| `int` | `int` | `number` |
| `double` | `float` | `number` |
| `boolean` | `bool` | `boolean` |
| `char` | `str` | `string` |
| `String` | `str` | `string` |
| `void` | - | `undefined`
JavaScriptの非同期通信, Ajax通信
# 同期処理とは
上から順番にひとつずつ処理されていく。
一つの処理が終わるまで次の処理は実行されない。
# 非同期処理とは
一つの処理が終わるのを待たずに次の処理を実行する
```javascript
setTimeout(() => {
console.log('こんにちは');
}, 3000);
```
第二引数の秒数(3秒)待って第一引数の中身を実行する
「○秒待ってから処理する」あるいは「何かが完了したら処理する」ということも実現できるようになっている。
# Ajax
Asyncronous JavaScript + XMLの略。
ユーザーが何かのアクションをするとサーバーで生成された新しいHTMLを読み込む方法ではなく、非同期通信を行いながらHTMLの必要な箇所だけをサーバーから取得して既存のHTMLを書き換える方法。
サーバーから結果が返ってくるまで他の処理を止めてしまうとその間JavaScriptの処理が止まってしまう。
Ajax通信には非同期処理を組み合わせて利用することが必要になる。
```javascript
//APIURLを叩く
f
未経験者と成果物（LP）を作成しました
# はじめに
現在、私は職業訓練校にて、プログラミングを学習しています。
当然ですが、訓練校に通う目的は、第一は就職をすることになります。
そこで、より良い就職先に入社ができるように、同じ生徒同士で成果物を作成しました。
この記事は
- プログラミング未経験から就職のために成果物を作成したい方
- 未経験者をまとめるリーダーの方
- 初心者に指導を行っている方
を対象に作成しました。拙い部分もあるかと思いますが、大目に見てください（笑）
# 今回作成したLP（ランディングページ）
- https://shenshou-shouten.vercel.app/
- https://github.com/takumi-uezono0/cryptid-shopsite
今回は成果物を作成して就職活動に活かすことを目的に、期間は12月の１ヶ月間のみで作成しました。
正直、未経験者同士で作成していることもあり、完成度はまだまだですが、提示すること自体はできるようにしております。
改善点については後述しておりますので、「今後の課題」をご確認ください。
## 使用した技術
- react
-
DenoでクソデカCSVを読む
Denoを使って巨大なCSVファイルを開く機会があったので、その方法の覚え書きです。
## DenoでCSVを読み書きする方法（通常ver.）
通常、DenoでCSVを読むには、標準ライブラリの`parse`関数を使います。
```ts
import * as CSV from "https://deno.land/std@0.170.0/encoding/csv.ts";
const path = new URL(import.meta.resolve("./path/to/file"));
const text = await Deno.readTextFile(path); // ファイルを文字列として読み取り
const data = CSV.parse(text); // 文字列をCSVとしてパース
console.log(data);
```
（※検索すると`BufReader`を使うやり方も出てきますが、これは古いやり方で現在はあまり推奨されていないようです。）
また、CSVをファイルに書き込むには以下のように`stringify`関数を使います。
```t
フロント開発で役に立つ、JavaScriptの関数についてのあれこれ
## はじめに
日々フロント開発やコードレビューを行うなかで、「JavaScriptの関数について改めて復習、整理しておこう」と感じたので、まとめてみました。
フロント開発に関わっている方や、フロント開発を勉強中の方に読んでいただけたらと思います。
## JavaScriptの関数の様々な仕組みや使用方法
### アロー関数
従来の``function``ではなく、``=>``を用いた関数宣言。
- 匿名関数
- 引数が一つの場合は``()``が省略可能
- 単一式の場合は、``{}``や``return``を省略できる
```js
// 従来の関数
function (a, b){
return a + b + 100;
}
// アロー関数
(a, b) => a + b + 100;
```
:::note warn
**注意点**
thisやsuperへの結びつけを持たないので、メソッドとして使用することができなかったり、コンストラクターとしても使用することは出来ません。
:::
### オブジェクトのプロパティに関数を入れる
関数はオブジェクトのプロパテ
ノベルゲームの進捗機能を作ろうとしてハマった話
## そもそもどういうのを作ったのか
こんなのを作ってました。よくあるセリフをクリックしていくと途中で分岐が現れてその選んだ分岐の結果によってGood EndだとかBad Endだとか変わるやつです。
ハマった部分はここですねぇ
大学の実習の講義の一環でWEBサービスを立ち上げてそこにノベルゲームを実装してました。
## 何がハマったのか
先ほども説明したようにこのゲーム、分岐があるんですね。つまりこのよ
JavaScript で「 〇〇 と同じ 」的な チェックボックス によるフォームの 自動入力 を実装する
例えば複数人で泊まるホテルを予約する時、宿泊者の情報を入力する際に2人目以降の住所記入欄に「代表者と同じ」みたいなチェックボックス があったりしますよね。でチェック入れたら1人目のフォームに入れてる住所が勝手に入力されるみたいな。それやります。
## 仕様
「代表者（1人目）と同じ情報を入力する」というチェックボタンを入れると2人目の入力フォームに1人目のフォームの値がコピペ される。
その後2人目のフォームを編集した場合チェックボックスのチェックが外れる
## 実装
以下のようなHTMLファイルでフォームを作成していることを想定します。
~~~html
- リモートコミュニケーションツールとして[Gather](https://gather.town/)を利用しています。
- Gatherは基本機能以外の仕掛けが沢山あり、その中の1つが[ブラウザコンソール等で扱えるAPI](http://gather-game-client-docs.s3-website-us-west-2.amazonaws.com/classes/Game.html)の存在です。
- 「現在位置の取得」や「参加者情報の取得」など豊富に存在しており、それらを適切に組み合わせることで色々な操作を行うことが可能です。
- 今回はその中から**大人数で盛り上がりそうな組み合わせ3選**をご紹介いたします。
## 前提
- 以下の機能の利用は[一定の権限(Admin or Builder)](https://support.gather.town/help/user-roles)が必要です。
- 必要な方は管理者に権限を設定していただいてください。
## 1. 一括ダンス
- **全員で全身で喜びを表現したい時に利用できます。**
- 以下の内容をChromeコンソー
```javascript:/modules/area.js
export function triange(base, height){
return (base * height)/2;
}
export function circle(r){
return r * r * Math.PI;
}
```
```javascript:main.js
import { triange, circle } from './modules/area';
console.log(triange(3,8));
console.log(circle(10));
```
関数のほかに変数やクラスをexportすることもできる。
```javascript:/modules/constants.js
const THRESHOLD = 100;
const MAIN_COLOR = 'purple';
const MODAL_WIDTH = 800;
const LIST_LENGTH = 100;
const DEFAULT_SORT = 'created_at';
e
## Java 、 Python 、 JavaScriptでよく使われる構文や機能を比較した表
| Java | Python | JavaScript |
|------|--------|------------|
| `public class` | - | `class` |
| `class` | `class` | `class` |
| `public static void main(String[] args)` | `def main():` | `function main()` |
| `System.out.println()` | `print()` | `console.log()` |
| `int` | `int` | `number` |
| `double` | `float` | `number` |
| `boolean` | `bool` | `boolean` |
| `char` | `str` | `string` |
| `String` | `str` | `string` |
| `void` | - | `undefined`
# 同期処理とは
上から順番にひとつずつ処理されていく。
一つの処理が終わるまで次の処理は実行されない。
# 非同期処理とは
一つの処理が終わるのを待たずに次の処理を実行する
```javascript
setTimeout(() => {
console.log('こんにちは');
}, 3000);
```
第二引数の秒数(3秒)待って第一引数の中身を実行する
「○秒待ってから処理する」あるいは「何かが完了したら処理する」ということも実現できるようになっている。
# Ajax
Asyncronous JavaScript + XMLの略。
ユーザーが何かのアクションをするとサーバーで生成された新しいHTMLを読み込む方法ではなく、非同期通信を行いながらHTMLの必要な箇所だけをサーバーから取得して既存のHTMLを書き換える方法。
サーバーから結果が返ってくるまで他の処理を止めてしまうとその間JavaScriptの処理が止まってしまう。
Ajax通信には非同期処理を組み合わせて利用することが必要になる。
```javascript
//APIURLを叩く
f
# はじめに
現在、私は職業訓練校にて、プログラミングを学習しています。
当然ですが、訓練校に通う目的は、第一は就職をすることになります。
そこで、より良い就職先に入社ができるように、同じ生徒同士で成果物を作成しました。
この記事は
- プログラミング未経験から就職のために成果物を作成したい方
- 未経験者をまとめるリーダーの方
- 初心者に指導を行っている方
を対象に作成しました。拙い部分もあるかと思いますが、大目に見てください（笑）
# 今回作成したLP（ランディングページ）
- https://shenshou-shouten.vercel.app/
- https://github.com/takumi-uezono0/cryptid-shopsite
今回は成果物を作成して就職活動に活かすことを目的に、期間は12月の１ヶ月間のみで作成しました。
正直、未経験者同士で作成していることもあり、完成度はまだまだですが、提示すること自体はできるようにしております。
改善点については後述しておりますので、「今後の課題」をご確認ください。
## 使用した技術
- react
-
Denoを使って巨大なCSVファイルを開く機会があったので、その方法の覚え書きです。
## DenoでCSVを読み書きする方法（通常ver.）
通常、DenoでCSVを読むには、標準ライブラリの`parse`関数を使います。
```ts
import * as CSV from "https://deno.land/std@0.170.0/encoding/csv.ts";
const path = new URL(import.meta.resolve("./path/to/file"));
const text = await Deno.readTextFile(path); // ファイルを文字列として読み取り
const data = CSV.parse(text); // 文字列をCSVとしてパース
console.log(data);
```
（※検索すると`BufReader`を使うやり方も出てきますが、これは古いやり方で現在はあまり推奨されていないようです。）
また、CSVをファイルに書き込むには以下のように`stringify`関数を使います。
```t
## はじめに
日々フロント開発やコードレビューを行うなかで、「JavaScriptの関数について改めて復習、整理しておこう」と感じたので、まとめてみました。
フロント開発に関わっている方や、フロント開発を勉強中の方に読んでいただけたらと思います。
## JavaScriptの関数の様々な仕組みや使用方法
### アロー関数
従来の``function``ではなく、``=>``を用いた関数宣言。
- 匿名関数
- 引数が一つの場合は``()``が省略可能
- 単一式の場合は、``{}``や``return``を省略できる
```js
// 従来の関数
function (a, b){
return a + b + 100;
}
// アロー関数
(a, b) => a + b + 100;
```
:::note warn
**注意点**
thisやsuperへの結びつけを持たないので、メソッドとして使用することができなかったり、コンストラクターとしても使用することは出来ません。
:::
### オブジェクトのプロパティに関数を入れる
関数はオブジェクトのプロパテ
## そもそもどういうのを作ったのか
こんなのを作ってました。よくあるセリフをクリックしていくと途中で分岐が現れてその選んだ分岐の結果によってGood EndだとかBad Endだとか変わるやつです。
ハマった部分はここですねぇ
大学の実習の講義の一環でWEBサービスを立ち上げてそこにノベルゲームを実装してました。
## 何がハマったのか
先ほども説明したようにこのゲーム、分岐があるんですね。つまりこのよ
例えば複数人で泊まるホテルを予約する時、宿泊者の情報を入力する際に2人目以降の住所記入欄に「代表者と同じ」みたいなチェックボックス があったりしますよね。でチェック入れたら1人目のフォームに入れてる住所が勝手に入力されるみたいな。それやります。
## 仕様
「代表者（1人目）と同じ情報を入力する」というチェックボタンを入れると2人目の入力フォームに1人目のフォームの値がコピペ される。
その後2人目のフォームを編集した場合チェックボックスのチェックが外れる
## 実装
以下のようなHTMLファイルでフォームを作成していることを想定します。
~~~html
## はじめに
エンジニアになって2年が経過した私が最近気をつけられるようになってきたことについての備忘録です。1年後くらいに振り返って懐かしむことを目的としています。序盤は「気をつけられるようになってきたこと」というには抽象度が高すぎる内容になってしまいましたが、大目に見てください。
## 型定義ちゃんとやる
:::note warn
TypeScriptに依存する内容です
:::私自身、TypeScriptを触り始めた当初は
「型定義？何それおいしいの？」
「定義するメリットがよくわからん、時間かかるし...」などと愚民丸出しで斜に構え、隙あらばany型に逃げようとしていました。
しかし、強いエンジニアほどany型に逃げないことに気づき、型定義と向き合う覚悟を決めたのでした。### 仕様書の代わりになる
以下の型なしTypeScriptファイルを読んでみます
```typescript:index.ts
export class GetOrder {
async execute() {
const orders = await this.
30時間かけてJavaScriptが練習できるアプリを作りました。
# 30時間かけてJavaScriptが練習できるアプリを作りました。
ご存じの通り、JavaScriptが他のプログラミング言語と違うところは、もともと**ブラウザのため**に作られたということです。今では、Node.js等でバックエンドでも使用できるようになりましたがその基本は変わっていません。
私がJavaScriptを習い始めたころはコードを書きながら実際にいちいちconsole.log()を加えながらどういう動きをするのか確かめる作業を繰り返していました。
そこでこの**JSひろば**アプリを作成してみることにしました。
このアプリを通して皆さんにJavaScriptがどう使えるかを、実際の例を使って、自分のコードを書きながら試していただけると嬉しいです。
## [JSひろばを試す](https://js-hiroba.com)
ページ: 途中下車ウォークの記録
次のページを作成する方法です。
[途中下車ウォークの記録](https://ekzemplaro.gitlab.io/trip/)
コードは Gitlab に置きます。
[trip](https://gitlab.com/ekzemplaro/trip)プロジェクトは、
Pages/Plain HTML
というテンプレートを使って作成します。
public 以下のフォルダー構造
```text
$ tree public/
public/
├── data.json
├── index.html
