- 0.0.1. CSSの属性セレクタと否定擬似クラスを同時に使用するサンプル
- 0.0.2. ES6でのthisについて
- 0.0.3. JSONとは(JS ObjectとJSON Objectの違い)
- 0.0.4. Nuxt.jsの動的ルーティングでQiitaっぽい構成を作ってみるメモ
- 0.0.5. JavaScript学習ロードマップ
- 0.0.6. 姿勢推定モデルでスクワットカウンタを作ってみた
- 0.0.7. ジェイソン・ステイサムに「死にたくないなら手を挙げろ！」と言われるのが夢だったので、自分でそんなアプリを作りました。
- 0.0.8. JavaScriptのarrayのmap関数でアロー関数を使う
- 0.0.9. JSでvar使って欲しくないな…と思う背景
- 0.0.10. Apple MusicのプレイリストをSpotifyに「変換」するJSスクリプト
- 0.0.11. Angulartics2を使ってSPAサイトにAdobe Analyticsを導入するときの手順と注意点
- 0.0.12. [javascript]jQueryを使う方法
- 0.0.13. Compilation Error undefined
- 0.0.14. Nuxt on Dockerでpuppeteer使ってスクレイピングする。
- 0.0.15. いろんなForm処理
- 0.0.16. Next.jsにjestとenzymeを導入する
- 0.0.17. JavaScriptでスペースインベーダーを作成
- 0.0.18. Intersection Observer APIではパララックス（視差効果）は実装できない
- 0.0.19. 【React】副作用フックの基本を学ぶ【Hooks】
- 1. テスト
CSSの属性セレクタと否定擬似クラスを同時に使用するサンプル
属性セレクタは直感的でよく使うのですが、否定の構文がないので困っていました。調べると否定擬似クラスがあることが分かりました。属性セレクタと組み合わせて使う方法が難しかったのでメモしておきます。
### HTML
link要素が２つあります。media属性が存在しないlinkだけ取得する方法の紹介です。
“`html
“`### DevTools コンソール
Chromeの開発ツールのコンソールで指定する例
“`javascript
$(‘head > link[rel=”stylesheet”][href]:not([media])’).attr(‘href’)
“`#### 結果
“`javascript
“b.css”
“`### puppeteer
puppeteerで
ES6でのthisについて
ES6から追加になったアロー関数ですが、もちろん短く完結に書けるという点で便利なのですが、
他にもES5でよく悩まされたthisの扱いでも便利な点があることに気付いたため試してみます。## ES5でのthis
以下のようなコールバック関数でthisを使うとします。
*※ 後で気付いたのですが、constはES6以降なので純粋にES5で実行するにはvarですね。他にもテンプレートリテラルもないでしょ、とか本題と関係ないところはおいておきます。*“`js:aboutthis.js
const team = {
members: [‘太郎’, ‘花子’],
teamName: ‘Aチーム’,
teamSummary: function() {
return this.members.map(function(member) {
return `${member}は${this.teamName}の所属です。`
})
}
}console.log(team.teamSummary(
JSONとは(JS ObjectとJSON Objectの違い)
JSONって結局なんなんだ？っと思っていろいろ調べたのでまとめる
#JSONとは
* JSONはJavaScriptオブジェクトの表記法をベースにした”**データフォーマット**”
* JSON自体は文字列でもオブジェクトでもなく、ただの”データフォーマット”
* JavaScript言語の元に、JS形式のオブジェクト(JSオブジェクト)、JS形式の文字列(JS文字列)などが存在するのと同様に、
JSONというデータ定義言語の元に、JSON形式のオブジェクト(**JSONオブジェクト**)、JSON形式の文字列(**JSON文字列**)が存在する以下でJSONオブジェクト、JSON文字列、それらへの変換方法を記述する。
##JSONオブジェクト
* キー(プロパティ名)はダブルクォートで囲んだ文字列でないといけない
* オブジェクトの末尾にカンマ置いてはいけない“`javascript
// ***JSONオブジェクト***
let JSON_Object = {
“place”: “Osaka”,
“number”: 2
}
console.log(JS
Nuxt.jsの動的ルーティングでQiitaっぽい構成を作ってみるメモ
Qiitaと同様の構成を作ってみたメモです。
## 通常のNuxt.jsの動的ルーティング
こんな構成にすると
“`
pages/
–| users/
—–| _id.vue
–| index.vue
“``https://ドメイン/users/<ユーザー名>` みたいな構成を作ることが出来ます。
> https://ja.nuxtjs.org/guide/routing#%E5%8B%95%E7%9A%84%E3%81%AA%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0
このユーザー名の部分がURLにアクセスした際の値で動的に変わります。
## Qiitaっぽい構成って?
(2020年9月時点)Qiitaの記事は以下のような構成です。
“`
https://ドメイン/<ユーザー名>/items/<記事ID>
“`例: `https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d`
先ほどの`ユーザー名`だけが動的な場合と違って、
JavaScript学習ロードマップ
JavaScript苦手・・という状況からJavaScript好きになれるロードマップ（多分）
全編ほぼ動画なので、とっても見やすい。挫折しづらい。
全体的な流れとしては、動画見る ▶︎ コードを書いて学習の流れです
個人的に好きなエンジニア系Youtuberのお二人の動画がメインになります
– [Yahoo!出身のエンジニア 起業家のしまぶーのIT大学さん](https://www.youtube.com/channel/UCti6dG0zSAetLGGYcgNML4Q)
– [Web万屋エンジニアチャンネルさん](https://www.youtube.com/channel/UCHxqQ8bUg5F2GW79D_DvSjQ)
## LEVEL ☆ JavaScriptってなに？
そもそもJavaScriptって何？フロントエンドって何してるの？ってレベルを解消
の授業で[ml5.js](https://ml5js.org/)の[PoseNetサンプル](https://examples.ml5js.org/)に触れているときに、姿勢推定モデルを利用して鼻やお尻の位置がある領域を下回ったときにカウントできないかと考えました。
#実際にできたもの
https://thirsty-austin-efa702.netlify.app/
ジェイソン・ステイサムに「死にたくないなら手を挙げろ！」と言われるのが夢だったので、自分でそんなアプリを作りました。こんにちは！Qiita内で「ジェイソン・ステイサム」というタグを着々と育てているたわちゃんです♪
今回も、ステイサム関連のWebアプリを作ったので、ご紹介いたします！#アプリを作ろうとした背景
ブラウザで機械学習が利用できるml5を勉強中。
何かアウトプットできないかなぁと思ったときに、このツイートを発見！p5.jsでハンドトラッキング+簡易ポーズ検出！
マクロスFよりランカちゃんの「キラッ☆」をやると星がバチバチに出るやつ作ってみた！右手でやってみてね?#p5js #dailycoding JavaScriptのarrayのmap関数でアロー関数を使う##arrayのmap関数とは？
「配列内のすべての要素に対して、同じ処理を加えた新しい配列を返す」関数。サンプル
“`javascript
array1 = [0,1,2,3,4,5]
“`という配列に対して、すべての要素を２倍にした新しい配列
“`javascript
array2 = [0,2,4,6,8,10]
“`を簡単に作れる
###map関数の基本的な使い方の例
サンプル
“`javascript
var func = function nibai(value){return value * 2};var baseArray = [1,2,3,4,5];
var newArray = baseArray.map(func);
console.log(newArray); // =>[2,4,6,8,10]
“`1. 引数を一つ取り、引数を二倍にして返すnibai関数を作り、変数funcに代入する
2. baseArrayを作る
3. baseArrayのmapメソッドを使い、引数として1で作った関数（を代入した変数func）を渡すJSでvar使って欲しくないな…と思う背景
昔メモしていた内容を公開します。
## var がわかりにくいポイント
“`js
var x = “First”;
function (){
console.log(x);
var x = “Second”;
console.log(x);
}
“`
のようになっていた時。1つめのログでは、なんとなく`“First”`が出力されそうな気がする。
けど実際そうはならなず`undefined`が表示される。`undefined`は変数定義（使いますよーっていう）はしてるけど、
初期化（あ、とりあえずこの値入れといてー）はしてないよ。
って言われていることと同義。“`js
var x = “First”;
“`で初期化してるやん！！って思うけど、
残念ながら
“`js
var x = “Second”;
“`が宣言されているのでこっちがきいている。
じゃなんで`Second`じゃないんだ！！って思う。
関数の巻き揚げは宣言だけで、初期化（値を代入してるやつ）は見てくれない。
ので、JSとしては、“`js
// `fApple MusicのプレイリストをSpotifyに「変換」するJSスクリプト
# 困ったこと
– 普段、サブスクリプション＆ストリーミングの音楽サービスはSpotifyをプレミアム会員として使っている
– が、SNSなどで他人からプレイリストが共有されるのはSpotifyとは限らない（個人的にはApple Musicであることが多い）
– プレビューで数十秒間聴くことはできるが、Spotifyであれば広告もなくフル尺で聴けるし、できればプレイリストを移植したい
– プレイリスト移植ができなくてもせめて「一曲ごとSpotifyでキーボードを叩いて検索して」再生・プレイリストに追加する手間をなくしたい
– [Soundiiz](https://soundiiz.com/)というサービスは、異なるストリーミングプラットフォーム間のプレイリストを変換してくれる
– が、そのためにはApple Musicの方でも有料会員になっていて、Soundiizに接続する必要がある
– さらに一括変換などの便益を受けたければSoundiizにも課金しなければならない
– 現状そこまでしなくてもいいかな、感# 解決の方向
– 前提として
– Apple MusiAngulartics2を使ってSPAサイトにAdobe Analyticsを導入するときの手順と注意点
# はじめに
SPA形式のWebサイトに対して、Adobe AnalyticsなどのWeb行動計測ツールを入れるのは
今までのWebサイトの導入時と違い、ちょっと調整や技術調整が必要になります。> 理由として、ページのリフレッシュが起きない事による今までの仕組みの違いがあります。
SPA形式のWebサイト制作をするに当たっては、AngularやReact、Vueなどいくつかのフレームワークが存在します。
今回はそのうちの一つ、Angularで作ったSPAサイトに対してAdobe Analyticsを導入する時に使えるAngulartics2というパッケージについて少し考慮するべきポイントをまとめました。[angulartics/angulartics2: Vendor\-agnostic analytics for Angular2 applications\.](https://github.com/angulartics/angulartics2)
# Angulartics2について
Angulartics2は、AngularでSPAアプリケーション開発をする際に様
[javascript]jQueryを使う方法
#jQueryとは
jQuery（ジェイクエリー）は、JavaScriptライブラリです。
JavaScriptライブラリとは、JavaScriptの処理を簡単に扱えるようにしたプログラムです。ほとんどのWEBサイトやWEBアプリケーションで使用されています。
例えば、WEBサイトのトップページの画像が横にスライドされたりするのを見たことがあると思いますが、あれもjQueryで実装されています。あとは、SNSなどのいいね機能などです。ハートマークを押すと、ハートに色がついたりするのもjQueryです。#jQueryを使う準備をする
jQueryを使うには外部ファイルとして、jQueryを読み込む必要があるため、
jQueryの公式サイトからファイルをダウンロードする必要があります。
【jQuery公式サイト】
https://jquery.com/1.左にあるDownloadをクリック
調べてみると、Sassファイルの読み込みの関係でエラーが出ることがあるので、再起動してあげると直るとのことらしい。
実際に再起動してみると直るのだが、多くの頻度でこのようなエラーが出るので、再起動を何度もしてそのたびに時間をロスしてしまう、もっと良い方法はないのだろうか？
Nuxt on Dockerでpuppeteer使ってスクレイピングする。
# はじめに
あーあ、スクレイピングしたいな。ということで Nuxt on Docker でスクレイピングします。
node系だと[puppeteer](https://github.com/puppeteer/puppeteer)というライブラリがスクレイピングするのにおすすめっぽかったので、NuxtのserverMiddlewareからサクッとスクレイピングします。あまり人に迷惑をかけてはいけないと言われて育ったので、スクレイピングは自分のサイトにします。（ログイン不要だよ。ぜひ使ってみてね♪）
[toribure | ひとりでもチームでも使えるシンプルイズベストなブレストツール](https://toribure.herokuapp.com/)
やや宣伝ですね。トップページにかわいい鳥（いらすとや）の画像があります。今回はこれをス
いろんなForm処理
SPAばっかり書いていると、すこーし昔な感じの form を使った処理を忘れがちにしてしまいます。
私の備忘録として残すとともに、いろいろな form の書き方を見比べてみましょう。# 1. 一般的な form 処理
“`html
“`
よく見るやつです。
とくに難しいことはしていません。# 2. form 要素の外にボタンを置いて、form を実行
“`html
JavaScriptでスペースインベーダーを作成
先日は[ゲーム電卓のデジタルインベーダー](https://qiita.com/akebi_mh/items/de4564ce9e02fed6fd7e)を作成した、という記事を投稿しましたが、今回はスペースインベーダーです。
実物のスペースインベーダーはあまりやり込んだクチではないので異なる部分も多々あるかと思いますが、理不尽なバランスでゲームとして成り立っていない、ということには最低限ならないよう気をつけました。
**PCでのスクリーンショット**
####[こちらから実行できます](https://akebi.jp/invaders/)####
**PC** : **方向キー**または[**Z**][**C**]で自機移動、[**SPACE**]または[**Enter**]で発射
**スマホ/タブレット** : 画面上を左右スワイプ
Intersection Observer APIではパララックス（視差効果）は実装できない
ウインドウスクロールに応じて、何らかの演出をさせようと思った際には、[Intersection Observer API](https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API)を利用した実装を検討すると良い。
## Intersection Observerは「瞬間」しか扱わない
しかし、いわゆるパララックスと呼ばれる表現を実装しようと思ったら、Intersection Observer APIでは実装できない。
なぜならば、Intersection Observer APIでは、対象要素とビューポートの交差を監視しているだけで、**交差する瞬間以外にはコールバック関数は実行されない**からだ。もっとも`threshold`を細かく指定してやることによって、スクロールの変化を細かく追うことはできなくはないが、どこまでやるのかという問題が残る。“`javascript
let options = {
root: null,
rootMargin: ‘0px’,
thresho
【React】副作用フックの基本を学ぶ【Hooks】
# 副作用フックとは
React１６.８vからの新機能です。**クラスコンポーネント**での**ライフサイクルメソッド**を関数コンポーネントでも使えるようにしたものです。
`useEffect()`を使うことで、利用できます。
# useEffectの基本形
“`test.jsx
import React, { useState, useEffect } from “react”;const Test = () => {
let [count, conter] = useState(0);
useEffect(() => {
console.log(“レンダーされました。”);
});
return (
<>テスト
{count}
TypeScript環境にESLint+Prettierを最小で導入する
# TL;DR
今回の設定ファイルは全て[このGist](https://gist.github.com/shun-shobon/432d5c5cfc1d3f7639a13d55c02de669)にあります。# はじめに
今回はTypeScript環境にESLint+Prettierをなるべく少ないファイル記述で導入することを目標にします。
他のLinter導入記事を見ていると重複した設定や無意味な設定が目立つのでそういったものは省きつつ導入します。> 注： 私自身、Linterの導入になれているわけではないのでおかしい点があったら指摘してください。
# パッケージのインストール
今回はyarnを用いますが、お好みでnpmやpnpmを使用しても構いません。## ESLint
“`shell
yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
“`|名称|説明|
|—|—|
|[eslint](https://www.npmjs.com/package/
