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

Electron Tips ~便利なモジュールや小技~

Electronを使用した開発を最近行ったので、個人的に便利だったモジュールや小技などをまとめていこうと思います。

使用した**Electronのバージョンは15系**です。

## Electronのメインプロセス側の基本コード
基本のメインプロセスの構成はだいたい誰が書いてもこのようになると思いますので、こちらをベースに紹介していこうと思います。

すべてのプラットフォームで動作する結合絶対パスを作成するためにnode.jsの標準モジュールである`path`を使用しています。

“`jsx:main.js
//だいたいこんな感じ
import path from “path”;

let mainWindow;

const createMainWindow = () => {
mainWindow = new BrowserWindow({
width: 1200,
height: 800,
webPreferences: {
preload: path.resolve(__dirname, ‘

JavascriptでlocalStorageを使う【メモ】

##localStorageとは
localStorageとは簡単に言うとWebブラウザにデータを保存できる場所のこと。

##localStorageにデータ保存

“`php:index.js

//setItemメソッドの第一引数にはキー、第2引数には値

localStorage.setItem(‘key’, ‘value’)
“`

##localStorageからデータを取得

“`php:index.js

//getItemメソッドにはキーを指定

const result = localStorage.getItem(‘key’)

console.log(result)

//出力結果： value

“`

##localStorageのデータを削除

“`php:index.js

localStorage.removeItem(‘key’)

“`

##応用・その他
参考

https://coders-shelf.com/react-auth-problem/

Javascript スプレッド演算子メモ

## 概要
スプレッド演算子がなにかわからない

“`js
// このようにも書ける1
…mapGetters([
‘getGenreById’
])
“`

この…の書き方わからなかった．

## 結果
javascript のスプレッド演算子の書き方であった． Vue.js に依存する書き方ではない．

参考: https://www.it-swarm-ja.tech/ja/javascript/%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3%83%89%E6%A7%8B%E6%96%87%EF%BC%88%EF%BC%89%E3%81%AFmapgetters%E3%81%A7%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E6%A9%9F%E8%83%BD%E3%81%97%E3%81%BE%E3%81%99%E3%81%8B%EF%BC%9F/836866119/
“`
mapGettersとmapActionsは、基本的にvuexが提供するヘルパーであり、メソッド名とし

JavaScript: Web Workerを動かす最小限のコード

本稿では、JavaScriptのWeb Workerを手軽に試すために、Web Workerを動かすための最小限の手順とコードを示します。

## 使わないもの

最小限構成でいくので以下は使いません:

– コンパイラ: TypeScriptなどは使わず、素のJavaScriptで。
– バンドラー: webpackなどは使いません。
– フレームワークやライブラリ: ReactやNPMモジュールも一切なしでいきます。

## コード量も最小限

– コードも過剰にならない範囲でシンプルにします。
– ファイル数もできるだけ少なく済ませます。

## Web Workerとは

Web Workerは、雑に言うと、ブラウザ上でCPU負荷が大きい処理を動かすのに役立つ仕組みです。ワーカーの処理は、UI側の処理をブロックしないのが特徴です。ワーカーにはUIとは別のスレッドが割り当てられます。CPUを複数台積んでるパソコンなら、ワーカーはマルチコアを活用できる可能生があります。

詳しい説明はMDNなどを御覧ください。

https://developer.mozilla.org/ja/d

【JavaScript】配列の関数を使いこなして分岐や繰り返し処理をなくしたい

色んなところでJavaScriptのソースを読んでいると、最近は関数を使いこなして、関数型プログラミング的な書き方をして分岐や繰り返し処理をあまり書かなくなっている傾向にあるように思います。
私も最近はJavaScriptのコードを書く時は、極力ifやforなどを使った命令型のプログラミングではなく、標準で用意されている高階関数（関数を引数に取る関数）を駆使してすっきり書くように心がけています。
ただ、初学者にとってはifやforを使って書くことと比べてどんなメリットがあるのかいまいち分かりにくいところがあるので、そんな方に向けてサンプルを使って少しでも理解を深めてもらえたらいいなと思います。

## やりたいこと
まずは以下のような、顧客情報、配送先情報、請求先情報の３つのオブジェクトがあるとします。

“`javascript
// 顧客情報
const customer = {
customer_name : ‘A商店’,
customer_address : ‘東京都渋谷区’,
customer_mail : ‘ashop@sample.com’,
}

React-Helmet のソースコードを読んでみる

React Helmet のソースコードを読んでみたので、そのメモ。
間違い等がありましたら、ご指摘お願いします。
## React Helmet とは？
React で ヘッドタグを操作したい時に使う ライブラリ。
使い方は、特定のコンポーネントで、

“`javascript
import {Helmet} from “react-helmet”
// 省略
const hoge = () => {
return(




// 省略
)
}
“`

を加えるだけ。これで、 の中の

‹
›

元記事を表示

[JS]アロー関数を少しだけ深掘りしてみた

アウトプットとして

関数を簡略化して記述できるアロー関数、調べてみるとちょっとしたテクニックがあるみたいだったのでまとめてみました。

ちなみにいろんな関数の定義の仕方や特徴はこちらにまとめています。
[JavaScriptの関数](https://qiita.com/Shi-raCanth/items/a6c2fabcc152b05f09bc)

#アロー関数とは
functionの記述を省略し、その代わりに（）=>という記述によって関数を定義する構文です。より短い記述で関数定義をできるという点がメリット。

“`javascript
// 無名関数
const 変数名 = function(){
処理
}

