- 1. 【React】アロー関数内で波括弧の省略どころがわからずハマった
- 2. ExpressにstaticなReactアプリを配置する方法 (改)
- 3. FileMakerでQRコード（jquery.qrcode.min.js）を生成し画像保存してみたい。
- 4. ボタン一つで感動を！簡単紙吹雪アニメーションの作り方🎉
- 5. thisの挙動のイメージ
- 6. jsdom の HTMLDialogElement APIの対応状況について
- 7. Three.jsの基礎（マウスイベント）
- 8. JavaScript とは
- 9. p5.jsをVue3のコンポーネントにする
- 10. JavaScriptでふりがなのルビを削除する方法
- 11. CORSってなぁに?
- 12. Azure WebAppsでのNode.jsのバージョンを上げる
- 13. Firestoreにて特定フィールドが存在しないレコードの抽出
- 14. 純粋関数(参照透過性, 副作用)
- 15. 【React】jsxファイルでPropsを定義したら"missing in props validation"のエラーが出た。
- 16. 【Rails】選択画像のプレビューを動的に表示させる
- 17. 【JavaScript】しりとりコードでFizzBuzz
- 18. GoでReactをSSRする
- 19. GASで呪術廻戦のキャラクターからメッセージが送られる、自動メール送信スクリプトを作ってみた。
- 20. HTML/CSSとJavaScriptは楽しかった話
【React】アロー関数内で波括弧の省略どころがわからずハマった
アロー関数で処理部分が複数行になる場合は必ず波括弧を使用するものと認識していたのだが、なぜ関数①が動作するのかわからず試行錯誤した。
まず関数2に関してはそもそも波括弧を使用する場合は`return`を記述するという、基礎的な部分が抜け落ちていたことが原因であった。
また関数①でなぜ波括弧を省略できるのかについては、アロー関数自体が**式**であるためであった。式内部での処理が何行でも単一の式であることに変わりはないので、波括弧を省略できた。
参考：[Reactにおける波括弧の省略に関して](https://teratail.com/questions/0yd3m9sogry0kj)
“`App.js
// 関数①
setTodos((prevTodos) =>
prevTodos.map((todo) =>
todo.id === id ? { …todo, completed: !todo.completed } : todo
)
);// 関数②
// エラー：Expected an assignment or function call and
ExpressにstaticなReactアプリを配置する方法 (改)
# はじめに
先日作った[Expressアプリ](https://threed-scatter-app.onrender.com/)の改造です。https://qiita.com/yo16/items/e3ef757a1f5ea6548e18
このときの課題として、Reactアプリを、サーバーアプリのpublicの直下に置く方法しかわからなかったのですが、フォルダを掘れたのでその内容です。
上の記事では、②-3のあたりの話。## 最終系
`public/scatter-app-build` 以下に、丸っとコピーしています。# routes/index.jsだけの話
“`javascript:routes/index.js
router.get(‘/’, function(req, res, next) {
// res.sen
FileMakerでQRコード（jquery.qrcode.min.js）を生成し画像保存してみたい。
# WebビューアからJavaScript実行使って便利にしてみよう。
JavaScript実行スクリプトを使ったサンプルを作ってみました。
是非ともベストプラクティスにしてください。# FileMakerでQRコード生成。
今回は、そこそこ※ニーズがあるだろうQRコードのWebビューアで生成をしていきたいと思います。
（※個人的な主観です。）今回はFileMakerというよりはJavaScript等々がメインになってしまいます…
私はFileMakerしかできないので、JavaScriptの書き方等々拙い文章で恐れ入りますが、ご参考になれば幸いです。### 早速本題へ行ってみよう
今回は、jquery-qrcodeというjQueryライブラリを使います。https://github.com/jeromeetienne/jquery-qrcode
exampleをみると、説明が書いてあります。
早速、FileMakeで使えるように実装します。とは言え、何か例にしたい。
という事で下記を参照しました。https://o
ボタン一つで感動を！簡単紙吹雪アニメーションの作り方🎉
本記事では、ボタンクリックなどのアクションをきっかけに、画面上に紙吹雪を降らせる方法について紹介します。
今個人的に作っているシステムで、ボタンを押したときに何か動きをつけたいと考えたのがきっかけで、どうやったら実現ができるのかをいろいろ調べてみました。
CSSを使ってイチから作る方法もある様ですが、本記事ではメンテナンス性についても考慮し、canvas confettiというライブラリを利用することにしました。
https://github.com/catdad/canvas-confetti
本記事で紹介している紙吹雪の実際の動きは、以下のURLから確認することができます。ソースコードもgithubで公開していますので、ご確認ください
実際の画面
https://yo-nagase.github.io/react-conffeti-public/ソースコード（Github）
https://github.com/yo-nagase/react-conffeti-public## 小さめの紙吹雪
まずはボタンを押したときのアクションとしていくつか作ってみまし
thisの挙動のイメージ
JavaScriptのコンストラクタ関数で使用されるthisについて、関数の定義方法やメソッドの呼び出し方法でthisの値が変わります。thisの挙動を理解するのが難しかったため、イメージを掴めるようにしました。そのため、ここで記載するthisの挙動は厳密なものではなく、あくまでイメージをつかむためのものなので、実際の挙動と異なる部分があるかと思いますがご了承ください。
## thisの値の定義方法
まず重要なのが、アロー関数の場合とそれ以外の関数定義によってthisの値の定義方法が異なることです。アロー関数はES2015から導入された関数定義方法なので、アロー関数だけ挙動が異なると覚えておけば大丈夫です。
– 関数宣言文と関数リテラル：そのメソッドが**実行された時点**で所属しているオブジェクト
– アロー関数：アロー関数が**定義された時点**で所属しているオブジェクト文章だとわかりづらいですが、スコープチェーンのような挙動です。スコープチェーンを理解すればthisの挙動が理解しやすくなります。
## スコープチェーン
スコープチェーンとは、変数をブロックの一番内側か
jsdom の HTMLDialogElement APIの対応状況について
# 結論
showModalは対応していますが、close,showは対応していないと思われます。
showModalが使える理由が不明です。showModalも使えなかったです、という方いらっしゃいましたら教えて頂けますとありがたいです。。
# 1. 背景
“`
jest-environment-jsdom version:29.5.0
|- jsdom version: 20.0.3
“`showModal()は使用できてclose()は使用できないので状況を一旦整理しようと思った為です。
“`ts
const dialogElm = document.querySelector(‘dialog’);
dialogElm.close();
// TypeError: dialogElm.close is not a function
“`# 2. jsdomのissue
jsdom version: 18.1.0
https://github.com/jsdom/jsdom/issues/3294
show,s
Three.jsの基礎（マウスイベント）
# はじめに
こんにちは！Three.jsについて学び始めた初心者です。
Three.jsは、ブラウザ上で3Dモデルの描画や操作等を可能にするJavaScriptライブラリです。
本記事では、Three.jsの基礎の1つとして、マウスイベントの基本的な使い方を記載します。# 単純な立方体を描画するソースコード
以降の内容については、下記のコードをベースに使用しています（立方体を表示するだけの簡単なコード）。“`html
Three.js test
```
jsファイルを作成し、コードを書いていきます。
JavaScriptは、console.log~で出力することができます。
```:hello.js
console.log('文字列');
```出力結果を確認する方法は以下の通りです。
Webブラウザでin
p5.jsをVue3のコンポーネントにする
こんにちは｜こんばんは。カエルのアイコンで活動しております @kyamaz :frog: です。
本稿は、少し前に寄稿されている@shibuya01055さんのエントリ『[Vue3 Composition API + TypeScriptでp5.jsを動かす](https://qiita.com/shibuya01055/items/c2c7794140f7b517e214)』を参考[^1]に、p5.jsをVue3のコンポーネントで扱うための手順を取り上げます。
かなり類似のエントリになりますが、複数の手順を参考にしながら本稿にまとめてみました。## Vue 3 + TypeScript + Vite の環境を整える
はじめに、プロジェクト名を`p4vue`（お好きな名前でよいです）として[Vue 3 + TypeScript + Vite + Jest](https://github.com/imomaliev/vue-ts)の環境をまず整えます。```shell
% npm init vite@latest p5vue -- --template vue-tsScaf
JavaScriptでふりがなのルビを削除する方法
以下をブラウザのコンソールに貼り付けるだけです。
```JavaScript
const rubyElements = document.querySelectorAll('ruby');
rubyElements.forEach((rubyElement) => {
const rtElement = rubyElement.querySelector('rt');
if (rtElement) {
rtElement.textContent = ''; // rt要素の中身を削除
}
});```
CORSってなぁに?
# 本記事の目的
本記事では、CORSについてザックリ理解することを目的としています。
CORSの必要性がわからない、初めてCORSという単語を見たという方は、本記事で理解を深めていただければ幸いです。
サンプルコードには、React、Expressなどを使用していますが、これらの技術を知らなくてもCORSの理解ができるように説明しています。# CORSとは
まず、簡潔にCORSを説明すると**異なるオリジン間でデータを共有する仕組み**のことです。
では、オリジンとは何でしょうか?## オリジンとは
オリジンとは、**実行したアプリのベースとなるURL**です。
例えば、プラットフォームによって以下のような初期オリジンが設定されます。
(※プラットフォームとは、アプリを実行する環境のことです)| プラットフォーム | オリジン |
| - | - |
| ローカル環境 | http:\//localhost.30
Azure WebAppsでのNode.jsのバージョンを上げる
Azure WebAppsにアプリケーションデプロイしてると無限に見る以下のエラー。バージョンアップ時におきました。
> 🙁 Application Error
> If you are the application administrator, you can access the diagnostic resources.> 
Node.jsのバージョンを上げたいなと思ってpackage.jsonの指定を上げたところ発生しました。
GitHub Actions経由でWebAppsにデプロイしているアプリケーションですが、GitHub Actionsでの指定では関係ないみたいですね。
## ログストームで確認
Firestoreにて特定フィールドが存在しないレコードの抽出
ひと昔前まではDBを構築するのはお金もかかるしなかなか大変だったのですが、最近はGoogleのFirebaseを使えば無料で簡単にDBを構築できるので世の中の流れについていくのも大変です。
とはいえ、実際の業務で使用する場合もあり、覚えておくに越したことはありません。
そんなわけで、現在では業務で普通に使ってるし、フロントエンドだけでなくFunctionsを使用したバッチ処理も組んだりしている状況だったりします。
Firestoreで生成したコレクションに対してレコードを追加する際、全レコード必ず同じフィールドが存在しなくても特にエラーになったりはしません。
（仕様上まずいパターンは勿論存在しますが。）前段が長くなりましたが。
先程記載した通り、全レコードのフィールドが統一されていなくても動く分、逆にとあるフィールドが無いレコードを見つけるのはどうしたら良いかということを調べてみました。[公式より](https://firebase.google.com/docs/firestore/query-data/queries?hl=ja)
演算子で良いものがあればいいのですが無く
純粋関数(参照透過性, 副作用)
## 参照透過性
同じ入力は常に同じ出力であること
特に関数において引数が同じなら常に同じ返り値になる特性を指すことが多い
`参照`が`透過`とは参照の状態に透明性がある。つまり参照を意識する必要がない状態を意味する下記は参照透過性がある
```ts
// 引数x, yがそれぞれ1, 2なら常に返り値は3になる
function func(x, y) {
reutnr a + y;
}
```下記は参照透過性がない
```ts
let x = 0;// 変数xの状態は関数実行時までに変わっている可能性がある → 参照に透明性がない
function func1() {
x++;
return x;
}// 下記は実行時刻によって返却値が異なる → 参照に透過性がない
function func2() {
const data = new Data();
return data;
}
```## 副作用
ある関数の実行によって関数外部の状態が変更されること
```ts
// 下記関数は副作用がない
function func(x, y) {
r
【React】jsxファイルでPropsを定義したら"missing in props validation"のエラーが出た。
# はじめに
フロントエンドに興味を持ち、JavaScript×Reactで簡易的なサイトを作成中です。
今回解決に苦しめられたエラーについて書いていきます。
# 問題
jsxファイルでPropsを定義したら"missing in props validation"のエラーが出てしまいました。
コードの中身を確認しましたが、特に問題は無いようでした。
なお、使用しているReactのバージョンは18.2.0です。
# 解決方法
どうやら**React自体で起きているバグ**みたいです。
今回JavaScriptを使用しているにも関わらず、TypeScriptにおけるpropsの型定義のルールが適用されてしまっていました。
従って、eslintrc.jsonの"rules"に下記を追加してこの**ルールを無効化**しました。
```json:eslintrc.json/
"rules": {
"react/react-in-jsx-scope": "off",
"react/prop-types": "off"
}
```# おわりに
React初学者の身からすると
【Rails】選択画像のプレビューを動的に表示させる
画像のプレビュー機能をシンプルに書きたいと思い、JavaScriptのFileReaderで実装しました。メモとして残します。
# やりたいこと
1. input tyupe="file"の`ファイルを選択`ボタンをクリックして画像ファイルを選択する。
1. プレビュー枠の画像が選択した画像に置きかわる。# 実装環境
- Ruby on Rails
- Slim
- Carrier wave
- JavaScript# 実装コード
必要なコードのみ抜粋します。```slim
/ form_withのコードの一部
label
= form.file_field :image, class: 'd-none', onchange: "previewImage(this, 'previewImageField')"
span.btn.btn-secondary ファイルを選択
= form.hidden_field :image_cache
/ プレビュー枠
- if hoge.image.present?
= image_t
【JavaScript】しりとりコードでFizzBuzz
## ルール
* コード内のアルファベットの文字列同士がしりとりのように繋がっていること。
* コメントアウトの使用禁止（※）
* 文字列のみの使用禁止（※）
* 小文字大文字はしりとりのときに区別しない。※ こういうことをされると一気に難度が下がるため
```js
ab = 0;
// bc
cd = 0;
"de";
ef = 0;
```## コード
```js
el = "log";
gf = -1;
fb = "", bf = -1, fbr = 0, rf = "";
for (r = 1; r <= 100; r++) { r % 3 === 0 ? rf = "Fizz" : zr = -1; r % 5 === 0 ? rf += fb + "Buzz" : zr = -1; rf === "" ? fr = rf = fbr + r : rc = -1; console[el](lr = rf); fr = -1; rf = ""; } ``` ```text:しりとり el → log → gf
GoでReactをSSRする
## 概要
GoでReactをSSRできそうだったので試してみました。
下記が動作の様子と実施のコードです。
https://github.com/K-Sato1995/go-ssr-poc
やっている間に良い感じに実現されている下記のプロジェクトも見つけました。
私の現状のPOCだと実現できないことが色々実現されててすごいなと思いました。https://github.com/natewong1313/go-react-ssr
## やりたい事
- Go環境でReactの[renderToString](https://react.dev/reference/react-dom/server/renderToString)でSSRを行う
- 実行結果をブラウザに渡す
- ブラウザでReactの[hydrateRoot](https://react.dev/reference/react-dom/client/hyd
GASで呪術廻戦のキャラクターからメッセージが送られる、自動メール送信スクリプトを作ってみた。
## はじめに
今週、知り合いの方からスプレッドシートで選択した行のみ自動でメール送信するスクリプトを作成してみて欲しいと依頼がありました。そこで初めてGAS(Google Apps Script)を使用したので、その中で学んだことを書いていきたいと思います。## GASとは？
Google Apps Scriptの略です。Googleが提供する様々なサービス（スプレッドシート、カレンダー等）で扱うことができて、自動化や機能の拡張を行うことができます。javascriptベースで作られているので、独自の関数等ありますが、書き方としてはほぼ同じように書くことができます。（違ってたらすみません）
イメージとしてはサーバ上で動くjajavascriptといったところでしょうか。
javascriptは最近学んでいる言語だったので、学んだことを活かしたり、復習にもなり楽しく作成できました。詳しくは公式ページを見てください。
https://developers.google.com/apps-script?hl=ja
## 呪術廻戦キャラ自動メール送信
HTML/CSSとJavaScriptは楽しかった話
## 1.初めに
今週は主にフロントエンドの領域の勉強をしていたので、フロントエンドを学習していて楽しかったことや思ったことなどを発信していきます。## 2.楽しかったこと
フロントエンドを学習していて楽しかったことは、自分の書いたコードがリアルタイムで更新されWebサイトになっていったところです。バックエンド側の勉強をしているときは一通り書き終わってから、エラーなどを攻略して、ようやく動いて完成だ！みたいな感じだったのが、フロントエンドになって製作過程が直にみられるようになるので、だんだん作り上げていっている感が自分はすごく好きです。## 3.逆に苦労したこと
苦労したことは、CSSをいじっているときに思い通りの配置に全然ならないことです。HTML/CSSを触ったことがある人は、みんな共感してくれるんじゃないかなというぐらいには、全然思い通りに動きませんでした。それで試行錯誤しながらコードを増やしていくと「前書いたこれ要らなくね？」という感じになるんですよね。なのでいずれは、コードをなるべく増やさず、必要なものだけを書いていけるように頑張りたいと思います！！## 4.最後
