f@ctor

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

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

React,Vue.jsの前にJavaScriptを習得すべし！(分割代入{}とデフォルト値=)　

# 資料

https://www.udemy.com/course/modern_javascipt_react_beginner/

# はじめに
実際に動かしたコードです。自分で色々出力を変えて動かしてみてください。
体で覚えるといいと先輩に言われました。

# この記事の対象
JSを触ったばかりの初心者でこれからReactやVue.jsを触りたい人。

# 分割代入{}

“`index.js
const pirates = {
name: “ルフィ”,
age: 19
};

const man = `俺は${pirates.name}です。年齢は${pirates.age}歳だ`;
console.log(man);

//俺はルフィです。年齢は19歳だ
“`

“`index.js
const pirates = [“ゾロ”, 21];

const man = `俺は${pirates[0]}だ!年齢は${pirates[1]}だ`;
console.log(man);

//俺はゾロだ!年齢は21だ
“`

“`js
const pirates

元記事を表示

【TypeScript】命名規則 メモ

***1\. キャメルケース***
英語の複合語や文を1語につなげて表記するときに使う
先頭の単語の1文字目だけ小文字、他の単語の1文字目は大文字
用途：***変数、引数、関数、プロパティなど***
ex)`getName` `thisIsAnExample(this is an example)`

***2\. パスカルケース***
キャメルケースと同じく、英語の複合語や文を1語につなげて表記するときに使う
すべての単語の1文字目を大文字にする
用途：***クラス、インターフェース***
ex)`ClassName` `CatchTheTrain`

***3\. コンスタントケース***
すべて大文字または単語を繋げるときはアンダースコア
用途：***定数、グローバル変数***
ex)`ENDURL` `HELLO_WORLD`

***4\. boolean型の時の変数名***
「is + 形容詞」→ `isClose`
「can + 動詞」→ `canStart`
「has + 過去分詞」→ `hasChanged`
などの形式で命名する
詳しくは[こちらの方の記事から](h

元記事を表示

disableを使ってボタンの活性制御をする（Vue.js）

はじめまして。
今回は、Vue.js で入力欄への値の入力に応じてボタンの活性・非活性を切り替える方法について解説していきたいと思います。
駆け出しエンジニア（歴1か月程度）の初投稿ですので、お手柔らかにお願いします。。笑

目次

[前提](#前提)
[この記事のゴール](#ゴール)
[実装手順](#実装手順)
[おわりに](#おわりに)
[参考（スタイル付きコード）](#参考（スタイル付きコード）)

## 前提
##### 想定読者
・HTML・CSSは大まかに理解している人
・Vue.jsを勉強し始めたばかりの初心者

##### 私の技術レベル
・Vue.js をチームで使ってはいるが、触れる機会が多くはなく知識は少ない
・勉強し始めて１か月未満

## ゴール
入力欄が空欄の時は**非活性**、値が入力されると**活性化**されるボタンを作る！！

![Qiita_1_非活性.png](https://qiita-image-store.s3.ap-northea

元記事を表示

Swiper.jsの自動再生のバグ対策

備忘録です。スライダーを逆方向に自動で流れるように動作させた時、別のタブに移動したり、ウィンドウサイズを変更したりすると、スライドが表示されなくなるバグがあります。解決策を見つけるまでに時間がかかりましたので、忘れないように書きます。

解決策
~~~js
autoplay: {
delay: 0,
disableOnInteraction: false,
reverseDirection: true,
pauseOnMouseEnter: false,
},
~~~

`reverseDirection`で逆再生する場合はセットで`pauseOnMouseEnter`を無効にしましょう。

### 参考記事
https://github.com/nolimits4web/swiper/issues/5029

元記事を表示

A-FrameとGoogle BlocklyでAR表示するサイトを作ってみた

# 「ARを作ろう」
A-FrameとGoogle Blocklyを利用してAR表示する「ARを作ろう」はこちら。
https://kaihatuiinkai.jp/nesopuro2/ar/

中学校　技術科「ネットワークを利用した双方!
向性のあるコンテンツのプログラミング」を学習するための教材として開発しました。
![ar_earth.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509199/2e197c1e-5fbf-3a84-b68f-214b801ca3d0.jpeg)

# ARを簡単に表示できるA-Frame
カメラで撮影している現実の画像にデジタルコンテンツを重ねるAR（拡張現実、以下AR）の作成が難しいと思っていました。そう、A-Frameに出会う前までは。A-Frameを使うとブラウザ上でARが簡単に表示できます。

“`JavaScript:ar_test1.html