// アロー関数
const 変数名 = () => {
処理
}
“`

##引数が1つの場合は丸括弧が省略できる
定義の際に`引数が1つしかない場合`は丸括弧を省略できる。
ただし、スプレッド構文`…`を使用する場合は省略できません。

“`javascript
// 省略しない
var hoge = (a) => {
処理
}

// 省略できる
v

元記事を表示

【JavaScript】変数宣言 var / let / const の違いを理解する（コード例あり）

# JavaScriptの変数宣言
– `var`、`let`、`const`の3つの宣言方法がある
– `var`はJavaScriptリリース当初からある宣言方法
– `let`と`const`はJavaScriptの最新標準仕様に採択されたES2015で追加された宣言方法
– 3つの違いは **再宣言の可否**、**再代入の可否**、**スコープ**、**ホイスティング** の4点

## 3つの変数宣言の違い（結論）
||var |let |const |
|:—:|:—:|:—:|:—:|
|**再宣言**|○ |× |× |
|**再代入**|○ |○ |× |
|**スコープ**|関数 |ブロック |ブロック |
|**ホイスティング**|○ |undefined |エラー |

先に結論を提示してしまうと上表の通りです。
ここからは実際にコードを書いて挙動の違いを確認していきます。

## 再宣言
**再宣言**：一度宣言した変数を再度宣言すること。

“`javascript
/* var */
var sushi = ‘m

元記事を表示

N予備プログラミング　〜冬コンテスト作品制作過程を晒してみる④〜

みなさんこんばんわ

意外と強かった中ボス”18.【サービス開発3】データモデルの実装とユーザーの保存”を前に完全に足が止まる。『これ、ピンチだよね？逆転するよね？？』と心の声。焦ってキタｰｰｰ?

分かってますよ。。泣き言いっても進まないんですよ。。いつもの写経ですよ！！
まずはmodels/sequelize-loader.jsから実装！ここのDB名を自分のに書きなないと意味なし芳一じゃーい。


慎重に四行目＠以下を db/schedule_arranger から　db/covid_riskcalk
に書き換えます。

おつぎはmodels/user.jsを実装。いちおう変数名チェックして、これはそのままコピペで大丈夫そう。

問題は次のmodels/schedule.jpだぞと！！これは”

元記事を表示

webpack×Babelでコード変換(トランスパイル)しているNode.jsのstack traceを読みやすくする

## 以下の記事を参照して頂ければと思います

https://note.com/shift_tech/n/n3983a73de8a7

**※Qiitaの記事は全て個人的な記載であり、所属する組織団体とは無関係です**

## 補足
ソースコード全体は以下を参照。

https://github.com/yuta-katayama-23/node-express/tree/114afff10ba36c33e1d85641e774245b740d1bae

元記事を表示

便利ページ：JavascriptでYAMLからJSONに変換

「[便利ページ：Javascriptでちょっとした便利な機能を作ってみた](https://qiita.com/poruruba/items/6c67c7eef34ed302feb3 )」のシリーズものです。

十徳ナイフのような「[DevToys](https://forest.watch.impress.co.jp/docs/news/1382919.html)」というのがあるようで、Javascriptのみで十徳ナイフを作ってきた私としては、気になる存在。
YAMLとJSON間を変換してくれる機能があるそうで、私もJavascriptで作ってみました。

ソースコード一式は以下のGitHubにあります。

poruruba/utilities

https://github.com/poruruba/utilities

単に使うだけの場合は以下を参照してください。ユーティリティタブからYAMLを選択してください。

https://poruruba.github.io/utilities/

![image.png](https://qiita-image-store.s3.a

元記事を表示

Node.js が無理やり終了した時も処理したいときのメモ

Socketio を個人的に触っていて、
Node.js の終了時に処理を入れようと調べていて、
こちらの方の記事を参考にしていました。

https://qiita.com/Hiroki_Kawakami/items/f95b0cdbd201557b18cd

上記記事の情報に加え、
Terminalが強制終了されてしまったときなど、
雑に終了される時に処理をする方法をメモ。

## テストコード
各イベントが発火しているのかをテストするために、
発火したイベントとタイムスタンプを JSONにメモるような処理にした。
※console.logを出しても、Terminalが閉じてしまったら読めないため

“`js:server.js

// サーバー構築
const http = require(‘http’);
const fs = require(‘fs’);
const server = http.createServer(requestListener);

