- 1. websocketを使いたい人のためにまとめたよ
- 2. 【備忘録】ts-nodeコマンドを省略可してみた
- 3. 【vue.js】より効率的なデータ操作：テーブル行追加の実装方法
- 4. 【MapleCTF2023】Rev – Writeup
- 5. 惰性スクロール、画像のパララックスアニメーション、スクロール途中固定表示の使い方｜Somefolk from london
- 6. nuejs にコントリビュートした話（人生初OSSコントリビュート）
- 7. Bunかる〜く触ってみた[Bunの実行, nodeとの比較]
- 8. 【Biome】フロントエンドをひとつにまとめる垂直統合ツールチェーンBiome爆誕
- 9. FlutterでJavaScriptと連携する
- 10. 【vue.js】使ったリアルタイムなテーブル更新：行の追加編
- 11. 【予期せぬ大量のAPIリクエストに注意】Next.js SSGページのビルド時に429エラー(アクセス過多)が生じた
- 12. エラー文を読む上で覚えておきたい英単語
- 13. 【自動化】麻雀の成績管理シートを作成したので公開する
- 14. Softbank光のBBフォンの通話料を計算するツールを作った
- 15. Google Colaboratoryで外付けカメラを使う
- 16. flow field でコードを書こう
- 17. 自動運転シミュレーション その4
- 18. JavaScript基礎学習②文法
- 19. 000webhostのサブドメインを確認
- 20. 自動運転シミュレーション その3
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 パッケージをプロジェクトに追加します。
“`yaml
dependencies:
flutter:
sdk: flutter
in_app_webview: ^5.7.2+3 # 最新のバージョンを使用してください
“`https://pub.dev/packages/flutter_inappwebview
ターミナルを開いてプロジェクト内でflutter pub getでパッケージをインストールして下さい。
### 【サンプルコード】
以下は、addJavaScriptHandler を使用した簡単な例です。
“`webViewPage.dart
【vue.js】使ったリアルタイムなテーブル更新：行の追加編
こんにちは。今回は、vue.jsについて初心者エンジニアに向けて、リアルタイムなテーブル更新の行の追加編について解説します。
## リアルタイムなデータ更新とテーブル表示の関連付け
リアルタイムなデータ更新とテーブル表示を関連付けるためには、vue.jsのデータバインディング機能を活用します。データバインディングを使用することで、データの変更をリアルタイムに反映できます。以下は、データバインディングを使ったテーブル表示の例です。
“`html
{{ row.name }} {{ row.age }} {{ row.email }}
```- HTMLファイルにJavaScriptファイルを読み込む方法
※こちらの方が一般的！
```
```- 'use strict'について
```
'use strict';
```ブラウザにはJavaScriptを「古いもので実行するモード」「新しいもので実行するモード」がある。
新しいもので実行するモードをストリクトモードといい、ストリクトモードを実行
000webhostのサブドメインを確認
See the Pen
Check 000webhost subdomain by John Doe (@04)
on CodePen.