f@ctor

JavaScript関連のことを調べてみた2022年03月31日

JavaScript関連のことを調べてみた2022年03月31日
目次

URLSearchParamsインスタンスを複製する

“`js
const newSearchParams = new URLSearchParams(searchParams);
“`

もしくは

“`js
const newSearchParams = new URLSearchParams(searchParams.entries())
“`

もしくは

“`js
const newSearchParams = new URLSearchParams(searchParams.toString())
“`

元記事を表示

フロントエンドエンジニアに伝えたいこと

# 何から実装すればいいのかわからない人へ

1. Viewは後回しにすべし
1. いきなりコードは書かず、まず設計(=ロジック/アーキテクチャ)から考える。登場人物（=オブジェクト）は何かを紙などに列挙していく。
1. それら（=オブジェクトら）がどんなメンバ変数、メソッドを持っているかを考える。publicなメソッドは[CRUD](https://www.google.com/search?q=crud&oq=crud&aqs=chrome..69i57j0i131i433i512j0i4i131i433i512j0i512j0i433i512j0i512l5.2671j0j7&sourceid=chrome&ie=UTF-8)しかないと心得る。
1. さいごにコードを書く

# クラス設計においてやり勝ちなミス

– 依存したコードを、気づいたら書いてる。そのオブジェクトに関することのみ書くべし。
– 一見、そのオブジェクトに関することを書いていて依存していなくても、ArrayクラスやNumberクラスのほうに書いて（=拡張）あげるとそのロジックが他でも使い回せるケースもあるの

元記事を表示

等価演算子のあれこれ == ===

# はじめに
typescriptでデータ比較したいときにやらかしたので等価演算子についてアウトプットします。
当たり前だろって部分だと思いますが、一瞬戸惑ったのでサッと書きますw

# 等価演算子 == ===

等価演算子って“`==“`,“`====“`これになると思いますが、新人エンジニアとして見過ごせないミスをしました。

皆さんご存じだと思いますが“`=“`は代入ですw
if文こんな感じに書くこと多くてスッと頭から抜け落ちてしまいましたが、新人エンジニアらしいミスとして“`=“`を等価演算子だと思ってしまってました。w（言い訳をするならこの瞬間だけ抜けていた…(・・?）)
なので一度等価演算子を調べ直したいと思います。そのアウトプットです。
“`
if(hoge){
a = 1
b = 1
}
“`

“`==“`は2つの変数の型を変換して比較を行う。
“`===“`は型を変換しないで厳密に比較を行う。

“`
console.log(5 == “5”); // true
console.log(5 === “5”); // fal

元記事を表示

いきなりの爆売れを防止！NHK APIから料理番組情報を取得する方法

こんにちは。
今回はNHK APIから料理番組情報を取得して、
1週間分のNHKで放送予定の料理番組情報をLINEBotで自動通知できるものを作ってみました。

## お客さまが欲しいものを欲しいときに購入できるように、準備をする。
私は小売業で働いています。

小売業で勤務されている方は1度はあると思いますが・・・
テレビで紹介されたものが放送後、異常に売れて、商品が欠品し、
お客さまのご要望に応えられなかったことがあると思います。
（おまけに店長に物凄く怒られます。）

でも毎日テレビを見るわけではないので、
今日はNHK APIを使用して、料理番組情報を定期的に取得できる
LINEBotを作成しました。

本当は1週間に1回取得したいのですが、今回は練習の為5分おきに設定してます。

## できたものがこちら
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/8484bb65-8b50-217a-4bc6-9a0435ad4f12.png)

動画で確認したい方はこちら

元記事を表示

LINE Bot&Youtube API／ヨガレッスンに行けなくても、皆でおうちレッスンできるBot

# 背景
大好きなヨガの先生のYoutube動画が送られてくるLINE Botを、ヨガクラスのみんなでシェアしたら、仕事でレッスン行けなくても家でレッスンしよう、送られてきたらそれぞれ家でやろう、って気になれそう！と思って作りました。
家だとだらけてやらないんですよね・・・でもクラスのみんなも同じBot見てると思うとモチベーション上がる。
# 環境
node version v17.6.0
npm 8.5.1
# まずはYoutubeでAPIキー取得
Googleのアカウントさえ持っていればすぐできる。
私が参考にしたのはこちらの方の記事↓
https://qiita.com/shinkai_/items/10a400c25de270cb02e4

無事取得できたので、今度はいよいよコード・・・・ふう・・・

# まず、YouTubeからAPI情報をちゃんと拾えるか確認

“`js

const axios = require(‘axios’);

const handleEvent = async (event) => {

let response;
try {

元記事を表示

JavaScript 三項演算子の3つの使い方

# 三項演算子とは
> if文を1行で書くことができる演算子
“`
(条件式) ? (条件がtrueの時の値) : (条件がfalseの時の値)
“`
という書き方ができる

# JavaScriptでの記述例
例1
“`:JavaScript
let flag = true
const ab = flag ? “A” : “B” //flagがtrueだったら”A”が入る、falseなら”B”
console.log(ab) // Aが出力される
“`
例2　奇数か偶数か判定する
“`:JavaScript
let randNum = Math.floor( Math.random() * 10 ) + 1 // 1から10までの整数
console.log(randNum)
const odd = (randNum % 2 === 0) ? “偶数” : “奇数” // 2で割った余りが0なら偶数、そうでないなら奇数
console.log(odd)
“`
例3　`&&`を使う
“`

元記事を表示

親コンポーネントで取得した情報を子コンポーネントに渡す方法

# はじめに
この記事は文系エンジニアが書いた記事になりますの、わかりにくい箇所少し間違った箇所などあるかもしれません。
あくまでご参考までに☺︎
つよつよエンジニアの方は意見とかお願いします☺︎

# この記事で説明すること

この記事では親コンポーネントで、手に入れた情報をどのようにして子コンポーネントで受け取ることができるのか
なるべく分かりやーすく説明します☺︎

# 本題

oya.vue(親コンポーネント)
“`


“`

kodomo.vue(子供コンポーネント)
“`

元記事を表示

フォームの送信前にJavascriptで確認

# どういう状況
データを削除できるボタン。
削除ボタンを押してすぐにデータが削除されると困るので、送信時によろしいですか？みたいな確認のalertを出したい。さらにはい・いいえで送信したり送信をやめたりする動きにしたい。
# ざっくりと削除ボタンがあります
“`html


“`
送信してしまうと削除処理が動いてしまうので、
送信時に確認する、というより送信前に確認、ＯＫなら送信、キャンセルなら送信をやめる。
という動きにする。
送信前に走るjavascriptは`onSubumit`でコントロールできる。
## formにonSubmit属性を追加
`onSubmit=処理`
フォームに上記を追加。
## onSubmit属性とは
フォームの送信時に実行するscriptを設定できる。
返り値がtrueかfalseかによってform の送信をキャンセルできる。
`onSubmit=”return fa

元記事を表示

[備忘録]いつも通り書いていたのに発生したVue.jsのエラー

新しいコンポーネント作成時に発生しました。
“`Vue.js:エラー内容
vue.esm.js?efeb:628 [Vue warn]:
Property or method “message” is not defined on the instance but referenced during render.
Make sure that this property is reactive, either in the data option, or for class-based components, by
initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

—> at src/components/ManyInput.vue
at src/App.vue

“`
エディターにエラーが発生したわけではなく、

元記事を表示

Firebaseを使ってTwitterログイン機能を作る際、モバイルでは挙動がおかしくなった際の対応

こちらでは正しく挙動しなかったため、現在修正中。
有識者のアドバイスを求めています

## 問題
firebaseを利用してtwitterログイン機能を作成した際に、PCでは動作するが、モバイルだとログイン画面に遷移しなかった。
その記事がなかったので、改善方法を記しておきます。

https://firebase.google.com/docs/auth/web/twitter-login?hl=ja

公式ドキュメントをよく見ると、

> Twitter プロバイダ オブジェクトを使用して Firebase での認証を行います。ユーザーに Twitter アカウントでログインするよう促すために、ポップアップ ウィンドウを表示するか、ログインページにリダイレクトします。モバイル デバイスではリダイレクトすることをおすすめします。

との記載が。
つまりsignInWithPopupではなく、signInWithRedirectを利用しないといけないです。

## 結論

“`javascript
methods: {
twitterSignIn: function

元記事を表示

エラーの読み方　～おい エラーを見るんだ～

# 初めに
　みなさんこんにちは。この記事を開いていただきありがとうございます。
　この記事は初心者に向けたエラーの読み方のコツについて紹介しています。簡単なエラーをQiitaやTeratailなんかに投稿してGGRKSの5文字を浴びせられて、しょんぼりするプログラマーを減らそうという思いで書いております。
　今ギクッとしたそこのあなた！　ギクッとしてない人も！　今悩んでいるエラーをひとまず置いておいてこの記事をゆっくり読んでみてください。
どうぞごゆっくり

# エラーとは？
　まず、エラーとは何ぞやというところから話します。ここを読んでもらいたい人はエラー文を友達だと思っていない人です。
「エラーが嫌だって？w　何言ってんだよぉｗ　エラーは友達に決まってんだろ」と心の底から思ってる人は飛ばしてどうぞ。（←頭おかしいな）
　
　それでは本題です。エラーとはプログラムを実行するうえで「このままプログラムが実行されるとＰＣがおかしくなってしまうよ～」というのを未然に防いで教えてくれる機能のことです。それだけ聞くと知っとるわって感じがしますよね？　でも実は自分でコードをバリバリ書く人にとっ

元記事を表示

AMCI Develop Note #00 PLATEAUモデルを表示するまで

![00_01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36929/9285f02b-d978-d2dc-0b87-a1184ade5e8c.jpeg)

# はじめに

本解説ではPLATEAUで公開しているCityGML（OBJ）データをWebサイト上で使用する方法を、AMCIでの事例を参考に説明していきます。本解説では3DとHTML、JavaScript（Three.js）の基礎的な知識が必要です。予めご注意ください。

#### AMCI

https://amci.tokyo-omy-w.jp/

本解説における推奨の開発環境は以下の通りです。

– OS: Windows10、MacOS10
– CPU: Corei7 相当
– GPU: GTX1060 相当
– メモリ: 8GB
– ブラウザ: 最新のGoogle Chrome、Microsoft Edge など

※上記以上のスペックを推奨しています

# データのダウンロード

データは G空間情報センター（https://

元記事を表示

様々な英語の名言を配信するLINE Botを制作してみた！

## 英語の学習で、毎日名言に触れる！
英語を勉強されたことがある皆さんにお聞きしますが、**英語はどのように学習されていましたか？**　十人十色と思いますが、私のオススメは**英語の名言**に触れることです！

それでは、Twitterであげた今回制作した名言Botを早速ご覧ください！

### 人生があなたにレモンを投げてきたら、レモネードを作ろう！
私が大好きな英語の名言の1つです。米国に住んで間もない時、英語が聞き取れず苦労していた時にこの言葉に出会い、せっかくだから辛酸を舐める経験すら楽しんじゃえばいいんだって前向きな気持ちになったことを思い出します。**英語の名言**に触れて、英語独特の言い回しを学びながら**シャドーイング**すると、**記憶も定着しやすくなります**:sunny:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/e1

元記事を表示

AMCI Develop Note #01 背景と地面の色の変更方法

![01_01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36929/7d3cd6ad-ec54-dd02-a822-b97181c58f3f.jpeg)

# はじめに

本記事ではAMCIの演出の一つである、背景と地面の切り替え方法をまとめていきます。
コンテンツ間で背景や地面を変更することで、コンテンツが切り替わった事をより分かりやすく伝えることが出来ます。

こちらは「まちの活動量→CO2排出削減量」を選択した際と、「SDGｓ活動の集積」を選択した際の比較です。
CO2排出削減量では、削減量に応じて葉のパーティクル量が変更されるので、その雰囲気に合うような明るめな背景を設定しています。
逆にSDGｓ活動の集積では、大丸有エリアの各ビル棒グラフに見立てたビジュアライズを行っているので、ビル群が目立つように背景は夜をイメージした暗めな色味を設定しています。

↓明るい背景と地面を設定
![01_02.jpg](https://qiita-image-store.s3.ap-northeast-1

元記事を表示

AMCI Develop Note #02 射影テクスチャマッピング演出

![02_01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36929/0d4d62ee-4615-7c1d-093f-a0691ea9ae65.jpeg)

# はじめに

今回は前回（#01 背景と地面の色の変更方法）に続いて、AMCIのホーム画面で使用している射影テクスチャマッピング演出についての説明をしていきたいと思います。

まず、射影テクスチャマッピングとはどんなものかといいうと、プロジェクターから映像が照射されて壁や物に映像が投影される様を、3D空間上で再現したマッピング手法です。
テクスチャ画像を射影変換することで三次元空間上に投影することができます。

![02_02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36929

元記事を表示

AMCI Develop Note #03 木の葉のパーティクルを動かす

![03_01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36929/80c9688c-bf43-48a2-d23b-60ad029a6067.jpeg)

# はじめに

今回は前回（[#02 射影テクスチャマッピング演出](https://qiita.com/hisahayashi/private/0476678648f1c3d101de)）に続いて、AMCIサイトの「まちの活動量」ページで使用している、木の葉のパーティクルの実装方法について説明していきたいと思います。

こちらの木の葉ですが、一見ただのテクスチャ画像に見えますが、実はSVG画像をthree.jsでジオメトリに変換し、それをインスタンシングという手法を使ってパーティクルとして描画しています。
今回は、SVG画像の変換とインスタンシングの二つの項目について説明して行きたいと思います。

![03_02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0

元記事を表示

AMCI Develop Note #04 ビル毎に色を変えて動かす

![04_01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36929/ab397c05-e19d-f8c8-ed08-2ef6b91bec9e.jpeg)

# はじめに

今回は前回（[#0３ 木の葉のパーティクルを動かす](https://qiita.com/hisahayashi/private/ffa2d348ca8a74639ac9)）に続いて、AMCIサイトの「SDGs活動の集積」ページで使用している、ビル毎に色を変えて動かす方法について説明していきたいと思います。

![04_02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36929/3e320223-9175-9a7a-f360-b1c29d3af7f7.jpeg)

# 実装方法

まずビル毎に動かしたり、色を変えるには、モデルデータの作りとthree.js側での管理方法を工夫する必要があります。
今回は、Blenderでモデル（daimar

元記事を表示

AMCI Develop Note : Three.jsを利用した3D都市モデル活用チュートリアル

![top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2585263/579dfbf6-5b0b-3b70-3fde-bfa385c8e12a.png)
# はじめに

本解説ではPLATEAUで公開しているCityGML（FBX,OBJ）データをWebサイト上で使用する方法を、AMCIでの事例を参考にし、5回に分けて説明していきます。

#### AMCI

https://amci.tokyo-omy-w.jp/

WebでのPLATEAUの3Dモデル表示から、AMCIサイト内でThree.jsを用いて表現されているエフェクトの利用方法を解説しています。本解説では3DとHTML、JavaScript（Three.js）の基礎的な知識が必要です。予めご注意ください。
# 目次

– AMCI Develop Note #00 PLATEAUモデルを表示するまで
– https://qiita.com/ProjectPLATEAU/items/a5a64d681045ea2f76b6
– A

元記事を表示

TypeScriptとは【個人的なお勉強アウトプット】

マイクロソフトが開発したJavascriptを進化させたプログラミング言語。
Googleも社内標準言語として取り入れている。

## TypeScriptのメリット
– エラー防止できる
– コードが短く読みやすい
– 動作が早い

### エラー防止できる
#### 型が定義できる
型がわかりやすくまとまっている記事は以下。
https://qiita.com/uhyo/items/e2fdef2d3236b9bfe74a

#### コンパイル時にエラーチェックできる
型と値が異なること、変数が未定義なことなど、コンパイルエラーをだしてくれる

## コードが短く読みやすい
JacvaScriptでは使えなかったクラス生成が可能
TypeScriptのクラスの利用に関してすごくわかりやすい記事
https://atmarkit.itmedia.co.jp/ait/articles/1507/16/news022.html

## 動作が早い
静的型付けの言語なのでコード内で型を宣言できるぶん、実行時に型を決める動的型付けのJavaScriptより動作が早くなる

元記事を表示

Intersection Observer メモ

チュートリアルサイト

https://tsuruchanblog.com/fixed-header-used-intersection-observer-api/

“`js:サマリ

“`

“`js:基本(一番単純な例)
//1.インスタンスの生成
//第一引数はコールバック関数名を登録必須
const observer = new IntersectionObserver(func);
//2.監視要素を登録 下のentriesになる。
//注意点 登録要素1つでも下のentriesは配列になる
observer.observe(document.querySelector(‘.mainvisual’));
//複数要素を登録する時 1個１個ずつ登録する必要がある
sections.forEach(section => {
observer.observe(section);
});
//

元記事を表示

の天気

  • --℃ / --℃

  • --℃ / --℃

  • --℃ / --℃

OTHERカテゴリの最新記事