/* —————————————————
終了

元記事を表示

Webの勉強はじめてみた その26 〜Basic認証とCookie〜

N予備校「プログラミング入門Webアプリ」を受講しています。
今回は第3章18,19節です。

Basic認証

:::note
Authorization というヘッダの値に、エンコードされた ID とパスワードを含めて通信することで認証する方式
:::

暗号化されていない方式でエンコード(Base64)されているので、盗聴や改竄のリスクがある。
`atob`を使うと元の情報が見えてしまう。

http-auth

`http-auth` パッケージを利用する。
`yarn add http-auth@4.1.9`

“`javascript
//Basic認証のモジュール
const auth = require(‘http-auth’);
//basic関数
//realmプロパティに、Basic認証に保護する領域を規定する文字列 => 説明書き(認証が必要な範囲を書く)
//コールバックにユーザー名とパスワードのチェック => 認証するパターンを書く
const basic = auth.basic(
{ realm: ‘Enquet

元記事を表示

Ajaxでのファイルダウンロード（CSV）で文字化けした時の対策

やりたいこと
・HTMLのDLボタン　→　Ajax処理でファイル（CSV）ダウンロード
・UTF8のエンコードで出力するプログラムがすでにありそれを利用。SHIFT_JISへの変換はやりたくない
・DLしたUTF8エンコードのファイルをそのままエクセルで開ける。メモ帳で開いて再保存するとかもやりたくない
※バックエンドはかなり古い（クラシックASP）

結論として
・JSのBLOBオブジェクトを利用。JS側でファイル名とBOMをつける
・サーバーサードの出力はCSVの中身のみ（カンマ区切り(+改行)の文字列）ヘッダーなどは不要

参考
https://ameblo.jp/hero-design/entry-12652005689.html

元記事を表示

[Stripe Updates] NoCodeでオンライン決済を受け付ける”Payment Links(支払いリンク)”に、管理用APIが登場しました！

「コードを一切書かずに、クレジットカードをはじめとするオンライン決済を処理するリンクを作成する仕組み」として、Payment Links(支払いリンク)は2021年に登場しました。

https://stripe.com/jp/payments/payment-links

１度商品・料金を登録し[支払いリンク]を作成すれば、後はそのリンクを顧客に踏んでもらうだけで、商品の販売や定期会員の決済を行うことができます。

# これまでの[支払いリンク]でできなかったこと

これまでは、このリンクを作成するためにDashboardにアクセスする必要がありました。
そのため、以下のようなユースケースに対応することができませんでした。

– WordPressやHubSpotといった外部サービス側で、リンク作成・埋め込み・表示を一元化したい
– アドホックに料金・商品を生成し、ユーザーに応じた支払いリンクを発行したい
– バッチ処理を利用した、「一定期間または特定時間のみ有効なリンク」を作成したい
– [Connect]　出店者が、顧客向けに支払いリンクを作成できるようにしたい

https:/

元記事を表示

N予備プログラミング　〜冬コンテスト作品制作過程を晒してみる③〜

みなさんこんばんわ

せまる〜♪ショッカー！（締切！）という事で、どんどん実装していきます。
”18.【サービス開発3】データモデルの実装とユーザーの保存”を写経でGO！！

しかーし！今回はDB設計なので慎重に行くとこ！
データベース作成と定義を自前のやつにさしかえて作りますよと。うーさすがに緊張！

データベース名とデータ置き場（ボリューム先）名両方しっかり確認してyml書き直しーの！
docker-compose exec db bash　でデータベース用コンテナ開きーの！
psqlコマンドでデータベース作成！！渾身のポチっとな！！！

![スクリーンショット 2022-01-25 22.11.30.png](https://qiita-image-store.s3.ap-northeast

元記事を表示

[JS](基礎)関数について

アウトプットとして

Rubyでいうところのメソッドを、JavaScriptでは関数と呼びます。
この関数ですが、いろんな記述の方法があるので整理するために記事にしたいと思いました。

##いろいろな関数定義
### 関数宣言(function)
JavaScriptでは`function 関数名(){ 処理 }`と記述することで関数を定義することができます。

“`javascript
function 関数名(引数) {
// 処理
}
“`
“`javascript:例
function calc(num1,num2){
return num1*num2
}

const num1 = 3
const num2 = 4
console.log(calc(num1,num2)) // => 12
“`

###無名関数
無名関数は、関数名なしで関数を定義することができます。より簡潔なコードが記述できるという点がメリット。

“`javascript
const hello = function(){
// 処理
}
“`
“`javascript:例
c

元記事を表示

OTHERカテゴリの最新記事

• 
  • 2024.09.19

  JavaScript関連のことを調べてみた

• 
  • 2024.09.19

  JAVA関連のことを調べてみた

• 
  • 2024.09.19

  iOS関連のことを調べてみた

• 
  • 2024.09.19

  Rails関連のことを調べてみた

• 
  • 2024.09.19

  Lambda関連のことを調べてみた

• 
  • 2024.09.19

  Python関連のことを調べてみた