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

TypeScriptの組み込み型関数 Pickの使いどころ

## Pickの使いどころ

Pickについて考えたので書く

## 最小サンプル

“` ts

type Product = {
name: string
price: number
brand: {
id: number,
name: string
}
}
//type Pick
type PickedProduct = Pick
“`

PickedProduct は以下の型として展開される

“` ts
{
name:string
brand: {
id:number
name:string
}
}
“`

つまりTの型から K に指定したキーだけの部分型を切り出せる。

## サンプルコード

実際単独でPickを使うことは個人的にあまり無く、ジェネリクスとの併用で使う事が多いんじゃ無いかと思います。
よくある商品APIを例にして実用例を説明し

カブトムシを様々な種類にトランスフォームさせたくなったときの簡単なTIPS

###【 完成形 】

See the Pen
MWKXrmO by daisukeibi (@daisukeibi)
on

Xamarin.Forms ガワネイティブアプリで、C# から JavaScript へのリクエスト～レスポンスを Task にする

メモ書きなので雑。

## シナリオ

– Xamarin.Forms + WebView(HTML, JavaScript な SPA) のガワネイティブアプリである
– Android アプリの BACK キーの有効無効を、WebView 内のページ状態によって切り替えたい
– データ編集中(未保存)なので Back キーで history.back やアプリ終了されたら困る、とか

## 流れ

1． [Forms側] “Action> OnRequestIsEnableBackKey { get; set; }“ を生やす

2． [Forms側] WebViewEx(WebViewを拡張したもの)に “Task IsEnableBackKeyAsync()“ も生やす。実装は次のように。

