- 1. ブログ
- 2. サイゼリヤメニュー組み合わせツール
- 2.0.1. 【コピーで使える】短縮URLサイト作ったので使ってくれ【自社ホスティング】
- 2.0.2. JavaScript 第4回 onClickとaddEventListenerを両方設定したら？
- 2.0.3. JavaScriptにおける浅い比較（Shallow Comparison）と深い比較（Deep Comparison）
- 2.0.4. マルチ通信：クロスタブ通信の多様な選択肢の探究
- 2.0.5. フォームブリッジ から kintone ルックアップフィールドに簡単にデータを登録する方法
- 2.0.6. paizaのスキルチェック(JavaScript)でよく使う技
- 2.0.7. prependメソッド
- 2.0.8. JavaScriptにおける配列の種類と値の取り出し方について
IPアドレスから天気を取得するサイトを作ってみよう
# 1.はじめに
今回はIPアドレスから現在地を取得して気象情報を表示するサイトを作成してみました。
また、天気の状況によって表示される背景を変更できるようにしました。
使用したAPIは
[Open Weather Map](https://openweathermap.org/api)
[IPInfo](https://ipinfo.io/)
です。
“`:環境
windows10
vscode
IP info API
Open Weather API
“`# 2.HTML
“`html:index.html
現在地の天気
【javascript】【jquery】urlの文字列編集
# コード
“`javascriptvar url1 = “http://192.168.55.33/nnnnnn/aaaaaaa”;
var match = url1.match(/\/\/[^/]+(\/.*)/);
console.log(match ? match[1] : url1);var url2 = “https://192.168.55.33/aaa/”;
var match = url2.match(/\/\/[^/]+(\/.*)/);
console.log(match ? match[1] : url2);var url3 = “http://192.168.55.33”;
var match = url3.match(/\/\/[^/]+(\/.*)/);
console.log(match ? match[1] : url3);“`
# 結果
“`javascript“/nnnnnn/aaaaaaa”
“/aaa/”
“http://192.168.55.33”“`
自分が関わったコードの中で最凶のクソコード
# 最凶コード
論より証拠、そのコードを見てみよう。そのコードとは、JavaScriptで書かれたコードである。
“`Original.js
t = 1234.56
:
if(n==0){
var a, b, c, d, e, f = t,
w = self._iFirst,
x = self._iSecond,
y = self._iThird,
z = self._iFourth;
z.innerHTML = “0”,
f > 100 ? (a = f, b = self._getRound(a),
d = “”,
y.style.width = “234px”,
w.innerHTML = “120”,
x.innerHTML = “240”
)
: (c = self._getRound(f), e = self._getRound(f / 2),
y.styl
JavaScript documentオブジェクト 徹底網羅 これで全部わかる
# documentオブジェクトとは
htmlファイルのページ全体を言う。
## documentオブジェクトの使い方
“`
.プロパティ
“`“`
.メソッド
“`のように指定して、呼び出す
## 個々のテクニック
1. getElementById
1. getElementsByName
1. createElement
1. document.write
1. document.forms
1. queryselectorえーと、無数にあるのでござる
[ES6] 関数のデフォルト引数
Reactのjsxやtsxでは多用されるが、本来の使いどころどういうパターンなのか調べた。
“`demo.js
function fn(options) {
console.log(options);
}fn();
“`↑この場合、optionsが定義されていないのでconsoleはundefinedになってしまう。
“`demo.js
function fn(options = {}) {
console.log(options);
}fn();
“`↑こうすることでoptionsが何も設定されなくても空のオブジェクトが定義される。
これの何がよいのか。
今まで関数の引数を設定した場合、引数が入力されなかったときのためにこう書いていた。
“`demo.js
function fn(options) {
options = options || {};
…
}
“`この options = options || {}; が必要なくなる。
このnullがきたときの対策は、TypeScriptやESLintを入れているとリア
活字読めない人間なので読み上げアプリに助けてもらう
## 活字が苦手です・・・
**私は活字を読むことが苦手です・・・** ので昔から本が読めません・・・
それにより現在ひとつの問題を抱えております。
それは **大好きなラグビーのルールが覚えられない！！** という事です。のっとりりーすざぼーる？のっとろーるあうぇい？？のっとすとれーと？？？
似てる名前のルールが多いし、文章で読んでもよくわからん！となっております。という事でそんな自分を助ける為に、**JavaScriptとWeb Speech APIを使って、ラグビーのルールを読みあげてくれるアプリを作ってみました！**
## ゴールの設定
今回作成するアプリでは以下の点をゴールに設定して実装していきます！
言語切り替え機能は、**審判が英語で話す事への対策としておまけで実装します！**:::note info
**・ ルール名のボタンを押すと説明を読みあげてくれるアプリを作る
・ 日本語と英語の切り替え機能を付ける**
:::## 完成品はコチラ！
作成したアプリはこちら！紹介動画と共にご覧ください！
**※音がでるので注意してください※**
JavaScript DOM
# DOMって何？
“`
JavaScriptから、HTMLを操作できる
“`## DOMでHTML要素を書き換えよう
dom.html
“`
ブログ
ブログ
JavaScript（React）で複数ファイルアップロードの読込待ち
JavaScript (React) の複数ファイルアップロードしたときのファイル表示にちょっとはまったので備忘録でメモ
やったこととしては `FileReader` の `onload` のところを `Promise` を待つようにしてる
あとはファイルインプットの `onChange` で使う関数も `async` つけてファイル読込処理を待つようにする
`map` で処理すると待つのにもう一つ関数を作る必要があるので煩雑になりそうなので `for of` でループ処理してます“`jsx
import { useState } from ‘react’;const App = () => {
const [selectImags, setSelectFiles] = useState([]);// ファイル選択時の処理 async つける
const change = async (e) => {
const imags = [];
// 選択したファイルごとに読込処理 await で待つ
for (const file of
JavaScript オブジェクトの使用
# オブジェクトとは？？
結論、`データを格納する手段の1つ`です。
変数、配列、オブジェクト、、、
といった感じです。
jsのコードでよく見かけるであろう、
“`
const obj = {
gender: ‘free’,
name: ‘山田太郎’,
age: 12
}
“`このようなコードは、オブジェクトである
## オブジェクトに関する用語を理解しよう
オブジェクトの中で、
・ 「名前：値」
これは、プロパティと呼ぶ
・ 「名前：関数」
これは、メソッドと呼ぶ
つまり、JavaScriptは最高である
なぜなら、オブジェクトという面白いものを自分で作れるからだ。“`
const ningen = {
name : ‘山田 太郎’,
age : 99,
getName: function() { console.log(this.name) }
}
“`
これは、オブジェクトだが、“`
getName: function() { console.log(this.name) }
“`この部分
わがままゴルファーのためのLINE Bot
## 1. ゴルフの要素って多くない！？
こんなどうでもいいことを友達に聞くのもアレなのでChatGPTに同意を求めてみた。
プレイするという観点からもゴルフは考えることが多くて複雑であると
改めて教えてもらった。私が個人的にゴルフをしていく上で気になるのは
* **どうやって練習したらいいのか**
* **ラウンドに必要なものは揃っているか**
* **予約はどうやって取ればいいか**
* **天気はいいのか**
などである。もちろん時間をかければわかる。
練習の情報もあふれているが、取捨選択の時間があれば
必要で効率のよい練習方法にたどり着けるだろう。ラウンド前に必要なものが足りていなければ
買いに行けばいい。ゴルフ場に電話したり
アプリを使えば予約もできる。ラウンド当日の天
さんぽビンゴで生活を楽しく！
## お散歩にきっかけが欲しいが、同じテーマは飽きる
という訳で、前回のさんぽビンゴにバリエーションを付け加えました！https://qiita.com/mmmrym/items/393709f68b4f8a1be1b8
今回は6つビンゴを作りました。これで冬の間は飽きずに楽しめそうです。
さらにおみくじ(ランダム)要素を付け加えて、QRでwebアプリを読み込めるようにしました。## 使い方
https://x.com/mmmrym112/status/1726637966511206713?s=20
1. マス目を触るとチェックを付けることができます。
※チェックされたマスをもう一度触るとチェックが外れます。
2. やり直したい場合はやり直すボタンを押すと、すべてのチェックをリセットできます。## 作り方
### コード
[前回の記事](https://qiita.com/mmmrym/items/393709f68b4f8a1be1b8
)から様々なテーマでビンゴを作成します。Netlifyにアップロードし、URLを入手します。記事が読み
サイゼリヤのメニューを組み合わせるサイトを作ってみた
# はじめに
予算を入力するとサイゼリヤのメニューをランダムで出力してくれるサイトを制作してみました。
今回は、機能のみの制作で、cssを使わずに作成しました。
メニューはcsvファイルにまとめておいて、それを読み込む形式としました。“`:環境
windows10
vscode
“`
ルール
– メニュー番号・メニュー名・値段を出力
– 消費税は10%として計算
– 同じメニューは１回だけ選択
– 予算の80%以上を使うように設定
– メニューは2023年の関東のもの
– お子様メニューやアルコールは除く
– ドリンクバーは個別に追加するかしないかを決定# 1.html
非常にシンプルとなっております
“`html:menu.html
サイゼリヤメニュー組み合わせ
サイゼリヤメニュー組み合わせツール
- メニュ
【コピーで使える】短縮URLサイト作ったので使ってくれ【自社ホスティング】
# はじめに
最近短縮URLの事故とかよく見るので、エンジニアとしてなんだかなあと思っていて、Firebaseで短縮URLサービス作ったので、クローンして使ってほしいです。
よいと思ったらいいね、保存、同僚とかに拡散していただけると。。。:bow:## 2023年11月現在、短縮URLを取り巻く現状
### フィッシング詐欺に利用された？として世間を騒がせた
現状フリーの短縮URLサイト使って多くの被害事例が出ている状況で、多くの人に見てほしいので拡散されやすそうなタイトルになってます。
* [原因は「短縮URL」か？ QRコードから不正サイトへ誘導される事例が相次ぐ オートバックスセブン、学習院大学も](https://www.itmedia.co.jp/news/articles/2311/15/news194.html)
* [SNS利用上の注意点｜国民のためのサイバーセキュリティサイト](https://www.soumu.go.jp/main_sosiki/cybersecurity/kokumin/enduser/enduser_security02_05.ht
JavaScript 第4回 onClickとaddEventListenerを両方設定したら？
# はじめに
[JavaScript 第2回 onclickでボタン押下動作](https://qiita.com/Mount/items/edce7c91f5c96d793030)
[JavaScript 第3回 addEventListenerでボタン押下動作](https://qiita.com/Mount/items/32c6b03ee2acf079d04f)
を試したところ、onclickとaddEventListenerを両方設定したらどちらが優先されるのかなというのが気になりまして、試してみたいと思います。
今回は、Microsoft Edgeで検証しますが、Microsoft EdgeはChromiumベースであるため、Google Chromeでも同じ動作になるだろうと想像しています。
両方設定する場合動作についてはざっくり調べただけでは特に見つからなかったのですが、実装依存なのか、定義されているのかわかりませんでした。
そのため、今回の結果は、実際に検証した結果であって、他のブラウザや将来のMicrosoft Edgeでも同じ動作になるかはわかりません。
でも、普通
JavaScriptにおける浅い比較（Shallow Comparison）と深い比較（Deep Comparison）
JavaScriptでオブジェクトや配列の同等性を正しく扱うためには、浅い比較と深い比較の違いを理解することが重要です。特に、複雑なデータ構造を扱う場合や、Reactのようなライブラリでの状態管理、コンポーネントの再レンダリングの最適化において、この知識は不可欠です。
## **浅い比較（Shallow Comparison）とは何か？**
浅い比較は、二つのオブジェクトや配列をそれらの実際の内容ではなく、参照に基づいて比較するプロセスを指します。
### **浅い比較の特徴：**
– **参照ベース**：オブジェクトや配列の参照が同じかどうかをチェックします。
– **表面的なレベル**：オブジェクトの属性や配列の要素は考慮しません。
– **効率性**：メモリアドレスだけを比較するため、より速く、リソースをあまり消費しません。### **例：**
JavaScriptの浅い比較は**`===`** 演算子を使用します。
“`jsx
const objectA = { key: ‘value’ };
const objectB = { key: ‘value’ };
マルチ通信：クロスタブ通信の多様な選択肢の探究
## 背景
現在のWeb開発では、複雑なアプリケーションの要件や、複数のタブの使用の普及に伴い、フロントエンドエンジニアは異なるタブ間のデータ通信や共同作業の問題を解決する必要があります。これには、データの共有、リアルタイム通信の実現、あるタブでの操作が他のタブに即座に反映されることの確保などが含まれます。オンラインのチームコラボレーションツールでは、複数のタブで同時にドキュメントを編集することができるようにしたり、電子商取引サイトでは、ユーザーが1つのタブで商品をカートに追加し、別のタブでカートのリアルタイム更新を確認できるようにする必要があります。特に、[Ptengine](https://www.ptengine.jp/) では、図1に示すような視覚的なイベント設定プロセスにおいて、タブ間通信が必要です。
本文では、さまざまなタブ間通信の
フォームブリッジ から kintone ルックアップフィールドに簡単にデータを登録する方法
kintone に簡単なカスタマイズを入れて、FormBridge のフォームで入力された値を、kintone のルックアップフィールドに登録できるようにしたときの備忘録です:writing_hand_tone1:
# 背景
formbridge の仕様では、kintone のルックアップフィールドを指定できない仕様になっています。
そこで、カスタマイズで対応できないか考えた結果、kintone REST API を利用して対応することにしました。# やりたかったこと
1. FormBridge のフォームで入力された値を文字列(1行)フィールドに登録
2. レコードの登録が成功した際に、文字列(1行)フィールドに入った値をルックアップフィールドにコピーする js カスタマイズを kintone に適用する# カスタマイズのソースコード
Fo
paizaのスキルチェック(JavaScript)でよく使う技
paizaのスキルチェック(JavaScript)でよく使う技
最近、Paizaのスキルチェックをよく解いているのでD-C-Bランクでよく使った技をメモしていたので投稿。
# 分割
“`shell
const str = “abc\ndef”
const [a, b] = str.split(“\n”)
“`# 先頭だけ取り出す
“`shell
const [head, …tail] = lines
“`# 連番生成
“`shell
[…Array(5)].map((_, i) => i)
“`# 文字列を配列に
“`shell
> Array.from(“abc”)
[‘a’, ‘b’, ‘c’]
“`# 配列の末尾を取得
“`shell
array.slice(-1)[0]
“`# 配列の先頭を取得
“`shell
array.slice(0,1)[0]
“`# 配列を分割
“`shell
array.slice(n, m)
> [1, 2, 3, 4, 5, 6]
x.slice(0,3)
> x.sl
prependメソッド
### prepend() メソッドを調べる
Element: prepend() メソッド
Element.prepend() メソッドは、一連の Node または文字列をこの Element の最初の子の前に挿入します。
出典https://developer.mozilla.org/ja/docs/Web/API/Element/prepend
“`js
a = document.createElement(“div”);
a.id = “parent”;b = document.createElement(“div”);
b.id = “child”;a.prepend(b);
c = document.createElement(“div”);
c.id = “child2”a.prepend(c);
“`
“`html“`
# 感想
insertBefore() メソッド以外にも要素
JavaScriptにおける配列の種類と値の取り出し方について
# JavaScriptにおける配列の種類と値の取り出し方について
## 配列(一次元配列)とは
– 複数の変数を格納するための変数のこと。
– 0番から採番される。
-値を取り出す時は[]で番号を付けて指定する。“`
let fruits = [ “apple” , “orange” , “banana” ];
console.log( fruits ) ; // [“apple”, “orange”, “banana”]
console.log(fruits[0]); //apple
console.log(fruits[1]); //orange
console.log(fruits[2]); //banana
“`## 多次元配列とは
– 配列の中に配列やオブジェクトが格納されており、入れ子状態となっている配列のこと。
– 0番から採番されるのは配列と同じ。取り出し方も同様。
– テーブル形式でデータを管理したい時によく使われる。
“`
let likeFruits = [ [“ゴリラ”,5,”apple”], [“チンパンジー”,3,”orange”] , [
