Parsing error: Cannot find module ‘next/babel’のエラーの解決方法　メモ

## エラーの内容
Next.jsを導入し、関数を定義したところ以下のようなエラーが出力された
“`typescript
const Example = () => {
//↑↑Parsing error: Cannot find module ‘next/babel’
return

Example

}

export default Example;
“`

## エラーの原因
ESlintという、コードが正しいかどうか検証してくれる静的検証ツールを導入した結果、ルール適応外になってしまったようだ

ESlintについて詳しくは[こちら](https://qiita.com/mysticatea/items/f523dab04a25f617c87d)

## 解決法
ESlintには設定ファイルがあり(.eslintrc.jsonという名前)、そこを編集することで解決できる

“`typescript
{
“extends”: “next/core-web-vitals”
}
“`
この状態から

“`typescript
{
“extend

OpenAPI (Swagger) まとめ

## はじめに

自分は実務でReact×TypeScriptを利用したフロント周りとNode.js(Nest)やRailsを用いたバックエンド(API)の開発をしています。

本記事では、OpenAPIを用いたAPI設計の書き方及び、Swaggerの説明と使い方についてまとめていきます。

## この記事の対象者

– プログラミング初心者から中級者
– APIの基礎を理解している人
– OpenAPIを用いてサクッとモックサーバーを試したい人

## この記事の目標

– モックサーバーの環境構築を学ぶ
– Swaggerの使い方を理解する
– OpenAPIを用いてAPI設計の具体的な書き方を学ぶ

## この記事でやらないこと

本記事ではOpenAPIの「**書き方**」をメインで解説するため、API設計についての細かい解説は省きます。

なおAPI設計については下記の記事でまとめているので、ぜひ参考にしてみてください。

https://qiita.com/KNR109/items/d3b6aa8803c62238d990

## 用語解説

### OpenAPI

[公

Firestore の TTL がリリースされたので挙動を調べてみた

## 概要
先日の [Firebase Summit 2022](https://firebase.google.com/summit?hl=ja) で [Firestore の TTL (Time-To-Live) 機能](https://firebase.google.com/docs/firestore/ttl)がリリースされました。開発する上で、以下の挙動が気になったのでテストデータを作って確認してみました。

1. Cloud Functions の onDelete トリガーや onWrite トリガーは発火される？
2. 途中で有効期限を変更した時の挙動は？
3. どれくらいのスピードで削除される？

調査中に公式ドキュメントも随時アップデートされ、検証する必要のない内容も含まれてしまいましたが、以下に検証方法・結果を記載します。

## 検証方法
以下の手順で検証を行いました。

1. items コレクション内の expireAt フィールドを TTL として設定
1. Firestore に 500 件のテストデータを一括作成し、全て 24 時間後に有効期限を設定

Asanaのサイドバーを一時的に広げる

## やりたいこと

←→の部分を広げる。

プロジェクトが乱立して、どうしてもデフォルトのサイズだと文字が切れてしまって、一発で狙いのプロジェクトにたどり着けない時に。
また、並び替えする時とか、大変ですよね。

## 方法

“`js
document.querySelector(‘.AsanaMain-sidebar’).style.width = ‘600px’
“`

ディベロッパーツールを起動して上記のコマンドをコンソールで実行するだけです。


*広がったあと*
![image.png](

JavaScriptで空白行なのにUncaught SyntaxError: Unexpected tokenに悩まされた

「空白行 Uncaught SyntaxError: Unexpected token」で検索してもヒットしなくて困ったので備忘録

結論を言えばゼロ幅スペースってやつが悪さしていた

1. [事象](#事象)
1. [解決までの経緯](#解決までの経緯)
1. [ゼロ幅スペースとは](#ゼロ幅スペースとは)
1. [VSCodeがえらい](#vscodeがえらい)
1. [振り返り](#振り返り)

## 事象
“`javascript
​console.log(1); //1行目
​
console.log(2); //3行目
VM1353:2 Uncaught SyntaxError: Invalid or unexpected token //2行目でエラー
“`
1. 書いたjsコードが一切動作した形跡がない
1. コンソールを見ると`Uncaught SyntaxError`が出ている
1. 該当行に飛ぶと空白行(その前後も空白行)

という感じだった
↑の1-3行目をブラウザのコンソールに貼りつけて実行すると同じ結果になるはず

## 解決までの経緯
1. 全角スペ

【JavaScript】美味しそうな技?

# ?美味しそうな技…？

そうです。**カリー化**について説明します。カリー？なにそれおいしいの？と思いましたね。カリーは確かにおいしいです。

# ?どんな記述？
“`js
const curry = a => b => a + b;
curry(‘カレー’)(‘ライス’);
// –> カレーライス
“`

例えばこういった記述です。
初見ではナニコレ！？と驚きますね。
この記述は一部省略してあります。省略せずに書くと、

“`js
const curry = (a) => {
return (b) => {
return a + b;
}
}
“`

こうなります。アロー関数の省略記法だと分かりますね。

簡単に説明すると、
> 引数がひとつのときそれを囲む`()`が省略でき、関数内の記述が一行のとき`{return …}`の`{}`と`return`が省略できる

というものです。

結果すべての`()`, `{}`, `return`が省略でき、上記の関数を省略記法を用いて記述すると、下のようになります。
“`js
co

【MapLibre GL JS】OpenStreetMapを表示する

## はじめに
この記事は#30DayMapChallenge2022 8日目の記事です。
テーマはOpenStreetMapです。
MapLibre GL JSを使ってOpenStreetMapのラスタータイルとベクトルタイルを表示してみます。


https://30daymapchallenge.com/

## OpenStreetMapとは
自由に利用でき、なおかつ編集機能のある世界地図を作るプロジェクト
地球上のあらゆる地域がストリート単位の精度で描かれている
画像とベクトルデータセットはオープンデータベースライセンス (ODbL) 1.0のもと再利用可能

## ラスタータイル表示
ラスタータイルを表示してみます。

“`index.html



【Publisher】Create a custom report with HTML and JavaScript

Web report created with [Sharperlight](https://sharperlight.jp/) **Publisher** can also be used as containers for web interfaces created using HTML and JavaScript. Let’s look at a simple example here.
[Sharperlight](https://sharperlight.jp/) has JavaScript libraries such as jquery, [KendoUI](https://docs.telerik.com/kendo-ui/introduction), yui, D3, Chart.Js is enclosed. You can use them to create web interfaces.
This time, I will use Chart.Js to display a line graph. The underlying data is also

JavaScriptでバイト配列を扱う

“`
import { Buffer } from ‘buffer’;

let arr8 = (new Uint8Array([0, 1, 2, 3]));

let buffer = Buffer.from(arr8);

console.log(buffer.readUInt16BE(0));
console.log(buffer.readUInt16BE(2));
“`

【Scheduler】Using PayPal Rest API (Transaction:Writeback)

In the previous [article](https://qiita.com/Miki_Yokohata/items/33e16c98713d6e453ab5), we analyzed the retrieved recordset, flattened the hierarchical data, and determined what columns (and values) existed.

This time, let’s create the part that writes data to the database table.
## Preparing the database ##
Since I already know the required columns, I create the table with the SQL CREATE TABLE statement.
Launch SQL Server Management Studio and create an empty database. Create a table in that da

GoogleAppsScriptで大量メール送信　第2回Google制限

## はじめに
第1回では、経緯と仕様についてお伝えしました。
https://qiita.com/AbridgeOkinawa/items/2fe5881cb2274144bd91

第2回はGoogle Workspace制限について記事にします。

## Gmail制限とGAS制限
GASには業務効率化に役立つツールですが、有料・無料に関わらず利用にあたっては様々な制限事項があります。
私自身、不正利用などを考慮してかなと考えていますが、ここまであるのかとビックリしました。

全ての制限については、公式サイトをご確認頂くこととして、当記事では、今回考慮する必要があった制限についてご紹介します。

https://support.google.com/a/answer/166852?hl=ja

https://developers.google.com/apps-script/guides/services/quotas#current_limitations

### Gmail制限
– 送信制限
Gmailにおいて24時間以内に送信できる件数が決まっています。制限に達

GoldenLayoutとかいうマルチウインドウライブラリ

# 背景
実装中のUIは、
ブラウザ画面内に複数のウインドウを並べて操作できる
ものになっています。

公式に例でいうとこんな感じ

# 使用ライブラリ
そこでGoldenLayoutというJavaScriptライブラリを使用しています。
https://golden-layout.com/

ちなみにVue.jsには対応していません。辛い。
ただJavaScriptライブラリなので無理やりVueコンポーネントに導入して
使用することはできています。

この記事はVue.jsで使用することを前提に記述していきます。
Reactの例は公式ドキュメントにあります。

# 気をつけたこと

通常のシングルページアプリケーションと大きく違うのは、
ページ遷移でなく、
ウインドウを出すか出さないか、消すか
と

【スケジューラ】PayPal Rest APIを利用してみる（Transaction:書込）

前回の[記事](https://qiita.com/Miki_Yokohata/items/e76168697bf7b6adce4e)では、取得したレコードセットを分析して、階層になったデータをフラット化し、どのような列（値も）が存在するかを調べました。

今回はデータベーステーブルに書き込む部分を作成してみようと思います。
## データベースの準備 ##
既に必要な列が分かっているのでSQLのCREATE TABLE文でテーブルを作成します。
SQL Server Management Studioを起動して、空のデータベースを作成します。そのデータベースに以下のようなテーブルを作成します。
“`
CREATE TABLE [dbo].[Transaction_Info](
[paypal_account_id] [nvarchar](256) NULL,
[transaction_id] [nvarchar](256) NOT NULL,
[transaction_event_code] [nvarchar](256) NULL,
[transaction_initiat

jsファイルからGETでControllerに値を渡す

## 環境
Rails5.2
Slim

## はじめに
以前、「link_toでViewからControllerに値を渡す」という題で記事を書いたことがあります。この記事の内容は、Controllerへ受け渡すパラメータを、link_toで直接指定するといったものでした。

https://qiita.com/pyon_kiti_jp/items/545b391b3e101298c712

今回の記事は、link_toではなく、jsファイルにパラメータを指定してControllerへ渡すといった方法になります。jsファイルでパラメータを指定できれば、Viewで作成した画面項目に入力した値を、GETを使って、Controllerへ受け渡すといったことが可能になります。

## 事前準備
SeikyusControllerクラスの中に、testというメソッドを作成しました。
“`seikyus_controller.rb
class SeikyusController < ApplicationController def index end def test red

yarn startを実行するとerror:0308010Cエラーが発生

概要

yarn startでサーバーが立ち上がらない(Error: error:0308010C:digital envelope routines::unsupported)

理由

Nodeのバージョンが高すぎるのが原因らしい。v14.18.1以下まで下げる必要がある。
推奨版をダウンロードしたんだけどなあ。

解決策

versionを下げよう！以下参考に。先人の知恵に感謝。

https://qiita.com/k3ntar0/items/322e668468716641aa5c

困ったら

まずは公式ドキュメント。これは定石だね。

https://yarnpkg.com/getting-started/install

関数は変数である – Good Concepts in Programming –

# 概要
プログラミングの良い概念を理解するとプログラマーレベルが上がると考えています。
良い概念は特定のプログラミング言語に縛られないので、様々なプログラミング言語で役に立ちます。
前回は[良いコードは良い名前から生まれる](https://qiita.com/masaki_nakada_ari/items/d5fd8df6f515debf00fa)を紹介しました。
今回紹介する良い概念は「関数は変数である」です。

本記事のタイトルを見て「ちょっと何言ってるかわからない」と感じた方はぜひ最後まで読んでほしいです。
関数の見え方、使い方が劇的に変わります。

# 第一級関数
あまり聞き慣れない用語ですが、第一級関数は関数がその他の変数と同様に扱われることを表します。
JavaScriptで関数を宣言するサンプルコードを見てみましょう。

## 関数宣言（functionオブジェクト）
足し算をする関数（add）を宣言してみましょう。

“` function_add.js
function add(a, b) {
return a + b;
}

add(100, 23);

JavaScriptから使いやすいWebAPIをRPCでお手軽に

JavaScriptから使いやすいWebAPIを考える回。
WebAPIといえばRESTが有名ですが、今回はRPCを実装してみます。

## 基本的な使い方

“rpc.js“はローカル関数を実行するような感覚で、サーバ側の関数を実行できます。

“`js:基本的な使い方
import API from ‘./rpc.js’

const result = await API.plus(1, 2) // 関数名plusと引数[1,2]が送信される
“`

ここでplusメソッドは幻で、定義はありません。
裏で**関数名**と**引数**がHTTP送信されて、サーバ側で同名の関数が実行され、結果が返ってくる仕組み。

基本的にGET送信ですが、**関数名の最初が大文字**の場合はPOST送信になります。

“`js:POST送信
const result = await API.Save(data) // POST送信
“`

以上がJavaScriptからWebAPIにアクセスする最善の書き方だと思います。
サーバ側も関数定義＋αで済むので、全体を通してシンプルで分かり

javascriptを基本から　① ボタンクリック時、何かjavascript（alert()メソッド）を実行する

初めまして。Junです。
猫のような気分屋な時があるのに、真面目にコーディングのノートを書いたりしています。根っこは真面目なんだろな・・多分・・。

まぁ、今回は、javascriptの復習をしながら、プログラミングノート的なものを、Qiitaに載せていこうかなと思います。

初めてで、拙いところたくさんあると思いますが、ご了承いただけましたら幸いです。

では、この記事の発想がどこから来たかというと、
– – –
「実装したい機能」→「完成形のコードが思いつき、書ける。」
– – –

を目標に、たくさんのノートを作っていくことで、実力アップを目指して、この記事を書きました。
今回、初めて取り組みたい機能は、下記の

– – –

ボタンをクリックした時に、alert()メソッドが実行される。

– – –

です。

下のGIFが結果の画面です。
![click.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217654/003a69da-98fd-c0e3-ffcc-48d0623ae438.g

【Next.js】React-Hook-FormとSSGformを使ったお問い合わせフォーム作成【フォーム送信】

はじめに

Next.jsで作成中のポートフォリオにお問い合わせフォームを設置したいと考え、
色々試行錯誤しながらなんとか原型が出来たので備忘録がてらここに書き記す。

使ったパッケージ等

• “react-hook-form”: “^7.39.1”
• “yup”: “^0.32.11”
• “@hookform/resolvers”: “^2.9.10”
• SSGform

SSGform

フォーム送信よりも先にバリデーションを実装してしまい、その後にフォーム送信機能を作成しようとして詰まった。
サーバーレスで簡単に実装出来るフォーム送信ライブラリを探していたところ、ヒットしたのがこちらの

[SSGform](https://ssgform.com/)と言うサービス。
無料会員登録さえ行えばJSX内のformやinputにちょろっと記載するだけでフォーム機能を実装できる優れもの。

コード例
“`html

【Webpack】デプロイ後に発見したJavaScript難読化の落とし穴

# はじめに
この間、Webサービスの追加機能デプロイ時に **「[uglifyjs-webpack-plugin](https://www.npmjs.com/package/uglifyjs-webpack-plugin)」** というNode.jsのライブラリを使ってJavaScriptの難読化を行なったところ不具合が発生しました。
しかし原因はライブラリでもバージョンのズレなどでもなく、「ソースコードの難読化」自体にありました。
この記事では、**「JavaScriptの難読化」** に潜む落とし穴とその対策についてお話しします。
私自身考えもしなかった落とし穴でしたので、皆様もぜひ参考にしてください。

# ソースコードの難読化とは
[なぜ、JavaScript を難読化する必要があるのか？](https://www.agtech.co.jp/blog/2021/12/need-for-obfuscation)
こちらの記事がとても参考になりますので、分からない方はご一読ください。

ソースコードの難読化とは、**処理内容を変えず、とにかく読みづらくすること**です。
言って