f@ctor

JavaScript関連のことを調べてみた2023年01月27日

JavaScript関連のことを調べてみた2023年01月27日
目次

React.js： JSXファイルのトランスパイル後のJavaScriptコードを確認する方法

React.jsでJSXファイルを作成した時、それがBabelでトランスパイルされた後のJavaScriptコードを確認したいと思いませんか？

実はできるんです。

Babelがどのように変換するか確認したいときは、Babel REPL

https://babeljs.io/repl

を使うことで、変換後のJavaScriptコードを確認できます。

このWebサイトでは、ページの左側に新しい構文のJavaScriptを記述すると、即座にBabelでコンパイルされて、ページの右側に結果が表示されます。

是非、ご活用ください。

元記事を表示

matchHeight.js でつまづいたこと

## なぜ matchHeight.js を使用したか
業務を進める中で、子要素の高さを揃える必要が出てきました。
CSSのFlexboxは便利なのですが、子要素まで高さを揃えることはできません。
テーブルレイアウトにすれば揃えることはできますが、
そうするとソースコードが見にくくなること、
レスポンシブであることを考慮した上で、
HTMLのメンテナンス性を保つため「matchHeight.js」を使用することにしました。

## 問題点
例えば、以下のように横着して一括で指定すると高さが揃いません。
（要素を一つずつ比較参照するのではなく、指定した全ての要素を同じ高さにしようとして、うまく動かないようです。）
“`js:
$(function(){
$(‘h2, p, dt, dd’).matchHeight();
});
“`

Chrome Platform Status API

https://chromestatus.com/features

# featureをすべて取得

https://chromestatus.com/api/v0/features?num=2301

“`javascript
const features = await fetch(‘https://chromestatus.com/api/v0/features?q=&num=2301’).then(r=>r.text()).then(r => JSON.parse(r.slice(5)))
“`

Googleドキュメントだけを抽出

“`javascript
features.features.map(f => f.doc_links).filter(l=>l).flat().filter(l=>l.includes(‘docs.google.com’))
“`

https://docs.google.com/document/d/1ZYjaZBthiN-yNioJkoqh-aqwC1NOgC-YpptiNlzfdZQ/edit?usp=sharing&resou

元記事を表示

【TypeScript】ExcelJSで出力したCSVへのSJIS対応

### ExcelJSによるCSV出力とSJIS対応
ExcelJSを利用して出力したCSVファイルをSJIS対応させようとサイトを参考にコードを書いたらエラーを吐いて動かなかったので備忘録。
SJIS対応にはecoding.jsをnpm installしてインポートする。

https://github.com/polygonplanet/encoding.js/blob/master/README_ja.md

CSVファイルを作成する部分は他サイトにお任せして、エラーになった部分を以下に抜粋。
“`react: Csv.ts
import Encoding from “encoding-japanese”;
// 省略
const workbook = new ExcelJS.Workbook(); //ブックを作成

// 省略
const uint8Arr = new Uint8Array(
Encoding.convert((await workbook.csv.writeBuffer()), {
// await workbook.csv.writeBuffer(

元記事を表示

WordPressで独自テーブルにフォームデータを格納する。バリデーションや非同期通信もやってみる。

## ■背景

仕事のため、必要だったため。
あまり記事もなく、調査が面倒だった。
自分共有用として。

mysqlのテーブル作成は記載していない。

## ■概略

処理の流れは以下

1. フォームの送信ボタンをクリック時に、javascript起動（バリデーション、送信前の確認メッセージ、非同期で自身の固定ページにpost送信）

2. 自身の固定ページにpost送信するので、配置しているショートコードがキック

3. 使用しているテーマのメソッドがキック

## ■固定ページ

### html

“`html

アンケート

氏名：
→注意：wordpressはname属性に「name」とすると、post送信時にエラーとなる

〜その他フォームなど〜

元記事を表示

POST送信（通常／javascriptで制御／動的にフォームを作って送信）

## ■通常

何も制御する必要がない場合はこちら。

“`html

なんらかのフォーム

“`

## ■javascriptで制御する場合

javascriptで制御するので、バリデーションなどの処理をはなむことができる。

“`html

なんらかのフォーム

“`

