【個人開発】爆速な賃貸物件の検索サービスを作った

個人開発で **[賃貸物件の検索サービス Comfy](https://comfy.maison/)** を作りました[^0]。グラフや地図でサクサク絞り込める UI が特徴のサービスです。**とにかく気持ち良い使い勝手を実現**するために色々工夫しています。


既にリリースからは 4 ヶ月以上経っているのですが、改めてサービスの概要や、システム構成及び使用した技術・サービスをご紹介しようと思います。[^article]。

[^0]: 2021年の 7 月に最初のリリースをしたのですが、色々あっていったん閉鎖した後 11 月に再リリースしました。
[^article]: この記事は、2021年7月の初期リリースの直後に Zenn に投稿した記事の大幅な改訂版になります。 Zenn の記事は 7 月のサービス閉鎖

Google DriveのAPIをサービスアカウント認証方式でNode.jsから利用するメモ

前回書いた記事で調べていて、サービスアカウントを利用する方式も試してみたので記録しておきます。

> [Google DriveのAPIをNode.jsで触る ~ @google-cloud/local-authのサンプル版](https://qiita.com/n0bisuke/items/fbf920cdd7ed99b2fc8c)

## 前提など

– https://console.cloud.google.com にアクセスできる
– Google DriveのAPIをONにしている。

> 

### 環境

– Node.js v17系
– google-api-nodejs-client(googleapis) v100
– https://github.com/googleapis/google-api-nodejs-client

## 1. サービスアカウント利用の準備

こちらの記事が分かりやすかったです。

> 参考: [NodeでGo

Google DriveのAPIをNode.jsで触る ~ @google-cloud/local-authのサンプル版

既存のメモ通りにうまく動かず試行錯誤しました。

## 認証方式が若干変わった模様……?

以前書いた[Google DriveのAPIをNode.jsから触るメモ](https://qiita.com/n0bisuke/items/4af8f17fb4fe3b9b4831)では、公式の[Node.js quickstart ](https://developers.google.com/drive/api/quickstart/nodejs)に掲載されているコードをもとに実行していましたが、`credentials.json`の作成までは同様で、`token.js`生成のタイミングでリダイレクトエラーが発生するようになりました。

> このサイトにアクセスできませんlocalhost で接続が拒否されました。
> ![スクリーンショット 2022-04-03 3.55.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/982f68aa-9ddc-ebe6-a18d-56d9c6

【React初学者】props親子間の受け渡し

通常の受け渡し

親
“`Parent.jsx
import { Child } from “../components/child”;

export default function App() {
return (
<>


);
}
“`
子
“`Child.jsx
export const Child = ({ age }) => {
return (
<>
{age}

);
};
“`

children

親
“`Parent.jsx
import { Child } from “../components/child”;

export default function App() {
return (
<>

children

);
}
“`

子
“`Child.jsx
exp

コメントやコミットメッセージについてまとめる

# どんな内容か

主観もまじっていますが、とても簡単なことでコード可読性があがります。

質の良いコメントやコミットメッセージを残してコードの歴史を追いやすくしたり、実装者の意図を伝えて新たに参画した人が読みやすくなります。

現場によって異なることもあるので参考程度に留めていただければと思います。
## JSDoc

関数やクラスのコメントには`//`よりも`/** … */` を使用すると良いです。
カーソルを合わせた際に関数の説明欄が表示されるようになるので非常に便利です。

“`ts
/**
* 足し算するやつ
* @param a １つめの数値
* @param b ２つめの数値
* @return aとbの合計値
*/
export const plus = (a: number, b: number) => {
return a + b;
};
“`

## シングルラインのコメントは以下のように使う

– 必ずコメントの前に空白スペースをいれる
– 主題の上に記載する

“`ts
function getType() {
// set th

高速 scatter plot 描画（apache-arrow + regl 利用）

こんにちは。
apache-arrow (IPC) データをプロットしました[^1]。[regl](https://github.com/regl-project/regl) (WebGL) を利用し高速描画処理を行なっています。

[^1]: 参考：[Efficiently loading massive D3 datasets using Apache Arrow](https://blog.scottlogic.com/2021/10/15/efficiently-loading-massive-d3-datasets-using-apache-arrow.html) (Chris Price, scottlogic.com)

* ただし、データの取得（ネットワークを通したダウンロード）は高速ではありません。したがって、この例のような大量データの場合（68 万点の scatter plot）、通常はおよそ 1 秒を要すようで、開始後一瞬で全データを描画完了とはいきません[^2]。

ダウンロード進行中は、データは逐次分割されて取得され（10,000行単位）、その都度、データを追

Vue3注目の新機能 Reactivity Transformとは？

# 初めに
最近Vueの情報収集をサボっていたのだが、どうやらいつの間にかReactivity Transformという新機能が追加されていたらしい。（僕が軽く調べた感じだと日本語の情報がほぼ無い）
これはまだ実験的に導入されたもので、デフォルトで無効になっており、かつ今後破壊的な変更が入る可能性がある。
なので今すぐ学ぶ意味は薄いが、面白そうなのでちょっと触ってみる。
よければLGTMお願いします。

# Reactivity Transformって何？

[公式ドキュメント](https://vuejs.org/guide/extras/reactivity-transform.html)
簡単に言うとref()周りを短くシンプルに書けるエイリアス(公式はマクロと呼んでいる)を提供するものである。

例えば、数値等のプリミティブ値をリアクティブにする場合ref()を使うが、値を参照、変更するときいちいち.valueと書かなければいけないので、この部分が微妙に面倒であり直感的ではなかった。
vueのリアクティブシステムはProxyを利用しており、ランタイム上ではプリミティブ値をそのま

Cloud Functions で GmailAPI で メールを送信する方法 [Javascript]

備忘録。

## Google API を用意する

まずは、

https://gist.github.com/neguse11/bc09d86e7acbd6442cd4#oauth-20-のための-id-を得る

の 「OAuth 2.0 のための ID を得る」 に沿って、「Client ID」と「Client secret」と「Refresh token」と [「Refresh token」を 取得したのと同じページ](https://developers.google.com/oauthplayground/) から「Access Token」を取得します。

## Cloud Functions を用意する

https://blog.apar.jp/web/10611/#toc3

を参考にして、Cloud Functions の有効化・関数の作成を行います (Python の部分は、Nodejs に書き換えて下さい)。
関数の作成が出来たら、作成した関数をクリックし、その中から「ソース」のタブを選択して、以下のコードを加えます。
クライアントID・クライアントシークレ

laravelでyoutubeの料理動画を管理するアプリを作ってみた。

laravelを使ってYoutube上にある料理動画を管理するサービスを作成しました。
Youtubeには様々な料理動画が日々アップされていますが、実際に作ってみてよかったものをストックしたり、
少し自分好みにアレンジした時のメモを残したいと思ったので、当サービスを作ってみました。
セキュリティ面など至らない点が多いとは思いますが、興味があれば使ってみていただけると幸いです。

⇩作成したサービス

http://laravel-cookshelf.com

## 自己紹介
PHPを本格的に学習し始めて３ヶ月目の駆け出しエンジニア。前職はインフラ系で現在Webエンジニアになるため転職活動中です。

## 使用技術

##### フロントエンド

+ Javascript
+ Jquery
+ Bootstrap

##### バックエンド
+ PHP(Laravel8)
+ YoutubeAPI
+ Mysql

##### インフラ
+ AWS
+ Git

認証機能はLaravelにデフォルトで備わっているlaravel-authを使用しました。
また、AWSはEC2でサーバーをた

Web Serial API を利用できる p5.js用のライブラリ「p5.web-serial」で micro:bit とのシリアル通信（p5.js Web Editor・MakeCodeを利用）

今まで見かけていた「p5.js でシリアル通信を使うライブラリ」というと、公式ページで紹介されている「[p5-serial/p5.serialport](https://github.com/p5-serial/p5.serialport)」があったのですが、それとは別の最近リリースされたっぽいライブラリを見かけました。
そこで、その新しいライブラリを [p5.js Web Editor](https://editor.p5js.org/)上で試してみた、というのがこの記事の内容です。

## ongzzzzzz/p5.web-serial の仕組みについて
今回試してみるのは「[ongzzzzzz/p5.web-serial](https://github.com/ongzzzzzz/p5.web-serial)」というライブラリです。
上記の「p5-serial/p5.serialport」との違いは、Webページ上でシリアル通信を実現する方法です。

「p5-serial/p5.serialport」のほうは、「p5.serialcontrol application または p

IN演算子 JavaScript

## 用途
– オブジェクトに存在するかどうかを調べる
– 配列に対して要素番号が存在するかどうか調べる

## 使用方法
#### オブジェクトに存在するかどうかを調べる
“` javascript
var hoge = {
a : “aです”
}
console.log(“aです” in obj); //true
console.log(“bです” in obj); //false
“`

`文言 in 値` というように記述すると、`文言` が `値` に存在している場合は `true` が、存在しない場合は `false` が返ってくる。

#### 配列に対して要素番号が存在するかどうか調べる
“` javascript
var hoge = [“a”, “b”, “c”];
console.log(0 in hoge); //true
console.log(1 in hoge); //true
console.log(2 in hoge); //true
console.log(3 in hoge); //false
“`
　
　
この記事は以下の情報を参考にし

JavaScript jQuery の基礎学習

### はじめに

今回は、JavaScriptとjQuery についての基礎学習をしたため、アウトプットするために記事を書きました。

### jQueryの記述方法

“`
$(‘.item’).css(‘color’, ‘red’);
“`
基本的にはこの記述方法になる。

＄（操作したい部分のクラスやIDを記述）.処理する方法（処理する内容）

上記のように部分ごとに記述する内容は決まっており、クウォートなどの書き忘れに注意すること。

クラスの指定→.
IDの指定→#
この二つが基本で他のものはほとんど使用しなかった。

### jQueryのアクション
click　＝　指定要素上で左クリック時に発生。
dblclick ＝　指定要素上でダブルクリック時に発生。
ダブルクリックした際もclickイベントは発生する点に注意。

contextmenu ＝　指定要素上でマウス右ボタンを押した際に発生。
コンテキストメニューを表示させたくない場合は、このイベントでreturn falseやpreventDefaultする。

mousedown　＝　指定要素上で左or右ボタンを

【超初学者】JavaScriptのfunctionとは

騙し騙しやっていたので備忘録
間違いがあればご指摘ください

## functionとは？
https://kitsune.blog/function
こちらの方がわかりやすく説明してくださっています

**関数**と呼ばれる，**何かをしたら何かを返してくれるプログラム**である

例えば，現在の時間を**00:00:00**のように表示させたいとき，

“`js
var now = new Date(); // Dateオブジェクトを作る
var hours = now.getHours(); // DateオブジェクトにgetHoursメソッドを充てることで現在の時を取得
var minutes = now.getMinutes(); // DateオブジェクトにgetMinutesメソッドを充てることで現在の分を取得
var seconds = now.getSeconds(); // DateオブジェクトにgetSecondsメソッドを充てることで現在の秒を取得

// hours　が10未満だった場合0をつける

【Deno 1.20〜】公式タスクランナー、`deno task`コマンドの使い方

タスクランナーとは、コマンドに対してショートカットを設定しておくことができる機能です。サーバー立ち上げやビルド用のコマンドをあらかじめタスクランナーに設定しておくことで、開発体験を向上することができます。Node.jsではnpm scriptsが一般的に使われています。

Deno1.20では、タスクランナーがDeno CLI本体に入りました。基本的にはnpm scriptsと同じ機能なのですが、デフォルトでクロスプラットフォーム対応になっているなど、違う所もあります。

## deno task コマンドの使い方

#### タスクの設定

まず、deno.json(c)でタスクの内容を設定します。
※deno.json(c)の構文については[こちらの記事](https://qiita.com/access3151fq/items/7aa44ee69b4a5ff867c7)を参照してください。

“`jsonc:deno.jsonc（例）
{
“tasks”: {
// “<タスク名>“: “<タスク内容>” の形で定義する
// deno task hello

JS スクロールするとヘッダーのナビが画面上部に固定されついてくる方法

今回はヘッダー内のナビゲーションが、スクロールすることで画面上部に接触した際に、
画面上部に固定される方法をjQueryを使用せずにやっていきます。
（完成系コードは最下部）

_HTMLコード_
“`

タゴ’sクリエイト

Content

Content

　　　　　　　　　　　　　・
　　　　　　　　　　　　　・
　　　　　　　　　　　　　・
　　　　　　　　　　　　　・

“`
![スクリーンショット 2022-04-01 18.01.38.png](https://qiita-image-store.s3.ap-northeast-1.a

SpringBootの値をJavaScriptに渡す方法

# はじめに
SpringBootで設定した値をJavaScriptに渡す際に、少しばかり、つまずいたため備忘録がてら記録しておこうと思います。
SpringBootとJavaScriptを用いた場合には、非常にあるあるな事象だと思うので、ご参考になれば幸いです。

# ControllerからJavaScriptに値を渡す方法
以下のように`Model`に登録してある値をJavaScriptに渡したいとします。

“`java:SampleController.java
@GetMapping(“/index”)
public String getIndex(EasyHouseholdForm form, Model model) {

model.addAttribute(“form”, form);

return “sample/index”;
}
“`

これを渡す方法は`Thymeleaf`で以下のようにします。

“`html:index.html