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

JavaScriptでunixtimeから日時へ変換する方法

下記参照です、そのままだ(*・ɜ・ﾉﾉ”☆ﾊﾟﾁﾊﾟﾁ♪
[JavaScriptでunixtimeから日時へ変換するやり方のメモ](https://qiita.com/shirokurotaitsu/items/5efd855900ec6135bbab)

VueでIonicons利用時に”Unknown custom element”エラーが出る場合の対処法

Vueの開発バージョンで[Ionicons](https://ionicons.com/)を利用すると、コンソールに下記のような`Unknown custom element`のエラーが吐き出されます。

>[Vue warn]: Unknown custom element: <ion-icon> – did you register the component correctly? For recursive components, make sure to provide the “name” option.
>
>(found in <Root>)

`ignoredElements`に`ion-icon`を設定することでVueがIoniconに対してエラーを出さないようにできます。

“`javascript
Vue.config.ignoredElements = [‘ion-icon’];

new Vue({
…
“`

参考: [Ionicons in Vue.js](https://www.raymondcamden.com/2020

Gridagramを使ってみた。

おうちモニターにパネルのような表示がしたくていろいろ調べてみました。

まずダッシュボードという仕組みがあるようで、いろいろ調べてみましたが、結構規模が大きかったり、noadjsを使ったりでリソースの少ないモジュールで動かすのは無理そうでした。

次にドラッグできるグリッド系のライブラリを調べてみたのですが、使い方がわからなかったりで、これも諦めました。

そうしているうちに単純なグリッド系のGridagramというライブラリを見つけて試してみました。

https://github.com/julianbrowne/gridagram

GridagramはjQueryのpluginでそれほど大きなコードではありません。

cssはexamples.cssをほぼそのまま使って

“`HTML
“`

をHEADに追加して

“`HTML

Javascriptメモ

#Javascript メモ
Javascriptのオブジェクトについて自分用にメモします。

###オブジェクトの省略表記
オブジェクトは省略して作ることができます。

“`javascript
const a = 1;
const b = 2;
const obj = {a, b}
console.log(obj) //{ a: 1, b: 2 }
“`

###オブジェクトから変数の代入
オブジェクトから変数を作ることができます。

“`javascript
const props = { numList: [1,2,3], children: “This is a child” };
const {numList, children} = props;
console.log(numList); // [1,2,3]
console.log(children); // “This is a child”
“`
ただしキーと違う変数名で代入するとundefinedになります。

“`javascript
const {a, b} = props;
console.log

オブジェクトの値をJSONを使ってlocalstorageに保存する

“`set.js
var firebaseConfig = {
apiKey: “xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx”,
authDomain: “xxxxxxxxxxxxxxx.firebaseapp.com”,
databaseURL: “https://xxxxxxxxxxx.firebaseio.com”,
projectId: “xxxxxxxxxxxxxxxxx”,
storageBucket: “xxxxxxxxxxxxxxxxxxx.com”,
messagingSenderId: “xxxxxxxxxxxxxxxx”,
appId: “xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx”,
measurementId: “xxxxxxxxxxxxxxxx”
};

temp = J

ブラウザでお絵かき＆保存をしよう！

#ブラウザで絵を書きたいときってありませんか？

この記事では、HTMLのcanvasとJavaScriptでお絵かきアプリ【色・消しゴム追加編】に、独自にいくつか機能を加えたものを紹介します。コピペすれば導入できるようにしてあります。
##完成するとこんな感じ

##追加機能、改善点
– 文字の太さを、調節バーに加えて、**直接数字でもいじれる**ようにしたこと。

– 文字の太さの選択範囲を**５倍**拡大したこと(1〜10 → 1〜50)。

– canvasで描いた絵を**画像としてダ

Firebase & JavaScript/TypeScript を使った開発で役立つTips15選

やまいも ([@yarnaimo](https://twitter.com/yarnaimo)) です。

Firebase と JavaScript/TypeScript を使って Web サービスをいくつか作っているうちに得られた知見をメモ程度にまとめてみました。

**W:** がついているものは Web、**A:** は Admin です。

### W: SSR 環境などでインスタンスが複数個作られないようにする

“`ts
export const app = firebase.apps.length
? firebase.app()
: firebase.initializeApp(firebaseConfig)
“`

—

## ? Firestore

**R:** は `firestore.rules`、**I:** は `firestore.indexes.json` です

### W: React Hooks でいい感じに使いたい

[**react-firebase-hooks**](https://github.com/CSFre

Monaco Editorで便利な機能「アクション」を使う

# はじめに

　久々にMonaco Editorについて書く今回は、Monaco Editorの便利な機能の一つである、IEditorAction（わかりやすさのためここではアクションと呼ぶ）を紹介してみる。
　これはVisual Studio Codeでいうところのコマンドパレットにあたる機能で、Monaco Editorの定義ではIEditorActionとドキュメントに書かれるものだ。
　これはMonaco Editorを利用したウェブアプリ上（つまりUI上）で利用者が使えるのはもちろんだが、これの便利なところはプログラミングの最中でも各アクションを呼び出してウェブアプリ中の様々な機能の実現に活用することができる。

# アプリ上(UI上)で使う

　もっともかんたんな作成方法でMonaco Editorを自分のアプリ上で作っても、デフォルトでアクションはコマンドパレットとして使うことができる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38416/27591fea-e2

onloadイベント

javaScriptのオンロードイベントの説明
役に立ちます。

【JavaScript入門】onloadイベントの使い方とハマりやすい注意点とは

rails sをするとCould not find a JavaScript runtime.が出てきてしまう時の対処法

ある日、作成中のアプリでrails sをするとCould not find a JavaScript runtime.というエラーが出て、ローカル環境に入れなくなってしまいました。

therubyraceを入れると直るという情報があったので、インストールしようと思ったのですが、libv8とバージョンを合わせろというエラーが出てきて、しばらくやっていましたが、解決できず、別の方法を探すことに。

node.jsをインストールすると直るみたい。
参考

ターミナル

“`
$ curl –silent –location https://rpm.nodesource.com/setup_8.x | sudo bash –
“`

“`
$ sudo yum -y install nodejs
“`
MACのログインパスワードを入力するとダウンロードが始まります。

https://nodejs.org/ja/
からもダウンロードが可能です。
コロナなんてもう見たくない。Qiitaで「コロナ」が含まれる記事を非表示にするChrome Extensionを作った

# はじめに

こんにちは、[@yshr10ic](https://twitter.com/yshr_10ic)です。

緊急事態宣言が発令されてから10日ちょっと、私は在宅勤務をはじめて1ヶ月ほどが経ちました。
テレビを付ければどこかのチャンネルでコロナの話題が取り上げられ、SNSでもどこかしらでコロナについて発信されています。

正直、ちょっと嫌になってきませんか？

私はなりました。
テレビは付けなければ済みますし、SNSであれば「コロナ」をミュートに設定すればある程度は目に付かなくなるでしょう。ただ、私たちエンジニアがお世話になっているQiitaには、ユーザをミュートにする機能はあってもキーワードをミュートにする機能はありません。

キーワードをミュートにする機能がないのであれば、作ってしまえば良いと思い、「コロナ」が含まれる記事を非表示にするChrome Extensionを作りました。

※Qiitaに投稿されているコロナに関する記事は素晴らしいものばかりだと思っています。本記事はコロナに関する記事を否定するようなものではございませんので、予めご了承ください。

なお、Ch

javascriptの基礎

# onload呼び出し

ページ表示するときにjavascriptを実行したい時に

“`
document.addEventListener(“DOMContentLoaded”, function () {
console.log(“hello, world!”);
});
“`
“`
const func = () => {
console.log(“hello, world!”);
};
func();
“`

# DOMの作成

`` 内に `

container

` を作りたい時に

“`
const divContainer = document.createElement(“div”);
divContainer.classList.add(“container”);
divContainer.textContent = “container”;
document.body.appendChild(divContainer);
“`

# DOMの取得

html の `class=

【JavaScript】超基礎、コールバック関数コードの追い方

#はじめに
今回、JavaScriptの基礎的な項目を一通り学んでみて、不安な要素の復習をしてみた際に、JavaScriptをはじめて学んだ際に躓いたというか、理解の難しかった要素であるコールバック関数をひとつずつコードを追っていくことで、自身の理解を深めるとともに、自身と同様にJavaScriptを学びはじめた方の参考になれば幸いでございます。

#目次
1.コールバック関数とは？
2.理解に必要な要素
3.コールバック関数の追い方

#1.コールバック関数とは？
コールバック関数を端的に説明すると『引数として渡される関数のこと』です。
このコールバック関数を説明するのに、理解しておくべき要素を以下に用意してみたので、見ていきましょう！

#2.理解に必要な要素
##・引数
引数とは…『関数を実行する時に関数に渡す値』
関数定義のなかの”（）”で引数として使う変数を作れます。
各関数のなかでは以下のように使われます。

“`js:allow_kansuu.js
const hello =() => {
consle.log(‘hello’);
};
“`
“`js:kans

zlibjsでファイル名が文字化けしてしまう問題の対応

# 始めに
JSでzipファイルを展開する際に以下の記事を参考にしていましたが、日本語ファイルを展開する際に文字化けをしてしまったのでその対応についてまとめました。

+ [zlibjsのUnzipを使用してブラウザ上でzipファイルを展開する](https://qiita.com/59naga/items/d8abcdc06248cb28cebd)
+ [[zlib.js] JavaScriptでZIP解凍する](https://qiita.com/yun_bow/items/1b9e86a2efe12432845d)

# 導入方法
こちらでも使い方について簡単に書きます。
まずは以下でパッケージをインストールします。

“`
$ yarn add zlibjs
“`

次に以下のようにしてzipファイルを展開します。今回はinput fileからのコールバックを使っています。

“`javascript:input_fileからのコールバックでzipファイルを展開する
const { Unzip } = require(‘zlibjs/bin.unzip.min’).Zli

Vanilla JSのパララックス実装ライブラリ「Rellax」が使いやすくなるoptional設定

#はじめに
私はプログラミングを学習して3ヶ月の初学者であり、今回が**初投稿**(大事)になります。
22歳の**文系大学既卒未経験**(大事)で、エンジニア目指して勉強/就活中の身です。

「クソ記事を量産するな！」と言われそうですが、学習の中でつまづいた点に関して日本語で書かれたドキュメントが見受けられず時間を食われたため、一発書いてみようかなと思い立ちました。

突っ込みどころ満載かもしれませんが、あらかじめご了承ください。
誤った情報や記述等がありましたらご指摘ください。

#なんの記事
JSライブラリ**「Rellax」**を使ってみて、使いづらさを感じた点がありました。
そのもやもやを解決するまでの軌跡をまとめた記事になります。ライブラリをまともに扱うのも初めて。

#Rellax
– **「Rellax」**とは、軽量かつVanillaJSにてパララックス効果（視差効果）を実装できるライブラリです。
実装方法など詳細は割愛させていただきます（非常に簡単です）。
[（参考リンク）](https://webkore.site/rellax/)

公式HPリンク:
[Vani

Promiseオブジェクトの関数に引数を使用する【編集中】

ポイント
(1) Promiseオブジェクトをreturnする関数にする
(2) 実行処理で引数指定

“`元のコード.js
var getRoomData = new Promise(function(resolve,reject){
roomInfo.on(‘value’, (snapshot)=> {
resolve(snapshot.val())
});

・・・省略・・・

getRoomData.then(function(dbData){
・・・省略・・・
})
“`

“`正しいコード.js
var getRoomData = function(roomInfo){ //(1) Promiseオブジェクトをreturnする関数にする
return new Promise(function(resolve,reject){
roomInfo.on(‘value’, (snapshot)=> {
resolve(snapshot.val())

webサービスを運営してみた(2020/4/18)

# はじめに
アルバイトの勤怠管理を無料でできるサービス[Timestamp](http://time-stamp.net)を個人で運営しています。
アクティブなアカウント数０人の当サービスで売上を１円でも上げることが目標です?
フルタイムで仕事をしながら個人でサービス運営できるかどうかの実験であり技術向上が目的でもあります。
ここでは運営や開発に関する記録を残していきます。

# ユーザー数
サービス開始から今日までのgoogleアナリティクスのユーザ数推移です。
あいかわらずアクティブなアカウントは０です??

# 雑記

### フロントエンドのソースを公開しました
フロントエンドのソースを[githubに公開しました](https://github.com/takimotoShotaro/re

jsフレームワークstimulusでyahoo地図を操作してみた（その四、最終回）

# やったこと、やる予定のこと
#### 0. [railsアプリへのstimulus適用](https://qiita.com/wkya_4a/items/e85bd6324fe4085dce0e)
#### 1. [stimuluｓでyahoo地図を表示](https://qiita.com/wkya_4a/items/6e1224550ca0b7aed9d9)

#### ２. [表示した地図上で、指定座標に移動](https://qiita.com/wkya_4a/items/3e2f5bb6cf8abe525bf0)

#### 3. [住所から座標を取得し、それをDBに登録](https://qiita.com/wkya_4a/items/883ad988f2ad5cf58f55)（前回）

#### 4. 「3」で登録した情報を選択し、yahoo地図上でその場所に移動（←今ここ）

だいぶ間が空いてしまいましたが、最終回。
一覧画面にて、
【「3」で登録した座標情報を選択→その地図の場所に移動】
をできるようにします。

##まずは、一覧画面にて地図を表示
今回は、作成

Speech Recognition API でブラウザ音声認識を試す

# はじめに
WebVRの研究中に音声認識をやりたくなって調べてみたら面白そうだったので試してみた

# [SpeechRecognition](https://developer.mozilla.org/ja/docs/Web/API/SpeechRecognition/SpeechRecognition)

## 概要
– HTML5に備わってるAPI (Mozilla作)
– 音ブラウザで音声を認識してくれる

## 準備
なし

## 使用方法
[公式ドキュメント](https://developer.mozilla.org/ja/docs/Web/API/SpeechRecognition)

– `new SpeechRecognition()` した後に設定値を入れて、
(※ chromeでは “webkit” プレフィックスを付けないといけないので`webkitSpeechRecognition()`になる)

– `start()` で認識開始
– `onresult()`で音声取得結果がわかる
– `stop()` で終了

# 音声認識を動かしてみる

## 仕様

Speech Recognition API と Yandex Translation API を使って 音声自動翻訳アプリを作成

# はじめに
たまたま音声認識APIがあることを知って簡単に動かせた
→ 翻訳にかけれたら便利だなと思ったので簡単に使える翻訳APIを調べて組み合わせてみた。

# 使用するAPIについて

## [SpeechRecognition](https://developer.mozilla.org/ja/docs/Web/API/SpeechRecognition/SpeechRecognition)
– HTML5に備わってるAPI (Mozilla作)
– 音ブラウザで音声を認識してくれる
– 参考：[Speech Recognition API でブラウザ音声認識を試す](https://qiita.com/yunayunanaka/items/75c1ade41b6156d304d8)

## [YandexTranslation](https://github.com/RytNszn/mylaps-dashboard)
– Yandexがロシア版Googleみたいなもので、そのYandexが出してる翻訳API
– APIの使用には無料登録が必要
– 使い方が簡単そうだったの試し