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

自動運転シミュレーション その6

# 概要
自動運転シミュレーションを開発している。
server,client方式に変更する。
client、書いてみた。

# 写真


# サンプルコード

“`

let url = “ws://localhost:50002/”;
let agent = new WebSocket(url);
agent.onmessage = function(event) {
var data = JSON.parse(event.data);
draw(data.action);
};
agent.onclose = event => alert(`Closed ${event.code}`);
agent.onopen = event => alert(`open`);
agent.onerror = event => alert(`err

自動運転シミュレーション その5

# 概要
自動運転シミュレーションを開発している。
server,client方式に変更する。
serverをLivebookで、書いてみた。

# サンプルコード

“`
defmodule ElixirSocketTesting.ClientAgent do
def start_link do
Agent.start_link(fn ->
[]
end, name: __MODULE__)
end
def add(client) do
Agent.update(__MODULE__, fn list ->
[client | list]
end)
end
def remove(client) do
Agent.update(__MODULE__, fn list ->
List.delete(list, client)
end)
end
def all do
Agent.get(__MODULE__, fn list ->
list
end)
end
end

defmodule Car do
def ag

PHPでLINEのクローンアプリを作成

メッセージを送受信ができるアプリを作ってみました。


# リポジトリをclone

“`bash
git clone https://github.com/gong-cha/line-clone
“`

ソースコード

https://github.com/gong-cha/line-clone

# 実装した機能

– 新規登録
– ログイン
– ログアウト
– アカウント削除
– リアルタイムメッセージ受信
– 画像投稿
– アイコン表示
– 既読機能
– ユーザー一覧に最新のメッセージ表示

# 意識したこと

– プリペアードステートメント
– 飲んす機能
– デザイン

# 参考にしたサイト

LINEのクローンアプリを作成してみた

https://qiita.com/ayukin/

JSXの基礎文法

# はじめに
初めてJSXファイル(TSX含む)を見て、何がなんやらわからない人に向けて、JSXの基礎中の基礎を書かせていただきます。

# JSXの基礎文法
#### reactライブラリをimportする
JSXは必ずreactライブラリをimportする必要があります。実際のソースコードから下記の記述があることを確認してみてください。
“`React
import React from ‘react’;
“`

#### return文の中がJSXの記法
基本的にはHTMLと同じ書き方となります。その認識をもった上でソースコードを読んでみてください。
ただし一部違うこともありますので注意してください。(例:HTMLのclassはJSXだとclassNameとなります。)

#### キャメルケースで記述する
JavaScriptは-(ハイフン)を読み取ることができないため、キャメルケースで記述する必要があります。
もしソースコードに手を加えるとなった際は間違えないよう注意してください。

#### ｛｝内はJavaScriptの世界となる
｛｝内はJavaScriptの記述

Promise.all()を使って反復処理を速く実行

## はじめに
JavaScriptにおいて、for文中で同期処理を利用したい場合にasync/awaitでなくPromise.all()というメソッドを用いると良い、という話です。
自分自身がasync/awaitで反復処理を行い非常に実行に時間を要して困っていたため、記事にしてみました。

## そもそもJavaScriptの同期/非同期処理とは
そもそも、JavaScriptは同期処理であり、非同期処理でもあるプログラミング言語です。
基本的にはコードを上から実行しますが、時間がかかる処理は終了を待たずに進んでいきます。
有名な事例ですが……

“`js
console.log(“A”);
setTimeout(() => {
console.log(“B”);
}, 1000);
console.log(“C”);
“`

上記の場合、”A”が出力され、次にsetTimeout関数が実行され、1秒後にBが出力されることになります。
待ってる間もプログラムの実行が進むので、先に”C”の出力が行われ、最後に1秒後の”B”が出力されます。

## Promis

javascriptでのソート機能について

## はじめに
この記事ではtableタグの一覧をjavascriptでソートするだけの機能を備忘録もかねて記載しています。

## ソース内容
百聞は一見に如かず、ソースは以下の通りです。
“`index.html

