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

タイトル

j

JavaScriptでもメディアクエリが使えるwindow.matchMediaを関数化して使い回す

## 要約
– [window.matchMedia](https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia)はメディアクエリ文字列を渡して、その条件が切り替わった時にだけ処理を実行してくれます
– いわゆる`debounce()`などで`resize`イベントの間引きをする必要がありません（画面の横幅を使う処理は`resize`イベントが引き続き適切です）
– IE10からサポートされているので、ブラウザの対応範囲を気にする必要はありません（[matchMedia \| Can I use\.\.\. Support tables for HTML5, CSS3, etc](https://caniuse.com/matchmedia)）
– コールバックを実行する関数にして、1箇所でメディアクエリ文字列を管理できます

## ソースコード
– [real\-world\-website\-boilerplate/mediaQuery\.js](https://github.com/yuheiy/real-wo

【GAS】Date()で取得した現在の時間を今日の0時にする

#背景
GASでGoogleカレンダーの情報をなんやかんやしたくて、
**GASをいつ実行しても、「今日の0時0分」が欲しい！**と思いました。
文字列だけ取り出せるけど、Date型にしておきたく、少し悩んだのでメモ。

#完成形

“`javascript:Yattane.gs
var strToday = Utilities.formatDate(new Date(),”JST”,”yyyy-MM-dd”).split(“-“);
const todayStartTime = new Date(strToday[0], strToday[1] – 1, strToday[2]);

Logger.log(todayStartTime);
“`

:::note info
10:33:44 情報 Thu Aug 19 00:00:00 GMT+09:00 2021
:::

実行時間は10時だけど、しっかり00:00:00になってる。
これで出来た！やったね！
※まだまだキレイにできそう…

#過程とか試行錯誤
①現在時刻の取得

“`javascript
const

JavaScriptを基本からまとめてみた【12】【関数( function )】

##はじめに

####学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##JavaScriptにおける関数（function）とは
関数とは、複数の処理をひとまとまりにしたもの。メソッドと呼ばれることもある。JavaScriptにおける基本的な構成要素のひとつであり、Function型のオブジェクトとして扱われ、関数をオブジェクトとして扱うことが出来るのはJavaScript特有の特徴。

##関数を使うメリット
関数を利用することで目的ごとに処理を分割したり、似たような処理を何度も書かなくて済むようになる。全ての処理を関数を使わずに書いた場合と、関数を使って書いた場合とではコードの文量が何倍にも変わる。場合によっては何倍どころか何十倍、何百倍になることもある。

##関数を定義する
####①

【Handsontable】セル内にプログレスバー(Progress)の表示

# はじめに
IE 11 のサポート終了が2022年6月15日と決まりました。Delphi 5で作成されたWebアプリケーションがあり、Active Xのグリッドを使用しています。Microsoft EdgeのIEモードで動作するとはいえ、IE対応は流石にやめたいです。

WebアプリケーションをASP.NETで作り替えようとしているのですが、Active Xのグリッドにはパーセント表示の際に進捗バーが表示されています。
移植する上で、Handsontableでプログレスバー(Progress)の表示に挑戦してみました。

# 環境
HandsontableはMITライセンス版のバージョン 6.2.2を使用しています。

# Handsontableフォーラムのサンプル
Handsontableフォーラムの質問者の回答に答える形で、JsFiddleにサンプルが作成されています。

https://forum.handsontable.com/t/progress-bar-custom-cell-formatting/1425

http://jsfiddle.net/gaq4y6w4/

30代実務未経験がRailsでオリジナルポートフォリオを作成

# はじめに
こんにちは、Nonaと申します。
31歳でWebエンジニアになることを目標に2021年5月からスクールにてRailsを中心に学習中です。これまで学んできたことをいかして今回Railsにてオリジナルアプリを作成したのでアプリについて説明させていただきます。

##アプリについて
###No Dog,No Life!(犬の同伴がOKな場所の情報共有サイト)
いつでもどこでもワンちゃんと一緒にお出かけをしたい！そんな方のためにワンちゃん連れ OK の穴場の PLACE（公園、お店、施設）情報を共有し合うサイトです。
URL : https://nodognolife.xyz/
GitHub : https://github.com/Naru-hub/PF_NoDogNoLife


##なぜこのアプリを作ったのか？

GAS 基本編メモ②

GASで勉強始めました。
自分用メモです。

## 処理時間の計算

“`javascript
function initSheet() {
var sheet = SpreadsheetApp.getActiveSheet();
var names = [‘taguchi’, ‘fkoji’, ‘dotinstall’];
var i;
# ここで変数を定義
var startTime = new Date();

sheet.clear();

// 2060ms

for (i = 1; i <= 1000; i++) { sheet.getRange(i, 1).setValue(names[Math.floor(Math.random() * names.length)]); sheet.getRange(i, 2).setValue(Math.floor(Math.random() * 101)); } # Loggerで処理時間を表示させます Logger.log(new Date() - startTime); }

GAS 基本編メモ①

ドットインストールでGASの勉強を始めました。
簡単なメソッドから勉強していっていますので、勉強用に使用したGASのメモを残しておきます。
自分用なので特に説明がありません。

## カスタム変数

“`javascript
function GETRESULT(input) {
if (input >= 80) {
return ‘PASS’;
} else {
return ‘FAIL’;
}
}
“`

## カスタム変数 (複数のセルを扱う際)

“`javascript
function GETRESULT(input) {
if (input.map){
return input.map(GETRESULT);
} else {
return input >= 80 ? ‘PASS’ : ‘FAIL’;
}
// if (input >= 80) {
// return ‘PASS’;
// } else {
// return ‘FAIL’;
// }
}
“`

## スプレッド

【javascript】フロントでUTCの時間をJSTに変換するぞ【React】

UTCの時間をJSTに変換したい

DBに登録しておいたものをフロント側に持ってきたとき、なんだか9時間程度時間がずれて表示される事象がありました。

“`terminal:UTC
//本来は2021-08-11 22:38:05に登録したものが下記になっていました
2021-08-11T13:38:05.813Z
“`

原因としては、DB登録時にJST(日本時間)ではなく、UCT(協定世界時)で登録されていることが分かりました。

手っ取り早く実装を進めたかったので、根本の原因を追究するよりも暫定的にフロント側でUTCからJSTに変換しようと考えました。

実装してみる

以下で実装しました。
フロント側でファンクションを作成し、UTCをJSTに変換したのちに、「yyyy/MM/dd (w)hh:mm」にフォーマットするようなものにしました。

“`react:changeJSTDate
export function changeJSTDate(date) {
const newDate = new Date(date)
const

create-react-app で作成したReactのプロジェクトに「後付けで」PWA化する(Workbox使用)

## TL;DR

– `create-react-app` のPWAテンプレートなしプロジェクト
– `eject` なし
– Webpackの設定オーバーライドなし

でWorkboxを導入してPWAを有効にできる。

## はじめに

`create-react-app` でPWA対応のReactプロジェクトを作るには `–template cra-template-pwa` というオプションでPWA対応のテンプレートを読み込む方法が見つかります。

しかし、プロジェクトの立ち上げから携わることができないケースもあります。その場合PWA対応のテンプレートを使わなかった状態から「後ほどPWA対応にする方法を探す」としても見つかりづらかったです(2021/08/18現在)

また、 `create-react-app` で作成したプロジェクトは `eject` コマンドを使って設定ファイルを抽出しないとWebpackの設定を変更するのが難しくなります。一度ejectするとその前の状態に戻せないのでejectを選択しない場合もあります。
ejectせずにWebpackの設定を

JavaScriptのプラグインの構造を理解する

DOMの特定の要素を解析して、イベントを付与するたぐいのJavaScriptプラグインは、よく必要になります。
安定したものを自作したかったので、ES2015(ES6)以降の文法で書かれた、軽量なプラグインのコードをいろいろ読んで勉強しました。

書かれていることをだいぶ理解できたので、現時点のスキルで説明できる範囲でまとめます。
なお、Babelを利用すると無理に古い文法を使おうとしなくてもよいようです。

https://qiita.com/mzmz__02/items/e6fbe5e30cc3fd13788f

## 書いてみたプラグイン

要素 `.js-sample` すべてにクリックイベントを付与したり、情報を返す関数を定義するプラグインです。
`sample.init([selector]);` で要素のセレクターを指定して実行することもできます。

リアルタイムで動画に字幕ファイルを合成するhtmlを作ってみた

はじめに

動画と字幕をリアルタイムに合成するhtmlを作ったので共有させていただきます。

ソース

play_movie_with_subtitles.html

<html>

  <meta charset="Shift_JIS">

  <head>

    <style>

      body{

        text-align: center;

        background-color:#000000;

      }
      .disp_no{display:none;}

      .inps{background-color: #8f8f8f;text-align:right;}

      .w32{width:32px;}
      #sel_file{width:100%;text-align:right;}
      #v{

        width:100%;

        margin-right: auto;

        margin

フロントエンドの慣習のまとめ

## 1. はじめに
フロントエンドを始めたばかりの頃、参考書や参考サイトで当然のように使われているものの、特に說明がないような**「慣習」**や**「テクニック」**に困惑したり、その理由が気になった経験を思い出したので、その一部を簡単にまとめてみました。

## 2. HTML

### 2-1. iタグでアイコン
```html
テキスト
```
>HTML の興味深いテキスト要素 (\)は、何らかの理由で他のテキストと区別されるテキストの範囲を表します。例えば、技術用語、外国語のフレーズ、架空の人物の思考などです。英文においてはよく斜体で表示されるものです。

>[\: 興味深いテキスト要素 - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/i)

仕様上は適切な使用方法ではなさそうですが、「[Bootstrap Icons](https://icons.getbootstrap.c

vue-select-imageをvue+nuxtに導入

## 手順

インストール

```
yarn add vue-select-image
```

プラグインの追加

```plugins/imageselect.js
import Vue from 'vue'
import VueSelectImage from 'vue-select-image'
require('vue-select-image/dist/vue-select-image.css')
Vue.use(VueSelectImage)
```

nuxt.config.jsの編集：プラグインを追加します。

```nuxt.config.js
plugins: [
{
src: '@/plugins/imageselect',
mode: 'client'
}
],
```

コード：ちょっとエラーがconsoleに出てきたので、`client-only`で囲むことにより解決しています。

```index.vue