f@ctor

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

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

Blobとencoding.jsでシフトJIS CSVを出力する

CSV出力時に、「どうしてもSJIS（シフトJIS）で出力したいの」というときはありませんか？
文字化け防止のためだけならBOM付きUTF-8でええんやで…という情報を目にしつつ、
出力したCSVを受け付けるシステム側が「SJISでないとだめよ」という仕様だったため、SJISでCSV出力する仕組みを作りました。

間違いの箇所があればコメントいただけると幸いです。

# 作ったもの
## :one: 概要
TypeScript + Node.js にて作り、kintoneの該当アプリに適用しました。
今回はkintoneに関するイベント処理は省きます。

### 準備

* encoding.js
* File-Saver
* JSZip
* dayjs

＊SJIS変換のために [encoding.js](https://github.com/polygonplanet/encoding.js/blob/master/README_ja.md) を用いました。
＊複数CSVをまとめて出力するため、JSZipにてzip化しました。
＊zip化したファイルを、File-Saverで名称

元記事を表示

Google Apps Script(Gas)でスプレッドシートの操作

皆さまこんにちは。
gasはgoogle提供サービスとの連携が得意だそうです！
今回はgasを用いてのスプレッドシート操作の基本について簡単にまとめました。

[1.操作するスプレッドシートをgasに教えてあげる](#操作したいスプレッドシートの指定)
[2.範囲指定と値の取得](#範囲指定と値の取得)
[3.最終行(列)番号取得](#最終行(列)番号取得)
[4.値の書き込み](#値の書き込み)

##操作するスプレッドシートをgasに教えてあげる
まずはこれですね。

“`javascript:test.gas
function myFunction() {
const spreadSheet = SpreadsheetApp.getActiveSpreadsheet();
}

“`
**SpreadsheetApp.getActiveSpreadsheet()**でアクティブなスプレッドシートを取得します。
取得したスプレッドシートに対して、色々な処理を行っていく事になります。

アクティブなスプレッドシートとはスクリプトと紐づいているスプレッドシートのことです。
スプ

元記事を表示

ワインのデータをスクレイピングする（Vivino編）

僕は今まで自分が飲んだワインの情報をメモしています。
そして、一時期に週2くらいで飲んでいたときに、そのメモを取るのがめんどくさくなったので、一気にワインの情報を集められるようにスクリプトを作成しました。

そして、このスクリプトで取得したデータをGoogle Spreadsheetに貼り付けて、以下のように管理しています。

![20211021_01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265324/cc795536-99a4-6cca-c1ac-68610f0aea61.jpeg)

という冒頭で前回のvinica編もお届けしましたが、今回は、Vivinoというサイトで取得するスクリプトを紹介します。なぜ、Vivinoを使ったかというと、vinicaに取得したかったワインがなかったのです・・・。

このスクリプトは開発者ツールで実行します。
今回使ったワインのページは、[ここ](https://www.vivino.com/kanonkop-pinotage/w/56164?year=2

元記事を表示

アスペクト比を固定したまま画像のサイズをフレームに合わせる

以下の図のように画像のアスペクト比を固定したままフレームにフィットさせたいことがよくあります.
その時にフレームサイズとイメージサイズを入力,フィットさせるときのイメージサイズを出力とするアルゴリズムのメモです.

![Screenshot from 2021-10-24 02-08-36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/04ab1b9a-1af3-e2f8-480b-72aa48b58103.png)

### Input

入力はフレームのサイズとイメージのサイズで以下の様になります.

frame_w, frame_h, image_w, image_h

### Output

出力は新しいイメージのサイズです.

new_image_w, new_image_h

### アルゴリズム

フィットする画像サイズを取得する,JavaScriptの関数は以下のようになります.

“`javascript:fit_image.js
function fit_image(

元記事を表示

あなたの知っているJavaScriptはもう古い(書き方編 -その1- )

## 私の知っているJavaScriptはもう古い
下記の記事をかいたように、JavaScriptの時代の流れについていけなかった私、、、。
そこで今回は今の時代はどんなふうにJavaScriptをかけばいいの？っていうことを学んで行こうとおもいます！

https://qiita.com/k-tetsuhiro/items/fd50feeee323e08e8349

## 知っている書き方
10年前のJavaScriptしか知らなかった私、、、。もし同じような方がいればこういった書き方を過去していたと思います。

“`example.js
// 名前を定義する
var name = “タロウ”;

// 名前を返す
function get_name(){
return name;
}
“`

し　か　し　！！　
**もうこの書き方では通用しません**（反省）

そこで、最近(ES2015以降)では下記のような記述をしていいきます。
※ES2015ってなに？って方は[こちら](https://qiita.com/k-tetsuhiro/items/fd50feeee32

元記事を表示

【基礎】discord.js v13 でボットを作る ～コマンド発展～

## 前書き
[前回](https://qiita.com/hitori_yuu/items/3b6c02fac5c610f0615a) はコマンドを作成しました。
今回はそのコマンドに情報を入れたり、コマンドを個々のファイルに分けたりしたいと思います。

##開発環境
[前回](https://qiita.com/hitori_yuu/items/3b6c02fac5c610f0615a) と変わりません

* Windows10
* npm 7.6.3
* node 17.0.1 （最小要件：16.6.0)
* discord.js 13.2.0

## コーディング
[前回](https://qiita.com/hitori_yuu/items/3b6c02fac5c610f0615a) 作成したファイル（`deploy-commands.js`)の`commands`の部分を下記のものに書き換え + 書き加えます。

“`diff_javascript:deploy-commands.js
– const { SlashCommandBuilder } = require(‘

元記事を表示

【学習記録⑧】動的コンポーネントを用いてコンポーネントを入れかえる。

#はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回の記事では`動的コンポーネント`を用いてコンポーネントを入れかえる方法を記載します。

##componentタグを利用する
動的にコンポーネントを入れかえる場合は`component`タグを用いると便利です。
記法は以下の通りで`is`という属性を用いて任意のコンポーネントを指定します。

https://jp.vuejs.org/v2/guide/components.html#%E5%8B%95%E7%9A%84%E3%81%AA%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88

“`vue:App.vue

“`

###注意点
しかしながらコンポーネントを入れかえた際に切り替わる前のデータは消えてしまうため、フォームに使用するタグ`input`や`t

元記事を表示

React-Native でBlockchain SymbolのSDKを利用する

https://jp.symbolplatform.com/

iOS,Androidアプリにブロックチェーンの機能を追加したいと思い、ブロックチェーンSymbolを選定し開発を開始しました。SymbolのSDKはJavascript/Typescriptが用意されていますが、そのままではReactNative環境では動かすことが出来ず、以下に対応したことを纏めます

モバイルアプリにブロックチェーンを組み込んでいきましょう

# 環境
– ReactNative@0.64.2
– Expo@43.0.0
– Symbol-SDK@1.0.1
– Windows10（Macの方は適宜読替下さい）

https://github.com/symbol/symbol-sdk-typescript-javascript

# Expoでプロジェクトを作成（or React-Native-CLI）
Expoでプロジェクトを作成し、Ejectします。EjectせずにExpoのまま実行しようとしても、linkが実行出来ないので失敗します。

“`console
expo init symbol_

元記事を表示

あなたの知っているJavaScriptはもう古い(概要編)

## はじめに
JavaScriptは年々進化している、、、。もしかして私の知ってるJavaScriptってもう古い？！
ってことで、最近ずっとフロントエンドに関わる機会がなかったので改めて勉強してみました！

## あなたの時代のjavascriptは？
私がJavaScriptを書いていたころは約10年前(2011年あたり)で、当時は**jQuery使うと便利だよね〜**みたいな時代でした。そこから10年たったいま、、、**React?Vue.js?ES2015?webpacker?Babel?**なんじゃそりゃーっていうギャップが生まれている状態です（反省）。そこで今回は表面だけでもいいから**概要だけでも知っておく**のが目的になります。

## モダンなJavaScriptは昔のJavaScriptと何が違うのか
では、昔と今では何がちがうのか？
いくつかポイントをまとめてみました！

### ◇ ReactやVueという便利なライブラリ/フレームワークがある
名前だけはきいたことある人もおおいとおもいます。これを使えば圧倒的開発がしやすいです。
**PHPでいえばLara

元記事を表示

【学習記録⑦】slotを用いてコンポーネント間でデータの受け渡しを行う。

#はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
[前々回の学習記録記事](https://qiita.com/Ooooooomin_365/items/7449f72409bf6d00f475)、および[前回の学習記録記事](https://qiita.com/Ooooooomin_365/items/63eef765efc78672714e)では`props`や`$emit`を用いて親子のコンポーネント間でデータの受け渡しをしていましたが、今回の記事では`slot`や`slotProps`を用いてデータの受け渡しを行っていこうと思います。

##slotを用いてHtmlを子コンポーネントへ渡す
`props`では特定の値などを子コンポーネントへ渡していましたが`slot`を用いるとHtmlを子コンポーネントに渡すことができます。

“`vue:親.vue