元記事を表示

【OpenLayers】ベクトルタイルを表示する

## はじめに
この記事は#30DayMapChallenge2022 16日目の記事です。
テーマはMinimalです。
OpenLayersを使って国土地理院のベクトルタイルを表示してみます。

![image](https://raw.githubusercontent.com/tjukanovt/30DayMapChallenge/main/images/flyers/30dmc-2022.png)

https://30daymapchallenge.com/

## OpenLayersとは
簡単にダイナミックなマップを設置することができるJavaScriptライブラリ
地図タイル、ベクトルデータ、マーカーを表示することができる
フリーかつオープンソースで、2条項のBSDライセンス（FreeBSDとしても知られています）の下でリリースされている
執筆時の最新バージョンはv7.1.0でした

## ベクトルタイルを表示する
国土地理院のベクトルタイルを表示してみます。

“`index.html


元記事を表示

Google Cloud でロギング(JavaScript編)

システムの実運用を始めると避けて通れないのがロギングです。
しっかり設計しておかないとトラブルシューティングができません。
Google の AppEngine, Cloud Functions のようなサーバーレスサービスを利用する場合 Cloud Logging をほぼ使うことになると思われますが、何をどうすればどうログが出力されるのかまとまった資料がなかったのでまとめてみました。

## Severity

Google の Cloud Logging には以下の９レベルの severity があります。
* Default
* Debug
* Info
* Notice
* Warning
* Error
* Critical
* Alert
* Emergency

![スクリーンショット 2022-11-16 21.29.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73493/2eb89ac8-208d-0097-77e6-ef560ff2e23e.png)

プログラムが標準出力

元記事を表示

forEachとmapの違い

結論、**戻り値を持つかどうか**です。

“`
const arr = [本田, 香川, 岡崎, 内田, 長友];

// forEachの場合
arr.forEach(value => {
console.log(value);
});
// 本田
// 香川
// 岡崎
// 内田
// 長友

// mapの場合
arr.map(value => {
console.log(value)
});
// 本田
// 香川
// 岡崎
// 内田
// 長友
“`

forEachもmapも得られる結果は同じ。

大きく異なる点は、**戻り値を持つかどうか**。

“`
const arr = [本田, 香川, 岡崎, 内田, 長友];

// forEachの場合
const forEachResult = arr.forEach(value => {
return value;
});
console.log(forEachResult);
// undefined

// mapの場合
const mapResult = arr.map(value =

元記事を表示

pdfコピペで邪魔な半角スペースを消したり改行を削除したりするChrome拡張

# TL;DR

https://github.com/kentoak/replace-text

ペーストした瞬間に全角に挟まれた半角スペースを削除し、ピリオドカンマと句読点を正しくしてくれるChrome拡張。テキストボックスにペーストすると、pdfをコピーするときに邪魔な全角に囲まれた半角スペースが自動で削除される。ボタンをクリックすれば、改行を削除したり、文字数カウントしたりする。
`Alt+M`で呼び出す。Macだと`Option+M`。

# 機能

![image](https://user-images.githubusercontent.com/43945931/202157040-9917c22e-6251-41f1-a824-1bf07f1c38fd.png)

* `NLDel`
改行→半角スペースにする。Altを押してもこれが実行され、さらにクリップボードにコピーされる。
e.g.)
“`
I have a pen.
I have an apple.
“`
↓
“`
I have

元記事を表示

チートシート（Javascript）

# よく使う
## 正規表現

> メイン
“`
“`

元記事を表示

Next.jsに入門した

このチュートリアルをやっていきます
https://nextjs.org/learn/foundations/about-nextjs

htmlとJavaScriptがだいたい分かっている人向け記事です

# 1. 実行/開発環境について

Reactと同様、以下の3つの実行環境が使えます

A: ビルドしてサーバーに置いて実行する
B: 開発用サーバーを立てて実行する
C: オンブラウザで実行する

Aは本番用で、ビルドすればミニファイ済みのコードが手に入りますので本番環境ではこれを使うべきなんですが、わりと面倒なので本番以外では使わないと思います。BはReactの開発用サーバーを立てて使うやり方で、ライブラリをnpm installしておいてimportして使うという書き方が出来るので通常はこれで開発するんじゃないでしょうか。Cはhtmlのscriptタグでインポートして使うやり方で、既存サイトにちょい足ししたい時や今回のようなチュートリアル的用途に適していると思われます

# 2. React基本編

Next.jsはReactベースのフレームワークなので、基本的な書

元記事を表示

JavaScriptでuserAgentを取得してみた

# はじめに

ユーザーがモッピーの推奨環境にアクセスできているかどうか
確認ができるページがほしいという要望があった。
開発時に学びがあったこと、つまづいたいたことがあったので、備忘録としてまとめることにした。

## そもそも
さっそく要望にそって開発しようと思ったが、ここで疑問が２つあった。

1. **推奨環境の細かく決まってない部分をどうしようか？**
1. **閲覧環境情報を取得するにはどうしたらいいのだろう？**

### 1について
当時プロダクトの推奨ブラウザのみは決まっていたが、
その中にはサポート対象外となったIE11も含まれていた。
策定時期も古かったため全体的に見直し、推奨環境の策定をするところからはじめた。

今回推奨環境と決まったのが以下（決めた経緯については割愛）

### 2について

調

元記事を表示

BabelやESLintを信用しすぎないで

## 前提

– トランスパイラ利用の有無に関わらず、ES2017 相当の（2021/10 時点でブラウザの対応率が十分に高い）記述がユーザーのブラウザで動くようにする、という方針
– トランスパイラを用いても、**ECMAScript の全ての記述を変換してくれるわけではない**ことは薄々気づいていた
– ESLint を用いても、**ECMAScript の全ての記述を解析してくれるわけではない**ことは薄々気づいていた

## 目的

– ECMAScript を利用した場合に
– トランスパイラは何を変換し、何を無視するのかを検証する
– ESLint は何を解析し、何を無視するのかを検証する

## 検証用の入力

– ES6 〜 ESNext の規格に基づいたコードサンプル
– 利用する機会がありそうな機能をピックアップ

“`javascript
/**
* ES2015
* ————————————————
*/
/** const, let */
const cst = 1
let lt

元記事を表示

npm-run-allで複数の処理を実行する　メモ

## npm-run-allとは？？
複数の処理を1つのコマンドでできるようになるツール
`buildを入力して実行`→`exportを入力して実行` から
`1つのコマンドを入力`→`buildとexport`が実行されるようにできる

## やってみる
Next.jsの静的HTML書き出しを行います
***1\.従来の実行方法***
“`
npm run build
————-
npm run export
“`
と2回コマンドを入力しなければなりません

***2\.npm-run-allでの実行方法***

まずは`npm-run-all`をインストール
“`
npm i -D npm-run-all
“`

package.jsonを見てみると
“`typescript
“devDependencies”: {
“eslint”: “8.20.0”,
“eslint-config-next”: “12.2.3”,
“npm-run-all”: “^4.1.5″
}
“`
`”npm-run-all”: “^4.1.5”

元記事を表示

CDNのjQueryをImport Mapsで読み込ませる方法

jQueryはもう使わないけど、一例として、、

“`html:index.html





Sample Import Maps



0
元記事を表示

Mermaidでプリザンターにダイアグラム・チャートを表示してみる

## 概要
Mermaidでプリザンターにダイアグラム・チャートを表示させてみます。Mermaidを使うメリットなどについては以下の記事で詳しく紹介されていますので、興味のある方はそちらをご参照ください。

https://qiita.com/Qiita/items/c07f3262d8f3b25f06c9

### 試した環境
プリザンター 1.3.25.3
Mermaid v9.2.2
OS: Windows10
DB: SQL Server

### 事前準備
プリザンターでは拡張HTMLという機能で外部スクリプトを読み込むことができるので、以下の手順でMermaidが使えるようにします。

https://pleasanter.org/manual/extended-html

1. 以下のテキストファイルを作成して配置します。
“`C:\web\pleasanter\Implem.Pleasanter\App_Data\Parameters\ExtendedHtmls\HtmlBodyBottom.html