“`javascript

こんにちは、二項しいぷです。
普段はSIerで大規模システム開発をしたり、競技プログラミングのコンテストに参加したりしています。
今回初めて**ゲーム制作や少人数のチーム開発**を経験し、それがとても楽しくて学びも多かったので、共有します。

# Phaser3？
**HTML5ゲームエンジン**です。
JavaScript/TypeScriptを用いて、PCやスマートフォンのブラウザから遊べるHTML5ゲームの開発ができます。
日本ではあまり聞き馴染みがなく情報も少ないですが、Githubのスター数が33kを超えているなど、世界的には大人気らしいです。
環境構築や学習のコストが低く、2Dアクションゲーム・シューティングゲーム・脱出ゲーム・パズルゲームなどに向いたフレームワークです。

今回は
・PC/android/iOSからプレイできるゲームを作りたい
・開発メンバーが使い慣れているゲーム系

元記事を表示

【GAS】ログの色を変更したい

# はじめに
インターン先でGASを使用して社内ツールを作成する機会がありました。
ログが見にくいなと思い、ログに色をつけることはできないか調べたところ方法があったので記録しておきます。

# やりかた
```javascript
// 白
console.log("白色です")
// 黄
console.warn("黄色です")
// 赤
console.error("赤色です")
```

# おわり
ログが見やすくなりました！

元記事を表示

web会議への参加を自動化した話

Google カレンダーに登録されているweb会議に、５分前に自動的に参加してくれるようにできたのでそのやり方を書きます。

これを使えば会議への出席忘れや会議の少し前から待機している必要がなくなります。

### 環境
- mac
- google calendar
- google meets
- safari

### 1.自動的にブラウザを立ち上げる
macには操作を自動化してくれるAutomatorというアプリケーションがあります。
今回はこちらを主に使用して自動化します
![スクリーンショット 2023-01-26 15.39.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706631/1d9e4a52-981e-cb3d-cccf-6193ca80dc77.png)

automatorを立ち上げると処理を聞かれるので、なんでもいいですがとりあえずワークフローを選択
![スクリーンショット 2023-01-26 15.42.33.png](https://qiita-image-st

元記事を表示

youtube動画を検索するJavaScript

- youtube実行するAPIキーを取得する手順は適当なページを参考

- youtube player api の読込
https://developers.google.com/youtube/iframe_api_reference?hl=ja
- youtube data api
https://qiita.com/koki_develop/items/4cd7de3898dae2c33f20
https://developers.google.com/youtube/v3/docs/search/list

```HTML:抜粋

```

```JavaScript:API実行＆HTML表示
/** youtube data api key */
const youtubeDataApiKey = 'ここに取得したkeyを設定';