“`csharp
public Task IsEnableBackKeyAsync()
{
var comp = new TaskCompletionSource();

【備忘録：jQuery】ブロックスコープ

#関数に引数について
今回csvを読み込みそれをJSONに変換しフロント部分を対応していたのですが、csv読み込みのajax内のdone内で自分で書いていた、変数がなぜ読まれるのかと思っていたので備忘録です。

##ソース
“`javascript:hoge.js
for (var num = 0; num < jsonArray.length; num++) { if(jsonArray[num].hogehoge === '1'){ htmlOutPut();//①これが呼び出す関数 } //ここが呼び出される関数 function htmlOutPut() { const $jsonHoge = $('#hogehoge'); let $html = '

‘;
$html += ‘‘;//②ここのnumが呼ばれているのが不思議だった
$html += ‘

‘ + jsonArray[num].ttl + ‘

‘;//

JavaScript学習要点(随時更新予定)

– JavaScriptは外部ファイルに書くのが一般的である。

– console.log() は丸括弧 () 内に入力された文字をコンソールに出力する。文字列は、シングルクォーテーション（ ‘ ）かダブルクォーテーション（ ” ）で囲む必要がある。

– 文の最後はセミコロン（;）で終わる。セミコロンはなくても正常に動作する場合が多いが、思わぬ不具合が生じる可能性があるので忘れずにつける。

– 文頭に「//」を書くと、その行はコメントとみなされる。

– 変数は「let 変数名 = 値」として定義する。変数はクォーテーションで囲まない。「console.log(“name”);」のように変数名をクォーテーションで囲むと、nameが変数ではなく「文字列」として認識され、「name」とそのまま出力されてしまうので注意する。

– 変数は、一度代入した値を変更することもできる。定義する時と違って「let」は必要なく、「変数名 = 新しい値」と書けば値が変更される。

– 定数はletの代わりにconstを用いて定義する。変数は1度代入した値を更新することができるが、定数は値を更新するこ

Chrome Extentions “Krafty” 公開

# Chrome Extention “Krafty”を公開しました。

開いているWebページのmeta情報やaltの確認、HTMLのネストの検証、要素のアウトラインの確認などができます。
マークアップエンジニアの方や、ディレクターの方には便利につかっていただけると思います。

名前は、New Orderのアルバムからいただきました。

ストア公開の申請時に、この拡張機能の使用にはホスト権限が必要なので、審査にかなり時間がかかると脅かされましたが、2日ほどで公開されました。
Googleさんありがとうございます。

[Chrome Webstore](https://chrome.google.com/webstore/detail/krafty/obfjnafkhihecjkpfpcgglckalfphbfb)
[GitHub](https://github.com/takeshisakuma/krafty)

## 機能紹介
Kraftyの4つの機能をご紹介します。

### Head Checker
meta情報などを、ソースを開かずに確認できる機能です。
お客さんや一部ディレ

canvasで画像比較したい

## canvasで画像比較したい
最近ffmpegを使って音をいじいじする機会がありました。
いろんなパターンで音を編集してみたのですが、音の変化を耳で感じるのに限界を感じ、視覚的に見る方法ないかなぁと思っていました。
そしたらffmpegには音の波形を画像で出す機能があるようで。

サンプリング波形を一枚画像で出力する showwavespic

波形の画像を生成したは良いが、微妙な違いを確認するためには結局目を凝らすしかないという結果に。。
Rubyには[rmagick](https://github.com/rmagick/rmagick)がありますが、javascriptでなんかできないかなぁと思いcanvasを使ってやってみることにしました。

## どうやったか

### 概要
`wave_1.png`と`wave_1.png`を用意し、canvasに順番にレンダリング。
レンダリングした情報を変数に格納。
画像を比較して差分がある箇所だけ色を付ける。

“`index.html

imag

【画面操作】ワンクリックでWebページからプレゼント応募しまくる

# はじめに
基本的には業務時間外に開発とか絶対やらない。
と思っている私があくまで話のネタとして作ってみたものなので、これがベストなツールかベストな方法かはわかりません。

こんなのあるんだなーと興味をもってくれたら嬉しいです。
Googleの拡張機能、**Tampermonkey**を使ってブラウザを操ってみましょう。

# きっかけ
某化粧品口コミサイトで毎月プレゼント企画があって、応募しまくるとたまに当たるのでよくやっていました。

アカウントがあれば誰でも、ぽちぽちクリックするだけで応募できます。そうクリックするだけで。

1回につきプレゼントの種類はだいたい15くらい。内容は毎月4回更新。月に約60個も応募できる！
![presents.PNG](https://qiita-image-store.s3.ap-northeas

手動でABテストするためのコンテンツの出し分けのサンプル（Javascript+Cookie）

##はじめに

**実現したい事**はWebサイトで
特定の画像／文章／デザインなどの部品を2パターン用意し、
ランダムで表示してその結果を後で
GoogleAnalyticsなどで検証するというものです。
※コードの例ではGAのイベントトラッキングを活用します。
オプティマイズや別の専用ツールなどもあるのですが、
ツールの縛りがある、使い辛い、まずは気軽に試したい、
という時に不便なので作りました。（個人サイトの場合など含め）

（利用例）
**画像A / 画像B　どちらを表示したほうがCVRが良いか？**
※GA等の解析ツールにデータを送信し、後で分析をかけます。

補足：
コードは汚いので仕組みそのものや部品とりとしてご活用ください。

##仕様

**概要：**
特定のIDを持つ要素に対してA／Bパターン2種類の中身（HTML）を用意し、

Kinx アルゴリズム – 騎士巡回問題

# Kinx アルゴリズム – 騎士巡回問題

## はじめに

**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。「プログラム＝アルゴリズム＋データ構造」。アルゴリズムの実装例をご紹介。

元ネタは「C言語による（30年経っても）最新アルゴリズム事典」。今回は騎士巡回問題です。

* 参考
* 最初の動機 … [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
* 個別記事へのリンクは全てここに集約してあります。
* リポジトリ … [https://github.com/Kray-G/kinx](https://github.com/Kray-G/kinx)
* Pull Request 等お待ちしております。

最新アルゴリズム事典にはこういうのも結構載ってる。パズル的な。

【Nuxt.js】Nuxt文法編：@submit

? この記事はWP専用です
https://wp.me/pc9NHC-p9

# 前置き
今回はイベントハンドラ の一種、
@submitについて?

基本的な記法や
イベントの種類、
イベント修飾子などは
こちらで既に解説済みです??‍?
https://wp.me/pc9NHC-ht

@submitの使用例を
主に解説していきます?
# @submit
## イベントの種類

MDN
submitイベントは

が
送信された時に発生します?
formタグ自身につくもので、
form内のinputやbuttonでは発生しません?
consoleでエベントの種類を
確認してみましょう✅ ?

JavaScriptイベントハンドラ
–| submitイベント/
—-| @submit


SubmitEventの中の
t

JavaScript 基礎 サイコロ

## サイコロ

**HTML**

“`html

–

“`

**JavaScript**

“`javascript

function altRan2() {
var r = Math.floor(Math.random() * 6) + 1;

document.getElementById(‘sai’).innerHTML = r;
}
“`

### Math.floor()
引数として与えた数以下の最大の整数を返します。
>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/floor

### Math.random()
0–1（0以上、1未満）の範囲で浮動小数点の擬似乱数を返す
>https://developer.mozilla.org/ja/d

Javascriptで日付の連動更新をする

#命題
JavaScriptを使って、二つ（以上）ある``の一方が更新されたとき、もう片方を同じ値にしたい。
ブラウザはChrome 83を使用。

##想定される使用例
検索期間を2組の``で表し、例えば検索終了日を変更した際に、検索開始日より過去の日付だったら開始日を終了日と同じにする。

“`HTML:HTMLサンプル

検索期間:
～
←こちらを変更すると左側の日付も変わります。

“`

具体的には上記のコードで、DateUntilを2020-7-09に変更した場合、DateSinceも2020-7-09に書き換わるようにする。

実際の実装では逆の処理(DateSinceをDateUn

ポートフォリオ

#ポートフォリオ１

こちらのポートフォリオは環境構築だけで開発は行っていません。
(aws,nginx,ruby,docker,mysql)を使って環境構築を行いました。

https://github.com/tmk616window/docker-ruby2

#ポートフォリオ２　

ポートフォリオ投稿サイトを作りました。

URLはこちらになります

https://github.com/tmk616window/review00
https://review0.herokuapp.com/

##経緯
まずなぜこれを作ろうと思ったのか説明させていただきます。
自分がインターンの採用のためにポートフォリオを作ろうと思ったときに「何を作ればいいかわからない。どこまで作りこめばいいかわからない。」という悩みがありました。
ツイッターやyoutubeのコメント欄でもこういった悩みを持った方々をよく見かけました。
それだったら何を作ればいいのかまたどれくらい作りこめばいいのかの指標になるようなものをポートフォリオに落とし込んでみようと思いました。

##コンプト
エンジニア採用が決

React ハンズオン

# 今日作成するアプリ

# 1.Reactの簡単な説明
– データの変更を検知したら、関連する部分だけを効率的に更新、描画する
– 仮想 DOM(インメモリに保持されたUI表現)による高速な描画
– JSXを使う(JavaScriptのソースコードにHTML的なものを埋め込む)
– 単一のWebページでアプリケーション(Single Page Application)を作れる

## Reactの採用事例
主な採用事例

– Netflix
– Slack
– Uber
– Airbnb
– Paypal

## ES2015(ES6)について
– ECMASCriptの6th Editionのこと
– letとconstで変数を宣言できる
– アロー関数 : console.log(materials.map(material => m

iframe絡んだJavaScript操作

Html画面制作中、iframeをよく利用して、別の画面を取り込みます。
　JavaScriptでiframe間でイベント発生などがよくあります。うまくできない場合があります。
その解決策をメモしております。

#やりたいこと
iframe1のボタンを押したら、iframe2の表に行を追加

#問題点
下記のコードでiframe1のボタンをイベントでiframe2の項目を認識できない。

“`html
$(“.sendSelAdd”).on(“click”, function() {
// テーブルの最終行をクローンしてテーブルの最後に追加する
$(“#sendSelList tr:last-child”).clone(true).appendTo(“#sendSelList”);

// 複製後に表示させる
$(“#sendSelList tr:last-child”).css(“display”, “table-row”);
});

“`

#解決方法

iframeを利用すると、当iframe以外の要素をアクセスするとき、直接アクセスできなくて、

SpotifyのようなタブバーをReact Native (React Navigation 5.x) でつくってみた

# TL;DR
本稿では、SpotifyのようなアニメーションつきのタブバーをReact Navigation 5.xで実装する方法についてを紹介します。
こちらが完成形です。

途中でSpotify愛を語りながらグダグダと書きますので、生き急いでる方は[githubリポジトリ](https://github.com/ShintaroaSuzuki/react-navigation-spotify-tab/tree/master)をご覧ください。

# 自己紹介
僕は北の大地で統計学、経済学、経営学などを学んでいる**文系大学院生(闇)**です。

大学3年の秋頃に暇だったのでプログラミングを学び始めました。専門は統計学だったので、「ディープラーニングができたらいいなあ」と思って最初の言語はPythonにしました。僕はいまM1なので

【Vue.js】TimeTreeの予定表をAPIで取得して出力する

# 概要
カレンダーシェアアプリのTimeTreeのAPIが2020年1月23日に公開されました。
本記事では、Vue.jsからTimeTreeのAPIを呼び出して、予定表を出力する所までのサンプルのソースコードを公開します。

# 事前準備
– [TimeTreeの開発者向けサイト](https://developers.timetreeapp.com/ja/docs/api)を参考にして以下の手順を実施してください。
– [TimeTreeアカウントの登録](https://developers.timetreeapp.com/ja/docs/api#timetree%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%AE%E7%99%BB%E9%8C%B2)
– [パーソナルアクセストークンの発行](https://developers.timetreeapp.com/ja/docs/api#%E3%83%91%E3%83%BC%E3%82%BD%E3%83%8A%E3%83%AB%E3%82%A2%E3%82%AF%E3%

“Kill sticky headers”の動作解説　ーWebサイト閲覧を快適にー

# はじめに
はじめまして、@wa-cordと申します。

“Kill sticky headers”というブックマークレットをご存知でしょうか。Webサイト閲覧時、サイト上部に固定されているヘッダーなどを消してくれるものです。Alisdair McDiarmid氏が2013年に公開しました。

公式ページ：
https://alisdair.mcdiarmid.org/kill-sticky-headers/

私は愛用しています。非常に便利なものだと感じています。このブックマークレットのおかげでWebサイト閲覧が快適になりました。
Javascriptを学び、動作を理解することができたので、解説したいと思います。公式ページにも解説がありますが、初心者でも分かりやすいように丁寧に説明していきます。なお、Alisdair McDiarmid氏本人から紹介の許可を得ております。

# 使用方法
動作の解説の前に使用方法を説明します。簡単です。

1. 公式ページの”Kill Sticky”という青いボタンを、ブックマークバーにドラッグ&ドロップする。（Google Chromeの場合

Reactのレンダリング：視覚的なガイド

Reactはどのタイミングで、なぜ再レンダリングするかを説明する視覚的なガイド。
もともとの記事は文字が多く、例も編集できないため、わかりやすいバージョンを作った。

https://will-it-render.vercel.app/

もともとの記事：https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/
翻訳：https://qiita.com/hellokenta/items/6b795501a0a8921bb6b5

## 中身

ガイドにはほとんど以下のような画像と編集できるCodesandboxの例がいくつか入っている。


一つの独立した