f@ctor

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

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

[Vue.js]配列の変更が検知できない理由の「JavaScriptの制限」って何よ！

タイトルの`JavaScriptの制限`はこちらに記載されているものです。
[リストレンダリング(注意事項) — Vue.js](https://jp.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85)

要約すると、
配列に対して直接インデックスの設定、またはlengthプロパティを変更する場合、`view`は更新されません。

具体的な操作はこちら。
> インデックスでアイテムを直接設定するとき。例: vm.items[indexOfItem] = newValue
配列の長さを変更するとき。例: vm.items.length = newLength

その回避策が `Vue.set` か `Array.prototype.splice` を使用するというものです。
簡単にできる回避策なので、ふーんって感じで書き換えて終了なのですが、
`JavaScriptの制限`が気になったので調べてみました。

## ざっくり リアクティブシステム
Vue.jsの値の変更の検知の仕組みは、リアクティブシステム[

元記事を表示

【202002追試】Object.prototype.hasOwnProperty()は変数に入れた方が速い？

# はじめに

[Object.prototype.hasOwnProperty()は変数に入れた方が速い？ – JavaScript](http://p774.blog.fc2.com/blog-entry-73.html)
というブログ記事が私のMastodonのTLに出ていました。

趣旨としては`hasOwnProperty`をどう呼び出すかで4通りの検証が以下のコードでなされていたようです。

“`js
(function() {
var myObj = {
prop: 111
};

// テスト1: ユーザー定義の対象オブジェクトから呼び出す。
function test1() {
var i, startTime, stopTime;

startTime = new Date();

for (i = 0; i < 10000000; i++) { myObj.hasOwnProperty('prop'); }

元記事を表示

Andorid のブラウザで加速度の値を取得してグラフ表示したりローカルなファイルにセーブしたりする

# やること

タイトルそのままです。Chrome でしか動作は確認していません。多分 iOS + Safari でも動きます。下記サイトで動作を見れます。

– https://royalcrab.github.io/sample/acc_graph.html

image

正常に動くと上のような感じになります。加速度センサがついてない PC などでは、加速度の値やグラフは表示されません。

# ソースコード

全体のコードは下記に置いてます。

– https://github.com/royalcrab/royalcrab.github.io/blob/master/sample/acc_graph.html

# 要点

## 加速度データの取得

下記のコードで、加速度を取得するたびに arr に加

元記事を表示

Twitterの投稿日時をURLからJavaScriptで求める。

# tl;dr
* 年に3度くらい、ツイートの投稿日時ってどこを見ればよいんだっけ、と悩むため忘備録として記事にする
* URLからJavaScriptを使って求めるものとする

# はじめに
* Twitterは閲覧環境によって米西海岸の時刻で表示されるなどして、実際の投稿日時を勘違いする問題が稀によくあった。※ 既に改善されていたらすみません。
* 情報リークやデマなどのイベントを追っかけるのに、一刻も早く正しい時系列で事態を把握したいのに、えーっと、、となってしまうのがイヤ。
* 以前はhtmlタグのなかにepochが埋め込まれていたこともあったように思うが今は無さげ。こういう事があるためHTMLは当てにしたくない。
* Twitterはだいぶ前から、Snowflakeという時刻情報を組み込んだIDを使っており、今回はこれを利用する。

# やりかた
* ブラウザ(筆者はChrome v79で確認)で、任意のツイートページを開く。
* Developer Consoleを開き、下記のJavaScriptを実行すると、ツイート投稿日時が日本時間で表示される。

“`JavaScr

元記事を表示

ブラウザごとの URL 解決の挙動の違い

　初投稿です。

　最近 Chrome にしか対応していないウェブサイトを改修する機会があった。適当に Babe って polyfi ったが、IE11 に完全対応するのは厳しそうで、それは諦めたが、 Edge44 は初期状態でちょいバグるくらいの感じだったので対応を試みた。URL の解決関係でハマったのでメモしておく。趣味人なので間違っていたらご教授ください。

# URL コンストラクタの挙動が違う
　JavaScript では `new URL(url, [base])` の構文でベース URL を指定して URL オブジェクトを作ることができるが、url に空文字列を入れた場合の href の値が Chrome と Edge44 で微妙に違う。

“`JavaScript:main.js
const myURL = new URL(“”, “https://example.com/index.html”)
// Chrome だと myURL.href === “https://example.com/index.html”
// Edge だと myURL.href ==

元記事を表示

Fn Projectを使ってPythonで書いたfunctionを動かしてみる

# 概要

このエントリでは、OSSのFaaSサーバである「Fn Project」を使い、Pythonの関数を動かすパターンを扱います。

下図のようなPythonによる掛け算の関数をFnのサーバにデプロイして動かします。

![calcfn_multiply.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65002/0820cfb3-ea98-b683-2204-8fcc26c8246f.png)

## 想定読者

– Fn ProjectでのJavaScriptプログラムまだ自分で動かしていない方
– [「Fn Projectを使ってJavaScriptで書いたfunctionをNodeで動かしてみる」](https://qiita.com/hrkt/items/8dd1cd0e0e68e8575b6e)のPython版に興味がある方

# 準備

Fn Projectを動かすまでのところは、別エントリ[「OCIのMicro InstanceでCentOSにFn Projectのサーバをインスト

元記事を表示

EffectiveなNext.jsを目指して(Routing)

# はじめに
Reactを用いてSSR(Server Side Rendering)が可能なフレームワークである[Next.js](https://nextjs.org/)．簡単にWebアプリケーションを作成することができるが，柔軟性もあり，より効率的に書けるようになれば手軽に高品質なアプリが作れると感じて勉強を始めました．日本語のドキュメントもあまりないので，Next.jsを活用する人たちの役に立てればなと思います．

今回は，Routingについてまとめていきます．サンプルコードとデモページを参考にしながら読んでいただければ，よりわかりやすいかと思います．

– サンプルコード – https://github.com/syakoo/next-routing-test
– デモページ – https://next-routing-test.sakoooo1001.now.sh/

# 環境
– Next.js – 9.2.1

# §1．CSRのルーティングの手段
サンプルコードの`src/pages/ch1`にこの章のコードがあります．

CSRのルーティングの手段として３つの例

元記事を表示

【おっちゃんがエンジニアになるまで】@3ヶ月目〜色んな人に助けられる〜(継続編)

#はじめに
**こんにちは！ばーんです。**

30歳、独学、業界未経験、既婚者、働きながら
のおっちゃんが具体的にどうやってエンジニアになれるのか？
を（ほぼ）リアルタイムで振り返り共有させてもらいます。

自身の思考整理がメインですが、これから目指す方の指標に少しでもなれれば幸いです。

1ヶ月目は[こちら](https://qiita.com/baan_nasebanaru/items/5ad5c49782c0f23a508b)
2ヶ月目は[こちら](https://qiita.com/baan_nasebanaru/items/27961e8e6ea056cb1781)

##数字振り返り

1ヶ月目　Total 76h(1日平均2.5h)
2ヶ月目　Total 91h(1日平均3h)
3ヶ月目　Total 102h(1日平均3.3h)

Day61-70 38h
Day71-80 31h
Day81-90 33h

1月末ぐらいに「今月はちょっとサボってもたかなぁ…」と思ってたんですが、蓋をあけてビックリ。
足りないぐらいに感じてたので…
体が慣れて来たのかなぁ？と前

元記事を表示

TypeScriptをプロダクト開発に使う上でのベストプラクティスと心得

![eye.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/575808/820c2200-1aad-d1dc-b433-6bc05ae62a61.png)

[TypeScript – JavaScript that scales.](https://www.typescriptlang.org/)

画像はTypeScript最高っていう顔です。

JavaScriptに触れ始めてから13年ほど経ちますが、TypeScriptに触れ始めたのは4年前──。キッカケはAngular 2のbeta版です。TypeScriptコミッターでも初期のバージョンからずっと動向を追いかけていたわけでもありませんが、この4年間ほぼ毎日TypeScriptをWebアプリケーション開発で触れてきたので、個人的ベストプラクティスをまとめてみます。

経験則ではありますが、公私ともに小規模中規模問わず様々なプロジェクトで通用してきたやり方であるため、多くのプロジェクトでも通用する開発手法であると思います。

##### おこと

元記事を表示

Google OAuth 2.0 認証を使ったGoogle Sign-Inの実装（JS編）

#概要

最近はどのサイトでもSNSからのログインだったり、登録するサイトが当たり前になっています。

スクリーンショット 2020-02-04 19.43.39.png

よく見かけるこんな感じのボタンですね。。

今回はjsだけを使って簡単にGoogle Sign-Inを実装してみます。

#Googleアカウントの作成

まずはじめにGoogleアカウントを作成しましょう。
可能ならそのアプリ専用に作った方がいいと思います。

#Google Cloud Platformでの設定

https://console.cloud.google.com/getting-started

まずは先ほど作ったGoogleアカウントでログインしましょう。

左上の[**Project**]からプロジェクトを作成を選択し

元記事を表示

Vuetify 2.2の新機能 Presets

2020/01/02 にリリースされた Vuetify 2.2 から追加された**Presets機能**がなかなかに素敵だったので、記事にしてみました。

[Vuetify v2.2.0 Releas](https://github.com/vuetifyjs/vuetify/releases/tag/v2.2.0)

## Presets機能とは
Googleが策定するデザインガイドライン [Material Design]() の中で作成された、[Material studies](https://material.io/design/material-studies/about-our-material-studies.html) をpresetのスタイルとして用意してくれる機能です。

公式ドキュメント：[Vuetify Customization/Presets](https://vuetifyjs.com/ja/customization/presets)

下記はリリースページに掲載されているPresets機能のサンプルです。

元記事を表示

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

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

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

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

229日目は

Draft.jsで絵文字(サロゲートペア )をEntity化して削除を良い感じにできるようにするう方法

# Draft.jsで絵文字(サロゲートペア )をEntityにして良い感じに削除をできるようにする方法

Draft.jsで絵文字を扱うと削除した時にいい感じに消えてくれない問題が発生します。
その解決法にたどり着くまでに地味に時間がかかったので備忘録をかねて書きます

## 問題

例えばdraft.jsで４人家族の絵文字を消そうとすると、３人家族になったりします
`?‍?‍?‍?` => `?‍?‍?‍`

この問題はdraft.jsでサロゲートペアの絵文字を扱うと発生してしまいます
これを解決する方法として、Draft.jsの [Entity](https://draftjs.org/docs/advanced-topics-entities/) というものがあります

**Entity**
> メタデータを使用してテキストの範囲に注釈を付けるために使用するエンティティシステムについて説明します。
エンティティは、スタイル付きテキストを超えるレベルの豊かさをもたらします。リンク、メンション、
および埋め込みコンテンツはすべて、エンティティを使用して実装できます。

といったも

元記事を表示

TypeScript で型エラーにならないバグのうちよくハマるものの個人用メモ

# 概要

* 自分用メモの側面が強いのでご了承ください。
* JavaScriptの仕様のハマりやすいポイントのメモ
* TSの型チェックやESLintなどの一般的なチェックツールで弾けるものは対象外
* TypeScriptで普通に型付けしてても型エラーにならず実行時エラーになるケースなど

## 配列添字アクセス

* `map`, `filter`, `forEach` メソッドあたりを使っていれば配列添え字アクセスはめったに必要にならないが、ユーティリティ関数などの実装でたまに必要になることがある。
* 配列 `xs: T[]` の要素へ添字アクセス `xs[i]` すると値が `undefined` になりうるが、 `xs[i]` の型は `T | undefined` ではなく `T` に評価されているので型チェックで発見できず実行時エラーとなりうる。
* `at: (array: T[], index: number) => T | undefined` のようなより安全な添え字アクセスをするための関数を自作するのもあり。
* `Immutable.js` の `Lis

元記事を表示

【jQuery】リロードしないとプレビュー表示できない→turbolinksが原因

写真投稿アプリを作成中に、jQueryを用いてプレビュー表示機能を実装しようとした所、うまくプレビュー機能が機能せず、リロードを行うとプレビュー表示が成功するという問題に直面しました。
調べた所、初心者に多いミスらしく、私自身もJavaScriptにおいてturbolinksの概念が無かったため、解決にかなり時間を要しました。
ネット上でも同じような悩みを抱えている方が多かったため、参考になればと思い手順をまとめました。

##環境
ruby 2.5.1
rails 5.2.4

##やりたかった事

写真投稿フォーム
↓
画像を選択
↓
選択した画像がプレビュー表示される

##発生した問題

写真投稿フォーム
↓
画像を選択
↓
$\color{red}{\rm 選択した画像がプレビュー表示されない}$
↓
リロード
↓
画像を選択
↓
選択した画像がプレビュー表示される

###問題のコード

“`js:jquery
$(function(){
fileField = $(‘#file’)
#選択された画像を取得し表示
fileField.on(‘

元記事を表示

A-Frame: aframe-star-system-componentの調査

[前回のA-Frameで利用できるパーティクルコンポーネント調査](https://qiita.com/matsukatsu/items/adec590eddad5510c196)から、[aframe-star-system-component
](https://www.npmjs.com/package/aframe-star-system-component)の使い勝手が良さそうだとわかりました。
パーティクルを使いこなせるようになる為、コンポーネントの各プロパティがどのような意味を持つのか、詳しく見ていこうと思います。

### color
![スクリーンショット 2020-02-01 23.43.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/0faebb9d-1743-3b63-557d-7fbba13c88bf.png)
スター粒子の色
type: String
default: #FFF’
min: –
[demo – color: red](https://k38.g

元記事を表示

Reactのざっくり概要

# この記事の目的
公式チュートリアルで三目並べを作ってもらうのが一番理解できるが、その前段階で「React」とはどのようなものなのかを知ってもらうことを目的とする。
本資料を読んだ後に、チュートリアルを両方やってもらったほうがより理解が深まる。

## 参考資料
### ドキュメント
[公式ドキュメント](https://ja.reactjs.org/docs/getting-started.html)

### チュートリアル
[公式チュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)

※余力があれば、以下のチュートリアルも行うことを推奨する
[Getting Started with React – An Overview and Walkthrough Tutorial](https://www.taniarascia.com/getting-started-with-react/)

# Reactのざっくり概要
## Reactとは何か
Facebookが開発したWebアプリケーションのView（フロントエンド）を

元記事を表示

【Nuxt.js】dayjs応用編：カウントダウンをしてみよう！

# 前置き

基礎編に続き応用編です。
2つの日時の差分を出していきます?
**基礎編はこちら
【Nuxt.js】dayjs導入編：リアルタイムな日時を表示してみよう**
https://qiita.com/aLiz/items/8de5727e274f1a9a1efe

# 復習

・dayjs() =パース
・format() =表示形式の指定

“`index.vue

“`

表示結果

“`index.vue
Tuesday、February 4、2020 1：33 PM
“`

dddd MMMM D ……長い！?笑
省略したい場合はLLLLで同じ表記に。
この辺りも基礎編で解説済みです。
https://github.com/iamkun/dayjs/blob/dev/docs/en/I18n.md

・locale(‘ja’)を指定で日本語表記

“`index.vue

Jupyter notebookのショートカットをカスタマイズしてsublime text風にする

Jupyter Notebookでsublime textのショートカットを使用する方法を紹介します。

行の複製、複数選択、複数行同時編集といったsublime textでの便利な機能を使用できます。
また、ショートカットの割り当てを変更することもできます。

## Jupyter Notebookとは
Pythonのコードと実行結果をまとめて保存できるエディタです。
公式サイトのトップページで雰囲気をつかめます：[Project Jupyter | Home](https://jupyter.org/)

## Jupyter Notebookのショートカットには２種類ある：「エディタのショートカット」と「コマンド実行」のショートカット
Jupyter notebookでは、コードの塊（セル）を実行したり、セルを追加すると言った機能があります。
これらの機能のショートカットをカスタマイズする方法は、公式で詳しく説明されています： [Customize keymaps — Jupyter Notebook 6.0.3 documentation](https://jupyter-no

元記事を表示

OTHERカテゴリの最新記事