f@ctor

JavaScript関連のことを調べてみた2019年12月21日

JavaScript関連のことを調べてみた2019年12月21日
目次

Javascript・jquery　bodyの取得

“`
body = document.body;
body = document.getElementsByTagName(‘body’)[0];
body = $(‘body’);
“`

元記事を表示

JavaScriptでデータを整形するときのメモ（継続更新）

faker使えばいいが、素で生成するとき用のメモ。

## 乱数系

### 基本

まず、乱数発生の基本。
下記で、0 < n < 1で生成されるが、単独だと事実上使いみちはない。 ```js console.log(Math.random()); 0.15043077282053852 ``` よく使うのがMath.floor()と合わせて使う。 以下で0〜9までの値が生成される。 ```js console.log(Math.floor(Math.random() * 10)); ``` 下記のようにすると、0~4までの値が生成される。 ```js console.log(Math.floor(Math.random() * 5)); ``` 0ありは配列操作等のときは便利（後述）だが、一般には1を足すことがお多い。 ```js console.log(Math.floor(Math.random() * 10) + 1); ``` これで1~10が生成される。 ### 応用 上記を利用してよく利用するのが、 #### 指定範囲の値を生成 例えば15歳か

元記事を表示

Overpass APIのススメ

# Overpass APIのススメ
– [OpenStreetMap Advent Calendar 2019](https://qiita.com/advent-calendar/2019/osmjp)向けの記事です。
– 記事中の地図は全てOpenStreetMap ( © OpenStreetMap contributors )を利用しています。

## Overpass APIとは
– 世界中のみんなが自由に使える地図を描く＆活用するプロジェクト「OpenStreetMap」の地理空間情報を扱うためのAPIです。

### どんなデータがあるの？
– OpenStreetMapに描けるデータは全て扱えます。海岸線からベンチまでOK。
– もちろん「描ける≠描いてある」。無ければ地図に描いて世界にシェアしよう。
– 具体的に扱えるデータについては、[Map Features](https://wiki.openstreetmap.org/wiki/JA:Map_Features)を参照してみてください。

### とりあえず触ってみよう
– [Overpass turbo](h

元記事を表示

SliP のご紹介と JavaScript での実装

# 0.始めに
こんにちは、SliP というプログラム言語を作っているものです。

SliP がどんな言語かというと、例えば 0 から 4 までの自然数の和を求めるプログラムは例えば以下のように再帰的に書けます。（もちろん再帰的じゃなくても書けます）

“`
‘sigma = ‘(
@ == 0 ? [
0
( @ + ( @ – 1 ):sigma )
]
);
4: sigma =
“`

`@` は引数を表します。`@` が `0` なら `0` を、そうでなければ `( @ – 1 )` に `sigma` を適用したものに `@` を足したもの、という求め方です。
SliP という名前から連想できる方もおられるかもしれませんが、非常に Lisp に影響をうけています。というか Lisp はとにかくカッコが多くて読みにくいんで、新しい文法を考えてしまおう、と思ったのが開発のきっかけです。

macOS のアプリに仕立てたものが以下のアドレスからダウンロードできます。
[https://apps.apple.com/jp/app/slip/id1097457043

元記事を表示

【入門】Laravel×Vue.js①〜セットアップ編〜

#はじめに
**PHPのフレームワークであるLaravel**で作成したアプリケーションに
**JavaScriptのフレームワークであるVue.js**を連携させる方法について説明します。

#Node.jsのインストール
Node.jsのパッケージ管理ツールnpmを使うので、
Vue.jsを利用するためにはNode.jsが必要です。

まず、[https://nodejs.org/ja/](https://nodejs.org/ja/)からインストールしましょう
推奨版、最新版どちらでも構わないので、インストールしてください。
スクリーンショット 2019-12-21 3.22.29.png

#Vue.jsをアプリケーションへインストールする
インストールするパッケージ一覧が記述されている`package

元記事を表示

Three.jsを用いたモデルのアニメーション切り替えを簡単にした話

この記事は、WebGL Advent Calendar 2018 17日目の記事です。

![Kapture 2019-12-21 at 2.23.03.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42248/df9631d8-1051-85ec-86ac-80984292618e.gif)

## AnimationMixerが扱いづらい :smiling_imp:

Three.js内でglTFなどを読み込んでアニメーションさせる場合、AnimationMixerを使用して徐々にモーションが変わるようにするには以下のようなコードを書くことになります。

“`typescript
const loader = new THREE.GLTFLoader();
loader.load(‘assets/zensuke.gltf’, (gltf) {
scene.add(gltf.scene)
const mixer = new THREE.AnimationMixer(gltf.scene)

元記事を表示

Chrome のコンソールで動くちょっと派手目なタイマー

console で動くちょっと派手目なタイマーを作りました

#スクリプト全体

“`
{
// 各種定数
const alertMessage = “時間です”
const htmlBody = document.getElementsByTagName(‘body’);

// タイマーのセット

const timerSet = () => {
let sec = prompt(‘計測したい秒数を半角の数字で入れてください’);

if(!isNaN(parseInt(sec, 10))) {
countDown(sec);
} else {
alert(‘これは半角の数字ではありません。再入力してください’);
timerSet();
}
};

// カウントダウンタイマー

const countDown = (sec) => {
let nowDate = new Date();
const endDate = new Date(nowDate.getTime() + sec * 1000);

let coun

元記事を表示

railsアセットプリコンパイルまとめ

  • javascript
  • scss

javascript

プロジェクトフォルダのapp/assets/javascript以下のファイルをすべて読み込む。
railsの初期ファイルのapplication.jsは何かというと、assets/javascript以下のファイルをすべて読み込みまとめたものにあたる。勝手にファイルをまとめてくれるので、application.jsに追加でrequireしなくてもよいのである。
しかしgemなどで追加した機能を読み込みたい場合は、application.jsにrequireする必要がある。

これはどこで使用するのかというともちろんviewである。だいたいは、layouts/application.html.erbに書かれている。<%= javascript_include_tag 'application', オプション %> のように記述すればよい。’application’の部分は、他のファイルでもよいがPATHを通す必要がある。

scss

元記事を表示

変な家族写真 ー ポルターガイスト機能 ー

# はじめに
最近『変な家族写真』という家族写真専用のフォトフレームのプロトタイプを作って、Festaでプレゼンしたり、campfireに投稿したりしました。
プレゼンやcampfireでは技術的なことに全く触れていないので、qiitaでは技術的なこと書いてみたいと思います。

# その前に『変な家族写真』って何？

詳しくは[campfireページ](https://camp-fire.jp/projects/view/209941#menu)を見るのが早いのですが、簡単に説明させてください。
田舎から出てきて家族と離れて暮らす人向けに構想したプロダクトで、
専用のラインボットと連携して親に連絡していないということを感知するとフォトフレームにセットした写真に変なエフェクトをかけてお知らせしてくれるっていうやつです。

こうなったり
![hige.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415401/da2de0cc-5c94-2b44-62d6-ab620d78e870.gif)

こうなったり

元記事を表示

mochaにおける非同期処理の３つのテストパターン

## promiseオブジェクトをreturnするパターン
itのコールバック関数内でpromiseオブジェクトをreturnした場合、promiseのresolve（もしくはreject）を待ちます。

“`Javascript
it(‘asynchronous process 1’, () => {
return new Promise((resolve, reject) => {
try {
setInterval(() => {
expect(1).equal(1)
resolve();
}, 1000)
} catch (e) {
reject(e);
}
})
})
“`

## doneを使って、処理の終わりを通知するパターン
あとのパターンは、以下のような重い処理を呼び出す前提です。

“`Javascript
// 1秒かかる重い処理
const heavyJob = () => {
return new Promise(resolve => {

元記事を表示

Tensorflow.jsを使ってフロントエンドで画像解析

こんにちは、YAMAPでフロントエンドエンジニアとして働いている[SHiMPAY](https://qiita.com/SHiMPAY)です。
[YAMAP エンジニア Advent Calendar 2019](https://qiita.com/advent-calendar/2019/yamap-engginers)の21日目の記事になります。

ロングタイムアゴー、機械学習を勉強しようとしたのですが、僕の数学力が貧弱すぎて、
これは勉強しても頭がいい人は世界中にいるから同じ土俵で戦うのは無理だ。諦めようと決意しました?‍♂️

それからときが経ち、機械学習から離れている間に、Webブラウザ上で実行可能なライブラリとしてTensorFlow.jsが2018年に公開されていました?

フロントエンド側で利用できるなら、これは触る価値がある！
何かサービスに利用できないかと思い実際に触ってみました。

## TensorFlow.jsとは？ ?
TensorFlowは、機械学習向けに開発されたエンドツーエンドのオープンソース プラットフォームですが、
TensorFlow.jsは、ブ

元記事を表示

Nuxt.js で TypeScript を使って一通り試したら色々ハマった件

# はじめに

これは Nuxt.js で TypeScript を使って一通り試そうとしたら、
色々なところでつまずいてしまったのでメモに残すお話です。

また、この記事は [Nuxt.js Advent Calendar 2019](https://qiita.com/advent-calendar/2019/nuxt-js) 21日目の記事です。

今までに Vue.js の経験はありますが Nuxt.js は初めて触ります。

`nuxt-community/starter-template` と `create-nuxt-app` の違いもよくわからない状態でした。
まぁ、、、[公式](https://ja.nuxtjs.org/guide/installation)を見ると `create-nuxt-app` を使う手順になっており、[nuxt-community/starter-template](https://github.com/nuxt-community/starter-template) は、deprecated になっていたので、今は `create-nux

元記事を表示

JavaScriptの不思議なやつ

Advent Calnder.png
はいよ〜。