f@ctor

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

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

Function Componentsに型をつけるときFCを使う？それともJSX.Elementを使う？

# この記事を書く動機
メモ
間違っている部分があればコメントで教えてください。

# 前提知識

https://kray.jp/blog/dont-have-to-use-react-fc-and-react-vfc/

https://github.com/typescript-cheatsheets/react#function-components

# 問題
以下、尊敬するエンジニアの方々のツイートを引用させていただきました(いつもツイートから勉強させてもらっています。ありがとうございます！)：

# これまでの経緯を振り返る
## React v17までの書き方
* FCとVFCを使い分ける方法
基本はVFCを使い、childrenがprop

元記事を表示

jenkinsのタイトルとfaviconを変更する方法

jenkinsに初めて触り始めたのだけど、色々なビルドマシンがあると、どれがどのマシン？？って思うことがよくある。
で、現在会社では全部同じ見た目とタイトル。

ジョブの名前と、URLの名前で判断する感じになっています。

UI的には、一瞬で、このマシンだ！！とわかるのがベストなので、これを変更する必要があると思い対応した時の話。

# simple theme pluginのインストール
タイトルとかロゴを変更する場合、カスタマイズしたcss/jsを使う必要があるので、まずカスタマイズできるように
simple theme pluginをインストールする。

https://plugins.jenkins.io/simple-theme-plugin/

インストールすると、jenkins管理画面で、css/jsのファイルの指定先を記述する場所が出てくるので、
/var/lib/jenkins/userContents/… とかの中にフォルダやファイルを置いて指定する。

# css/jsのカスタマイズ
## ico/pngを用意
何か適当なサイズのicoを用意してください。

元記事を表示

includesの使い方

# includesとは？
– 〇〇が含まれているかどうか判断する時に使う

# 実践
まずはじめに以下の変数を定義します。
“`index.js
const color = ‘赤青’
const red = ‘赤’
const blue = ‘青’
const white = ‘白’
“`

次に任意の文字が含まれているかどうかのロジックを作ります。（本題）
“`index.js
color.includes(red)
// true

color.includes(blue)
// true

color.includes(white)
// false
“`

実際にアプリなどで使う場合の想定としては、その値が含まれているかどうかで条件分岐を行ったりする場面が想定されます。

元記事を表示

[JavaScript]リアルタイム反映されるアップロード画像の拡張子変換が意外とめんどかった

# [JavaScript]リアルタイム反映されるアップロード画像の拡張子が意外とめんどかった

# TL;DR

– ``で受け取ったfileの拡張子を.jpg→.pngの変更って簡単にできない
– GUIなら簡単なのに…
– フロント制御だけならHTMLのタグがあるが。。。

https://webbibouroku.com/Blog/Article/html5-file-accept

# はじめに

## やりたいこと

– フロントでjpg, jpeg, pngを受け取れる``を作成
– 受け取ったfileをサーバーに送信する際はpngに変換して、base_64文字列でリクエストしたい
– 生fileでリクエストするとバリデーション内容膨大、ローカルストレージに保存される無駄、jpeg exifの考慮（画像の回転情報補正処理）があるのでかなり避けたい…

## 悩み

– JSでサクッとできる方法がない…
– GUIならサクッとできるのに…
– 拡張子を.jpgから.pngにするだけ

元記事を表示

PG見聞録　~javascript編 基礎 OF 基礎1~

Javascriptの基礎中の基礎を上げておこうと思います。
phpとの違いや知らんかったことを書いていきます。

変数とデータ型

・真偽値　Boolean 　true/false
・文字列　string 　”hello”
・null
・undefined
この辺はよくある型ですね。

・数値　Number
数値はintegerじゃないんですね。
他にも…

・シンボル　Symbol　
・Bigint　桁の多い数値に使う
なんてものがあるんですね。
とりあえず、ということでシンボルは「一意の値」として覚えておきます。
オブジェクトは　key: value といった書き方になるようです。
少しオブジェクトについても書こうと思います。

オブジェクトについて

書き方としては
名前：値　だったり
名前：関数　だったり
名前：オブジェクト　な

元記事を表示

Object.keysの使い方

# Object.keysとは？
– あるオブジェクトがあったとして、その中のキー名だけを抽出したい時に使う
– 値が取れたあとは新しい配列を生成する
# 実践
まずはじめに以下のようなオブジェクトを用意します。
“`index.js
const datas = {id: 1, string: ‘box’, number: 10, boolean: true}
“`
次に`id`と`string`と`numer`と`boolean`を抽出します。（本題）
“`index.js
const dataKey = Object.keys(data)
console.log(dataKey)
// [‘id’, ‘string’, ‘numer’, ‘boolean’]
“`

これですべてのキーを取ることができました。