name	num	price
りんご	3個	yarnコマンド実行時のエラー「code: ‘ERR_OSSL_EVP_UNSUPPORTED’」の解決法 ## ファイル構成 – index.html “`html … … “` – package.json “`json { “license”: “MIT”, “scripts”: { “webpack”: “webpack” }, “dependencies”: { “webpack”: “5.22.0”, “webpack-cli”: “4.5.0” } } “` – webpack.config.js “`js const path = require(‘path’); module.exports = { entry: ‘./src/index.js’, output: { path: path.r 元記事を表示 CheerpJのJavaからブラウザベースへの移行が、エンタープライズJavaアプリケーション向けリモート・デスクトップ・ソリューションを凌駕する理由  []() 現在のめまぐるしい世界では、アプリケーションへのリモート・アクセスは必需品となっており、ユーザーはどこからでも、どのデバイスからでもソフトウェアやデータにアクセスできるようになっている。Javaアプリケーションへのリモートアクセスに関しては、[JavaからJavaScriptとWebAssemblyへのコンパイラであるCheerpJと](https://leaningtech.com/cheerpj/)、Citrixのようなリモート・デスクトップ・ソリューションの2つがよく使われる選択肢です。このブログ記事では、CheerpJがデスクトップJavaアプリケーションにアクセスするための優れた選択肢である理由を探ります。 **1 – インストールの手間なし** リモートデスクトップソリューションと比較してCheerp 元記事を表示 Kintone ステータス変更時に日時を記録する ?Kintoneでステータス変更時に日時を自動登録したくカスタマイズしてみました ?PC版です ## やりたいこと 発送状況（ステータス）を 「発送前」→「発送済」 に変更した際に日時を記録したい ## 手順 1. フィールドの準備（今回は文字列１行） 1. KintoneのAPIトークンを取得 1. moment.jsを取得 1. JavaScriptファイルの作成 1. moment.jsと作成したjsファイルをKintoneアプリに設置 1. Kintoneアプリの更新 ## 1. フィールドの準備 発送状況の横に文字列（１行）を追加 フィールド名：発送日 フィールドコード：発送日_自動 websocketを使いたい人のためにまとめたよ まずWebsocketが使われる理由から ### Websocketが使われる理由 一言でいえば、 リアルタイム性、効率性、およびパフォーマンスの向上。 詳しく解説すると理由はいくつかあって、 #### 1. リアルタイム通信 WebSocketは、リアルタイムの双方向通信を可能にします。これにより、ユーザーとサーバー間で即時にデータを交換でき、リアルタイムアプリケーション（例：オンラインゲーム、チャットアプリ、ライブスポーツのアップデートなど）のパフォーマンスが向上します。 #### 2. 効率的なデータ転送 WebSocketは、持続的な接続を通じてデータを送受信するため、データ転送のオーバーヘッドが少なくなります。これにより、ネットワークの効率が向上し、レスポンスタイムが短縮されます。 #### 3. サーバーのリソース最適化 WebSocketは、オープンな接続を維持しながらも、リソースの消費を最小限に抑えます。これにより、サーバーの負荷が軽減され、大量の同時接続を効率的に処理できます。 #### 4. 低レイテンシ WebSocketは、データの送受信における遅延を削減 元記事を表示 【備忘録】ts-nodeコマンドを省略可してみた ## はじめに Typescriptのファイルを実行するときに、いちいちビルドしてts-nodeコマンド打つのめんどいな と思って一つのコマンドにまとめてみました。 ただの初心者＋備忘録コードなので、このqiitaにたどり着いたら眺めてみてくださいな。 ## サマリー – `ts-test`コマンドでビルドとts-nodeコマンド一緒にしたぜ – ファイル実行に使うスクリプトchatGptで出力してみたぜ ## コード ではコード載せときます。 まずは`package.json`の`script`を編集 “`package.json “scripts”: { “build”: “tsc”, “watch”: “tsc -w”, “test”: “jest”, “cdk”: “cdk”, “ts-test”: “tsc && node ./test/runTest.js” }, “` runTest..jsなるものを`./test`配下に作成 chatGPT3.5で出力されたものを動く形で変更してみました。 意外にちゃんとしたコー 元記事を表示 【vue.js】より効率的なデータ操作：テーブル行追加の実装方法 ## 【vue.js】より効率的なデータ操作：テーブル行追加の実装方法 こんにちは。今回は、vue.jsについて初心者エンジニアに向けて、より効率的なデータ操作の方法について解説します。vue.jsは、javascriptのフレームワークの1つであり、データのリアクティブな操作が得意です。その中でも、テーブル行の追加という具体的なデータ操作方法を取り上げてみたいと思います。 vue.jsを使ったデータ操作は、javascriptの配列やオブジェクトの操作よりも簡単に行うことができます。また、vue.jsのリアクティブな性質を活かすことで、データの変更を監視して自動的に画面の表示を更新することもできます。 本記事では、以下の内容について詳しく説明します。 – データの配列操作とvue.jsのリアクティブ性 – メソッドを使ったテーブル行の追加手法 – スプレッド演算子を活用したデータの更新と追加 – vuexを使った状態管理とテーブル行追加の実装 – コンポーネント間のデータ共有とテーブル行追加の効率化 それでは、順に見ていきましょう。 ## データの配列操作とvue.jsの 元記事を表示 【MapleCTF2023】Rev – Writeup # 初めに どうも、クソ雑魚のなんちゃてエンジニアです。 本記事は __MapleCTF2023__ のRev問3題のWrtiteupとなります。 https://ctf2023.maplebacon.org/ 3題だけ解けたので記載します。 # JaVieScript 以下のJavascript（とHTMLがあったがHTMLはあまり関係ない。）が渡されます。 “`Javascript: var flag = “maple{“; var honk = {}; async function hash(string) { const utf8 = new TextEncoder().encode(string); const hashBuffer = await crypto.subtle.digest(‘SHA-256’, utf8); const hashArray = Array.from(new Uint8Array(hashBuffer)); const hashHex = hashArray .map((bytes) => bytes.toString( 元記事を表示 惰性スクロール、画像のパララックスアニメーション、スクロール途中固定表示の使い方｜Somefolk from london  ロンドンをベースに、ウェブデザイナーやウェブディベロッパーとして活動する、[Jason Harvey氏のポートフォリオサイト]がとてもクールなので紹介します。 ポートフォリオサイトのsomefolkがイケているのはもちろんですが、サイトに掲載されているいくつかの制作実績に目を通すと、全ての実績に共通してアニメーション及びイージングのセンスの良さが見受けられます。 ここにJason Harvey氏へのリスペクトを示しつつ、彼のポートフォリオサイトで用いられている表現技法を学びましょう。 ## 用件定義 ### PC版 は、混沌の極みであるフロントエンドツールをひとつに纏め上げようという稀有壮大なプロジェクトです。 当初はOSSとして始まり、その後は資金提供を受けて会社を設立し、メンバーは給料をもらってフルタイム開発に従事していました。 さらに[元々JavaScriptで書かれていて低速だったのをRustに切り替え](https://qiita.com/rana_kualu/items/dcadf11b3e97db1dded6)、2022年11月には[無事Stableまで辿り着く](https://qiita.com/rana_kualu/items/47341ce38b3df6a75559)などなど順風満帆であるように見えました。 しかし、その裏では大きな問題が発生していたようです。 開発は2023年1月あたりで停滞し、さらに一部の主要開発者が[相次いで](https://twitter.com/MichaReiser/status/1613474278808162304)[脱退](https://twitter.com/ematipico/s 元記事を表示 FlutterでJavaScriptと連携する ### 【はじめに】 Flutterを使用したアプリケーションでは、JavaScriptと簡単に連携できます。このチュートリアルでは、flutter_inappwebview パッケージの addJavaScriptHandler メソッドを使用して、JavaScriptからFlutter関数を呼び出す方法を紹介します。 ### 【セットアップ】 まず、flutter_inappwebview パッケージをプロジェクトに追加します。 pubspec.yamlファイルに以下の行を追加してください。 “`yaml dependencies: flutter: sdk: flutter in_app_webview: ^5.7.2+3 # 最新のバージョンを使用してください “` https://pub.dev/packages/flutter_inappwebview ターミナルを開いてプロジェクト内でflutter pub getでパッケージをインストールして下さい。 ### 【サンプルコード】 以下は、addJavaScriptHandler を使 元記事を表示 【vue.js】使ったリアルタイムなテーブル更新：行の追加編 こんにちは。今回は、vue.jsについて初心者エンジニアに向けて、リアルタイムなテーブル更新の行の追加編について解説します。 ## リアルタイムなデータ更新とテーブル表示の関連付け リアルタイムなデータ更新とテーブル表示を関連付けるためには、vue.jsのデータバインディング機能を活用します。データバインディングを使用することで、データの変更をリアルタイムに反映できます。 以下は、データバインディングを使ったテーブル表示の例です。 “`html