- 1. WebSocket冗長化
- 2. ml5.js の FaceApi で face-api.js の表情認識などの対応が組み込まれたものがあった
- 3. 【初心者向け】スタートアップでのよくある技術スタック
- 4. JavaScript (ECMAScript)の勉強リスト
- 5. Javascriptの歴史
- 6. RailsとAjaxを用いて日付入力フィールドの変更をリアルタイムで反映する方法
- 7. JavaScriptでのAPIでのデータの表示 fetch （初心者）
- 8. Node.js 日時のフォーマット・妥当性チェック
- 9. functionを使うことで結論から処理を書く!functionのメリット
- 10. Vanilla Router のすゝめ
- 11. P5.js 日本語リファレンス(buildGeometry)
- 12. JavaScriptのmapメソッドとforEachメソッドの違いと使い方
- 13. GASでAPIを叩きたくてエラーが直らなかった話
- 14. JavaScriptの「??, ||, &&, !!」こいつらなんなん
- 15. JavaScriptのArray.reduce()メソッドの利用方法と活用例
- 16. Webアプリ開発 記事の詳細とコメント編
- 17. Webアプリ開発 記事の更新、削除編
- 18. Webアプリ開発 記事の新規登録編
- 19. 【JavaScript】Identifierの構文エラー
- 20. 配列から連結リストを組み立てる【TypeScript】
WebSocket冗長化
フリーのWebSocketサービスは、意図せずサーバーが落ちていたり、いつのまにか仕様が変わっていたり、ぱっと使いたいときに動かないケースが多々あります。
気楽にWebSocketが使えるように、また有料サーバーの通信を強化する意味で、複数のソケット接続を束ねてメッセージ送受信できるものを作ってみた。## 使用サーバー
|サービス| タイプ |強さ |
|—|—|—|
|Achex |無料 |たまに落ちている |
|Scaledrone |無料 |そこそこ安定 |
|PieSocket|有料 |安定 ※絶対落ちないわけではない |## 使い方
使用するパスでメッセージのチャンネルを切り替えています。
同じディレクトリにいるページ同士でメッセージ送受信
“`js
var outer = new Outer(
{
test :e=>{console.log(e)},//タイプ指定受信
dummy :e=>{console.log(e)},
sample :e=>{console.log(e)},
},
e=>{con
ml5.js の FaceApi で face-api.js の表情認識などの対応が組み込まれたものがあった
最近、以下の記事を書いたり、X のポストにあるようなお試しをした「face-api.js」と、機械学習系のライブラリ「ml5.js」に関する内容です。
– 最近書いた記事
– [ml5.js の FaceApi（face-api.js の一部の機能を使える API）で扱える仕組み・モデルに関するメモ – Qiita](https://qiita.com/youtoy/items/932c1868b032e3a4dfa8)
– [face-api.js の「Face Expression Recognition（表情認識）」の公式デモ・利用可能なモデルの情報などを見てみた：ml5.js の FaceApi では使えない仕組みの部分 – Qiita](https://qiita.com/youtoy/items/85882d5df5b88d827424)face-api.js の「Face Expression Recognition／表情認識」を、 #p5js の描画に組み込んでみた！
「happy」「surprised」は、顔全体の表情を大きく変えなくても、口元のあたりを主に変えれば、意図的に認識結果を出せそうな感じかな
（体験型コンテンツには、これくらいの判定はちょうど良いかも） pic.twitter.com/i1gg48ixJA— you (@youtoy) May 6, 2024
上記の記事を書いたり、その後に face-api.js と p5.js を組み合わせてみたりというのをやった後に
【初心者向け】スタートアップでのよくある技術スタック
以下の動画の内容を文字化しました。
## 導入
最近の技術スタックの動向とスタートアップでの利用についての解説です。今日は特に、Web系の自社開発企業に焦点を当ててお話しします。## 開発基礎ツール
まずは、Web系の開発現場の基盤ツールから見ていきましょう。現在のところ、gitとDockerが主流です。gitはソースコードのバージョン管理に欠かせないツールで、多数の開発者が同時に作業する際のコンフリクトを防ぎます。一方、Dockerは開発環境を容易に再現可能にするコンテナ技術で、異なる環境でのバグを未然に防ぎます。## コミュニケーションとタスク管理
スタートアップでは迅速なコミュニケーションが求められます。そのためには、SlackやNotionなどのツールが重宝されます。これらは日々のコミュニケーションをスムーズにし、プロジェクトの進行状況を一目で把握することができます。## 使用される主なプログラミング言語
JavaScriptやTypeScriptがフロントエンド開発で主流ですが、バックエンドにはRu
JavaScript (ECMAScript)の勉強リスト
## 参考
https://www.tohoho-web.com/js/what.htm## リスト
### ES5 の新機能
– [ ] ストリクトモード(strict)
– [ ] ゲッター(getter)とセッター(setter)
– [ ] オブジェクトの最後の属性の後ろにカンマ
– [ ] JSON文字列の変換
– [ ] trim()
– [ ] Object オブジェクトのメソッド強化
– [ ] Array オブジェクトのメソッド強化### ES5.1 の新機能
– [ ] array.isArray()### ES2015(ES6) の新機能
– [ ] クラス (class)
– [ ] テンプレート文字列 (`Hello ${name}`)
– [ ] モジュール (import, export)
– [ ] アロー関数 (=>)
– [ ] デフォルト引数 (function(x=0, y=0))
– [ ] 可変長引数 (function(x, y, …arg))
– [ ] 定数 (const)
– [ ] 局所変数 (
Javascriptの歴史
– 1995年05月10日
– ネットスケープコミュニケーションズのブレンダン・アイクによって開発された（この時はLiveScriptと呼ばれていた）
– Javaのような外観
– 初心者に優しく
– Netscapeブラウザのほとんどなんでも制御できるように
– Netscape Navigator 2.0
※Netscape Navigatorはネットスケープコミュニケーションズが開発していたウェブブラウザ– 1996年
– マイクロソフトのInternet Explorer 3.0にJScriptという名前で搭載
– 急速に普及していく– 1997年
– 通信に関する標準を策定する国際団体EcmaインターナショナルによってJavaScriptの中核的な仕様がECMAScriptとして標準化
※ECMAScript（エクマスクリプト）は、Ecmaインターナショナルにおいて標準化されたJavaScriptの国際規格
– 多くのウェブブラウザで利用できるようになった– 1998年頃
RailsとAjaxを用いて日付入力フィールドの変更をリアルタイムで反映する方法
## 導入
Webアプリケーションにおいて、フォーム入力のリアルタイム処理はユーザー体験を向上させる重要な要素です。特に予約システムのようなアプリケーションでは、利用者が入力する日付に応じて利用可能な時間帯やサービスの情報を動的に更新することが求められます。この記事では、Railsを使用して日付入力フィールドからの入力をAjaxを通じてリアルタイムに処理し、ページの特定の部分を更新する方法を紹介します。
## 実装手順
### 1. 日付フィールドの準備
まず、日付を入力するためのフィールドを用意します。このフィールドには、JavaScriptでイベントリスナーを設定するためのIDが必要です。
“`erb
<%= form_with model: @reservation, local: true do |form| %>
<%= form.label :date, "日付" %>
<%= form.date_field :date, id: 'date_field', value: Date.today, class: 'form-control' %>
<% e
JavaScriptでのAPIでのデータの表示 fetch （初心者）
## はじめに
ウェブ開発において、外部APIを利用してデータを取得し、ウェブページに動的なコンテンツを表示することは一般的なタスクです。本記事では、Vanilla JSを使用して外部APIからデータを取得し、それをウェブページに表示する方法について学習したことをまとめました。
## APIの概要
### API(Application Programming Interface)とは
APIは、アプリケーション間でデータをやり取りするためのインターフェース。
クライアントがサーバーにリクエストを送信し、サーバーはそのリクエストを処理して必要なデータを提供する。
主にJSON形式が利用され、これによりデータのやり取りが容易になり、さまざまなプラットフォームや言語での利用が可能。## 非同期処理
プログラムは上から順に処理されるため、一つの処理が終わらないと、次の処理を実行できない。つまり処理中はクリック、スクロールなどの操作は不可能。これを解決するために、バックグラウンドで処理を実行する非同期処理が開発された。
最初は、setTimeout関数とコールバック関数を使って非
Node.js 日時のフォーマット・妥当性チェック
# 日時の妥当性チェックしなくていいの？
ユーザーから送られてきたリクエストボディの日時のフォーマットを正規表現を用いてチェックする機能を追加したときに頂いたコメント。
確かに正規表現だけだと`2月30日`を`false`にすることやうるう年の判断が出来ない。
機能を追加しなければ!と調べた結果を忘れないようにまとめます。### 前提
今回のリクエストボディは`YYYY/MM/DD HH:mm`の形式で送られてきます。
そのため日付のフォーマットが`/`区切りになっているかの判断も重要になってきます。
※今回実装している機能がリクエストボディの日付を外部APIに連携し、外部APIの指定で`/`区切りとなっているためリクエスト時点でこのフォーマットにして欲しいためフォーマットも固定にしております。### Moment.isValid()
まず最初に見つけた方法は、`moment`パッケージに規定されているisValid関数を用いた方法。
参考にさせていただいた[stackOverflow](https://ja.stackoverflow.com/questions/6841
functionを使うことで結論から処理を書く!functionのメリット
### この記事を読むメリット
:::note info
結論(処理の流れ)を書いた後に、具体的な内容(処理の詳細)を書けるようになる
:::### function関数のメリット
アロー関数では、関数定義前にメゾットを呼ぶとエラーになります。
“`js
method() // ReferenceError: Cannot access ‘arrow’ before initialization
const method = () => {}
“`一方で、functionでは、下のように書いてもエラーになりません。
“`js
method()
function method() {}
“`
これを活用することで、処理の流れを先に書いて、具体的な内容を後に書けます。例えば、アロー関数で下のように書いてたとします。
“`js
const getName = () => {
return “山田 太郎”
}const greet = (name) => {
const text = `こんにちは${name}さん`
console.log(
Vanilla Router のすゝめ
## SPAとルーター
Single Page Application (SPA)は、ユーザーがアプリケーションとやり取りをするたびにページ中の必要な部分だけを JavaScript により動的に更新するウェブ開発手法です。
これに対しユーザーがアプリケーションとやり取りをするたびにページ全体をリロードするこれまでの手法を Multi Page Application (MPA) と呼びます。
SPA のページ中の必要な部分だけを JavaScript により動的に更新する機能をルーターと呼びます。
MPA では、ページ遷移ごとにサーバー側でページを生成しそれをクライアントに送る通信が生じますが、SPA ではルーターを用いることで、サーバーとの通信を最小限に抑えつつ、シームレスな画面遷移を実現することができます。## Vanilla Router とは
Vanilla Router は [Vanilla JS](http://vanilla-js.com/)、すなわち素の JavaScript でルーターを書く手法のことを言います。近年の Web 開発では、React や
P5.js 日本語リファレンス(buildGeometry)
このページでは[「P5.js 日本語リファレンス」](https://qiita.com/bit0101/items/91818244dc26c767a0fe) の buildGeometry()関数を説明します。
## buildGeometry
### 説明文
buildGeometry()は sphere(球) や cone(円錐) など単純な 3D 形状から複雑な 3D 形状を作成して p5.Geometryオブジェクトにすることができます。
buildGeometry()で複雑な 3D 形状を作成して、スケッチ途中で変更しないときはスケッチのパフォーマンスを向上させる事ができます。(個々の形状部分を繰り返し描画するよりも高速に実行できます)
buildGeometry() のパラメタとしてオブジェクトの描画命令を含むcallback関数を指定することができます。
3D 形状を作成する別の方法については、[beginGeometry()と endGeometry()](https://qiita.com/bit0101/items/6b7101393075d766f
JavaScriptのmapメソッドとforEachメソッドの違いと使い方
1. mapメソッドとは
説明: mapメソッドは、配列の各要素に対して与えられた関数を呼び出し、その結果を新しい配列として返すメソッドです。
特徴:
元の配列を変更せずに、変換された要素からなる新しい配列を生成します。
配列の要素を変更したり、操作したりするために使用されます。
2. forEachメソッドとは
説明: forEachメソッドは、配列の各要素に対して与えられた関数を順番に呼び出しますが、新しい配列を返しません。
特徴:
元の配列を変更せずに、配列内の各要素を操作したり処理したりするために使用されます。
3. 違いと使い分け
mapメソッド:
新しい配列を生成して変換された結果を取得する場合に使用します。
変換された結果を配列として取得したい場合に便利です。
forEachメソッド:
配列内の要素を操作したり、処理したりする場合に使用します。
配列を変更しないまま、要素に対して処理を行いたい場合に利用します。
4. 使い方の例“`js
// mapメソッドの例
const numbers = [1, 2, 3, 4];
const doubled = number
GASでAPIを叩きたくてエラーが直らなかった話
# 結論：JSON.stringify()したら直った！
そのままですね。
GASエディタ上でリクエストbodyをJSON形式で記述していたのですが、実際に格納されていた値がJSON形式でなくなっていました。ということです。### GASでの記述
“`javascript
let headers = {
~省略~
};let body = {
“hoge” : “fuga”,
“hogege” : [
{
“fugaga”: “hogefuga”
}
]
};let options = {
methopd: “post”,
headers: headers,
payload: body
}let response = UrlFerchApp.fetch(url, options); // ここでエラー”INVALID DATA RECEIVED”
“`
### 実際にbodyに格納されていた値
“`javascript
{
hoge : ‘fuga’,
hogege : [
{
f
JavaScriptの「??, ||, &&, !!」こいつらなんなん
## はじめに
“` js
const a = 0 ?? 5;
const b = 0 || 5;
const c = 0 && 5;
const d = !!0;
“`
このa, b, c, dに何が入るかみなさんわかりますか？
上から順に、Null合体演算子、論理和、論理積、二重否定と呼ばれます。
これがわかる皆さんにこの記事は必要ありません!! (<-これは二重否定ではない) 解説の中で`falsy`という単語が頻出します。 これはnull, undefinedだけでなく、`0`や`""`(空文字列)などのfalseとみなされる値のことです。 詳しくはこちら。 https://developer.mozilla.org/ja/docs/Glossary/Falsy ## Null合体演算子 名前の通り、Null判別が合体した演算子です。 `??`の左辺がNullの場合、右辺を返します。Nullと判別される値は`null`と`undefined`のみです。 つまり、実行結果は下記のようになります。 ``` js const a = 0 ?? 5; console.log(
JavaScriptのArray.reduce()メソッドの利用方法と活用例
JavaScriptには、配列の要素を処理して最終的な値を求める便利なメソッドがあります。それがArray.reduce()メソッドです。この記事では、Array.reduce()メソッドの基本的な使い方と実践的な活用例を紹介します。
Array.reduce()メソッドとは
Array.reduce()メソッドは、配列の各要素に対して指定された関数を適用し、単一の結果を返すメソッドです。このメソッドは、累積される値（アキュムレーター）と現在の要素を引数に取ります。基本構文は以下の通りです。
“`
arr.reduce((accumulator, currentValue) => {
// 処理
}, initialValue);
“`accumulator: アキュムレーターとして使用される値。
currentValue: 現在の要素。
initialValue: アキュムレーターの初期値（省略可能）。
活用例: 条件に応じた要素のカウント
以下のコードは、Array.reduce()メソッドを使用して、配列内の特定の条件を満たす要素の数をカウントする例です。
Webアプリ開発 記事の詳細とコメント編
# 初めに
webアプリを開発したので、開発中に考えたことをまとめます
今回は記事の詳細とコメント機能についてです。# 開発環境
macOS Sonoma 14.4.1
CentoOS Stream X_86_64
Apache/2.4.57
PHP 8.3.6
mysql Ver 8.0.36
phpMyAdmin 5.2.1
composer version 2.7.2
Laravel Installer 5.7.1
Laravel Framework 11.0.5# ソースコード
https://github.com/opatu07/portfolio
# 考えたこと
## 記事の詳細
### 実装事例
ホーム画面から
記事のタイトルまたは「この記事を読む」を押してもらうと記事の詳細を確認できます。
今回の例では「スープ
Webアプリ開発 記事の更新、削除編
# 初めに
webアプリを開発したので、開発中に考えたことをまとめます
今回は作成した記事の更新、削除機能についてです。# 開発環境
macOS Sonoma 14.4.1
CentoOS Stream X_86_64
Apache/2.4.57
PHP 8.3.6
mysql Ver 8.0.36
phpMyAdmin 5.2.1
composer version 2.7.2
Laravel Installer 5.7.1
Laravel Framework 11.0.5# ソースコード
https://github.com/opatu07/portfolio
# 考えたこと
## 記事の更新
### 実装事例
ダッシュボード画面から「記事を編集する」を押してもらうと
記事の編集画面が出てくるのでここで記事を編集
Webアプリ開発 記事の新規登録編
# 初めに
webアプリ開発ができたので、どんな感じで作成したのかをまとめたいと思います。
今回はマイページ編集についてです。# 開発環境
macOS Sonoma 14.4.1
CentoOS Stream X_86_64
Apache/2.4.57
PHP 8.3.6
mysql Ver 8.0.36
phpMyAdmin 5.2.1
composer version 2.7.2
Laravel Installer 5.7.1
Laravel Framework 11.0.5# ソースコード
https://github.com/opatu07/portfolio
# 考えたこと
## 記事の新規登録
### 実装事例
権限があるユーザーには投稿一覧ボタンが出てきます。
押すと）において、入力のサンプルが以下のような配列で与えられます。
“`
head = [1,2,3,4]
“`一方、実際に Submit した場合、関数（またはメソッド）の引数で受け取る入力値は連結リストのヘッドのノードになっています。
ちなみにノードの構造は LeetCode では以下のように定義されています。
“`ts
class ListNode {
val: number
next: ListNode | null
constructor(val?: number, next?: ListNode | null) {
this.val = (val===undefined ? 0 : val)
this.next =
