f@ctor

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

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

ハッカソンでFPS視点ラジコンをデモしたら思った以上に好評だったので作り方を紹介します

## はじめに

[前回紹介したラジコン](https://qiita.com/zgw426/items/ef38db166366a63e7ff0)を改良して、ハッカソンで [RPGのデモ](https://note.com/agw/n/nbfaa159d74d0?creator_urlname=agw) したら、好評だったので作り方を紹介します。前回はFPS視点とコントローラが別々でしたが、今回はそれらをくっつけてFPS視点コントローラにしました。

※とあるイベントで登壇したときに嬉しいお言葉頂きました。

英語のみでプログラミングを学習（途中経過）

# 英語のみでプログラミングを学習（途中経過）

　現在、都内で英語のみの環境でプログライングを学習しているko5ukeです。今回は私が英語でプログラミングを学習を始めた経緯と学習して感じたことを共有したいと思います。ちなみに、現在、私は六本木にキャンパスを構えいてるコードクリサリスのプログラミングブートキャンプに参加しています。

##コードクリサリス(Code Chrysalis)とは
　現在、コードクリサリスのブートキャンプに参加していますが、コードクリサリスには主に２つのコースがあります。12週間フルタイムでプログラミングを学習するイマーシブコースと5週間パートタイムでプログラミングを学習するファンデーションズコースがあり、私はファンデーションズコースに参加しています。
　現在、都内には様々プログラミングを学べる環境はありますが、コードクリサリスでは英語でプログラミングを学べる環境を提供していて、ただ単にプログラミングを学ぶのではなく、ソフトスキルを取得することも大切にしています。詳しくはコードクリサリスのホームページをご覧ください。[(Code Chrysalis)](htt

元記事を表示

【OSS貢献記録】emoji-martをReact 17に対応

前回のOSS貢献記録は[こちら](https://qiita.com/h6akh/items/0817a8ded6f1aeb09917)。

# はじめに
[emoji-mart](https://github.com/missive/emoji-mart)は、下の画像のように絵文字選択フォームを実現するReactコンポーネントです。
スクリーンショット 2020-01-25 9.12.47.png

このコンポーネントを実際に利用していたら、次のような警告文がJavaScriptのコンソールに表示されました。

“`
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://f

元記事を表示

Sigfox Coverage MapをGoogle Maps APIで表示する

Sigfox Coverage Mapは、タイルレイヤーですので、簡単にGoogle Maps APIにも埋め込むことができます。

#Sigfox Coverage Mapとは
Sigfox社が、地図アプリケーションやWebサイトに埋め込むことを目的にAPI提供しているカバレッジマップです。
下記のURLでタイル画像を取得できます。
`https://tiles.sigfox.com/{TOKEN}/{z}/{x}/{y}.png`

##TOKENの取得
地図を取得するためのトークンです。有効期限は72時間ですので、適時更新する必要があります。
トークンを取得する方法は、下記URLでGETリクエストをします。
`https://backend.sigfox.com/api/v2/tiles/public-coverage`
応答は、下記のようなJSONになっていますので、

“`tiles-public-coverage.json
{
“baseImgUrl”:”https://tiles.sigfox.com/***”,
“tmsTemplateUrl”:”https://

元記事を表示

webpack-dev-serverでdisableHostCheckを有効にするのはもうやめよう

この記事のコピペです（本人です）: https://dev.to/origamium/webpack-dev-server-disablehostcheck-4am

ハローこんにちは。`disableHostCheck: true`を使うのをやめよう。

`disableHostCheck`を使うのにはだいたい理由があって、たとえばiPhoneなどの別端末からPC上のlocalhostで動いているサイトを見たいという理由で`disableHostCheck`を`true`にしたりしてアクセスしたりします。

![6bg9lxvyh6ua2vstr2f7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37252/5dbed762-03c1-e63c-e3ec-43c4fd5cbc7e.png)

`[マシン名].local:[ポート番号]`でアクセスするのはiPhoneを使った開発ではよく見る光景ですね。このとき`disableHostCheck`はだいたいInvalid Host headerを回避

元記事を表示

Svelte ハンズオン

# はじめに
社内でSvelteのハンズオンを開催して好評だったので書き残します！
まず、資料読んでね！

# ハンズオン資料
画像をクリックするとslideshareに飛びます。

[![thumbnail](http://image.slidesharecdn.com/200122sveltehandson-200123084844/95/slide-1-1024.jpg)](https://www.slideshare.net/kazumaoe/svelte)

# ハンズオン環境
GitHubで管理したい場合はForkしてね！

https://github.com/oekazuma/svelte-hands-on

“`shell
git clone https://github.com/oekazuma/svelte-hands-on.git
“`

# おわりに
Svelteの勉強資料はまだ少ないと思うので参考にしていただけたらと思います。

元記事を表示

CLI のテンプレートプロジェクト by node and TypeScript

node で CLI(Command Line Interface) を開発する機会が数回あって、せっかくなのでテンプレートプロジェクトとしてまとめてみた。

## テンプレートプロジェクト

* [amay077/node-cli-sample: Sample npm project for development your CLI](https://github.com/amay077/node-cli-sample)

### 必要なモノ

* nodejs: v11.13.0+
* typescript: v3.7.3+

### 試し方

1. 上記のリポジトリを Clone する
2. リポジトリのディレクトリに cd して “npm ci“ する
3. “npm run build“ する
4. “npm link“ する
5. “source ~/.bash_profile“ を行うかまたはターミナルを再起動する

これでどのディレクトリでも “my-great“ コマンドが使用できるようになる。

#### 例

“`terminal
$ my-

元記事を表示

Rails Javascript/Html:　投稿編集画面で写真の表示を確認したい！

# = f.file_field :image, id: :message_img, placeholder: “写真の貼り付け：”　以下にJavaScriptを配置
:javascript　
$(function() {
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(‘#img_prev’).attr(‘src’, e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(“#message_img”).change(function(){
r

元記事を表示

初心者によるプログラミング学習ログ 219日目

#100日チャレンジの219日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

219日目は

関数型プログラミングJavaScriptについて

※こちらは以下に紹介する本の要約を主とした勉強会用資料です。

## 読んだ本
[JavaScript関数型プログラミング 複雑性を抑える発想と実践法を学ぶ impress top gearシリーズ \| LuisAtencio, 株式会社イディオマコムニカ 加藤大雄 | 工学 | Kindleストア | Amazon](https://www.amazon.co.jp/JavaScript%E9%96%A2%E6%95%B0%E5%9E%8B%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0-%E8%A4%87%E9%9B%91%E6%80%A7%E3%82%92%E6%8A%91%E3%81%88%E3%82%8B%E7%99%BA%E6%83%B3%E3%81%A8%E5%AE%9F%E8%B7%B5%E6%B3%95%E3%82%92%E5%AD%A6%E3%81%B6-impress-top-gear%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-ebook/dp/B072J

元記事を表示

Vue.jsプロジェクトにESLintを設定する最もシンプルな方法

# ESLintをシンプルに設定する

ESLintの設定ってややこしいですよね

Vue.jsとJavaScriptの開発環境で
最低限のものをシンプルに設定する方法を紹介します

“`
今回使用するJS Concept:

– Standard JS

今回使用するpackages:

– ESlint
– husky
– lint-staged
“`

## 1.package.jsonに以下を追記します。

“`JSON:˜/package.json
{
“scripts”: {
“lint”: “eslint src”
},
“husky”: {
“hooks”: {
“pre-commit”: “lint-staged”
}
},
“lint-staged”: {
“*.{js,vue}”: [
“eslint –fix”,
“git add”
]
},
“devDependencies”: {
“babel-eslint”: “^10.0

元記事を表示

イベントのバブリングとキャプチャリング

# バブリング

要素上でイベントが発生すると、最初にその要素でイベントハンドラが実行され、その親、その親と、`document`オブジェクトまでイベントハンドラが実行される。

ほぼ全てのイベントでバブリングが発生する。`focus`イベントはバブリングしない。

`event.target`⋯イベントの発生元の要素。

`event.currentTarget`⋯そのイベントハンドラが紐づけられている要素。

# バブリングを止める
`html`タグ、`document`オブジェクト、イベントによっては`window`にも伝わる。

`event.stopImmediatePropagation()`⋯親にバブリングするのを防ぐ。
要素が、1つのイベントに対して複数のイベントハンドラを持っている場合に、他のイベントハンドラを実行しないようにするためには`event.stopImmediatePropagation()`を実行する。

基本的にはバブリングを止めてはいけない。

# キャプチャリング
キャプチャリングフェーズはほとんど使われない。
キャプチャリングフェーズでイベントを

元記事を表示

CodePen – HTML+JavaScriptで色サンプル(RGBカラーのパレット)作ってみた

クリックした座標のカラーコードを#RRGGBB形式で表示します。

See the Pen
ColorTest by kob58im (@kob58im)

元記事を表示

Facebookのシェア用URLでテキストを入れる方法

#始めに
URLにアクセスするだけでシェア画面を表示することができるのですが、色々調べてもFacebookではテキストを入れる方法が見つかりませんでした。

“`text:Facebookのシェアリンク
https://www.facebook.com/sharer/sharer.php?u=
“`

+ https://qiita.com/Ancient_Scapes/items/d27a3e2b247fa43e39f9
+ https://11-30am.com/38/?utm_source=qiita&utm_content=article

ただ色々試していたら、引用テキストとして表示する方法が見つかりましたので記事に残しました。

# テキストを入れる方法
結論から言うと以下のように`quote`パラメータが引用文の役割を果たしているようです。

“`text:引用文を含めたシェアリンク
https://www.facebook.com/sharer.php?quote=<引用文>&u=
“`

“`text:サンプル
https://www.f

元記事を表示

IE11でbackground-imageのJQueryが反映されない…！！

問題となったコード。

“`html:html

“`

“`js:JQuery
$(“#image_area”).css(“background-image”,”url(画像パス)”);
“`

このコードでは、Chrome、FireFoxでは動作するが、IE11では動かず。
いろいろ原因を探って、たどり着いた答えがコレ。

“`js:修正後
$(“#image_area”).css({
“background-image”: ‘url(“画像パス”)’,
});
“`
IE11で`background-image`プロパティを指定するときは

**1. `{ “background-image”: 値 }` の形式で書く**
**2. 画像パスはダブルクオーテーションで囲む**

必要があるようです。なんでこうしないといけないのかはわからないですが…
はやくIE絶滅しないかな♪

参考にしたところ
[jQueryで背景画像を変える時にIEでの対処法【JS】](http://blog.e-riversty

元記事を表示

フッターのコピーライトとかで自動的に今の年を表示する方法

フッター等によく書いてあるコピーライト。
`Copyright © hoge.exmaple.com 2010-2020 All Rights Reserved.`
こういうやつです。

この2020という年数を年が変わるたびに手動で変更するのは面倒ですよね。今回はJavaScriptで自動で今の年を表示する方法を紹介します。ものすごい小ネタです。

## フッターのコピーライトとかで自動的に今の年を表示する方法

“`html

Copyright © hoge.example.com All Rights Reserved.

“`

JavaScriptで今の年を表示しているだけです。

“`js
const yearElm = document.querySelector(‘.thisYear’); // を取得
const thisYear = new

元記事を表示

JavaScriptでgetUserMediaでマイク・カメラ（ビデオ）を使うときの注意点とデバイスへのアクセス権限について

# マイクのみ使用するのにaudioのみの指定では動かないブラウザがある

とあるサンプルがEdgeで動作したがChromeで動作しなかったので調べてみた。

Chromeは`audio`だけでなく`video`も指定しないと音声入力が取得ができない。
https://www.html5rocks.com/ja/tutorials/getusermedia/intro/ より引用：
> 注: Chrome にはバグがあり、「audio」のみを渡しても無効です（crbug.com/112367）。Opera でも

自分でも確認しましたが、
　Chromeのバージョン: 79.0.3945.130（Official Build） （64 ビット）
で再現しました。`audio`指定のみでは動作せず、`video`を`audio`と一緒に指定すると動作する。

# navigator.mediaDevices.getUserMediaが推奨らしい

`navigator.getUserMedia`ではなく`navigator.me

元記事を表示

【javascript】文字列の配列をArrayに変換する方法

# jsで文字列の配列をArrayに変換する方法はいくつかの方法があります
evalは使い所を間違えるとユーザーに任意のjsを実行させてしまうことになるので注意しましょう。

## カンマ区切りの文字列を配列にする方法

### 元データがこれの場合
“`js
‘Shiro,Ai,Kaguya,Tokino’
“`

“`js
‘Shiro,Ai,Kaguya,Tokino’.split(‘,’);
“`

## evalで実装する方法

### 元データが文字列の配列の場合
“`js
‘[“BoraOne”, “RacingZero”, “Zonda”]’
“`

“`js
JSON.parse(‘[“BoraOne”, “RacingZero”, “Zonda”]’)
“`

## json parseで実装する方法

### 元データが文字列の配列の場合
“`js
‘[“BoraOne”, “RacingZero”, “Zonda”]’
“`

“`js
eval(‘[“BoraOne”, “RacingZero”, “Zonda”]’)
“`

元記事を表示

OTHERカテゴリの最新記事