コンソールで実際に試すと以下のようになります。
![スクリーンショット 2022-05-20 23.12.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/fc53

元記事を表示

PG見聞録 ~javascriptについて~

SQLとかApacheとか書こうと思いましたがjavascriptの成り立ちなどについて
ちょうど学ぶ機会があったので短いですがせっかくだから書いておこうと思います。
普段触ってるものがどうして出来たのかなど、知っておくことは大事だと思いますんでね。

javascriptが出来た経緯

遡ること約３０年、1990年代はインターネット黎明期。
当時は「Netscape Navigator」というブラウザが主流となっていました。
そこに現れたライバル、Microsoftが開発した「Internet Explore」です。
これをWindows OSと一緒に配布することで一気にシェアを獲得しました。
そこでNNが対抗策として開発したのがJavascriptという言語。
Microsoftも使おうと思ったけれども、ライセンスの問題で使うことが出来ず・・・
すかさずMicrosoftは「JScript」と似たようなものを開発します。すごいですね。
しかしこれらは非互換、名前は似てても全くの別物なんてなかなかに不便ですよね。

元記事を表示

Visual Studio CodeでLive ServerのGo Liveを押してもブラウザが起動しない場合の対応方法

## 概要
Visual Studio Codeの拡張機能であるLive Serverをインストールし、Go Liveを押してもブラウザが起動しない場合に設定すべき項目をまとめます。

## 現象
本来ならば以下の手順でブラウザ上でソースコードを確認できるはずだが、3でブラウザが自動的に起動しない。
1.Visual Studio Codeの拡張機能のLive Server(以下)をインストールする。
image.png

2.確認したいファイルを右クリック「Open with Live Server」をクリック。
OpenWithLiveServer.jpgtailwind.cssで長い文字列を・・・にする方法【複数行】

一行のみ

“`html

一行のみを・・・にする場合

“`

複数行

ライブラリを導入

“`
yarn add @tailwindcss/line-clamp
“`
“`tailwind.config.js
module.exports = {
plugins: [require(‘@tailwindcss/line-clamp’),],
};
“`

２行

“`html

【２行】ゴリラゴリラゴリラゴリラゴリラ ゴリラ ゴリラ ゴリラ ゴリラ
ゴリラ ゴリラ ゴリラ ゴリラ ゴリラ ゴリラ ゴリラ ゴリラ ゴリラ
ゴリラ ゴリラ ゴリラ ゴリラ ゴリラ ゴリラ

“`

３行

“`html

【３行】ゴリラゴリラゴリラゴリラゴリラ ゴリラ ゴリラ ゴリラ ゴリラ
ゴリ

元記事を表示

Javascriptでタグの属性（classやstyle）を指定して削除する方法

## 方法

参考にした記事
https://www.javadrive.jp/javascript/dom/index3.html
https://www.javadrive.jp/javascript/dom/index18.html

ページ読み込み時に実行するjavascriptについてのTips

### Jqueryの場合

“`javascript
$(function() {
$(“span”).removeAttr(“style”);
$(“span”).removeAttr(“width”);
});
“`

### Vanilla JSの場合

“`javascript

“`

元記事を表示

【JavaScript】正規表現で数値を取得し、変数代入する

## はじめに
`http://localhost:3000/user/1’`などのパスの最後の数値を取得し変数代入することがあったので方法を記録しておく。

## 結論

“`javascript
// 対象となる文字列
const text = ‘http://localhost:3000/user/123’;

// 正規表現を定義
const regex = /(?<=user\/)([0-9]+)/; // "()" で指定した箇所が $1　に入る const found = text.match(regex); // found[0]で取得可能 console.log("found", found[0]) => 123
“`

### 詳細
`(?<=user\/)`の部分は後読みアサーションといい、上記の例では、取得したい数字の前に、`user/`が存在する場合のみ、その数字がマッチするようになる。 あとは、`text.match(regex)`でmatchさせたときに、変数`found`には配列でデータが入るので、その一つ目を取得すればいい。 ## おわ

元記事を表示

viteでlessをimportした際の inline JavaScript is not enabled. Is it set in your options? を解消する

viteでAntDesignのテーマのカスタマイズを行おうとしたときに

`inline JavaScript is not enabled. Is it set in your options?`

というエラーが表示されました。

調べてみると preprocessorのオプションに　`javascriptEnabled: true` を設定してあげないとダメそうです。

## `vite.config.js` の設定変更

というわけで件の設定はviteでどうやってやるのって調べたら以下のように書けばいけるみたいでした

“`js:vite.config.js
import react from “@vitejs/plugin-react”;
import { defineConfig } from “vite”;
import tsconfigPaths from “vite-tsconfig-paths”;

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(),

元記事を表示

テンプレートリテラルにシンタックスハイライトを

## Abstract

JavaScript, TypeScriptなどでHTML, CSSの文字列を生成して返すような処理を書くことが稀にありますよね。そういった際に、その文字列は当然HTML, CSSファイルの中ではないので、シンタックスハイライトは効きません。`<>`を閉じ忘れていたりした時などは非常に気が付きにくいものです。そこで本記事では、`.js, .ts`ファイルなどで文字列にシンタックスハイライトを適用するVSCodeの拡張機能[Comment tagged templates](https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates)を紹介します。またそれだけでは内容も薄いので、vue.jsの`.vue`ファイルでシンタックスハイライトを効かせる方法も紹介します。

## 紹介

[Comment tagged templates](https://marketplace.visualstudio.com/items?itemName=bierner.c

元記事を表示

React + TypeScript: Apollo Clientでクエリをリフェッチ(refetch)する

[Apollo Client](https://www.apollographql.com/docs/react/)はReactで使える状態管理ライブラリです。ローカルとリモートのデータをGraphQLで扱えます。本稿は公式サイトの「[Refetching queries in Apollo Client](https://www.apollographql.com/docs/react/data/refetching)」にもとづいて、Apollo ClientのメソッドでクライアントサイドのGraphQLデータをどう更新するかについての解説です。Apollo Clientでクエリを使うための基礎はすでに学んだことが前提となります(まだの方は先に「[React + TypeScript: Apollo ClientのGraphQLクエリを使ってみる](https://qiita.com/FumioNonaka/items/0c6b711627e3443ff73b)」をお読みください)。ドキュメントの邦訳ではなく、日本語で説明し直しました。原文から省いた部分もあり、逆にわかりにくいところ

元記事を表示

どんなページでもエルデンリングの気分を味わえるブックマークレット

![qiita.com_(Desktop).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248832/0956aa6d-253c-a96b-8633-5a9e79692ecf.png)
エルデンリング（もしくはダークソウル）のゲームオーバー時に表示される「YOU DIED」をWebページ上で再現するブックマークレットを作りました。この先、時間の無駄があるぞ。

“`javascript
javascript: (() => { const s = document.createElement(‘style’); document.head.appendChild(s); s.sheet.insertRule(‘.eldenring { all: initial; display: flex; align-items: center; opacity: 0; pointer-events: none; position: fixed; top: 0; left: 0; width: 100vw; he

元記事を表示

【moment.js】Dateを扱うとき、Safariには気をつけよ。

日付の入力フォームに「バリデーションを実装している時のこと。
Safariだけ、存在しない値を入力してもバリデーションに通ってしまうという謎現象に遭遇。

## 結論
フォーマット時の書き方をSafariに合わせる必要がある
“`javascript
❌ var now = moment(“2022 5 20”).format(“YYYY-MM-DD”);
⭕️ const valDate = moment(“2022 5 20”, “YYYY MM DD”).format(“YYYY/MM/DD”);
“`

## 現象
例えば “1999年9月90日” と入力された際、このような日付は存在しません。
今回、moment.js のisInvlid関数を使用して、日付の存在チェックを行っていたのですが、
何故かSafariではこの日付が存在することになってしまうのでした。（怖）

consoleにフォーマット後の値を出してみたところ、以下の値が。
“`
Date: 1999/11/29
“`
なるほどフォーマットがうまくいってない。全然違う値が返ってきてるやないかいっっ
90日

元記事を表示

Eslintのエラーについて

### 概要
webpackを利用してjQueryを記述中にeslintのエラーが出たので、エラーの意味と解決策

①
“`javascript
var storyTitle = $(“.p-story”).find(“.js-blockTitle–scroll”).html();
var storyTitleTrim = $.trim(storyTitle);
var newHtml2 = “”;
storyTitleTrim.split(“”).forEach( v => {
newHtml2 += “” + v + ““;
});
$(“.p-story”).find(“.js-blockTitle–scroll”).html(newHtml2);
“`
“`
error ‘storyTitle’ is assigned a value but never used no-unused-vars
“`
→変数定義の際にvarを使用するのは望ましくないからconstかletで定義しようというエラー
varをconstもしくはletに変更

元記事を表示

LeafletでGeoJSONを読み込みカスタムアイコンを表示する

OpenLayersでは難なく実装できましたが、Leafletではちょっと苦戦したので書いてみました
手順を踏みながら実装していきます

## GeoJSONとは
– JSONをもとにした、GISデータを記述するためのフォーマット
– 多くの GIS 技術やサービスの間で非常に人気のあるデータ形式

## GeoJSONオブジェクトを使ってアイコンを表示する
まずは、GeoJSONオブジェクトを定義して押上駅にアイコンを表示してみましょう
“`index.html




アイコン表示 Googleブログデータを取得するサンプルコード(blogId,apiKey)

# 概要
単に、ブログデータだけを取得するのであれば、Googleログインは不要で、$.ajax()を使用して取得できることを確かめました。ブログの投稿、更新、削除するには、GoogleログインしてOauth2認証をする必要があると思います。

“`







ブログデータの取得サンプル(ログインなし)

単に、ブログデータのみを取得するには、Googleログインは不要であることを
確認するためのサンプルです。