f@ctor

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

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

【Rails】jpostalとjp_prefectureを用いて住所自動入力の実装

# 目標

**ユーザー新規登録画面で郵便番号を入力すると、それ以降の住所(番地まで)を自動入力する。**
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/fb8341fb-4481-c06f-2d21-59afcd0817ef.gif)

# 開発環境
・Ruby: 2.5.7
・Rails: 5.2.4
・Vagrant: 2.2.7
・VirtualBox: 6.1
・OS: macOS Catalina

# 前提

下記実装済み。

・[Slim導入](https://qiita.com/matsubishi5/items/b639ffddecc626856039)
・[Bootstrap3導入](https://qiita.com/matsubishi5/items/b117c95f4dd71340cc80)
・[ログイン機能実装](https://qiita.com/matsubishi5/items/5bd8fdd45af95

元記事を表示

Reactのchildrenに任意のpropsを追加する方法

## TL;DR

React.cloneElementを使ってchildrenを複製することで任意のpropsを追加できます。

“`tsx
const newChildren = React.cloneElement(children, additionalProps)
// React.cloneElementの第一引数にchildren, 第二引数に追加したいpropsを渡す
“`

## React.cloneElementとは

`React.cloneElement()`はElementを複製するメソッドです。
引数に以下のような3つの値を受け取ります。

“`tsx
React.cloneElement(element, props, […children])
// element: ReactのElement
// props: 複製するElementにわたすprops, elementがもともと持っていたpropsとマージされる
// children: 複製するElementにわたすchildren
“`

## childrenにpropsを追加する

元記事を表示

Nuxt.js+Firebaseの認証・認可を実装した雛形プロジェクトを公開しました

# この記事について

NuxtとFirebaseを使って、これまでいくつかサービス開発をしていますが、認証/認可の実装はどのサービスでも毎回同じようなコードを書いている気がします。

サービスとしてのコア部分ではないですが、センシティブな部分なのでしっかりと調べながら実装すると結構大変ですよね（毎回時間がかかってしまいます）。

html2canvasをつかってコラ画像生成アプリをつくってみた

# つくったもの


**[Oicollamaker](https://igg-g.github.io/Oigyu_App/)**（GitHubは[こちら](https://github.com/igg-g/Oigyu_App)）

できました。[明治おいしい牛乳](https://www.meijioishiigyunyu.com/)のパッケージのコラージュ画像を生成できるアプリです。

**Q.**　こんなアプリだれがつかうんですか？
**A.**　知りません。

# なぜつくったか

JavaScriptでDOMを操作する方法を学び、何かをつくりたくなったからです。

# html2canvas

おいしい牛乳のパッケージ部分はHTMLでできています。
そのため右クリックで保存することができません。

もちろんスクショを

元記事を表示

複数のスクロールバーを同時にスクロールする

　職場でどうやって実装するのか悩んだ、という話を聞いたので実装してみました。古いサンプルだとjQuery使ってて普段触らない人からすると訳分からないですよね。多分この実装だと問題が生じるときもありそうな気がするので、よければコメントくださいませ。

#実装内容
　基本は、スクロール時にエレメントの[scrollTop](https://developer.mozilla.org/ja/docs/Web/API/Element/scrollTop)(横スクロールなら[scrollLeft](https://developer.mozilla.org/ja/docs/Web/API/Element/scrollLeft))というプロパティを対象エレメントと同じ値に設定してあげるだけです。詳しくは下記のコードを見てください。

元記事を表示

javascriptゲームの設計パターン

## もくじ

1. はじめに
2. デモ
3. どのゲームも「画像を一定間隔で描画」でOK
4. ひな形となるコード
5. 簡易フロー図
6. ポイントとなる部分
7. 最後に

## はじめに

### きっかけ

過去、javascriptでゲームを作成する機会が多々ありました。
ベースとなる部分さえ抑えてしまえばコーディングは簡単で、後はアイデア勝負な感じがします。
おおよそどのゲームも基本は同じなので、ここら辺で自分自身のためにまとめておきたいと思い、投稿します。

### 余談

今時javascriptのゲーム作成フレームワークは溢れるほど沢山あるけど、個人的にはどうも使う気にはならないです。
一番の理由は個人的に「楽しくないから」。
フレームワークを使うと、どうしてもフレームワーク自体の使い方を覚える必要があり、どうしてもこれが意味が無いと感じてしまって精神的に苦痛。
なので、大人数だったり仕事で指定でもされない限りはスクラッチで作成することにしています。

## デモ

過去に作成した作品です。

[Chunta フィッシングゲーム](http://chunta.

元記事を表示

JavaScriptのthisについてまとめてみた

##はじめに
JavaScriptにおけるthisの挙動に関して、何度学習しても忘れてしまうので自分なりに一度まとめてみました。
殴り書きですので、少しずつ修正したいと思っています。

##基本形

まず、thisの値は、関数やメソッドが呼び出される際に決まります。
そして、基本は３パターンで覚えました。

  1. オブジェクトのメソッドとして呼び出される場合

    “`js
    x = ‘global’;

    const func = function() {
    console.log(this.x);
    }

    myObj = {
    x: ‘local’,
    myFunc: func
    }

    myObj.myFunc();
    // ‘local’
    “`
    オブジェクトのメソッドとして呼び出される場合、thisは呼び出し元のオブジェクトを参照します。

  2. 関数として呼び出される場合

    “`js
    x = ‘global’;

    const func = function() {
    console.log(this.x);
    }

    myObj =

元記事を表示

現在の日付をUNIX時間に変換する

# unixtimeとは

>UNIX時間（ユニックスじかん）またはUNIX時刻（ユニックスじこく、UNIX time（ユニックスタイム）、POSIX time（ポジックスタイム））とはコンピューターシステム上での時刻表現の一種。
UNIXエポック、すなわち協定世界時 (UTC) での1970年1月1日午前0時0分0秒から形式的な経過秒数（すなわち、実質的な経過秒数から、その間に挿入された閏秒を引き、削除された閏秒を加えたもの）として表される。
GPS時刻などとは異なり、大多数のシステムでは、本当の経過秒数を表すものではない。
wiki

“`javascript
var date = new Date(); // 2020-06-08T09:23:53.264Z

// UNIXタイムスタンプを取得する (ミリ秒単位)
var a = date.getTime(); // 1591608233264

// UNIXタイムスタンプを取得する (秒単位 – PHPのtime()と同じ)
var b = Math.floor( a / 1000 ) ; // 1591608233
“

元記事を表示

Akashic EngineゲームをTypeScriptで書くための改造版ボイラープレート作りました

初めまして。初投稿です。

突然ですがドワンゴが作っているTypeScript製ゲームエンジンのAkashic EngineをTypeScriptで書く為のボイラープレートを作りました。

リポジトリはこちらです。
https://github.com/KoutaKawase/akashic_boiler

git cloneするだけで簡単に使えるので良かったら使ってみてください。＼(^o^)／

# どういうものか
公式ボイラープレートを元に色々弄ったボイラープレートです。
もともとこのエンジンでゲームを作るためのプロジェクト作成は公式が用意してくれています。
“`
akashic init -t typescript-shin-ichiba-ranking
“`
というコマンドを入力するだけでニコ生で動くゲームをTypeScriptで書くためのファイル群が自動生成されます。

じゃあ何でこんなボイラープレートを作ったかというと、依存ライブラリが少し古いためです。

公式ボイラープレートはリンターにTSLintが採用されていますが、TSLintはTSLint公式がdeprecat

元記事を表示

TypeScriptでmapNotNull関数を実現したい

# TypeScriptでmapNotNull関数を実現したい
kotlinのmapNotNull関数をTypeScriptでも実現したい、そういう記事です。
[mapNotNull()](https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.collections/map-not-null.html)
## KotlinのmapNotNull関数
Kotlinのmap関数は、コレクションの各要素に与えられた関数を適用して、その結果を新しいコレクションに集約します。mapNotNull関数は結果がnullの場合は、その要素はスキップします。

“`
val list = listOf(
listOf(79, 80, 75, 87),
listOf(60, 55, 45, 63),
listOf(69, 90, 74, 88)
)
println(
list.mapNotNull { if (it >= 80) it else null }.filter { it.isNotEmpty() }
) //

元記事を表示

javascriptの備忘録 2020.6.8

久々にがっつり触ったが忘れそうなのでメモ

###IE互換
いまだにIEサポートしないといけないシステムもある。(LAN環境ならいいのか)
構文きっちりしないとスクリプトエラー
関数引数の最後の,とかあると動かない。

“`javascript:ダメだった例
function sum(a,b,)
“`

##最近のJS
###オブジェクトが便利

“`javascript
let person = {
/* ほぼなんでも詰め込める */
};
“`

###配列も便利

“`javascript
let tags = [];
“`

###varとletの違い
letの方が変数汚染しないからこちら推奨。

###アロー演算子に注意(IEは×)

“`javascript
const funcA = (a,c) => {
}
“`

###テンプレート文字列（IEは×）
デバッグログにも便利。
フォーマット識別子や条件分？も使える模様。

“`javascript
const test = ‘Hello’;
const who = ‘Sato’;
console.log

元記事を表示

ワンクリックでlocalhostに切り替える

開発時など、別ドメインから localhost に切り替えることが多かったので
`javascript:location.href=’http://localhost:<任意のポート番号>‘+location.pathname` をブックマーク

元記事を表示

フロントエンド言語の概要

最近よくフロント言語を触ることが多いので、ここで自分の知識を共有したいと思います。

まず、Javascriptには色々なフレームワークがあり、開発用途によって使用するフレームワークが違っていること。

#そもそもフレームワークって何？

　一言でいうとアプリケーションの骨格。

　JavascriptでWedサービスやアプリを開発する上で、サーバーとの連携、ルーティング、データの送受信など、全体的な処理の構造化をしたものみたいです。

　イメージすると車の骨組みがJavascriptでそれに基づいて色々な種類の車を作って行く過程がフレームワークと解釈しても良いと思います。

話を下に戻すと、会社は目的に応じてフレームワークを使い分けているとのこと
(以前は業務でReactを使用していました)

そこで一旦、その一般的なフレームワークやライブラリーの特徴について簡単に述べようと思います

#React
　ユーザーインターフェースを構築するためのライブラリーで、MVCのViewに特化しており、状態を保持するUIコンポーネントを簡単に作成可能。Reactは仮想D

元記事を表示

ブラウザの戻るボタンを使用しているときにページを強制的に再読み込みする

[ブラウザの戻るボタンを使用しているときにページを強制的に再読み込みするにはどうすればよいですか？](https://www.it-swarm.asia/ja/javascript/%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%ae%e6%88%bb%e3%82%8b%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6%e3%81%84%e3%82%8b%e3%81%a8%e3%81%8d%e3%81%ab%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%92%e5%bc%b7%e5%88%b6%e7%9a%84%e3%81%ab%e5%86%8d%e8%aa%ad%e3%81%bf%e8%be%bc%e3%81%bf%e3%81%99%e3%82%8b%e3%81%ab%e3%81%af%e3%81%a9%e3%81%86%e3%81%99%e3%82%8c%e3%81%b0%e3%82%88%e3%81%84%e3%81%a7%e3%

元記事を表示

疑似外部結合を実現する

[Query関数を使ってデータを集計しよう – 其の弐](https://officeforest.org/wp/2019/04/26/query%E9%96%A2%E6%95%B0%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E9%9B%86%E8%A8%88%E3%81%97%E3%82%88%E3%81%86-%E5%85%B6%E3%81%AE%E5%BC%90/)

### 疑似外部結合を実現する
Query関数には残念ながら、INNER JOINやLEFT JOINのような結合に関するオプション項目がありません。
Visualization APIにはJOINメソッドがあり、キー同士で結合の出来るメソッドがあるのですが・・・
必ずしも、同じものではないようです。
しかし、データベースではこの結合方法はよく使うテクニックで、これが出来ると利用幅が広がるのに。
Google SpreadsheetにもPower Queryのようなツールが欲しいところですね。

さて、これを実現さ

元記事を表示

TestCafeでログイン画面をテストする

# はじめに

最近、TestCafeを使ってE2Eテストを書き始めました。
ログイン画面でログインに成功することのテストを書く時にちょっとハマったので共有します。

テストは以下のような内容になってます。

– ログイン画面を表示
– フォームにメールアドレス、パスワードを入力
– ログインボタンをクリック
– 遷移先のURLが`http://localhost/mypage/`だったらテスト合格

# コード

## うまくいったコード

“`js
import { ClientFunction, Selector } from ‘testcafe’
import { BASE_URL } from ‘./config’

fixture(‘ログインページ’).page(`${BASE_URL}/login`)

const getPageUrl = ClientFunction(() => window.location.href.toString())

test(‘ログインでマイページに遷移’, async (t) => {
const mailForm = Selec

元記事を表示

React Bootstrap + TypeScript: Buttonのプロパティを動的に定める

[React Bootstrap](https://react-bootstrap.github.io/)は、Bootstrapのスタイルが適用されたコンポーネントをReactアプリケーションに組み込めるライブラリです。今年3月24日に正規バージョンv1.0.0がリリースされ、4月23日には1.0.1にアップデートされました。Bootstrapのみでは\などにやたらとクラスを詰め込んだDOM要素があふれます。それに対して、アプリケーションをReactのコンポーネントですっきりと組み立てられるのが利点です。

# ButtonコンポーネントのプロパティをJavaScript形式で定める
山盛りのクラスと`

`の入れ子を書くことなく、設定はタグの属性(プロパティ)で済ませられたりします。[`Button`](https://react-bootstrap.github.io/components/buttons/)コンポーネントのテキストやカラーテーマ(`variant`)、大きさ(`size`)なども、JavaScript形式(`js`ファイル)のコードでつぎのように

元記事を表示

小ネタ: Next.js のサーバサイド側の共通処理を括り出したい (Middlewareパターン)

## 困った共通処理

Next.js で、全ページ共通の処理がある場合、あんまり頭のよくないコードを書くことになります。

“`js:pages/index.js
export const getServerSideProps = async (ctx) => {
// （全ページ共通処理）共通情報を取得する。
let commonInfo;
try {
commonInfo = await getCommonInfo();
} catch (exception) {
// 取得できなければ404で返す
ctx.res.status = 404;
return { props: { notFound: true } };
}

// いろいろな処理…
}
“`

これを全ページにコピペして書くなんて信じられな〜い！

もちろん関数に抽出すればもっと短くなるかもしれないけど、 `try { } catch () { return … }` は短くならないでしょう。　

## ミドルウェアとして共通処理を括りだす

そういう

元記事を表示

【Javascript】CanvasをイメージPNGとして保存する

#結論

“`html

download


“`

元記事を表示

OTHERカテゴリの最新記事