f@ctor

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

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

マークアップエンジニアがNuxt.js案件で必須な知識【5選】

こんにちは、現在フリーのマークアップエンジニアとして活動しているしょーごと申します。
最近はYouTubeなどでも発信しています。

普段は**WordPress構築や静的サイトコーディングをメイン**としているのですが、
最近機会に恵まれまして、`Nuxt.jsのマークアップ部分（ロジック以外）`を担当しております。

結果的に大苦戦してベテランの方に大迷惑をかけてしまったので、
`マークアップエンジニアやデザイナーがNuxt.jsのマークアップ部分をアサインされた場合に必要な知識`をまとめました。

**Nuxt.jsはweb制作業界にも少しづつ浸透してきている**ので、マークアップエンジニアやデザイナーさんもいずれ触る期間があるかもしれない点で、同業の方々に参考にして頂けたらと思います。

`俺の屍を超えていけ`

## Nuxtってなんなの？

Vue.js単体では開発に不足している機能が多いです。なので従来はプラグインやライブラリを導入していましたが、Nuxtは色んな機能が最初から盛り込まれているフレームワークになります。
**Vue.js+ライブラリの集まり**みたいなもの

元記事を表示

React v17 何が変わった？

先日、React v17がリリースされましたね!

前回のメジャーリリースからなんと2.5年もかかったようです。
ほとんどが公式の意訳になりますが、何が変わったのか重要そうなところをピックアップして自分メモとしてまとめておきます。
全てを網羅しているわけではないので、より詳しく知りたい方は下記の公式リリースノートを参照ください。
[公式リリースノート](https://reactjs.org/blog/2020/08/10/react-v17-rc.html)
## 新しい機能はないよ

React開発者は現在新しい機能追加に向けて取り組んでいますが、今回のv17には実は新機能は追加されていません。
v17は言わば、これからリリース予定の**大規模アップデートのための踏み石**になっています。

## 段階的アップデート
今までのアップデートには必ず破壊的変更が含まれていました。v15 -> v16の破壊的変更は皆さんの記憶にも新しいかと思います。そのような破壊的変更は、メンテされてないコードは特に、アップデート作業は困難を極めます。
１つのページに複数のバージョンのReactを置く

元記事を表示

【Nuxt.js】リングフィットアドベンチャーの運動記録を入力してグラフ化するアプリケーションを作った

# はじめに

みなさん[リングフィットアドベンチャー](https://www.nintendo.co.jp/ring/)はやっておられますか？
コロナ禍の影響であまり外出ができず、特にリモートワークの場合運動不足に陥りがちです。
そんな中、自室で楽しく運動することができるリングフィットフィットアドベンチャーはとても重宝しています。?
このような状況も相まって現在も品薄状態が続いているようですね。

さて、そんなリングフィットアドベンチャーですが、プレイしていた以下のようなことを感じました。

– 日々の運動記録は見れるが、そのためにゲームを起動するのがめんどくさい
– switch本体の時間操作をしていると正しく記録されない（これは人によりますが…）
– 運動記録をグラフにして見たい！

というわけで、よくあるフィットネスアプリのように運動記録を入力してグラフで見れるようにしました。
製作期間は2ヶ月くらいです。

[リングフィットログ](https://ring-fit-log.herokuapp.com/record)

[GitHub](https://github.co

元記事を表示

npmのライブラリの比較と評価方法：npm trends & Github

# 人気のあるライブラリをnpm trendsで探す

　**[npm trends](https://www.npmtrends.com/)**は、指定したライブラリのカテゴリと近いものを提示し、選択するとダウンロード数を比較してくれます。
　たとえば、dom parserを比較すると以下の用になります。

[npm trends: dom parserの比較](https://www.npmtrends.com/dom-parser-vs-cheerio-vs-htmlparser2-vs-parse5-vs-scraper-vs-xml2js-vs-xml-js-vs-fast-xml-parser-vs-xml2json-vs-jsdom)

![screencapture-npmtrends-dom-parser-vs-cheerio-vs-htmlparser2-vs-parse5-vs-scraper-vs-xml2js-vs-xml-js-vs-fast-xml-parser-vs-xml2json-vs-jsdom-2020-08-20-07_45_01.png](h

元記事を表示

【JavaScript関数ドリル】 初級編 head関数の実装

## head関数の課題内容

「課題内容」「解説動画」「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】head関数の実装

## head関数 に取り組む前の状態
+ 先頭の値を出力するのかな？とイメージしていました。

## head関数に取り組んだ後の状態

+ headメソッドは、引数に配列を渡すことで先頭の値が出力されます

## head関数の実装コード(答えを見る前)
+ 比較的かんたんに使えるメソッドで、実装することができました。

## head関数の実装コード(答えを見た後)

実装完了しました?

“`js
function head(array) {
return array[0];
}

console.log( head([1,2,3]));

console.log(head([]));

console.log(head([20,54,67,3,4,76,5,6,30030]));
“`

元記事を表示

GoogleForm回答の集計グラフをコピーする方法

注意: 2020/08/20時点の情報です。GoogleFormの仕様が変わっている場合があります。

# GoogleFormが作ってくれるグラフをSVG形式で出力する
GoogleFormは手軽にWebアンケートを作ることができる便利なツールだ。
Webの専門知識がなくてもアンケートの作成から集計まで手を煩わせることなく簡単に行なえるツールとしてあらゆる場面で重宝している。
標準機能として集計結果のグラフを画像としてクリップボード経由で出力できるのだが、ラスター画像であるため、大きめの印刷物にこれを用いようとすると画像を引き伸ばすしかなく画像の劣化を避けられずやや不便である。
F12開発ツールで集計ページのhtmlを覗くと、グラフはもともとSVGで作られているようである。だから、このSVGをそのまま抜き出してしまえばよいのではないかと考えた。
SVGを抜き出してしまえばそのあとは適当なツールを使ってラスター画像に変換したり、自身のWebページに埋め込んだりと自由自在である。

# 手順
1. GoogleFormを開き、「回答」タブを表示する
2. ブラウザの開発ツールを出してコン

元記事を表示

Vuetifyのv-text-fieldでtype=”number”の時に、表示されている値を変更する

こんにちは！
長らくプレーンJavaScriptガリゴリマンでしたが、最近仕事の関係でVue.jsを触り始めた和尚でございます:star2:

それでは早速見ていきましょう！

### 環境
– Vue.js v2.6.11
– Vuex v3.4.0
– Vuetify v2.2.11

### 注意
※かなりパワープレイです。参考程度に見てください。

# 本日の議題

ある昼下がりのこと

Aさん「数値しか入れられないフォームに文字が入っちゃうんだけど、どうにかならない？あと、最大値が999のはずなのに、キーボードで入力すると1000以上入っちゃうからついでに直して…」

和尚「まじっすかー。ちょっと調べてみまーす！」

…

## 今回の要件における Input type=”number” の困った仕様
– 最大値と最小値はキーボード入力で超えることが可能
– safariは文字列を入力すると自動削除されない
– chromeは指数表現のe・Eが入力できる

# 解決しよう！
それではAさんの要件に沿って修正していきましょう！
修正前のサンプルコンポーネントとストアはこ

元記事を表示

商品出品機能のコード全文

# フリマアプリの商品出品機能
最終課題で実装した商品出品ページの全コードを記録用に書きます！

## 機能
・ancestry：多階層カテゴリー
・ActiveStorage：画像投稿
・jp_prefecture:都道府県を扱うGem
・active_hash：静的データ作成

## Active Storageのセットアップ
下記をみて導入方法を確認する
[Rails ガイド](https://railsguides.jp/active_storage_overview.html)

## ルーティング

“`ruby:routes.rb
Rails.application.routes.draw do
devise_for :users, controllers: {
registrations: ‘users/registrations’,
}
devise_scope :user do
get ‘sending_destinations’, to: ‘users/registrations#newSendingDestination’

元記事を表示

【忙しい現代人のために】表情で扇風機を操作するシステムを作ったよ

猛暑です。

机で仕事、勉強するのに、扇風機はかかせません。

しかしながら、扇風機のスイッチのオンオフには、仕事や勉強を一時中断しないといけないという問題があります。

そんな１分１秒でも惜しい現代人へ、
顔の表情で扇風機を操作するシステムを作りました。

##作ったもの