f@ctor

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

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

next/head

next.jsではhtmlのheadタグの中にmetaタグなど色々を出力したい場合はnext/headコンポーネントを利用する。

## 使い方

Headのchildrenが動的にheadタグに入る。

“`jsx
import Head from ‘next/head’

function IndexPage() {
return (


My page title

Hello world!

)
}
export default IndexPage
“`

## 重複をなくす

一意的なkeyを設定すると、後勝ちで１つのみが適応される。

“`jsx
import Head from ‘next/head’

function IndexPage

元記事を表示

トップへ戻るボタンを作る方法(JQuery ー＞ Vue.js)

はじめに
—
今回は既存のRailsアプリBlogのjQueryを利用して実装していたところを、Vue.jsで実装していきます。

jQuery
—

“`app/javascript/post/page_top.js
// jQuery

$(document).on(“ready turbolinks:load”, function() {
const pagetop = $(“#page_icon”);

pagetop.hide();
$(window).on(“scroll”, function(){
if ($(this).scrollTop() > 100){
pagetop.fadeIn();
}else{
pagetop.fadeOut();
}
});

pagetop.on(“click”, function(){
$(“body, html”).animate({scrollTop: 0}, 30);
return false;

});

});

`

元記事を表示

React.js&Next.js超入門 第2版 サンプルコードのバグまとめ

[掌田津耶乃　React.js&Next.js超入門 第2版](https://www.shuwasystem.co.jp/book/9784798063980.html)で学習を進めていていますが、サンプルコードでいくつかバグやミスがあるのでまとめます。

# 4-6の簡易メモ

[React.js&Next.js超入門 第2版の簡易メモのバグ修正](https://qiita.com/kmat/items/01addf420839cb1089bc)

参照

# 5-3のfetch APIでJSONデータにアクセスする

[React.js&Next.js超入門 第2版の無限ループのバグ修正](https://qiita.com/SolKul/items/20e178a76b68af5c66bf)

参照

# 5-3のSWRを利用する

319pから使っているuseSWRについて、2つ目の返り値をerrとしていますが、useSWRの返り値はオブジェクトで、プロパティ名はdataとerrorで固定なので、正しくはこうです。

“`js
const { data,error}=

元記事を表示

TypeScript 4.4の新機能

先日、TypeScript 4.4のRCバージョンについてのアナウンスがありました。

>Today we’re excited to announce our Release Candidate (RC) of TypeScript 4.4! Between now and the stable release of TypeScript 4.4, we expect no further changes apart from critical bug fixes.

Announcing TypeScript 4.4 RC

そこで、本日はアナウンスの内容で気になった以下の4つを紹介したいと思います。

1. [Control Flow Analysis of Aliased Conditions and Discriminants](#1control-flow-analysis-of-aliased-conditions-and-discriminants)
2. [Symbol and T

元記事を表示

履歴書の年表アプリ

まえがき

こんにちは、今回も練習の一環で自作物を作りました。
お題は「履歴書で使用する年表を計算してくれるアプリ」です。
言葉で説明されてもわかりにくいと思うので、とりあえず完成品をお見せします。
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1820236/d0707541-5a6b-0a86-c56c-105a363fdb10.jpeg)
この様に生年月日を入力すると、いつ入学して、いつ卒業したのかの一覧を作ってくれる簡素なアプリです。
自分で計算するとなると面倒くさいですよね？少なくとも前回の閏年判定アプリよりは使えますね！
小学校入学・卒業なんて履歴書に書かないとは思いますが…

今回も制作の記録をここに残します。

制作時間は12時間です。

もくじ

1.[目的](#1-目的)

2.[結果](#2-結果)

3.[制作の流れ](#3-制作の流れ)

4.[ふりかえり](#4-ふりかえり)

##1. 目的

このアプリのメ

元記事を表示

Web制作の学習で使用したサイト・サービス

##はじめに

Web制作の学習で使用した無料サイト・サービスの自分用メモ
随時更新☺

##フロントエンド
[Progate](https://prog-8.com/)
言わずとしれたサービス

[jsFiddle](https://jsfiddle.net/)
ブラウザ上でHTML/CSS/JavaScriptのコード実装と動作チェックができる
JavaScrip実装時に、()の付け忘れとかあるとエラー出してくれるから超便利◎
VSCodeの代わりに使える!(^^)!

[仕事ですぐに使えるTypeScript](https://github.com/future-architect/typescript-guide)
フューチャー株式会社（Future Corporation）が公開してるドキュメント

##サーバーサイド・API
[Talend API Tester – Free Edition]( https://chrome.google.com/webstore/detail/talend-api-tester-free-ed/aejoelaoggembcahagimd

元記事を表示

[TypeORM]Entity metadata for Post#category was not found.

##概要

#####TypeORMでエラーが表示されてマイグレーションができない
“Entity metadata for Post#category was not found. Chech if you specified a correct entity object and if it’s connection in the connection options.”

##原因

jsconfig.jsonに作成したEntityを追加していなかった

##対処
jsconfig.jsonに作成したEntityのファイルパスを記入
※TypeScriptの場合はtsconfig.json

“`ruby:追記内容
“include”: [
“./entity.post.js”,
“./entity.category.js”
],
“`

元記事を表示

MapLibre GL JSで時系列コントロールを扱う[maplibre-gl-temporal-control]

# TL;DR

– MapLibre GL JSで時系列表示をするためのプラグイン[maplibre-gl-temporal-control](https://github.com/Kanahiro/maplibre-gl-temporal-control)を開発したよ
– `npm install mapligre-gl-temporal-control`で使えるよ

# maplibre-gl-temporal-control

https://github.com/Kanahiro/maplibre-gl-temporal-control

![f433b-6pjhe.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/b75fb9a6-92c8-1ad9-4d5f-116def9fcbc3.gif)

![42zbp-si00t.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/b3c65d65-

元記事を表示

GoogleAPIs spreadsheetAPI 置換API

ぱっと調べてやってる人がいなかったので、備忘録として載せておきます。

| fields | meaning |
| ——– | ——– |
| find | 検索単語 |
| replacement | 置き換え単語 |
| matchCase | 検索で大文字と小文字が区別される場合はTrue |
| matchEntireCell | 検索値がセル全体と一致する必要がある場合はTrue |
| searchByRegex | 正規表現にする場合はtrue [正規表現ルールはこちら](https://docs.oracle.com/javase/8/docs/api/java/util/regex/Pattern.html) |
| includeFormulas | 検索に数式を含むセルを含める必要がある場合はTrue。数式を含むセルをスキップする場合はFalse。 |
| s

元記事を表示

nuxt.jsにてfabricでcanvasに四角形図形を追加できるようにする

## 目的

– javascriptのみでnuxt.jsのアプリにfabric.jsを導入したい

## 前提

– fabric.jsをインストールしている。

こちらの記事にインストール方法は書きました。

https://qiita.com/greenteabiscuit/items/52bc842b686362314123

## インストール

vue3のcomposition apiを使いたいので、インストールします。

“`
yarn add @nuxtjs/composition-api
“`

nuxt.config.jsのモジュールに追加しておきます。

“`nuxt.config.js
buildModules: [
// https://go.nuxtjs.dev/eslint
‘@nuxtjs/eslint-module’,
// https://go.nuxtjs.dev/stylelint
‘@nuxtjs/stylelint-module’,
// https://go.nuxtjs.dev/vueti

元記事を表示

JavaScriptで時計表示

### リアルタイムで動く時計表示

“`html



サンプル




“`

元記事を表示

スクロールアニメーションを実装する

## はじめに

以前、Intersection Observerを使った処理について学んだので、

せっかくなら、これを使って既存のサイトのアニメーションを再現してみようと思います。

お手本とするのは、こちらのサイトです。
[IN SOMEWHERE NIGHTS – Charlotte is Mine](http://charlotteismine.com/special/in-somewhere-nights/)

様々なモーションが施されている本サイトですが、

今回は中でも黒いラベルがスライドしていくアニメーションを模倣したいと思います。

実装するにあたって、参考サイトのソースコードは見ていません。

自分でロジックを考え、実装する力を鍛える事が目的です。

## コード

【CSS】【JavaScript】フェードイン・フェードアウト

# 目的

画像や文字が徐々に出現したり消えたりする、フェードイン・フェードアウト機能をCSSとJavaScriptでなるべく簡単に実装します。

# 実装

![ghorst.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629925/6a587c28-3de9-c690-eb12-c56bec9750ab.gif)

“`index.html



“`

“`stylesheet.css
/* アニメーションの設定 */
.ghorst {
transition: opacity 3s; /* opacity要素(不透明度)の変更を3秒間かけて行う */
}
“`

“`script.js

元記事を表示

Vueでお絵かきアプリ作成1(canvas使用)

#趣向
vueでお絵かき機能を作成する機会があったため作ってみました！
![スクリーンショット 2021-08-15 17.37.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/843952/9ffc5175-6583-9e15-6d03-252324b66008.png)

#はじめに
このページではお絵描きできるCanvasの実装まで行います。
まずはvueの作成。
widthとheight　で枠の大きさ、lineWidthでペンの太さ。strokeStyleでペンの色を決めることができます。

“`JavaScript:JavaScript
new Vue({
el: ‘#app’,
data() {
return {
weightNum: 5,
canvas: null,
color: “black”,
context: null,
}
},
mounted () {
// カンバス作成
thi

元記事を表示

Google Nest Hubに、WebRTCで映像配信してみた

Google Nest Hubは、Googleが提供するスマートディスプレイです。
「OK Google」ができる上に、ディスプレイがついているので、いろいろ役に立ちそうです。

ということで、ディスプレイがついているので、映像配信をしてあげようと思います。映像配信と言えば、最近はやりのWebRTCを使います。

Googleのスマートディスプレイで、WebRTCを配信するために、以下を試してみました。

①Googleスマートホームとしてカメラを実装する。
②GoogleアシスタントのInteractive Canvasを使う。

①が、もともとやりたかったことです。

Smart Home CameraStream Trait Schema

https://developers.google.com/assistant/smarthome/traits/camerastream?hl=ja

上記のページを見ると、スマートホームのトレイトであるCameraStreamがWebRTCが対応しているではないか。。。。
結論からいうと、うまく動きませんでした。
対応デバイスとして、sm

元記事を表示

更新するべきパッケージ一覧をCSVで出力(ruby, js)

メモ

## Ruby

“`bash=
$ bundle outdated –strict | sed -n “/^Gem /,\$p” | sed -e “s/ \+/,/g”
“`

出力例

“`
i18n-js,3.8.0,3.8.4,~> 3.8.0,default
js-routes,1.4.9,2.0.8,>= 0,default
json,2.3.1,2.5.1
jwt,2.2.2,2.2.3
“`

## JavaScript

jqを利用する

### package-lock.json

“`bash=
$ npm outdated –json | jq -r “to_entries | .[] | [.key, .value.current, .value.wanted, .value.latest] | @csv”
“`

出力例

“`
“i18next”,”19.8.7″,”19.9.2″,”20.4.0″
“jest”,”26.6.3″,”26.6.3″,”27.0.6″
…
“`

### yarn.lock

“`bas

元記事を表示

JS単体アプリケーションにNeutralinoを検討してみる

### はじめに
JSで単体アプリケーションを作成する際[Electron](https://www.electronjs.org/)では重すぎて何か代替案はないかと模索していた。
見つけた。

GIt Hub
[neutralinojs](https://github.com/neutralinojs/neutralinojs)

公式
[neutralinojs](https://neutralino.js.org)

動作も軽くビルドもアプリケーションの起動もElectronと比較にならない程速い。
制限は色々とあるものの要件にフィットすればマルチプラットフォームなJSデスクトップアプリとしてElectronの代替になりうると思う。
『業務の効率化を図るためチームのメンバにツールを配布』と言った際には十分はまると思う。

### 検証環境
以下の環境で開発
OS:windows10
node:14.15.4
npm:7:20.1
neutralinojs/neu : 5.2.1

### 環境構築
以下のコマンドでNeutralinojsをグローバルにインストール（gじゃなくて

元記事を表示

deno deployで簡単なWeb APIを作る

deno deployを利用して簡単なWeb APIを作ってみようと思います。

どんなAPIがいいか迷ったのですが、文章を単語に分割してくれる[Intl.Segmenter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter)という関数を発見。

今回はこの`Intl.Segmenter`を使って、クエリパラメータで渡した文章を単語に分割し、JSONで返すAPIを作っていきましょう。

# Web APIのひな型

公式ドキュメントを参考に、クエリパラメータに応じてJSONを返却するコードを書くと、このようになります。

“`ts
addEventListener(“fetch”, (event) => {
// リクエストされたURLから結果データを作成
const url = new URL(event.request.url)
const result = /*urlを元に結果データを作成するコードをここに書く*/

/

元記事を表示

integromatでGmailとLINEを連携　週間業務リマインド＆効率化

## 忘れてた・・・から始まるイレギュラー
　「沖中さん　週間業務報告書と交通費申請まだですか？」集計担当者からの催促メールで
　慌ててバタバタ作業開始。メールに気づいてないときは、催促電話をもらう始末。
　ファイルを探し、週間を振り返りつつ急いで記入、ん？さっきまで何してたっけ・・・
　**うっかりから発生するムダを　自動化で少しでも減らしたい**

## 何をどうやって自動化するか決める

　まず関連するすべての業務の洗い出し。自動化できそうな業務をピックアップ。![自動化.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/f6ed0daf-3efc-2067-20a4-c907683f4478.png)
　次にどのように自動化するのかを決める。

###　**①リマインドメール送信**
　　integromatでGmailとLINEを連携。報告〆曜日(月)に毎週購読しているメルマガがあり、
　　

JavaScriptを基本からまとめてみた【11】【onchangeイベント】

##はじめに

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

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

##JavaScriptのonchangeイベントとは
『onchangeイベント』とは、入力欄の内容を変更した時のイベント。JavaScriptでプログラミングを行っていると、ユーザーの入力に合わせて動的に表示内容を変えたい場合に便利なのがonchangeイベントで、HTML要素の値の変更が完了した時に発生するイベント。

対象のHTML要素は と