/**
* youtube player api の読込
* https://developers.google.com/youtube/iframe_

元記事を表示

Reactの基礎５:フォームの作成

# フォームの作成と値の更新

```test.js
[value, setValue] = React.useState("")
```

で、変数とその値の更新の関数を宣言できます。`setValue(xxx)`を実行する度に`value`が`xxx`に更新されて、それらが宣言された関数(コンポーネント)が再実行されます。例えば次のコードでは画面には返り値のフォームが表示されていて、その入力が更新されると`onChange`の中の関数が呼び出されます。すると、値が更新されて再実行によって更新後の値がコンソールに表示されます。

```App.js
import React from "react"

function App() {
const [firstName, setFirstName] = React.useState("")

console.log(firstName)

function handleChange(event) {
setFirstName(event.target.value)
}

元記事を表示

React + TypeScript: Next入門03 プリレンダリングとデータ取得

Next.jsチュートリアルの公式作例を、TypeScriptも加えて、一からつくってみるシリーズの第3回です。アプリケーション内のディレクトリに収めたマークダウンファイルからデータを読み込んで、トップページに表示してみます。

# プリレンダリングとは

プリレンダリングはNext.jsのデフォルトで、各ページはあらかじめレンダリングされます。ページのHTMLをクライアント側のJavaScriptにすべてつくらせるのでなく、Next.jsが静的な処理は先に済ませておくということです。プリレンダリングは、パフォーマンスとSEOを高めるのに役立つでしょう。

生成されたページそれぞれに関連づけられているのは、必要最小限のJavaScriptコードです。ブラウザがページを読み込むと、そのJavaScriptコードが実行され、完全にインタラクティブになります(「[ハイドレーション](https://zenn.dev/hisasann/articles/what-is-hidration)」と呼ばれます)。

Next.jsには、つぎのふたつのプリレンダリングの仕方があります。違いは、いつペー

元記事を表示

npm install -g {packageName}は古いと言われた

先日、モブプロで開発作業中にnpm install -gを実行しようとして先輩に「npm install -gはもう古い。[npx](https://www.npmjs.com/package/npx)を使った方がいい」と言われた。

```
npm install -g {packeageName} # インストールしたらディスク上残る上にインストール後に実行する必要がある

npx {packageName} # インストール、実行、削除、を全部やってくれる
```

npxは node package executerの略でパッケージの実行ツールらしい。
パッケージを探してインストールして実行、処理が終わればパッケージを消してくれる優れもの。便利だなぁ～

元記事を表示

【Expo】評価付きの思い出管理アプリをリリースしてみた

# はじめに
Expoの勉強を兼ねて思い出管理アプリを作成しました。
Expo（ReactNative）は日本語記事がかなり少ないのが難点ですが、Reactの知識があれば新しく勉強することはそこまで多くないです。
最低限の機能でリリースしましたが今後もアップデートを重ねていくので是非インストールして使ってみてください！！?

https://play.google.com/store/apps/details?id=com.nojitake.omoidemeisho

# どんなアプリ？
ログイン不要で画像にタイトル・点数・メモを付けて登録することができ、思い出に色を付けて管理することができます！
自分専用の旅行・観光アプリのような感じですね。行った場所に点数とタイトルを付けてアルバム管理するなどの使い方ができます！

ま

元記事を表示

JavaScript ~コレクション編~

・コレクションとは

コレクションとは、値をまとめて管理するオブジェクトのことである。コレクションには、Object、Array、Map、WeakMap、WeakSetの５種類ある。

・Array（配列）

・Arrayの初期化

　　`const 配列名 = [値1, 値2, ...];`　又は `const 配列名 = new Array (配列の長さ or 値1, 値2, ...);`

・配列のメソッド

　　`配列名.push("Zoom", "Discord"...);`　配列の一番後ろに要素を追加する。

　　`配列名.unshift("Java", "JavaScript"...);` 配列の先頭に要素を追加する。

　　`let shiftVal = 配列名.shift();` 配列の先頭の要素を削除する。 shiftValに削除された値が代入される。

　　`let popVal = 配列名.pop();`　配列の一番後ろの要素を削除する。 popValに削除さ

元記事を表示

実務未経験でHTML5プロフェッショナル認定試験 レベル2に一発合格した

HTML5プロフェッショナル認定試験 レベル2に合格したので
これまでの学習スタイルであったり、学習方法などまとめて
同じ資格試験の合格を目指している方や、
これから取得に向けて勉強を始める方の
参考になる記事になればよいなと思います。

HTML5プロフェッショナル認定試験とは

特定非営利活動法人エルピーアイジャパンが主催する民間資格です。
HTML5プロフェッショナル認定試験にはレベル1とレベル2が存在し、
それぞれ出題範囲が異なりますが、レベル１の説明については割愛します。

レベル２の出題範囲

2.1 JavaScript
2.1.2 ES6（ECMAScript2015）以降の新機能(Ver2.5)
2.2 WebブラウザにおけるJavaScript API
2.3 グラフィックス・アニメーション
2.4 マルチメディア
2.5 ストレージ
2.6 通信
2.7 デバイスアクセス
2.8 パフォーマンスとオフライン
2.9 セキュリティモデル

元記事を表示

オブジェクトの分割代入(Destructuring assignment)

はじめに

分割代入(Destructuring assignment)とは
配列やオブジェクトのプロパティを解体して、その値を個別変数に含めることができるJavaScript表現式です。

分割代入の適用前

以下のコードを見ると、this.feeds[i]オブジェクトが何回も使われています。
こんなのを見るとthis.feeds[i]を一つの変数に抜き出しておきたいわけです。
こんな時に分割代入にて綺麗なコードにすることができます。

```typescript
renderView = () => {
if(this.store.hasFeeds) {
for(let i = (this.store.currentPage - 1) * 0; i < this.store.currentPage * 10; i++) { this.addHtml(`

    • OTHERカテゴリの最新記事