- 0.0.1. オブジェクトをlocalStorageに保存する方法
- 0.0.2. HERE 地図 地理空間情報を活用した デモ サイト まとめ
- 0.0.3. Leetcode easy: 412. Fizz Buzz(JavaScript)
- 0.0.4. ブラウザからカメラを起動して録画，サーバにアップロードするまで
- 0.0.5. jsからaxiosを用いて画像データを送ってFlaskで受け取ろうとしたら「400 BAD REQUEST」が出た話
- 0.0.6. コードを短く書く小技
- 0.0.7. LINEでミニ神経衰弱を作った【GAS✖️スプレッドシート 】
- 0.0.8. debounceの理解
- 0.0.9. JavaScriptのObjectについて
- 0.0.10. 配列を連想配列に変換する (JavaScript)
- 0.0.11. LWCで電子署名ごっこ(お絵描き)しよう
- 0.0.12. 【JavaScript】サイズ・座標 取得 〜 実践編 ＜ツールチップの実装＞ 〜
- 0.0.13. 【Rails6.1.6】「日記投稿機能」にGoogle Mapsを実装する（投稿確認画面 付）
- 0.0.14. 【Javascript】Javascriptのfetchの仕様の注意点
- 0.0.15. SolidJS 使い始めてなんにでも取り入れたい脳の所感
- 0.0.16. ブラウザゲームを作ってみよう(その10:サンプルゲーム作成その3)
- 0.0.17. wikiを読むのが憂鬱だったのでヒソカに読んでもらった
- 0.0.18. RxJS Observableの流れ
- 1. Observableの作成流れ
オブジェクトをlocalStorageに保存する方法
はいさい！ちゅらデータぬオースティンやいびーん。月曜日、にりーよね。
# 概要
`Window.localStorage`にオブジェクトを保存する方法を紹介します。## 背景
Window.localStorageにJavaScriptのオブジェクトを丸ごと保存したいことがありますが、その時に以下のようなコードを実行してみますと、
“`javascript
window.localStorage.setItem(“chura”, { data: “ちゅらデータ” })window.localStorage.getItem(“chura”) // ‘[object Object]’
“`
ご予想の通り、`'[object Object]’`が返ってきます！アキサミヨー。実は、`Window.localStorage.setItem`は、数字、文字列、オブジェクト、何もかも`UTF-16`に変換した上で、`W
HERE 地図 地理空間情報を活用した デモ サイト まとめ
# はじめに
HERE https://www.here.com/jp/ は、位置情報テクノロジープラットフォーム企業として、創業以来35年以上、世界中の企業やデベロッパーと位置情報に関する課題解決に取り組んでます。
– 参考Demoリンク- https://www.geospatial.jp/ckan/dataset/here/resource/0ff9aa16-0453-4870-a4f1-d383e417953f開発者向けに試していただける、Demoサイトを提供しているのですが、日本語による案内がないため国内であまり知られておらず、、、代表的なデモサイトをご紹介させていただきます。
多くの皆さんに活用いただけると幸いです！
### 紹介するデモサイト
1. Commuter Carbon Calculator
https://app.developer.here.com/calculate-your-co2-footprint/
2. Electric Vehicles Range map
https://app.developer.here.com/co
Leetcode easy: 412. Fizz Buzz(JavaScript)
[Leetcode](https://leetcode.com/)を始めたので記録しています。
## やった問題
https://leetcode.com/problems/fizz-buzz/>Given an integer n, return a string array answer (1-indexed) where:
answer[i] == “FizzBuzz” if i is divisible by 3 and 5.
answer[i] == “Fizz” if i is divisible by 3.
answer[i] == “Buzz” if i is divisible by 5.
answer[i] == i (as a string) if none of the above conditions are true.## 処理の流れをざっくり考える
* 3で割り切れる
* 5で割り切れる => “FizzBuzz”
* 割り切れない => “Fizz”
* 5で割り切れる => “Buzz”
* 割り切れない => return
ブラウザからカメラを起動して録画，サーバにアップロードするまで
# やること
1. ブラウザからカメラを起動する
2. 起動したカメラを使って録画する．
3. 録画したデータをサーバにアップロードする# 動作環境
– ブラウザ: Firefox(推奨), IE以外
– サーバ: Node.js / Express.js# 本編
ここから実装に入ります．
## ブラウザ
### カメラ・マイクの使用
[MediaDevices.getUserMedia()](https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia)を使います．:::note warn
ただし，[安全でない環境では動作しません](https://developer.mozilla.org/ja/docs/Web/Security/Secure_Contexts)(undefinedになってたはず)
OK: https://, file:///
NG: http://
:::カメラを起動するには，jsファイルに以下を記述します．
“` main.js//オプションみた
jsからaxiosを用いて画像データを送ってFlaskで受け取ろうとしたら「400 BAD REQUEST」が出た話
# ざっくりまとめ
##### jsからaxiosを用いたPOSTリクエストでBASE64形式の画像データを’multipart/form-data’として送ってFlaskで受け取ろうとしました。
##### しかし、 400 BAD REQUESTが出ました。
##### 「BASE64をバイナリ形式経由でfile形式にすること」と「送るデータのnameと受け取るデータのnameを一致させること」をして解決しました。# 目次
0. はじめに
1. やろうとしたこと
2. コード
3. 今回詰まったエラー
4. 思考
5. 参考にさせていただいたサイト# 1. はじめに
エラーで詰まったときは備忘録として記事に残しておこう、ということで第一弾です(第一弾で終わりそう。。。)。先日、ハッカソンに参加してきまして、今回はその時に詰まったエラーについて書いていきます。
(ちなみに今回jsとかaxiosとかNext.jsとか諸々初めて触れたので、内容に間違いがあったら優しく教えて欲しいです。)先に結論を言ってしまうと、簡単なミスでした()
# 2. やろうとしたこと
フロ
コードを短く書く小技
指定の文字列かどうかを判定したい
“`javascript
const color = ‘red’;// before
console.log(color === ‘yellow’ || color === ‘red’ || color === ‘blue’);
// after
console.log([‘yellow’, ‘red’, ‘blue’].includes(color));
“`引数の値に紐づく値を取得したい
“`javascript
// before
const translate = colorName => {
switch(colorName) {
case ‘red’:
return ‘赤’;
case ‘blue’:
return ‘青’;
case ‘yellow’:
return ‘黄’;
default:
return ‘翻訳不可’;
}
}// after
const translate = colorName => ({
‘red’: ‘
LINEでミニ神経衰弱を作った【GAS✖️スプレッドシート 】
# はじめに
[リッチメニューエディター](https://richmenu.app.e-chan.me/)を使えば、ボタンの数も形も関係なくリッチメニューが作成できることを知り、トランプゲームはできないかと思いつきました。みんなcanvacanva言うから・・・
使いこなしたいけど宝のもちぐされ感半端ないです笑#protoout pic.twitter.com/O5Nvyza2q6— yi-ped (@ped_yi) July 16, 2022
# 使用したもの
スプレッドシート
Google Apps Script
LINE messaging API【ルール（通常の神経衰弱と同じ）】
1) めくるトランプを選ぶ（リッチメニューをタップ）
2) 2枚選び、ペアであれば「１ペア！」違えば「残念」と返ってくる
3) 2枚同じトランプは選べない
4) 既にペアになったトランプを選ぶと「既に選んだカード」と返ってくる
5) 全ペア（ここでは６ペア）作れたらクリア！ランキングに登録すると順位が返ってくる
6) 「ゲームを初めからやる」を押すとカードがシャッフルされる# 準備
– スプレッドシートの作成→中に”common”, “user”, “prize”の３シートを準備
[Diving Deeper in JavaScripts Objects](https://blog.bitsrc.io/diving-deeper-in-javascripts-objects-318b1e13dc12)
[Property getters and setters – javaScript.info](https://javascript.info/property-accessors)
[Property attributes: an introduction – Deep JavaScript](https://exploringjs.com/deep-js/
配列を連想配列に変換する (JavaScript)
## 概要
キーとなるプロパティを持つオブジェクトの配列を連想配列に変換する場合、`Array.prototype.reduce()`と`Object.defineProperty()`を使って以下のように書ける。“` index.js
const hash = array.reduce((p, c) => Object.defineProperty(p, c.key, { value: c }), {});
“`
補遺：[コメントで頂いた方法がコンパクトなのでそちらも参照](https://qiita.com/kago/items/516cdb53e71d778bf55e#comments)## サンプルコード
配列を連想配列に変換し、キーを使って値を取り出すサンプルコード。“` sample.js
const array = [
{ code: ‘F001’, name: ‘Apple’, price: 250 },
{ code: ‘F002’, name: ‘Banana’, price: 200 },
{ code: ‘F003’, name:
LWCで電子署名ごっこ(お絵描き)しよう
# 背景と本記事の方針
– そんなような業務要件があったので「きついっすねーどこのパッケージ買いましょうね」と受け流してたんですが、個人の趣味の範囲でちょっと書いてみたら動きはしたので、せっかくなので記事にします
– LWC,JavaScript,HTML一般に関する知識/技術は持ち合わせていないのでほぼスルーか参考リンク載せるだけ。素人がググりながらどうにか動くとこまでこぎ着けた過程を記します
– 間違ったこと書いてる、読みづらい等あればコメントください# 忙しい人のための解答
SalesforceLabsがGithub上に「これぞ」という完成品を公開してくれてます感謝感謝感謝
https://github.com/SalesforceLabs/DrawAnnotations# 実装の前提
### 目標
電子署名もどきにお絵描きができるLightningコンポーネントをつくりたい### ライブラリについて
– 素の状態でも十分書けるようだけど、今回は外部ライブラリを使って実現– ライブラリ選定
パッと調べた結果、以下２つがヒット。今回は諸々考慮しfabric.jsを
【JavaScript】サイズ・座標 取得 〜 実践編 ＜ツールチップの実装＞ 〜
# JavaScriptを用いて要素のサイズ、座標を取得してツールチップを実装してみます。
この記事は、下記の記事の続編にあたります。
[【JavaScript】サイズ・座標 取得チートシート(Chrome)](https://qiita.com/sho_U/items/a8234132c8b2248ca01b)## ツールチップの仕様
2種類のボタンがあり、それぞれのボタンの上にマウスカーソルが乗った場合に、上部中央（以下「基本位置」）に、あらかじめ設定しておいたメッセージを出現させます。
ただし、上部にツールチップが収まるスペースがない場合は下部に表示させます。
など他の記事をご覧ください。また、APIキーの取り扱いにはお気をつけください！
※実務未経験
【Javascript】Javascriptのfetchの仕様の注意点
# 初めに
React での開発中に、`fetch`の仕様がわからなくなったのでここに忘備録を残しておきます。
## 環境
– React 18.0.0
– typescript 4.6.3# Fetch API の仕様
## json データの取り出し方
> `Fetch API`の最も簡単な使い方は 1 つの引数 — fetch で取得したいリソースへのパス — のみをとり、 Response オブジェクトで解決するプロミスを返します。Response は、実際の JSON レスポンス本体を直接持っているのではなく、 HTTP レスポンス全体を表現するものです。 Response オブジェクトから JSON の本文の内容を抽出するには、 json() メソッドを使用します。これはレスポンス本文のテキストを JSON として解釈した結果で解決する第 2 のプロミスを返します。
上記のように、`fetch()`は取得した`Response`に対して`json()`メソッドを使用しないと、レスポンスの本体が取得できません。
“`javascript
fetch(URL
SolidJS 使い始めてなんにでも取り入れたい脳の所感
# SolidJS いいよ！
気になった@uhyoさんによるランキング記事。
https://qiita.com/uhyo/items/ff243a5771077aaf4b5b
React脳と自称されてますし、個人的ランキングはそれで良いと思います。
しかしながら、SolidJSの良くないとされたサンプルはReactじゃないんだからさすがに動かないのが当然では？と直感で思ったものだったので、なぜ動かないかをまとめてみました。# 筆者について
大昔はjQueryでSPAサイトを作り、Angularを3,4年ほど使い、転職をきっかけにここ1年くらいReactを使ったところ、Reactのエコシステムの素晴らしさを実感しつつも、生のJS（特にイベント関連）との相性の悪さに嫌気がさしてSolidJSを触りだした（”SolidJS 完全に理解した”）ところ# 何がマズイか
以下コードは[元記事]()からの引用。
“`jsx
function Counter() {
const [count, setCount] = createSignal(0);setInterval
ブラウザゲームを作ってみよう(その10:サンプルゲーム作成その3)
# はじめに
[その9](https://qiita.com/noji505/items/edb878521df9df0902da)ではゲームのメイン部分の作成を行いました。
今回は前回作成したメイン部分を改善してみたいと思います。# 改善ポイントについて
色々あると思うのですが、現状のゲームのルールを変えないという前提で改善するとなると、以下のようなものが考えられると思います。■プレイヤー(雲)の動きが一定速度にしか動かない
■コインの出現タイミングが常に一定
■コインの出現枚数が1枚ずつしか出てこない上記を改善することで、ゲームにメリハリが生まれると思います。
# 改善してみよう
まずは雲の移動処理を変更します。
ソースコードは以下となります。“`javascript:雲の移動処理変更
// 変数宣言
var kumoX;
var kumoY;
var spd; // 移動速度
var spdCount; // 移動カウント
var KUMO_WIDTH = 32;
var KUMO_HEIGHT = 16;// 雲の移動、表示処理
wikiを読むのが憂鬱だったのでヒソカに読んでもらった
# はじめに
wikipedia、読んでますか？どうも。
最近資格試験にフォーカスしているのですが、wikiを含め難しい記事を参照する機会が増えてきました。wikiの文って読んでればわかるんですが、
* 長い
* 難しい
* 息苦しい（見やすさのための改行とかない）って感じでバカほど読みづらいんですよね。
斜め読みマスターの私から申し上げれば非常にめんどくさいです。ということで、ヒソカさんに読んでいただきました。
# 完成物
なんでこんな忙しいのにおれは「wikiの語尾をヒソカみたいにする拡張機能」を作ってるんだ pic.twitter.com/WORmH7UR0k
— よつ (@yotu_xxx) July 17, 2022
https://github.com/yotuTxT/hisoka_wiki/blob/main/
# 作り方
備忘録も兼ねて作り方を残しておきます。## ファイル構造
“`
script_name
├ manifest.json
└ script.js
“`## manifest.json
“`json
{
“name”: “hisoka_wiki”,
RxJS Observableの流れ
Observableの作成流れ
“`
①Observableを作る(rxjs)
➡︎const {Observable} = rxjs;②Observableの処理を作成する(Observable.create)
const aaa = Observable.create((observer) => {
observer.next(1);
console.log(‘sample’);
observer.complete();
observer.error(‘error’);
}③Observableの処理を実行する(subscribe)
aaa.pipe().subscribe((x) => console.log(・・・));
aaa.pipe().subscribe((c) => console.log(・・・));④Observable処理の取り消し(unsubscribe)
→subscribe実行で、はじめて処理が実行され、unsubscribeで処理実行が取り消されます。//①を省略、
Reactアプリを作って、v17にダウングレードし、レンタルサーバーにデプロイするまで
# まずは、Reactアプリ作る
アプリを作成し、動作確認する
“`
npx create-react-app プロジェクト名
cd プロジェクト名
npm start
“`
`node.js`や`yarn`、`npm`、`create-react-app`のインストールは[appendix](#Appendix)に。
# 最新はv18になっているので、v17にダウングレード
`package.json`の`dependencies`を修正
“`json:package.json
# 省略
“dependencies”: {
“@testing-library/jest-dom”: “^5.16.2”,
“@testing-library/react”: “^11.2.7”,
“@testing-library/user-event”: “^12.8.3”,
“react”: “^17.0.2”,
“react-beautiful-dnd”: “^13.1.0”,
“react-dom”: “^17.0.2”,
“react-scripts”: “5.
フォーム入力内容を画面に表示させる方法
# はじめに
フォームにテキストを入力して送信後、入力内容を画面に表示させる方法をまとめました。
ご参考になれば幸いです！！！
# 実装コード&結果
今回のメインはJavaScriptなので、htmlの記述は簡易に書いています。
ご了承くださいm(_ _)m“` index.html
テスト
<
