f@ctor

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

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

npm: heroicons, postcss-import, framer-motion のアップデート メモ (Breaking Changes)

## 1. heroicons v1 → v2

[Release v2.0.0 · tailwindlabs/heroicons](https://github.com/tailwindlabs/heroicons/releases/tag/v2.0.0)

* アイコンの変更。v1 と v2 は異なるアイコンと見なし、好みの方を使えば良いとある
* スタイルが２つ(Outline, Solid) から３つ(+ Mini)に増えた
– Before: `import { … } from ‘@heroicons/react/solid’`
– After: `import { … } from ‘@heroicons/react/24/solid’` or `import { … } from ‘@heroicons/react/20/solid’`
– Before: `import { … } from ‘@heroicons/react/outline’`
– After: `import { … } from ‘@heroicons/rea

元記事を表示

押すと死んじゃうボタン

# こんなボタンが欲しいと思ったことはありませんか？

みなさん、クリックすると「ティウンティウンティウン・・・」と死滅してしまう、そんなボタンが欲しいと思ったことはありませんか？

今回はそれを作ってみました。

# こんな感じ

# 作り方〜HTML編〜

HTMLはこれだけです。

“`html:HTML

元記事を表示

【JavaScript】正規表現まとめ

## 正規表現とは

正規表現とは、ある文字列の中に存在する、パターンを表現するものです。
例えば郵便番号を表現するパターンは「0から9の数字のいずれかを、7回繰り返す」となります。
このようなパターン（正規表現）は後述する、「特殊文字」を組み合わせて記述できます。
正規表現は主に、文字列の検索や置き換えなどに使えます。

## 定義方法
JavaScriptで正規表現を定義する方法は2つあります。

### 正規表現リテラル

“`javascript
// /パターン/オプションフラグ（後述）
const re = /abc/i;
“`

正規表現リテラルはスクリプトが読み込まれたタイミングで、コンパイルされます。
そのため正規表現のパターンが変わらない場合は、こちらの定義方法のほうがパフォーマンスが良いです。

### RegExpコンストラクター

“`javascript
// new RegExp(‘パターン’, ‘オプションフラグ（後述）’)
const re = new RegExp(‘abc’, ‘i’);
“`

こちらは関数実行時にコンパイルされます。
そ

元記事を表示

$(function(){});の意味

# はじめに
`$(function(){});`という書き出しで始まるこちらのコード。
特に説明をされることが無いためメモとして残しておきます。

# $(function(){});について
実はこのコード、省略形になっています。
省略せずに書くと`$(document).ready(function(){});`となります。

つまりHTML(document)の読み込み(ready)が完了してから処理を開始するということになり、基本は省略形を使う。

# サンプルコード
“`javascript:省略形
$(function(){

//ここにjQueryコード

});

“`

“`javascript:省略なし
$(document).ready(function(){

//ここにjQueryコード

});

“`

元記事を表示

Python,Ruby,PHP,Java,JavaScript,Perlの論理演算子の比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlの論理演算子の比較

# Python

https://qiita.com/dondondon/items/0b7de45078bee0ba2b13

# Ruby

https://qiita.com/yusuke_blog1026/items/ab33bdfa495597d04f0b

# PHP

https://qiita.com/tsukishimaao/items/b4a2f30c89ea16ef6eb1

# Java

https://qiita.com/takahirocook/items/748990882f2de7a630a1

# JavaScript

https://qiita.com/TakeshiNickOsanai/items/e180777619f1a49f30e5

# Perl

https

元記事を表示

配列の中のオブジェクト中の配列を重複がないように、二次元配列から一次元配列として取得する

## やりたいこと
このtagsを
“`
const customers = [
{
lastName: ‘2f8’,
tags: [‘VIP’, ‘male’],
},
{
email: ‘a@gmail.com’,
tags: [‘VIP’, ‘male’],
},
{
email: ‘c@gmail.com’,
tags: [‘VIP’, ‘female’],
},
];
“`
↓
重複のないように一次元配列にしたい

“`
[‘VIP’, ‘male’,’female’]
“`

## 解決方法
“`
const customers = [
{
lastName: ‘2f8’,
tags: [‘VIP’, ‘male’],
},
{
email: ‘a@gmail.com’,
tags: [‘VIP’, ‘male’],
},
{
email: ‘c@gmail.com’,
tags: [‘VIP’, ‘female’],
}

元記事を表示

Reactチュートリアルをやった感想

仕事でReactを触ることになりそうだったので、[チュートリアル](https://ja.reactjs.org/tutorial/tutorial.html#before-we-start-the-tutorial)をやってみた
結果、感じたこと、気づいたことをメモする

# 環境
OS：Mac（M1）
エディタ：VS Code

# 最終的なアウトプット
– https://github.com/Kaito-Ozaki/react-tutorial

# やる前の状態
### 知識
– HTML,CSSはちょっと触ったことある、JavaScriptは業務で1年ほど使用しているという状態
– Reactについては、ほぼ知らない。hooksという機能があること、Vue.jsと比較されがちなことを知っているくらい
### 気持ち
– 普段、バックエンド開発しかしていないので、フロントのフレームワーク触るのちょっとドキドキする
– とりあえず公式が丁寧にステップを刻んでくれているので、丁寧にコミットしていくことを心がけたい（普段の業務でもやりたいこと、、）

# やった後の状態
### 知

元記事を表示

タイトルの本文

# QiitaのAPIを叩いてみた
今回はqiitaのapiをたたいてみて記事と投稿者のユーザー情報を取得してみたました！
### 背景
今回なぜQiita APIを使ってみようと思ったかざっくりまとめると
– 会社でqiitaを用いてテックブログを始めた
– 入社して３ヶ月新米エンジニアの勉強
– 興味本位！！！笑
## 使用した技術
– Next.js
– TypeScript
– useSWR
– tailwindCSS
– Mantine
になります！フロントの技術モリモリです！では早速APIを叩きます！
なお、今回は使用技術の前提知識や環境構築は省きます。

““`
const js = () =>{
}
““`

元記事を表示

【JavaScript】複数のオブジェクトを持つ配列を、特定の要素の昇順に並び替える

タイトルの通りですが、以下の配列を`score`の値の昇順に並び替えています。

“`js
let arr = [
{name: “John”, score: 80},
{name: “Mike”, score: 60},
{name: “Beth”, score: 70}
];

let sorted = arr.sort(function(a, b) {
return a.score – b.score;
});
“`

元記事を表示

Vue.jsのcomputedとmethodsの区別

# タイトルについて
近々、Vue案件にアサインされるため、Vue（2系）について今一度基礎からおさらいしようとしているバックエンドエンジニアです。
その時に、以前Vueを使っていて疑問だった「methods」と「computed」の違いについて、備忘録をとして記録します。

# 結論
調べた中での大きな違いは **キャッシュ機能があるかないか** という部分です。

computedには **キャッシュ機能が存在します。**
ページを普通にリロードしてもキャッシュした値を表示するため、データが変わらない限りは再計算されないということになります。
一方、methodsには **キャッシュ機能はありません。** データが変わらない場合でもページをリロードするたびに実行されることとなります。
「Angularよりもより厳格にパフォーマンスを重視して作られた言語」としては、この認識を持って実装できるかは大切なことなのではないか、と個人的には思います。

# +α
じゃあどのようなケースで使い分けたらいいのか…。
それは、 **リアクティブなデータは基本的にcomputedに入れる** とい

元記事を表示

【GAS × Slack】社内timesに麻雀何切るクイズを出してみた話

# はじめに
![2022-10-24_12-33-04_AdobeExpress (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215371/34a3d8e8-851f-a0a0-a425-944e4b4ec3a4.gif)

社内のtimesチャンネルで麻雀の何切る問題を投稿し、ボタンクリックで回答すると、回答者にDMで解答解説が届くSlack Appを作りました。
AppのバックエンドはGoogle App Scriptを採用しています。
麻雀の何切る問題とは言っていますが、要は3択クイズです。

## timesとは

弊社ではコミュニケーションツールとしてSlackを採用しており、times文化があります。
timesとは各々が個人のチャンネルを持ち、自由に発言していく場のことです。
分報と読んだり社内Twitterと呼んだり会社によって異なるようです。
Twitter代わりにしてる人や、勤怠システムを叩く場として使っている人、それぞれです。
### 参考
– [

元記事を表示

Maps JavaScript APIを使ってGoogle Mapに町丁目ポリゴンを表示してみる

# 概要説明
Maps JavaScript APIを使ってGoogle Mapに町丁目ポリゴンを表示してみました。この記事は[OpenLayersを使ってOpenStreetMapに町丁目ポリゴンを表示してみる(OpenLayers v6)](https://qiita.com/4gou/items/d914c277ae96158b2165)のGoogle Map版です。

## 使用するもの
### Google Map
Google Mapは、Googleが提供する地図サービスであり、地域情報を検索することも可能です。知らない街への外出など、日常的に利用している人も多いのではないでしょうか。

### Maps JavaScript API
Maps JavaScript APIはGoogle Mapで提供されている API の中の一つで、ウェブアプリ用に動的でインタラクティブな地図、位置情報、地理空間のエクスペリエンスを作成し、独自の画像やコンテンツを使って地図を高度にカスタマイズすることができます。
Google Map上にマーカーを表示したり、データをマップ上に可視化したり

元記事を表示

JavaScriptの配列のメソッドの使い方～push・pop・unshift・shift・join・split～

# 記事の目的

ども、[N予備校](https://www.nnn.ed.nico/)でプログラミングを勉強中のふーちんです！
この記事ではJavaScript配列関係のメソッドの使い方、6つ紹介・説明しまーす。
push・pop・unshift・shift・join・splitです！
初心者にもわかりやすく（自分も初心者ですが）説明したつもりです。

# 目次

– [1つ目、pushメソッド](https://qiita.com/fuuchin/items/1367a59a93dab3755172#1%E3%81%A4%E7%9B%AEpush%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89)
– [2つ目、popメソッド](https://qiita.com/fuuchin/items/1367a59a93dab3755172#2%E3%81%A4%E7%9B%AEpop%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89)
– [3つ目、unshiftメソッド](https://qiita.com/fuuchin/items/136

元記事を表示

代入したのに、代入されない・・・？ちょっと不思議なオブジェクト【#ゆめみからの挑戦状】

# 先日、Twitter上でこんなクイズを出題しました。

JavaScriptのクイズです。

# クイズの内容
`”たかし”`を代入したのに`”やめ太郎”`と出力されました。なぜ？

コードの`/* ここに解答を書いてください */`の部分を埋めてください。

### コード
“`diff_javascript:JavaScript
const user = /* ここに解答を書いてください */

user.name = “たかし”

console.log(user.name)
// -> “やめ太郎”
“`

# この記事の内容
この記事では、上記のクイズの正解発表と解説をして行きます。
また、**別解**や**面白解答**もいくつかご紹介したいと思います。

# 正解発表

想定していた解答は以下です。

“`diff_javascript:JavaScript
const user = new

元記事を表示

setTimeout の真の力、あなたは知っていますか？

こんにちは。[ぬこすけ](https://twitter.com/nuko_suke_dev) です。

皆さんは「 `setTimeout` とはどんな関数でしょう？」と聞いたら、どう答えますか？

おそらく、ほとんどの人が「指定した時間に処理が走るようにする関数」と答えるのではないでしょうか？

“`javascript
function main() {
console.log(‘動いたよ！！’);
}

// 大体 ３ 秒後に main 関数が動き出す
setTimeout(main, 3000);
“`

大雑把な理解としては問題ないですが、実は **`setTimeout` の隠された能力はそれだけではありません**。

`setTimeout` の隠された能力を知るとどんな良いことがあるのでしょうか？
例えば、次のような良いことがあります。

* **ブラウザに対する理解が深まる**
* **Web サイトのパフォーマンスを向上させることができる**
* **ドヤれる**

まず、 **ブラウザに対する理解が深まります** 。
かのアリストテレスはこう言い残しまし

元記事を表示

Python,Ruby,PHP,Java,JavaScript,Perlの算術演算子の比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlの算術演算子の比較

# Python

https://qiita.com/G-Rape/items/cd3f2f284ba990164564

# Ruby

https://qiita.com/SUZUKI_Masaya/items/eeea6cd36cc265d2dbf0

# PHP

https://qiita.com/mzmz__02/items/8bfbcf2cd48d9e9f2806

# Java

https://qiita.com/morioheisei/items/63088c61e8234dc1f7f5

# JavaScript

https://qiita.com/uhyo/items/cc92a553059274d85403

# Perl

https://perlzemi.com/blog/2

元記事を表示

【JS】Fetch API について

Fetch APIについて学んだことをメモ。
## まずは非同期処理について
簡潔に言うと、実行した処理が完了するのを待たず、次の処理を実行する動きのこと。
反対に、同期処理は実行した処理が完了するまで次の処理を実行できない。
〜人間界で例えると〜
非同期処理：歯磨きしながらスマホをいじりつつ音楽を聴くことができちゃう
同期処理：歯磨き完了→スマホいじり完了→音楽が聴ける

## Fetch APIとは
非同期処理を利用できるAPIの一つで、非同期処理でデータの送受信をすることができる。
Fetch APIのfetchメソッドでは、簡単で論理的な方法で、HTTPリクエストを発行して結果を見ることができる。

具体的な詳細については、下記記事の説明がわかりやすかった。
[JavaScriptのFetch API について](https://qiita.com/sotasato/items/31be24d6776f3232c0c0#fetch-api%E3%81%A8%E3%81%AF)

fetchメソッドでデータを取ると、返り値としてPromiseを返す。

## Promiseとはな

元記事を表示

【プログラミング学習方法】独学とは何かについてもやもやしていたから投稿してみる

こんにちは。
プログラミング見習いのSarasaです。
これまで数多のエラーとの戦いを記事にしてきた私ですが、
「そういえば自分の学習方法についてまとめた記事って書いてなかったよなあ～」
ということに気が付いたので軽～くまとめていきたいと思います。

# そもそもプログラミングスクールに通うという選択肢などなかった件について
私のスペックを簡単にまとめると
* 90分の授業が聞けない（お前は何をしに大学に行っていた）
* みんなと同じことができない（集団行動！？とは）
* 単純作業はできないのに考えることは大好きという矛盾を抱えた面倒なやつ（先生から嫌われるタイプｗ）
* とりあえず映画をみせておけばおとなしくなる（関係ない）

とまあダメダメスペックの塊すぎて少し自分でも自分のことが心配になってきました。

よくプログラミングスクールの是非についての議論やらなにやらをSNSで拝見しますが、そもそも「人の組んだカリキュラムに従って何かをする」ことのできない私にとって、スクールに通える人はもはや才能の塊にしか見えませんでした。

加えて、「本を読んでいると3分で寝る」ため、技術書も読めま

元記事を表示

VueCLIでVue3＋Vuetify＋VueRouterをセットアップする

# はじめに
Vueを勉強しはじめたものの、開発環境をセットアップするために方法がありすぎて迷子になってしまったため、自分用にまとめました。
Vue3、Vuetify、VueRouterをインストールすることで、フロント側の開発環境をセットアップする手順です。

# セットアップ方法
## 前提条件
ローカルのバージョンは下記のとおりです。
OS：MacOS Monterey
Node:v16.17.0
npm:8.15.0
vue:@vue/cli 5.0.8

## プロジェクト作成（Vue3のインストール）
下記コマンドを実行する。どのバージョンのVueを使用するかなどが聞かれるので、Vue3を選択する。その他はお好みで。
“`
vue create my-app
“`
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
で3.xを選択する。
“`
Vue CLI v5.0.8
? Please pick a preset:
Default ([Vue

元記事を表示

typescriptのtypeと同じような動きをpythonで実装したい。

以下のようにObjectに型をtypescriptでつけることがある。これをpythonでも同じようにやりたい。

“`typescript
type ProfileInterface = {
name: string
title: string
email: string
}

const profile_objects: ProfileInterface = {
name: “test”,
title: “mamushi”,
email: “test@hoge.com”
}
“`

## 【解決策】TypedDictを使用する。

“`python
from typing import TypedDict

class ProfileInterface(TypedDict):
name: str
title: str
email: str

profile_objects: ProfileInterface = {
“name”: “mamushi”,
“title”: “types

元記事を表示

OTHERカテゴリの最新記事