f@ctor

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

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

【Google MAP】Googleスプレッドシート API連携 + 絞込み

# はじめに
・以前、外部サービス(Sheetson)を利用してGoogleスプレッドシートAPI連携をしました。
（Qiita：[【Google MAP】スプレッドシートAPI連携による日本世界遺産の表示](https://qiita.com/yoshi_yast/items/9e58e515d67d2251f802)）

・外部サービスを利用せずに、Google SpreadSheet APIの利用について実施されている方からリンクいただき、外部サービスを利用しない方法を知りましたので、同じことをやってみようと思いました。
（参考サイト　[Qiita：Googleスプレッドシートを利用した、たぶん史上最も簡単にデータを更新できるマップツール](https://qiita.com/champierre/items/e7758b69b39476148492)）

# 使用技術/前提条件
– JavaScript
– Google Map API
– Google SpreadSheet API
– Google Map API keyの取得

# 内容
・地図にマーカー表示するのは、

元記事を表示

PureScriptでもクリーンアーキテクチャしようよ！！！

ここ最近5年くらい、クリーンアーキテクチャという言葉をよく目にするようになりました。特に有名なのが、同心円上に描かれたレイヤー構造です。この図はいわゆるイメージ図ですが、初見ではこれに驚いた方は多いのではないでしょうか？　少なくとも私には驚きでした。
というのも、私のこれまでのソフトウェア開発のイメージでは、むしろ中心の方にハードウェア寄りの処理があり、外側がアプリケーション寄りという風に捉えることが多かったからです。例えばLinuxなどは、まさにLinux Kernelという核（Kernel = 核）が中心にあり、その上にミドルウェアなどが乗り、アプリケーションは一番外側という風に理解していたからです。

しかし、それでもいろいろな記事や解説を読み進めていくうちに、１つのアプリケーションを開発する立場からすると、この図に示されるように、中心にアプリケーションのコアとなるビジネスロジックを配置し、画面処理やデータベースなどの外界とのやり取りを外側に配置した発想というのは、非常に理にかなっていると思う様になりました。

![CleanArchitecture.jpg](https://q

元記事を表示

iOSのSafariで上方向の無限スクロールの問題を解決する

# はじめに
LINEやSlackのような `上方向への無限スクロール` が必要なWebアプリを作っていて、なぜか **iOSのSafariだけうまく動作しない** 問題に悩まされたので、原因とどう解決したかメモしておきます。
`Vue.js`を使っていますが`Vue.js`以外でも使えるテクニックです。

同じ事象で悩んでいる方の参考になれば幸いです。

# 上方向の無限スクロールでやっていること
そもそも無限スクロールとは **コンテンツの端の方までスクロールしたら次のページを読み込みコンテンツに追加する** という処理を繰り返すことで実現します。
下方向への無限スクロールの場合はこれだけです。

これが、上方向の無限スクロールの場合、次のページを追加する位置がコンテンツの先頭になるため、**追加する前のスクロール位置に戻す**必要があります。

イメージで説明すると・・・

1. １ページ目を上端までスクロールする。
![iPhone上スクロール-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/

元記事を表示

typescript ・react・redux toolkit・connected-react-router・bootstrap5・firestore・firebase authenticationを使う。成果物URL: https://qiita-chat.netlify.app

**redux**をすっきり書ける**redux toolkit**を触った。
んでアウトプットに**匿名チャット**を作った。

**firebase authentication**を使って**匿名ログイン**。
**firestore**の**onSnapshot**でデータベースの**変更を検知して**
**新しいチャットデータを反映させる**方式です。

**websocket**も**ポーリング**も使ってないです。

## 成果物
https://qiita-chat.netlify.app

## リポジトリ
https://github.com/yuzuru2/qiita-chat

## firestore セキュリティルール
“`javascript
rules_version = ‘2’;
service cloud.firestore {
function isAuthenticated() {
return request.auth != null;
}

function isValidBoardSchema(board) {

元記事を表示

puppeteerで自作Slack BotのE2Eテストを自動化した

# やったこと
Slack Botを自作して使っている。
GmailのチェックだったりGoogle Calendarの予定を確認できる他、色々なお遊び機能を搭載したBotなのだがエンハンスを重ねるにつれて徐々に機能が増えてきた。
アップデートのたびに全機能を手動でテストするのがしんどくなったので、puppeteerを使ってE2Eテストを自動化してみた。

要はSlackのWebクライアントををpuppeteerで操作したという話なので、puppeteerに興味があるの人の参考にはなるかもしれない。
TypeScriptで書いている。

## テストしたい機能
![https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_601155_35718126-5106-8d6d-9229-115fe86eb244.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601155/f6e06ebe-7ac1-9b2a-e002-59c90a6c26d4.g

元記事を表示

[javascript]関数の使い方

#関数とは
関数(function)とは繰り返し使われる処理を一つにまとめたものです。
関数を使うと、同じ処理を何度も書く必要がなくなります。

基本的な形は以下のような感じです。

“`
function 関数名(引数){
処理
return 戻り値;
}
“`

関数を効率的に利用するには、「引数」と「戻り値」を理解する必要があります。
入力する値を「引数（ひきすう）」、出力される値を「戻り値（もどりち）」といいます。

関数に引数を渡したいときは、( )内に引数を書きます。

この関数の結果を出力したいときは、return内に戻り値を渡します。
これで、関数の処理結果が呼び出し元から利用できるようになります。

“`app.js
// メイン
// 4.変数「alertString」へ関数の処理を代入
var alertString;
alertString = addString(“World”);

// 5.作成した関数を呼び出す
alert(alertString);

// 関数を定義
// 1.関数名「addString」を記述し、引数として「strA」

元記事を表示

jQueryを使わずスムーススクロール

##はじめに
jQueryを使わずにスムーススクロールを実装してみました。

##コード
さっそくコードを記載します。

“`js

const links = document.querySelectorAll(‘a[href^=”#”]’);

links.forEach((link) => {
link.addEventListener(‘click’, (e) => {
e.preventDefault();

const linkId = link.getAttribute(‘href’);
const linkDom = document.querySelector(linkId);

const linkPosition = linkDom.getBoundingClientRect().top;
const currentPosition = window.pageYOffset;
const position = linkPosition + currentPosition;

window.scroll(

元記事を表示

【React】ステートフックをしっかり学ぶ【Hooks】

#　Hooksとは

>フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。

引用：https://ja.reactjs.org/docs/hooks-intro.html

この登場により、今までクラスコンポーネントに頼っていた`state`とライフサイクルメソッドが関数コンポーネントでも使えるようになりました！！（完全に置き換わった訳でないですが。）

今回はその中でもステートフック（関数コンポーネントで`state`が使える機能）ついて見ていきます。

#　ステートフックの基本形

“`test.jsx
import React, { useState } from “react”;

const Test = () => {
let [name, setName] = useState(“佐藤”);
return (
<>

{name}


);
};
export default Test;
“`

`impo

元記事を表示

【Rails】フォームのエラーメッセージを非同期で表示する

`form_with`を`local: true`なしで使っても、通常エラーメッセージ部分は非同期処理になりません。
非同期で表示してみたので方法をまとめます。

## FormのView
`form_with`に`local: true`を付けないと、非同期で通信が行われます。

“`erb:app/views/tests/new.html.erb
<%= form_with model: @test do |f| %>
<%= f.text_field :name %>
<%= render 'shared/err_msg' %>
<%= f.submit %>
<% end %>
“`
“`erb:app/views/shared/err_msg.html.erb

“`

## Controller
`@test.save`が失敗した

元記事を表示

Escキー押下で閉じるモーダルウィンドウをReactで実装する

Reactで以下のようなモーダルウィンドウを実装してみました。
マークアップ構造と要件はこちらになります。
・モーダルのコンポーネント配下に、オーバーレイとダイアログが兄弟要素でこの順に続く
・オーバーレイをクリックで閉じる
・ESC押下で閉じる
・閉じるボタン押下で閉じる

また、ライブラリは使いません。
スタイリングはモーダルとしてのロジックのみである最低限のもので、デザインは未実装です。

# ソースコード

“`App.jsx
class Modal extends React.Component {
constructor(props) {
super(props);
this.handleKeyDown = this.handleKeyDown.bind(this);
}

componentDidMount() {
document.addEventListener(“keydown”, this.handleKeyDown);
}

handleKeyDown(e) {
const escKey = e.keyCod

元記事を表示

VueCLIとfirebaseで匿名掲示板を制作した際に、参考にした記事とエラー解決記事

#はじめに
この記事を書く目的は、VueCLIとFirebaseで匿名掲示板を制作した際に、参考にした記事とエラー解決記事をまとめておきたいと考えたからです。
そして、僕がエラーでかなり苦しんだので、解決策の一つとして力になれば幸いです。

##「$ firebase list」のエラー解決
参考記事：[「$ firebase list」のエラーに関して](https://qiita.com/chiba_hiro0514/items/6443bcca7d9290e2b4d2)

`$ firebase list`　→　`$ firebase projects:list`

コマンドが変更されたみたいです。
僕はfirebaseのHosting機能を使用する際に、この問題が起きました。

##TimeStampで時刻を表示させたい

参考記事：[Firebaseで取得したUnixTimestampを文字列に変換する](https://qiita.com/yasu_yyy/items/f92c6e517e2bd1192ec8)
[【Firebase】知らなくて損した時間の取得方法【１行だっ

元記事を表示

[JavaScript]なぜ