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

変数の巻き上げをたしなむ

## 内容
変数の巻き上げについて書く。

## 変数の巻き上げ
グローバルスコープ内で変数を宣言すると、宣言処理はグローバルスコープの先頭に巻き上げられる。

例えば、以下のようなコードがあったとする。

“`javascript
console.log(“1行目：” + x); // 変数の宣言前に変数xを使用
var x = “initialize”; // 変数xを宣言
console.log(“3行目：” + x);
““

普通に考えると、1行目は変数の宣言前なのでReferenceErrorになる気がする。
が、実行してみるとこうなる。

“`result
1行目：undefined
““

これは、変数の巻き上げによって、変数xの宣言処理がコードの先頭に巻き上げられたため。
イメージとしては、こんな感じになっている。

“`javascript
var x; // 変数の宣言処理だけ、先頭に移動
console.log(“1行目：” + x);
x = “initialize”; // 変数の初期化処理はそのままの位置
console.log(“3行目：”

`slice(1, -1)`って何してるの – 回文の真偽判定を再帰的に解く

**[isPalindrome(): A recursive approach](https://blog.logrocket.com/ispalindrome-a-recursive-approach/)**
**[What Does `slice(1, -1)` Do?](https://dev.to/cerchie/what-does-slice-1-1-do-3ad7), (`slice(1, -1)`って何してるの)**
を元ネタにした日本語によるまとめ。

## 要約
メジャーなプログラミング題材である、「回文の真偽判定」。
[Project Euler in JavaScript](https://sites.google.com/site/projecteulerinjavascript/home/problem-55)
[js 回文の真偽判定](https://qiita.com/may88seiji/items/4f6c28ca6f7cb04652aa)

### 教科書どおり
“`js
function isPalindrome (str) {
let le

[PlayCanvas] Assetの動的読み込み

# はじめに
PlayCanvasのアセットはPreloadにチェックが入ってるものは全て起動時に読み込みます。それでは重いですし、何より全てのアセットが起動時に必要とも限らないので、必要最低限のアセットだけにPreloadにチェックを入れ、他のアセットは必要に応じて動的に読み込む必要があります。

# 方法
## 読み込むだけ
アセットの読み込みは`app.assets.load()`を使用するだけです。

“` javascript:Sample
var Sample = pc.createScript(‘sample’);

Sample.attributes.add(‘picture’, {type: ‘asset’});

Sample.prototype.initialize = function() {
this.app.assets.load( this.picture );
};
“`
`load()`はまだ読み込まれていないデータをロードするメソッドです。すでに読み込まれている場合は何もしません。

## 読み込みを待ってから処理を実行する
先の方法は読

え、まだエラー処理を一括管理していないの？

まずは謝ります。

タイトルで煽ってしまい申し訳ありません。

ところで皆さん、まずは下記のエラーメッセージをご覧ください！

>NavigationDuplicated: Avoided redundant navigation to current location

vue-routerを使っている方は、一度は遭遇しているであろうこのエラー。

意味は、「同じページに遷移できないよ！」と言う意味です。

まずは、このエラーの回避策をお教えします。

“`
this.$router.push(‘/’).catch(() => {})
“`

たった“catch(() => {})“を付けるだけでエラーが出なくなります！

これでエラーを解決した気にならずにもうちょっと我慢して見て下さい。

では、大規模な開発になった場合、いちいち“catch(() => {})“を付けるとなると面倒ですよね？？？

そこで、出てくるのが**errorHandler**というモジュールです！

これは、Vue特有のエラーを検知してくれる優れものです。

これは、同じようなエラーメッセージ

Vue.jsでページごとにhead,meta,titleを変える方法

皆さん、すべてのページでタイトルを同じにすると検索に引っかかりにくいってご存じですか？

他にも、サイトを作る際にパンくずリストを作っておくと、Googleロボットが認識しやすいだとか。

あまりSEOには詳しくないのですが、ここらへんの基礎知識には対応させた方が良いと考えているので、今回はタイトルの通り、ページごとに“head,meta,title“を変えていくパッケージをご紹介したいと思います。

その名も**vue-head**です！

説明はこの辺にしておいて、解説していきます。

#パッケージのインストール#

まずは“vue-head“をインストールします。

“`
npm i vue-head –save
“`

#パッケージをインポート#

次に、“main.js“にて以下のように記述します。

“`main.js
import Vue from ‘vue’
import VueHead from ‘vue-head’

Vue.use(VueHead)
“`

そしたら、後はコンポーネントにて好きなように設定していくだけ！

“`App.vue

lerna + yarn workspaces で GitHub Packages の private repository を利用してみた（殴り書きメモ）

「サーバーとクライアントの共有部分をライブラリ化したい → でも非公開にしたい」という要望への解決方法の一つ。コードが JS/TS 一本で、リポジトリと所有権が一カ所で良ければ使いやすそう。

そもそも、公開パッケージとして分離できるならそれでいい話だし。

今回は `Windows`, `nodist`, `node v14`, `yarn install v1.22.10` で試した。

以下では、`github` のユーザ名を `GITHUB_USERNAME`、`github` のリポジトリ名を `GITHUB_REPONAME` と記すことにする（コマンドをコピペして確認していないので細部に誤りがあると思います）。`PACKAGE_NAME` は `lib`, `client`, `server` のいずれかとする。

`Github Actions` で `publish` する方法は試してないです。

シンプルな競合対象としては、`npm link` や `git submodule` などでの結合だと思う。

とりあえず、手元で試しに導入してみたのでメモを書き殴ります。

JSとLaravelでAPI通信する際に日付データを合わせる(unixtime <-> Date)

# 概要

サーバーさん => Sさん
フロントさん => Fさん

あるときこんなやりとりを目撃しました。

>Sさん < 日付のフォーマットは20200222で送ってください >Fさん < ここは2020/02/22で送ってください >Sさん < この場合は2020-02-22で送ってください >続く….

そのとき第三者の私はこう思いました。
> 私 < Unixtimeでやりとりすれば、同じフォーマットでやりとりできるんじゃね？と... ## やってみた。 ```js:javascript // Date -> UnixTime
new Date().getTime() / 1000;
// 1611320223.828

// UnixTime -> Date
new Date(unixTime * 1000);
// Fri Jan 22 2021 21:57:44 GMT+0900 (日本標準時)
“`

※バックエンドはLaravelを使用しています

“`php:php
// Date -> UnixTime
$date = new DateTime(‘

Twitch のウェブサイトを YouTube のシアターモード風に改造する

Twitch.tv の配信画面を YouTube のシアターモード（動画をウインドウ幅いっぱいに表示→その下に２カラムで概要とチャット欄）にしたくて無理やり弄った記録。久々の JavaScript + CSS。

↓ 結果はこんな感じ ↓

### もくじ

– [はじめに](#はじめに)
– [Twitch の画面構成](#twitch-の画面構成)
– [代替手段](#代替手段)
– [モバイル版をPCで表示](#モバイル版をpcで表示)
– [Multistre.am を使う](#multistream-を使う)
– [ブックマークレット](#ブックマークレット)
– [おわりに](#おわりに)

## はじめに

巣篭もり生活で見たいアメドラも尽きて Twitch に辿り着きました。

作業中はセカンドモニターの端に表示して垂れ流し、表示しているモニターは 1440 x

フレームワークとは

今回はフレームワークについて学習をしました。フレームワークとは何か、Ruby,PHP,JavaScript,CSSの代表的なフレームワークを公式サイトとURLと共に紹介します。
説明不足があると思いますので、気になったフレームワークを公式サイトで確認してみて下さい。

#フレームワークとは

「フレームワーク」という言葉には、「枠組み」という意味があり、アプリケーション開発においては、テンプレートの役割を持っています。テンプレートの機能は、開発を行う際に頻繁に必要とされる「基礎的な機能」をまとめて提供してくれるものです。
例えば、ログイン認証機能、新規投稿機能、検索機能などアプリケーション開発においてほとんど共通して使われる機能がパッケージ化されています。
そのため、フレームワークを用いることで開発を高速化させることが出来ます。
どれくらい便利なものかというと、ログイン認証を仮に自分で１から作成したとします。その場合、作らなければならないのが、ユーザーネーム、パスワードの欄を作り、それを認証、弾く機能、更にそれらを管理する画面など様々なところを作っていかなければなりません。しかし、フ

JSXの中でif…else文を使って条件分岐する

Reactで開発をしていると、propsの値に応じて返すコンポーネントを変えたい場合が多々あります。
しかし、JSX内で実行できるのは式(expression)のみであり、if…else条件のような文(statement)は書くことができないため、複雑な分岐処理を書くためには工夫が必要になります。

## 案1. 三項演算子を組み合わせる
三項演算子を使った式`A ? B : C`は、Aがfalseと評価された場合にCを返すだけなので、その後にCを起点として再び三項演算子の式を繋げることができます。
簡単な方法ですが、条件が複雑になると異様に読みづらくなります。

“`javascript
const Fruit = props => {
return (

{props.fruit === ‘apple’ ? (

) : props.fruit === ‘orange’ ? (

) : (

)}

【新春企画】Web Developer Roadmap を真面目に勉強するまとめ【フロントエンド編】

##前提
現在、組み込み系エンジニアの私が、今後はウェブ業界に挑戦するにあたって
`「強みは技術力です！」`
とかっこいいことがちゃんと言えるようになりたいと思いこの企画をはじめました。
いつでもアクセス可能のように備忘も兼ねて書きます。

##これまで
事前にこちらの記事を勉強済みです。
↓↓↓
[Webエンジニアになりたい人に捧げる学習ロードマップ](https://note.com/gizumo_inc/n/nd435c11a4ef4)
>駆け出しフロントエンドエンジニアに求められるもの
1. HTML/CSSによるWebサイトコーディング経験（レスポンシブ対応含む）
2. JavaScriptの基礎構文理解
3. JavaScriptを使った動くUI(複数パターン)の実装経験
4. jQueryのプラグインやAjaxを使った実装経験
5. タスクランナー(gulp)やモジュールバンドラー(Webpack)の利用経験
6. Vue.jsもしくはReact.jsを使ったミニアプリの開発経験
7. 上記のスキルが証明できるポートフォリオサイトもしくはGitHubアカウントの提出

深さがバラバラの配列からスマートに値を取り出す。reduceで。[JavaScript]

#導入
こんな配列と取り出したいデータの場所を表す配列があったとします

“`js
var arr=[
[[‘000’, ‘001’, ‘002’], [‘010’, ‘011’, ‘012’], [‘020’, ‘021’, ‘022’]],
[[‘100’, ‘101’, ‘102’], [‘110’, ‘111’, ‘112’], [‘120’, ‘121’, ‘122’]],
[[‘200’, ‘201’, ‘202’], [‘210’, ‘211’, ‘212’], [‘220’, ‘221’, ‘222’]]
];
var pos =[0,2,2],
pos1=[1,0,2],
pos2=[2,1,0];
“`
多次元配列って呼ばれているやつです
データの場所を投げたら目的のデータが返ってくる関数が欲しいという設定です
この場合なら次の例が一番分かりやすいと思います

“`js
const fx=x=>arr[x[0]][x[1]][x[2]];

console.log(fx(pos ));
console.log(fx(pos1));

Next.jsにCSS Modulesを適応させる(メタデータ設定も)

vercel社が提供する[Next.js公式チュートリアル](https://nextjs.org/)引用でございます。まるパクリです。

# 手順
① Next.jsのプロジェクトのルートにcomponentsフォルダを作成。

“`
$ mkdir components
“`

② ①で作成した/components配下にlayout.jsを作成し以下を記述。

“`
$ touch components/layout.js
“`

“`js:layout.js
export default function Layout({ children }) {
return

{children}

;
}
“`

③ pageディレクトリの任意のjsファイル内に以下を記述。

“`js:pages配下の任意のjsファイル
〜〜〜
import Layout from “../../components/layout”;
〜〜〜

export default function FirstPost() {
return (

Googleスプレッドシートで郵便番号から住所を表示する関数 その４

# 概要
セルに郵便番号を入力することで、住所を表示してくれる関数があったらなぁと思って書いた[プログラム](https://qiita.com/KensukeSakakibara/items/01470b28fd5ec4cf3416)が動かなくなっていたので、zipcloudさんのAPIを使って書き直してみた[プログラム](https://qiita.com/KensukeSakakibara/items/a5c4da9d62d7dcb8d665)の出来がイマイチだった。
というわけで、zipcloudさんのAPIを使わずに[自前でAPI](https://qiita.com/KensukeSakakibara/items/a822177cd106948a1b35)を作成して書き直してみたもののプログラムの実行速度がアレだった。

もうこうなったらサーバごと全部自前でやっちまえ！
ってな具合にAPIサーバ建てました。

https://zipaddress.suisuinet.com/

ご興味がある方はどうぞ。
使い方は前回のものとほぼ同じです。

# 使い方
下記をスクリプトエデ

AR.jsのLocation Basedで遠くにモデルを無理やり表示させた話。

#AR.jsのLocation Basedで無理やりモデルを表示したい
[前回](https://qiita.com/ebifry_w_t/items/ef41efa584c14b7f71ba “AR.jsのLocation Basedで遠くにモデルを表示させようとして困った話。”)AR.jsを使用してLocation Basedで遠くにモデルを表示させたかった話を書きました。

おさらいするとAR.jsのLocation Basedは、1km以上遠方の位置を指定するとコンテンツが表示されません。
解決策としてvideoTexture: true;オプションを指定すると表示できますが、手持ちのiPhone(iOS14)では、うまく動かなかったので今回は無理やり表示させていきたいと思います。

はじめに断っておきますが、根本的な解決策ではないです。

#プラン
![d0-94bb-5e761af7b59c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/372519/ecd6d82e-4282-a2ce-0

Chrome拡張機能を作ってみよう③

[前回](https://qiita.com/andkirato/items/4ae015b4ddc680d3773c)はChrome拡張機能とローカルプログラムの連携までを書きました。
今回はその続きです。

## URLの監視
特定のURLにアクセスした場合にメッセージを表示するため
URLの監視を行います。

監視を行うには
manifest.jsonのcontent_scriptsの項目にあるjsで行います。
今回ですと「message.js」です。

“`message.js
/*
■ URL監視
*/
$(function() {
try{
// background.jsにurlを送る
chrome.runtime.sendMessage({method: ‘checkurl’, url: document.URL},
errorHandle(function(response1) {
// 必要ないけどとりあえず受け取る
var message = response1.data;
}));
}ca

ブログラミング学習サイトDonblerに有料レッスンを投稿してみた

#ブログラミング学習サイトDonbler
2021年1月にリリースされたDonblerというサービスが気になっている。このサイトどうやらエディタを内臓(Progateのような？)していてサイト内で完結するらしい。
Progateとなにが違うのか検証してみたところレッスンは公式ではなくユーザが投稿できてさらに有料にもできる仕様らしい。この点はUdemyと似ているがUdemyは動画のレッスンに対してDonblerはテキストベースのレッスンである。これはエンジニアにとっては嬉しい仕様なのではないだろうか。
今回はProgateとUdemyの融合体であるDonblerに試しに有料レッスンを投稿してみることにする。

今回投稿したレッスンのリンクを貼っておきます！興味のある方は買ってみてください！
[

Chrome拡張機能を作ってみよう②

[前回](https://qiita.com/andkirato/items/864a107c628d935a6f7b)はChrome拡張機能からファイルのダウンロードまでを投稿しました。
今回はその続きです。

## Chrome拡張機能とローカルプログラムの連携
Chrome拡張機能とローカルプログラムとの連携について
今回はローカルプログラムをvisual studioで作ったC#のプログラムとします。

##下準備
まずは連携するための下準備をします。

最初に連携するプログラムの配置場所を決めます。
今回は
c:\extensionSample\program
の配下に置くことにします。

___連携用JSONファイルを準備___
場所に決まりはないですが連携用のjsonファイルをprogramフォルダの配下に配置する

“`program.josn
{
“name”: “put.message”,
“description”: “特定のURLでメッセージを表示する。”,
“path”: “C:\\extensionSample\\program\\progra

Chrome拡張機能を作ってみよう①

## 背景
Chromeの拡張機能を作ってみたが、どこかにアウトプットしないと絶対に忘れると思ったため
基本的に自分用メモなのでよくわからなかったらすみません。

## 作るもの
①　Chrome拡張機能からWeb上のファイルをダウンロードする。
②　ダウンロードしたファイルをC＃で作ったexeに連携する。
③　exeでファイル内容を受け取りChrome拡張機能に返す。
④　exeから受け取ったURLと同じURLを開いた場合にメッセージを表示する。
補足）Chrome拡張機能をChromeウェブストアを介さずにインストールさせる

## 準備するもの
・テキストエディタ
・visual studio
・xampp（ファイルダウンロード用）

## Chrome拡張機能からファイルのダウンロード
今回はc:\extensionSample\extensions
というフォルダを作って、この中に作っていきます。

extensionsの中はこんな感じです
[css]
　　popup.css – popup.htmlのスタイル
[images]
　　abnormal.png – Chrome

【Typescript】 Error: Cannot find module ‘express’ の解決

あるファイルを読み込もうとしたら、エラーメッセージが出た。

“`typescript
node index.js

internal/modules/cjs/loader.js:638
throw err;
^

Error: Cannot find module ‘express’
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object. (/home/ec2-user/environment/photo/realitycapture/realit