- 1. [備忘録]JavaScriptのオブジェクトの参照渡しについて
- 2. JavaScriptによりブラウザで読み上げする (WEB SPEECH API)
- 3. 【vue.js】フォームのファイルをBase64エンコードした文字列としてAPIに送信する
- 4. Node.jsでのloggerでWinstonを選択した
- 5. JavaScript console メモ
- 6. 三項演算子
- 7. Array.prototype.forEach()を復習する
- 8. 【2024年】ITエンジニア本大賞まとめ
- 9. 超簡単な一年の成長記録
- 10. 人生初のチーム開発。。。Best Award受賞！
- 11. p5.js のフィルター用シェーダー「createFilterShader()」で WebGL 2.0（GLSL ES 3.0）を使う ＋ 色・座標情報に関わる書き方を WebGL 2.0対応にする
- 12. TypeScriptでメソッドチェーンを使って与えた文字列や数値を次々に変換する方法
- 13. Raw JavaScript と HTMX で同じ機能を作って比較してみた
- 14. 【JavaScript】JavaScript ライジングスター 2023
- 15. HTMLにTypeScriptを書いてブラウザで直接実行できるって知ってた？
- 16. LlamaIndex,ローカルで日本語で独自項目を業務アプリからAI回答させる
- 17. Cloudflare WorkersでLINE Botに送った写真や動画をR2にアップロード
- 18. Javascriptでアナログ時計
- 19. 【配列】次元数の意味
- 20. Node.jsからCloudflare R2に動画ファイルをアップロードしてみるメモ
[備忘録]JavaScriptのオブジェクトの参照渡しについて
## JavaScriptの参照渡しについて
少ししたら忘れてしまいそうなので、忘れないうちに自分なりにまとめておきます。JS初心者にとって少し混乱する内容だと思います。頑張って理解しましょう！## コードで説明
memoryは環境変数として宣言しているとします。これはメモリ内を模したオブジェクトだと思ってくれて大丈夫です。
“`js
let a = [1, 2, 3, 4, 5]; // memory[a] = [1, 2, 3, 4, 5]/**
* memory
* {
* a: [1, 2, 3, 4, 5],
* b: null,
* c: null,
* d: null
* }
*/const b = a; // memory[b] = memory[a] ここで座標を渡す。値はコピーされない。
/**
* この時点でのmemoryの構造
* memory
* {
* a: [1, 2, 3, 4, 5],
* b: memory[a],
* c:
JavaScriptによりブラウザで読み上げする (WEB SPEECH API)
## 1. やりたいこと
ウェブページで文章を読み上げたい
## 2. 実現方法
JavaScriptからWEB SPEECH APIを使うと大抵のブラウザで読み上げが可能です
https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis## 3. ブラウザが対応しているか確認する
ブラウザごとの対応状況は以下から確認できます
https://caniuse.com/speech-synthesis実行中のJavaScriptからだと以下のように確認できるようです
“`html:index.html
“`## 4. 読み上げる
JavaScriptで以下を実行すると読み上げてくれます
“`jav
【vue.js】フォームのファイルをBase64エンコードした文字列としてAPIに送信する
[FileReader.readAsDataURL()](https://developer.mozilla.org/ja/docs/Web/API/FileReader/readAsDataURL) を利用する。
※ readAsDataURL()でbase64エンコードされた文字列は先頭に `data:*/*;base64,` という文字列が付加されるので、base64文字列のみを取得したい場合はこの接頭辞を削除しなければならない。“`vue
Node.jsでのloggerでWinstonを選択した
Node.jsの開発において、適切なロギングツールを選ぶために調査したことをまとめたいと思います。。
この記事では、Node.jsのロギングにWinstonを選んだ理由と、他の人気のあるロギングライブラリとの比較を紹介します。## なぜWinstonを選ぶのか？
WinstonはNode.jsの中で最も人気のあるロギングライブラリの一つです。
私は以下の理由でWinstonを選択しました。
1. **アクセス毎のロググルーピング**
Winstonを使うと、アクセス毎にログをグループ化し、整理しやすくすることができます。
2. **ログの構造化**
ログの内容を構造化し、後で分析や管理がしやすくなります。
3. **将来の拡張性**
Winstonには、将来的にAmazon S3などのストレージサービスへログを転送するためのモジュールが用意されています。さらに、Winstonは多くのリファレンスや記事があり、実績も豊富です。
そのため、多くの場合でWinston以外を選ぶ理由は少ないと言えます。## 他のロギングライブラリとの比較
No
JavaScript console メモ
console.log(log);
変数の中身を見る
%cで指定した部分にスタイルをつける事も出来る
console.log(“%c エラー” , ”color: red; “);
console.table(table);
表形式で変数の中身を見る
console.dir(element)
DOMの詳細を表示する
console.trace(“中身”);
関数の呼ばれた場所までの経路を表示する
console.warn(“警告”)
コンソール上で黄色の文字で警告文を表示する
console.error(“エラー”)
コンソール上で赤色の文字でエラーメッセージを表示する
console.count()
実行回数を表示する
console.time(“時間”);
for (i = 0; i < 100000; i++) {} console.timeEnd(“時間”); コードの実行にかかった時間を表示する
console.clear()
コンソールがクリアされてConsole was clearedと言う三項演算子
# はじめに
新入社員教育でウェブ開発について学習しています。
今回はWEBページ作成中に混乱した、
演算子の種類や三項演算子についてまとめました。# 演算子とは
:::note
「1つ以上の値」から、（計算などの操作をして）「別の値」を生み出すもの
:::
四則演算をする際に使用する`+（足す）` `-（引く）` `*（掛ける）` `/（割る）`などが演算子にあたります。
“`js
$num = 4 + 7
“`
`+`と`=`を使って、4・7という1つ以上の値を受け取り、11という別の値を生み出しています。### オペレーター・オペランド
:::note
演算子をオペレーター、演算の対象となる値や変数のことをオペランドという
:::Array.prototype.forEach()を復習する
さて、今日も配列のprototypeを勉強していきます。
今回は forEachです！さっそく[MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)を見ていきます。—
> forEach() メソッドは、与えられた関数を、配列の各要素に対して一度ずつ実行します。
“`js
// 公式から抜粋
const array1 = [‘a’, ‘b’, ‘c’];
array1.forEach((element) => console.log(element));
“`結構シンプルですね、配列に対して1つづつ何かをしたい場合はforEach()のようです。
(ちょっとmap()と似ている印象です）
ひとまず読み進めます。## 引数
引数は2つ受け取れます。
– callbackFn
– thisの値“`js
[1, 2, 3].forEach(function(val, index, array) {【2024年】ITエンジニア本大賞まとめ
# [アジャイルプラクティスガイドブック チームで成果を出すための開発技術の実践知](https://amzn.to/3HA29NY)
[](https://amzn.to/3HA29NY)
**チーム・組織にプラクティスを導入し、根付かせるために！
116の手法を一冊にまとめた“実践”の手引き**チームでのアジャイル開発には、開発技術やツールなどの「技術プラクティス」の活用が重要です。
プラクティスはそれぞれの目的や役割を意識することで効果を発揮します。しかし、目まぐるしく状況が変化する開発では、当初の目的を忘れて、プラクティスに取り組むこと自体が目的化してしまうチームも少なくありません。
本書は、チーム・組織でアジャイル開発に取り組んできた著者が、プラクティスの効果的な選択・活用のしかたについて、自らの実践経験に基づいてまとめたガイドブックです。
架空の開発現場を舞台にしたマン
超簡単な一年の成長記録
# 自己紹介など
学部3年のchipsです。主にフロントエンドを学習しており、現在Webエンジニアを目指して就活中です。たまたま同じアプリを一年振りに作成したので、一年の成長でも簡単に見てみようと思います。
ほぼアプリの画面メインで成長を見て行きます。
なぜなら一年前のアプリのコードが見つからないためです。
当時はGitも知らずにデプロイも友人任せだったため残っておらず…。~~（まあHTML、CSSもあまり理解していなかった頃のとんでもコードはお見せできるほどのものではないのでよし。）~~# アプリの概要
私の通う大学にもいわゆる食堂というものがあるのですが、これが結構人気なわけです。
さらに小規模な大学のため食堂が学内に一つしかありません。~~（二つ三つある大学が羨ましい。）~~なので、遅れていくと「もう素うどんしか残ってへんやんけ」や「なんやねん、メニュー売り切れでビンゴ達成してるやんけ」という事態が発生することも少なくありません。こうなると皆さんはどうしますかね？
**そうですよね、別のお店に買いに行ったり、食べに行ったりしますよね。**
しかし、この食堂
人生初のチーム開発。。。Best Award受賞！
# 目次
[1.はじめに](#1-はじめに)
[2.チーム開発概要](#2-チーム開発概要)
[3.メンバー構成](#3-メンバー構成)
[4.初チームMTG](#4-初チームMTG)
[5.課題の明確化](#5-課題の明確化)
[6.要件定義](#6-要件定義)
[7.インセプションデッキ](#7-インセプションデッキ)
[8.スライド作成、設計、アーキテクチャの明確化](#7-スライド作成、設計、アーキテクチャの明確化)
[9.ワイヤーフレームの作成](#9-ワイヤーフレームの作成)
[10.データベース](#10-データベース)
[11.環境構築](#11-環境構築)
[12.タスクばらし](#12-タスクばらし)
[13.実装](#13-実装)
[14.振り返り](#14-振り返り)
[15.おわりに](#15-おわりに)## 1. はじめに
私は、内定直結のエンジニア実習『アプレンティスシップ』に参加しています。
2023年3月から独学でプログラミングを学び始め、チーム開発や実務を経験したいという課題をもっていました。そのときにたまたまアプレンティスシップを知り、山浦さp5.js のフィルター用シェーダー「createFilterShader()」で WebGL 2.0（GLSL ES 3.0）を使う ＋ 色・座標情報に関わる書き方を WebGL 2.0対応にする
以下の記事でふれた、p5.js で WebGL 2.0（GLSL ES 3.0）を使う話の続きです。
– [p5.js でのシェーダーを使った描画に WebGL 2.0（GLSL ES 3.0）を使う – Qiita](https://qiita.com/youtoy/items/af009f7401fd3ce861dd)
最近、自分が多用していて、そして以下の記事や作品を作成する時にも登場していた「createFilterShader()」も関連する内容を記事にしてみます。
– createFilterShader() 関連
– [p5.js の createFilterShader() を使ったフィルター用シェーダーのお試し – Qiita]( https://qiita.com/youtoy/items/1083d6319ddab6d525d3)
– [p5.js のフィルター用シェーダー「createFilterShader()」で座標情報を使った着色のお試し – Qiita](https://qiita.com/youtoy/items/b06e65d20aTypeScriptでメソッドチェーンを使って与えた文字列や数値を次々に変換する方法
こちらの記事のコードを少し変えて、ジェネリクス型を使って汎用的に[値を変換する関数]を引数にとるメソッドを用いてメソッドチェーンを実現する方法を考えました
https://qiita.com/takahasinaoki/items/f0106aab067a1bb20124
“`typescript
class Manipulator{
public value: T;constructor(input: T) {
this.value = input;
}changeValue(fn: (value: T) => T): this {
this.value = fn(this.value);
return this;
}
}
“`実行例
“`typescript
class Manipulator{
public value: T;constructor(input: T) {
this.value = input;
}changeValue(fn: (value:
Raw JavaScript と HTMX で同じ機能を作って比較してみた
# はじめに
Raw JavaScript を書くのはツラいけど、Reactなどを必要とするほどのリッチなUIを作りたいわけでないため、モノリシックなアーキテクチャで楽にJSを使いたい。そのような場合の選択肢として、HTMXというものがあることを最近知りました。少し前ですが、DjangoCon Europe 2022 でそのような事例紹介の発表がありました。
実際に、DjangoでHTMXを使ってみたいと思います。
# 1. ボタンを押したら、メッセージを表示する
まずは、次の画像のように、ボタンがクリックされたら、Ajaxを利用してメッセージを取得し、画面に表示される機能を作ってみます。
](https://risingstars.js.org/2023/en)
[2023](https://qiita.com/rana_kualu/items/ce708e90c77456944840) / [2022](https://qiita.com/rana_kualu/items/627411dcb086669e5902) / [2021](https://qiita.com/rana_kualu/items/b23a1bccae742bd031ef) / [2020](https://qiita.com/rana_kualu/items/e8a0f8f5589ff082539d)
JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2023年に最もホットであったJavaScriptライブラリのランキングを発表
HTMLにTypeScriptを書いてブラウザで直接実行できるって知ってた？
# 百聞は一見に如かず
空のHTMLファイルにコピペしてウェブブラウザで開いてみてください。“`html:ts.html