
こんにちは、junwatanabe72 です。

プロフィールページをご覧になっていただき、ありがとうございます。

36 歳、妻一人子供一人の 11 月 22 日生まれの男です。

大学卒業後、不動産会社で分譲マンションの開発などを担当。

現在はフリーランスとして 不動産会社向けに web アプリ開発やプログラミング指導、不動産の運用、相談、就職活動の面接指導なんかをしています。

趣味はゴルフです。ベストスコアは 69 です。

最近やってません、ぜひお誘いください。

お仕事のご相談やゴルフのお誘いは、\
<span style="color: red; ">画面右下の問い合わせアイコン</span>からお願いいたします。

### services

LP 制作

ホームページ制作

コーポレートサイト制作

EC サイト制作

web アプリ開発

SEO 対応

web マーケティング全般

プログラミング指導

就職活動の面接指導(無料)

### works

#### real-estate

物件の用地取得から、設計、企画、近隣対応、施工管理、販売、引渡しまで一気通貫で担当しました。。

[レフィール参宮橋ヒルズ](https://www.yasuda-re.co.jp/business/housing_sale/s_detail06.html)

![](/images/about/sangubashi.jpg)

---

[レフィール南麻布](https://www.yasuda-re.co.jp/business/housing_sale/s_detail30.html)

![](/images/about/minamiazabu.jpg)

---

#### web-app

企画、設計、コーディング、デプロイまですべての工程を担当しました。

[golfersfarm](https://golfersfarm.com/)

フロントエンドは next.js、バックエンドは express\
すべて typescript を使用して開発しました。

![](/images/about/golfersfarm.png)

---

[不動産所有期間チェッカー](https://real-estate-holding-period-checker.work/)

react のみで開発しました。

![](/images/about/real.png)

---

[KYOKUATE](https://kyokuate.netlify.app/)

react のみで開発しました。itunesAPI を使用しています。\
ios で音が出ない問題の解決が大変でした。

![](/images/about/kyokuate.png)

---

[simple Poker](https://simple-poker-jw.herokuapp.com/)

rails6 にて開発しました。\
一部 javascript を書いています。

![](/images/about/poker.png)

---

[Augusta Winner](https://junwatanabe72.github.io/augusta_winner/#/)

flutter for web にて開発しました。\
version は 2.0 です。\
[松山秀樹選手](https://lexus.jp/brand/hideki_matsuyama/special_report/masters/)マスターズ優勝おめでとうございます。

![](/images/about/masters.png)

---

[YuITsuMuNi](https://peraichi.com/landing_pages/view/ruminetokyo501)

不動産の個別ページを作成しました。\
オリジナルページを作ることで、ライバル物件との差別化を図れます。\
本件のご相談は<span style="color: red; ">問合せ</span>ください。

![](/images/about/mansion.png)

---

### skills

##### プログラミング言語

HTML,CSS,JavaScript,TypeScript,Ruby,Dart

##### フレームワーク

React,Vue,Next.js,Nuxt.js,Ruby on Rails,Flutter

##### インフラ等

linux,docker,vagrant,gcp,aws

##### 不動産

プロパティマネジメント、プロジェクト管理、コンサルティング、内覧会対応,借地実務、契約書作成、重要事項説明書作成、管理規約作成等々

##### 資格

宅地建物取引士、管理業務主任者


junwatanabe72自己紹介のページです。

プロフィール

不動産のことやプログラミングのことを発信するブログのブログ一覧ページです。最新の記事から順番に表示されます。

To get in touch please fill the form below.

name

email

subject

message

consent

問合せ

不動産デベロッパーで働く人間が、主にプログラミングや不動産に関してつぶやくブログです。


JUNWATANABE72

新卒で財閥系総合デベロッパーに就職し、オフィスビルPMや分譲マンションの用地取得、借地売買、店舗開発、再開発などを経験しました。フリーランスエンジニアとして「nuxt.js」や「flutter」をつかったwebアプリ開発を行なっていた経験もあり。不動産とプログラム両方に知見があります。現在は、神戸からリモートで不動産デベロッパーの仕事をしつつ、社内システムの構築をしています。不動産屋のITリテラシーを高めていきたいと思いブログを始めました。


このブログについて

ホーム

Stackbitブログに検索機能を追加する


### 検索機能を追加しました！

こんにちは、junwatanabe72 です。\
ブログサイトには検索機能はつきものですよね。\
Stackbit で作成したブログには、記事検索機能がついていません。
なので、自分で実装してみました。

### 要件

-   「 / > blog」ページに「キーワード検索」とセレクトボックスを追加する。
-   記事の subtitle 要素をタグとして、使用する。
-   セレクトボックスのオプション要素には、記事につけられているタグの全てが含まれている。
-   セレクトボックスのタグを選択すると、タグがつけられている記事のみ表示される。

### 実装

便利ツール「material-ui」をインストールします。

    yarn add @material-ui/core @material-ui/icons @material-ui/styles

今回編集するファイルは、「src/layouts/blog.js」です。\
このファイルを編集していくのですが、
layout コンポーネントに要素を詰め込むことは
控え、新たにコンポーネント「BlogContent.js」を作成します。\
ここでは、BlogContent を呼び込んで、blog 一覧を props で渡すことにとどめます。

```js
src / layouts / blog.js;

import React from 'react';
import _ from 'lodash';
import moment from 'moment-strftime';
// 追加要素
import { Layout, BlogContent } from '../components/index';
//
import { Link, getPageUrl, withPrefix } from '../utils';

export default class Blog extends React.Component {
    render() {
        const data = _.get(this.props, 'data');
        const config = _.get(data, 'config');
        const page = _.get(this.props, 'page');
        const title = _.get(page, 'title');
        const posts = _.orderBy(_.get(this.props, 'posts', []), 'date', 'desc');

        return (
            <Layout page={page} config={config}>
                <header className="screen-reader-text">
                    <h1>{title}</h1>
                </header>
                <div className="post-feed">
                    // 追加要素
                    <BlogContent allArticles={posts} />
                    //
                </div>
            </Layout>
        );
    }
}
```

「src/components/」
BlogContent を作成します。

```js
src / components / BlogContent.js;

import React, { useState } from 'react';
import _ from 'lodash';
import SearchIcon from '@material-ui/icons/Search';
import TextField from '@material-ui/core/TextField';
import moment from 'moment-strftime';
import MenuItem from '@material-ui/core/MenuItem';
import { Link, getPageUrl, withPrefix } from '../utils';

const BlogContent = ({ allArticles }) => {
    const [articles, setArticles] = useState(allArticles);
    const [keyward, setKeyward] = useState('');

    const renderPost = (post, index) => {
        const title = _.get(post, 'title');
        const thumbImage = _.get(post, 'thumb_img_path');
        const thumbImageAlt = _.get(post, 'thumb_img_alt', '');
        const excerpt = _.get(post, 'excerpt');
        const date = _.get(post, 'date');
        const dateTimeAttr = moment(date).strftime('%Y-%m-%d %H:%M');
        const formattedDate = moment(date).strftime('%B %d, %Y');
        const postUrl = getPageUrl(post, { withPrefix: true });

        return (
            <article key={index} className="post post-card">
                <div className="post-inside">
                    {thumbImage && (
                        <Link className="post-thumbnail" href={postUrl}>
                            <img src={withPrefix(thumbImage)} alt={thumbImageAlt} />
                        </Link>
                    )}
                    <header className="post-header">
                        <h2 className="post-title">
                            <Link href={postUrl} rel="bookmark">
                                {title}
                            </Link>
                        </h2>
                    </header>
                    {excerpt && (
                        <div className="post-content">
                            <p>{excerpt}</p>
                        </div>
                    )}
                    <footer className="post-meta">
                        <time className="published" dateTime={dateTimeAttr}>
                            {formattedDate}
                        </time>
                    </footer>
                </div>
            </article>
        );
    };
    const changeArticles = (keyward) => {
        const tmp = allArticles.filter((v) => {
            const tags = v.subtitle.split(' ');
            return tags.includes(keyward);
        });
        setArticles(tmp);
        return;
    };
    const handleChange = (event) => {
        setKeyward(event.target.value);
        changeArticles(event.target.value);
        return;
    };
    const options = () => {
        const list = [];
        Object.values(allArticles).forEach((v) => {
            const tmp = v.subtitle.split(' ');
            tmp.map((v) => list.push(v));
        });
        return [...new Set(list)];
    };
    return (
        <>
            <div className="search">
                <div>キーワード検索</div>
                <SearchIcon />
                <TextField className="select-field" id="select-keyward" select onChange={handleChange} value={keyward}>
                    {[...options()].map((option) => (
                        <MenuItem key={option} value={option}>
                            {option}
                        </MenuItem>
                    ))}
                </TextField>
            </div>
            <div className="post-feed-inside">
                {articles.map((post, index) => {
                    return renderPost(post, index);
                })}
            </div>
        </>
    );
};
export default BlogContent;
```

```scss
sass/imports/_posts-page.scss .search {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 1vw;
}
.select-field {
    padding: 2vw !important;
    width: 30vw !important;
}
```

要点のみ解説します。

-   useState を使用して、ページ内の記事とタグを管理する。
-   タグは全ての記事に付けられているタグを取得し、重複を取り除く。
-   セレクトボックスは、material-ui を使用。一部 UI を scss で調整する
-   検索マークも設置。material-ui から SearchIcon をインポート。

## 完成品

![](/images/blog/2021-7/search.png)

## まとめ

そこまで難しい実装ではありませんでしたが、そもそも記事のタグ管理が subtitle で良いのか問題があります。
全体含めてブラッシュアップしていく必要がありそうです。

全然別件ですが、Stackbit 内の preview が表示されないエラーで半日費やしてしましました。
原因は、scss の justify-content が start だったことによる build エラーでした、flex-start にすることで解決。。もっと複雑なエラーだと思って試行錯誤しましたが、単純なミス。また一つ勉強になりました。



### SNS シェアボタンを追加しました！

こんにちは、junwatanabe72 です。\
せっかくブログを書いたなら SNS でシェアしてほしいですよね。\
Stackbit ブログのデフォルトにはない機能なので、今回も自分で実装してみました。

### 要件

-   各記事ページのタイトル下に SNS ボタンを設置する。
-   各ボタンを padding で間隔を空けて横並びで表示させる。
-   ボタンを押下すると、各 SNS ページに遷移し、記事のタイトルと URL が表示される。

### 実装

##### 1.ライブラリのインストール

SNS シェアボタンを簡単に追加できる「[react-share](https://www.npmjs.com/package/react-share)」をインストールします。

    npm install react-share

##### 2.ファイルの編集及び新規作成

編集するファイル：「src/layouts/post.js」\
新規作成ファイル：「ShareButtons.js」「\_posts-page.scss」

###### 2.1 post.js の編集

ShareButtons に渡す props を抽出します。\
必要な props は「title」(記事のタイトル)と「\_\_metadata.urlPath」(記事の URL)です

<div><script  src="//jsfiddle.net/h6vj52zu/2/embed/js/"></script></div>

###### 2.2 ShareButtons.js の新規作成

渡された props を使い各 SNS ボタンを生成し、リスト化します。

<div>
<script  src="//jsfiddle.net/h6vj52zu/1/embed/js/"></script>
</div>

###### 2.3 \_posts-page.scss の新規作成

シェアボタンを横並びとするために flex を設定します。\
また、Stackbit デフォルトの css を調整します。\
具体的には、button の box-shadow と list のリストマークの無効化です。

<div><script  src="//jsfiddle.net/7ov0zeyj/embed/css/"></script></div>

##### 3.実装の要点

-   post.js 内で必要なデータ、「title」,「URL」を抽出し ShareButtons に渡す。
-   必要な SNS ボタンとアイコンを「react-share」から import する。
-   Stackbit のデフォルト css が邪魔なので、適宜、上書きする。
-   JSX で list を作成する時は map を使用して記述量を抑える。

## 完成品

![](/images/blog/2021-7/SNSshareButton.png)

## まとめ

便利なライブラリ[react-share](https://www.npmjs.com/package/react-share)」を使用することで容易に SNS シェアボタンを導入できました。車輪の再発明は極力控えて、いろんなライブラリを探してブログをバージョンアップしていきたいですね！


StackbitブログにSNSシェアボタンを追加する

Stackbitブログにパンくずリストを追加する


### Stackbit ブログに「パンくずリスト」を追加しました！

こんにちは、junwatanabe72 です。\
パンくずリスト、web サイトには欠かせない機能ですよね。\
Stackbit ブログのデフォルトにはない機能なので、今回も自分で実装してみました。

##### 「パンくずリスト」が必要とされている２つのポイント！

1. サイト内のどこにいるかをユーザーが一眼で理解でき、サイト内の回遊率が高まることで他の記事もついでに読んでもらえる確率が上がる。
1. 検索エンジンが効率的にクローリングでき、ページの詳細を正確に把握することに寄与するため、ページの検索結果の順位の向上にもつながる可能性がある。

詳しくは、「[こちら](https://digital-marketing.jp/seo/how-to-set-breadcrumbs/#i-2)」のページをご覧ください。

### 「パンくずリスト」の要件

-   すべてのページ（トップページ除く）において、ページ上部にパンくずリストが表示される。
-   現ページまでの階層毎のリンクが表示され、クリックすると該当ページに遷移する。
-   現ページは文字が赤く表示される。

### 「パンくずリスト」の実装

##### 1.ライブラリのインストール

```
npm install @material-ui/core @material-ui/icons @material-ui/styles
```

既に material-ui をインストール済の場合は必要ありません。

##### 2.ファイルの編集及び新規作成

編集するファイル：「src/components/Layout.js」\
新規作成ファイル：「Breadcrumbs.js」「\_breadcrumbs.scss」

###### 2.1 layout.js の編集

Breadcrumbs に渡す props を抽出します。\
必要な props は「title」(記事のタイトル)と「\_\_metadata.urlPath」(記事の URL)です。\
SNS シェアボタンを導入した際と一緒ですね。(詳しくは[こちら](https://junwatanabe72.com/posts/20210701-add-snsbutton/))\
なお、トップページでパンくずリストを非表示するための分岐を入れています。\
またブログ記事と max-width を揃えるために class に inner-sm を指定しています。

<div><script src="//jsfiddle.net/8c7me0h2/1/embed/js/"></script></div>

###### 2.2 Breadcrumbs.js の新規作成

便利ツール Material-UI の[「Breadcrumbs」](https://material-ui.com/components/breadcrumbs/)を使います。\
パンくずリストの区切り文字は、Breadcrumbs の separator で設定できます。\
utils に定義されている「Link」と「withPrefix 」を使います。これで、外部リンクと内部リンクを判別し、よしなに遷移させてくれます。(今回は内部リンクオンリーですが。。)

<div>
<script  src="//jsfiddle.net/8c7me0h2/4/embed/js/"></script>
</div>

urlPath は、一度分解して、パンくずリスト用の path に変換します。

```js
const slicedPath = urlPath.split('/');
const convertWord = 'posts';
const blog = '/blog';
let tmp = '/';
const breadCrumbsList = slicedPath.map((path) => {
    if (path === convertWord) {
        tmp += `${convertWord}/`;
        return blog;
    }
    return (tmp += path);
});
// breadCrmbsListの戻り値 =>["/","/blog","/posts/20210702-breadcrumbs"]
```

トップページにはホームアイコンを表示させます。現在のページは目立つように文字を赤くし、title が表示されるようにします。

```js
<Breadcrumbs separator="›" aria-label="breadcrumb">
    {breadCrumbsList.map((path, num) => (
        <Link className="home-icon-flex" href={withPrefix(path)}>
            {num === 0 && <HomeIcon fontSize="inherit" />}
            {num === breadCrumbsList.length - 1 ? <div className="breadcrumbs-title-color">{title}</div> : path}
        </Link>
    ))}
</Breadcrumbs>
```

###### 2.3 \_breadcrumbs.scss の新規作成

ホームアイコンが表示される場合、横並びとするため flex を設定します。\
また、Stackbit デフォルトの css を調整します。\
具体的には、button の border 無効化です。

<div>
<script  src="//jsfiddle.net/8c7me0h2/3/embed/css/"></script>
</div>

##### 3.実装の要点

-   Layout.js 内で必要なデータ、「title」,「urlPath」を抽出し Breadcrumbs に渡す。
-   material-ui の「Breadcrumbs」を使ってパンくずリストを作成する。
-   urlPath を分解して、パンくずリスト用 path に変換する。
-   Stackbit のデフォルト css が邪魔なので、適宜、上書きする。

## 「パンくずリスト」の完成品

![](/images/blog/2021-7/breadcrumbs.png)

## まとめ

material-ui の「Breadcrumbs」を使用して、簡単に Stackbit ブログにパンくずリストを導入することができました！\
material-ui にパンくずリストコンポーネントがあるなんて知りませんでした！今後もどんどん material-ui を使っていきたいと思います！


Stackbitブログ（Next.js）にパンくずリストを追加する

clearDB内の日本語が文字化けする件を正す(heroku)。


### clearDB 内の日本語が文字化けする件を正す(heroku)。

こんにちは、junwatanabe72 です。\
以前 express を使用したアプリを heroku にデプロイした際にハマった点を
共有したいと思います。

### 状況

-   express で作ったバックエンドアプリを heroku にデプロイ。
-   express アプリ内では、sequelize というライブラリを通して clearDB と連携。
-   DB の書込み等の動作は問題ないが、日本語が文字化けする。

### 解決した対応

[こちら](https://blog.inomar.me/posts/20191204_sequelize)を参考に修正しました。\
express の sequelize 側の default 設定を修正することで解決!\
具体的には、migrations フォルダに charset を変更する migration ファイルを追加します。

```js
'use strict';

module.exports = {
    up: (queryInterface, Sequelize) => {
        return queryInterface.sequelize.query(`ALTER DATABASE ${queryInterface.sequelize.config.database} CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;`);
    },

    down: (queryInterface, Sequelize) => {}
};
```

### 試したが解決しなかった対応

1. heroku 上に環境変数を再設定する。\
   [参考 1](https://stackoverflow.com/questions/59244361/how-to-set-utf8-encoding-for-cleardb-mysql-on-heroku)\
   [参考 2](https://xyk.hatenablog.com/entry/2015/01/14/143508)

1. dump ファイルの各 table に直接書き込む。\
   一旦は、成功するものの、時間が立つと「latin1」に戻ってしまいました。

## まとめ

heroku,clearDB では、検索にヒットしなかったので、
いろんな角度から検索することが大切だと感じました。。。


Logo GardenとFavicon Generatorを使って最速でfaviconを設定する。

/images/blog/2021-7/favicon/complete-favicon.png


### Logo Garden と Favicon Generator を使って最速で favicon を設定する！

こんにちは、junwatanabe72 です。

web ページを作成したらオリジナルのロゴを使って favicon を設定したいですよね。\
というわけで、ロゴの新規作成から favicon の設定までをやってみました。

今回は、無料で使える「[Logo Garden](https://www.logogarden.com/)」と「[Favicon Generator](https://realfavicongenerator.net/)」を使用して、最速かつローコストで設定を終わらせたいと思います。

### やること

-   Logo Garden を使ってオリジナルのロゴを作成する。
-   Favicon Generator を使用して Logo Garden で作成したロゴから favicon を生成する。
-   html の head タグ内で favicon の設定をする。

### 実装

##### 1.Logo Garden でオリジナルのロゴを作成する

```
Logo Garden とは

Web ブラウザ上で簡単にスタイリッシュなロゴが作成できるサービスです。
無料で作成でき、ライセンスフリーです。
```

私はアプリを作成するたびに、ここでロゴを作っています。\
今まで作ってきたロゴの一覧です。全て無料で作成しました。
![](/images/blog/2021-7/favicon/logo-list.png)

作り方も至って簡単。\
ページ中央の「Get Started」 をクリック。
![](/images/blog/2021-7/favicon/logo-garden-top.png)

すると、ロゴ作成ページに遷移します。

画面左手の「Search Symbol」や「select a category」を使ってロゴのイメージに合うテーマを探します。\
今回は、親しみやすいロゴにしたかったので「cute」で検索しました。

色の変更や文字の挿入もできますが、今回はシンプルにロゴのみとします。

![](/images/blog/2021-7/favicon/logo-garden-logo.png)

メールアドレスを登録すれば、ロゴの画像をダウンロードできるようになります。\
ページ中央上部にある「Edit Your Logo」をクリックすれば再編集も可能です。

![](/images/blog/2021-7/favicon/logo-garden-edit.png)

##### 2.Favicon Generator で作成したロゴの各画像データを自動生成する

```
Favicon Generator とは

元画像から favicon を自動生成してくれるサービスです。
各デバイスで表示できるように様々なサイズで作成してくれます。
```

こちらも使い方は非常にシンプルです。\
画面右手にある「Select your favicon image」をクリックして favicon にしたい画像を選択します。

![](/images/blog/2021-7/favicon/generator-top.png)

画像が選択されると preview ページに遷移して、作成後のイメージを作ってくれます。\
画像が整形じゃない場合は、自動調整してくれるのもグットです。

![](/images/blog/2021-7/favicon/generator-preview1.png)

問題なければページ下部の「Generate your Favicons and HTML code」をクリックしましょう。

![](/images/blog/2021-7/favicon/generator-preview2.png)

インストールページに遷移します。

このページの「Favicon Package」ボタンを押せば、zip された画像データをインストールできます。\
生成された favicon の設定タグは後ほど、head タグ内にコピペします。

![](/images/blog/2021-7/favicon/generator-install.png)

##### 3.html の head タグ内で画像データを設定する

html でページを作っている場合は、html の head タグ内に Favicon Generator で生成された favicon の設定タグをコピペすれば完了ですが、
Stackbit で作ったブログの場合、head タグの設定は「Layout.js」で行います。
また、Favicon Generator で作成した画像データは head ディレクトリに格納します。

編集するファイル：「src/components/Layout.js」\
新規作成ファイル： 「public/images/head/\*」

###### 3.1 layout.js の編集

Favicon Generator で生成された favicon の設定タグをコピペして href の path だけ調整します。

<div>
<script  src="//jsfiddle.net/Lvm2uqjr/1/embed/js/"></script>
</div>

## 完成品

![](/images/blog/2021-7/favicon/complete-favicon.png)

## まとめ

ロゴの作成から favicon 設定まで小一時間でできてしまいました！\
皆さんも「[Logo Garden](https://www.logogarden.com/)」と「[Favicon Generator](https://realfavicongenerator.net/)」をどんどん使っていきましょう！


Stackbitブログ（Next.js）の記事ページに関連記事を表示させる。


### Stackbit ブログ（Next.js）の記事ページに関連記事を表示させました！

こんにちは、junwatanabe72 です。\
ブログの記事ページには関連記事を表示させたいですよね。\
Stackbit ブログのデフォルトにはない機能なので、今回も自分で実装してみました。

### 「関連記事表示」の要件

-   記事ページの最下段に関連記事を表示させる。
-   記事ページのカテゴリーと同カテゴリーの最新記事が関連記事として表示される。
-   関連記事は最新の記事から２つのみ表示される。

### 「関連記事表示」の実装

##### 1.ライブラリのインストール

今回は特にありません。

##### 2.ファイルの編集及び新規作成

編集するファイル：「src/components/BlogContent.js」、「src/layouts/post.js」\
新規作成ファイル：「PostList.js」、「SearchBar.js」、「RelationContent.js」

###### 2.1 BlogContent.js の編集

編集というより分解します。具体的には、検索バーと記事一覧を別のコンポーネントに分けます。
分離させた記事一覧のコンポーネントは関連記事を表示させる際に流用します。

これを

![](/images/blog/2021-7/relation/before.png)

こうします

![](/images/blog/2021-7/relation/after.png)

以下は、元々の BlogContent.js です。

```javascript
BlogContent.js;
import React, { useState } from 'react';
import _ from 'lodash';
import SearchIcon from '@material-ui/icons/Search';
import TextField from '@material-ui/core/TextField';
import moment from 'moment-strftime';
import MenuItem from '@material-ui/core/MenuItem';
import { Link, getPageUrl, withPrefix } from '../utils';

const BlogContent = ({ allArticles }) => {
    const [articles, setArticles] = useState(allArticles);
    const [keyward, setKeyward] = useState('');

    const renderPost = (post, index) => {
        const title = _.get(post, 'title');
        const thumbImage = _.get(post, 'thumb_img_path');
        const thumbImageAlt = _.get(post, 'thumb_img_alt', '');
        const excerpt = _.get(post, 'excerpt');
        const date = _.get(post, 'date');
        const dateTimeAttr = moment(date).strftime('%Y-%m-%d %H:%M');
        const formattedDate = moment(date).strftime('%B %d, %Y');
        const postUrl = getPageUrl(post, { withPrefix: true });

        return (
            <article key={index} className="post post-card">
                <div className="post-inside">
                    {thumbImage && (
                        <Link className="post-thumbnail" href={postUrl}>
                            <img src={withPrefix(thumbImage)} alt={thumbImageAlt} />
                        </Link>
                    )}
                    <header className="post-header">
                        <h2 className="post-title">
                            <Link href={postUrl} rel="bookmark">
                                {title}
                            </Link>
                        </h2>
                    </header>
                    {excerpt && (
                        <div className="post-content">
                            <p>{excerpt}</p>
                        </div>
                    )}
                    <footer className="post-meta">
                        <time className="published" dateTime={dateTimeAttr}>
                            {formattedDate}
                        </time>
                    </footer>
                </div>
            </article>
        );
    };
    const changeArticles = (keyward) => {
        const tmp = allArticles.filter((v) => {
            const tags = v.subtitle.split(' ');
            return tags.includes(keyward);
        });
        setArticles(tmp);
        return;
    };
    const handleChange = (event) => {
        setKeyward(event.target.value);
        changeArticles(event.target.value);
        return;
    };
    const options = () => {
        const list = [];
        Object.values(allArticles).forEach((v) => {
            const tmp = v.subtitle.split(' ');
            tmp.map((v) => list.push(v));
        });
        return [...new Set(list)];
    };
    return (
        <>
            <div className="search">
                <div>キーワード検索</div>
                <SearchIcon />
                <TextField className="select-field" id="select-keyward" select onChange={handleChange} value={keyward}>
                    {[...options()].map((option) => (
                        <MenuItem key={option} value={option}>
                            {option}
                        </MenuItem>
                    ))}
                </TextField>
            </div>
            <div className="post-feed-inside">
                {articles.map((post, index) => {
                    return renderPost(post, index);
                })}
            </div>
        </>
    );
};
export default BlogContent;
```

修正後の BlogContent.js です。

```javascript
BlogContent.js;
import React, { useState } from 'react';
import _ from 'lodash';
import SearchBar from './atoms/SearchBar';
import PostList from './PostList';

const BlogContent = ({ allArticles }) => {
    const [articles, setArticles] = useState(allArticles);
    const [keyword, setKeyword] = useState('');

    const changeArticles = (keyword) => {
        const tmp = allArticles.filter((v) => {
            return v.subtitle.includes(keyword);
        });
        setArticles(tmp);
        return;
    };
    const handleChange = (event) => {
        setKeyword(event.target.value);
        changeArticles(event.target.value);
        return;
    };
    const options = () => {
        const list = [];
        Object.values(allArticles).forEach((v) => {
            v.subtitle.map((v) => list.push(v));
        });
        return [...new Set(list)];
    };
    return (
        <>
            <SearchBar onChange={handleChange} keyword={keyword} options={options} />
            <PostList articles={articles} />
        </>
    );
};
export default BlogContent;
```

SearchBar.js です。

```javascript
SearchBar.js;
import React from 'react';
import _ from 'lodash';
import SearchIcon from '@material-ui/icons/Search';
import TextField from '@material-ui/core/TextField';
import MenuItem from '@material-ui/core/MenuItem';

const SearchBar = ({ onChange, keyward, options }) => {
    return (
        <div className="search">
            <div>キーワード検索</div>
            <SearchIcon />
            <TextField className="select-field" id="select-keyward" select onChange={onChange} value={keyward}>
                {[...options()].map((option) => (
                    <MenuItem key={option} value={option}>
                        {option}
                    </MenuItem>
                ))}
            </TextField>
        </div>
    );
};
export default SearchBar;
```

PostList.js です。

```javascript
PostList.js;
import React from 'react';
import _ from 'lodash';
import moment from 'moment-strftime';
import { Link, getPageUrl, withPrefix } from '../utils';

const PostList = ({ articles }) => {
    const renderPost = (post, index) => {
        const title = _.get(post, 'title');
        const thumbImage = _.get(post, 'thumb_img_path');
        const thumbImageAlt = _.get(post, 'thumb_img_alt', '');
        const excerpt = _.get(post, 'excerpt');
        const date = _.get(post, 'date');
        const dateTimeAttr = moment(date).strftime('%Y-%m-%d %H:%M');
        const formattedDate = moment(date).strftime('%B %d, %Y');
        const postUrl = getPageUrl(post, { withPrefix: true });

        return (
            <article key={index} className="post post-card">
                <div className="post-inside">
                    {thumbImage && (
                        <Link className="post-thumbnail" href={postUrl}>
                            <img src={withPrefix(thumbImage)} alt={thumbImageAlt} />
                        </Link>
                    )}
                    <header className="post-header">
                        <h2 className="post-title">
                            <Link href={postUrl} rel="bookmark">
                                {title}
                            </Link>
                        </h2>
                    </header>
                    {excerpt && (
                        <div className="post-content">
                            <p>{excerpt}</p>
                        </div>
                    )}
                    <footer className="post-meta">
                        <time className="published" dateTime={dateTimeAttr}>
                            {formattedDate}
                        </time>
                    </footer>
                </div>
            </article>
        );
    };
    return (
        <div className="post-feed-inside">
            {articles.map((post, index) => {
                return renderPost(post, index);
            })}
        </div>
    );
};
export default PostList;
```

###### 2.2 post.js の編集

関連記事を表示させる RelationContent コンポーネントを読み込みます。

なお、props として渡している relationArticles は自身の記事を除いた記事一覧です。
本来であれば、keyword ごとに関連記事を表示させるべきですが、次回の実装とします。

```js
post.js;
import React from 'react';
import _ from 'lodash';
import moment from 'moment-strftime';
import { Layout } from '../components/index';
import RelationContent from '../components/atoms/RelationContent';
import ShareButtons from '../components/atoms/ShareButtons';
import { htmlToReact, withPrefix, markdownify } from '../utils';

export default class Post extends React.Component {
    render() {
        const data = _.get(this.props, 'data');
        const config = _.get(data, 'config');
        const page = _.get(this.props, 'page');
        const title = _.get(page, 'title');
        const subtitle = _.get(page, 'subtitle');
        const image = _.get(page, 'content_img_path');
        const imageAlt = _.get(page, 'content_img_alt', '');
        const date = _.get(page, 'date');
        const dateTimeAttr = moment(date).strftime('%Y-%m-%d %H:%M');
        const formattedDate = moment(date).strftime('%A, %B %e, %Y');
        const markdownContent = _.get(page, 'markdown_content');
        const posts = _.orderBy(_.get(this.props, 'posts', []), 'date', 'desc');
        const { __metadata } = page;
        const URL = `https://junwatanabe72.com${__metadata.urlPath}`;
        const relationArticles = posts.filter((post) => post.title !== title);
        return (
            <Layout page={page} config={config}>
                <article className="post post-full">
                    <header className="post-header inner-sm">
                        <h1 className="post-title underline">{title}</h1>
                    </header>
                    <div className="inner-sm">
                        <ShareButtons url={URL} text={title} />
                    </div>
                    {image && (
                        <div className="post-image">
                            <img src={withPrefix(image)} alt={imageAlt} />
                        </div>
                    )}
                    {markdownContent && <div className="post-content inner-sm">{markdownify(markdownContent)}</div>}
                    <footer className="post-meta inner-sm">
                        <time className="published" dateTime={dateTimeAttr}>
                            {formattedDate}
                        </time>
                    </footer>
                    <RelationContent articles={relationArticles} keyword={subtitle[0]} />
                </article>
            </Layout>
        );
    }
}
```

###### 2.3 RelationContent.js の新規作成

キーワードでフィルタリングした filteredArticles を PostList に props として渡しています。
PostList をコンポーネント化したため、使い回すことができるようになりました。

```js
RelationContent.js;
import React from 'react';
import _ from 'lodash';
import FavoriteIcon from '@material-ui/icons/Favorite';
import PostList from '../PostList';

const title = '関連記事';

const RelationContent = ({ articles, keyword }) => {
    const filteredArticles = articles.filter((article, num) => {
        const keys = article.subtitle;
        return keys.includes(keyword) && num < 2;
    });

    return (
        <div className="inner-sm">
            <div className="common-flex">
                <FavoriteIcon fontSize="large" color="secondary" />
                <h3 className="ignore">{title}</h3>
            </div>
            {filteredArticles.length !== 0 && (
                <>
                    <h5>{`${keyword}の${title}`}</h5>
                    <PostList articles={filteredArticles} />
                </>
            )}
        </div>
    );
};

export default RelationContent;
```

##### 3.実装の要点

-   BlogContent.js を分解し、「SearchBar.js」,「PostList.js」を新規作成する。
-   関連記事を表示させる「RelationContent.js」を作成し、「PostList.js」を流用する。
-   「post.js」内で「RelationContent.js」を読み込む。
-   keyword ごとに関連記事を分ける実装は次回以降。

## 「関連記事表示」の完成品

![](/images/blog/2021-7/relation/result.png)

## まとめ

コンポーネントの粒度を細かくして、いかに使い回すかが、react の面白いところですよね。
コードを書くだけじゃなくて、設計をしっかり考えないといけませんね！


SNSシェアボタンを最適な位置に再配置しました


### SNS シェアボタンを最適な位置に再配置しました！

こんにちは、junwatanabe72 です。

以前ブログに設置した SNS シェアボタンですが、設置箇所が良くないみたい。。。

他の方のブログを拝見して気づいたのですが、10/10 の確率（100%）で記事最下段に配置されていました。

そりゃそうですよね。記事を読んでからシェアするかどうか判断するわけで。

というわけで適正な位置と思われる「記事の最下段」に SNS シェアボタンを移動させます。

加えて、行動提起テキストも追記します。

### 要件

-   SNS シェアボタンを記事の最下段（日付の下、関連動画の上）に設置する。
-   行動提起テキストを SNS ボタンの上部に追記する。
-   行動提起テキストは「{title}を読んでいただきありがとうございます！記事が参考になったらシェアしてね！」とする。

### 実装

##### 1.ファイルの編集及び新規作成

編集するファイル：「src/layouts/post.js」,「src/components/atoms/ShareButtons.js」,「sass/imports/\_share-buttons.scss」

###### 1.1 post.js の編集

header 下に配置していた「ShareButtons」を footer 下に移動させます。

props に「commentElement」(行動提起テキスト)を追加します。

こうすれば、SNS シェアボタンだけを表示させたい場合も props の有無で切分け可能です。

```js
import React from 'react';
import _ from 'lodash';
import moment from 'moment-strftime';
import { Layout } from '../components/index';
import RelationContent from '../components/atoms/RelationContent';
import ShareButtons from '../components/atoms/ShareButtons';
import { withPrefix, markdownify } from '../utils';

export default class Post extends React.Component {
    render() {
        const data = _.get(this.props, 'data');
        const config = _.get(data, 'config');
        const page = _.get(this.props, 'page');
        const title = _.get(page, 'title');
        const subtitle = _.get(page, 'subtitle');
        const image = _.get(page, 'content_img_path');
        const imageAlt = _.get(page, 'content_img_alt', '');
        const date = _.get(page, 'date');
        const dateTimeAttr = moment(date).strftime('%Y-%m-%d %H:%M');
        const formattedDate = moment(date).strftime('%A, %B %e, %Y');
        const markdownContent = _.get(page, 'markdown_content');
        const posts = _.orderBy(_.get(this.props, 'posts', []), 'date', 'desc');
        const { __metadata } = page;
        const URL = `${HOST}${__metadata.urlPath}`;
        // 追加
        const commentElement = (
            <h6 className="share-text">
                <p>{title}</p>
                <div>を読んでいただきありがとうございます！</div>
                <div>
                    記事が参考になったら<span className="share-span">シェア</span>してね！
                </div>
            </h6>
        );
        // 追加
        return (
            <Layout page={page} config={config}>
                <article className="post post-full">
                    <header className="post-header inner-sm">
                        <h1 className="post-title underline">{title}</h1>
                    </header>
                    // もともとの位置
                    {image && (
                        <div className="post-image">
                            <img src={withPrefix(image)} alt={imageAlt} />
                        </div>
                    )}
                    {markdownContent && <div className="post-content inner-sm">{markdownify(markdownContent)}</div>}
                    <footer className="post-meta inner-sm">
                        <time className="published" dateTime={dateTimeAttr}>
                            {formattedDate}
                        </time>
                    </footer>
                    // 移動
                    <div className="inner-sm">
                        <ShareButtons url={URL} text={title} commentElement={commentElement} />
                    </div>
                    // 移動
                    <RelationContent articles={relationArticles} keyword={subtitle[0]} />
                </article>
            </Layout>
        );
    }
}
```

###### 1.2 ShareButtons.js の編集

props 「commentElement」を追加しました。

```js
import React from 'react';
import {
    HatenaShareButton,
    HatenaIcon,
    FacebookMessengerIcon,
    FacebookMessengerShareButton,
    LineShareButton,
    LineIcon,
    EmailShareButton,
    EmailIcon,
    FacebookIcon,
    FacebookShareButton,
    TwitterIcon,
    TwitterShareButton
} from 'react-share';

const ShareButtons = ({ text, url, commentElement }) => {
    const buttons = [
        <TwitterShareButton url={url} title={text} className="disable-box-shadow">
            <TwitterIcon size={32} round={true} />
        </TwitterShareButton>,
        <FacebookShareButton url={url} title={text} className="disable-box-shadow">
            <FacebookIcon size={32} round={true} />
        </FacebookShareButton>,
        <FacebookMessengerShareButton url={url} title={text} className="disable-box-shadow">
            <FacebookMessengerIcon size={32} round={true} />
        </FacebookMessengerShareButton>,
        <LineShareButton url={url} title={text} className="disable-box-shadow">
            <LineIcon size={32} round={true} />
        </LineShareButton>,
        <EmailShareButton url={url} title={text} className="disable-box-shadow">
            <EmailIcon size={32} round={true} />
        </EmailShareButton>,
        <HatenaShareButton url={url} title={text} className="disable-box-shadow">
            <HatenaIcon size={32} round={true} />
        </HatenaShareButton>
    ];
    return (
        <>
            // 追加
            {commentElement}
            // 追加
            <ul className="share-layout">
                {buttons.map((button, num) => (
                    <li key={num} className="share-button-padding">
                        {button}
                    </li>
                ))}
            </ul>
        </>
    );
};

export default ShareButtons;
```

###### 1.3 \_share-buttons.scss の編集

レイアウトの都合で share-layout を flex-end に修正し、右寄せにしました。

また、各ボタンにホバー要素を追加しました。

```scss
/**
 * share-buttons
 */

.share-layout {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style-type: none;
    padding: 0px !important;
}
.share-text {
    text-align: end;
}
.share-span {
    color: red;
}
.disable-box-shadow {
    box-shadow: none !important;
    &:hover {
        opacity: 0.5;
        transition: 0.5s;
    }
}
.share-button-padding {
    padding-right: 15px;
}
```

## 完成品

![](/images/blog/2021-7/move-sns-button.png)

## まとめ

react の場合、一旦コンポーネントを作成してしまえば、配置の変更は比較的簡単にできます。

まあ、そうならないように先人たちの作品をたくさん勉強しないと。ですね！


Stackbitブログにチャネルトークを導入する

/images/blog/2021-7/channel/channel-top.png


### Stackbit ブログにチャネルトークを導入しました！

こんにちは、junwatanabe72 です。

[プロフィールページ](https://junwatanabe72.com/about)を作成しました。

プロフィールページに合わせて、問合せページも整備しようと思いましたが、\
せっかくなので、いま流行りのオンラインチャット接客ツールである[チャネルトーク](https://channel.io/ja)を使ってみたいと思います。

というわけで、

Stackbit の標準問い合わせページは削除し、全てのページにチャネルトークのアイコンがポップアップされるように実装しています。

#### チャネルトーク とは

```
チャネルトーク

熱狂的ファンをつくる接客チャット。
電話・メールに比べて、CS対応時間などのコストは70%削減⤵︎
顧客体験を高める"接客"を増やして、CVRとリピート率を70%にUP⤴︎
とのこと。
```

大きく分けて３つの機能があります。
「Web チャット」、「CRM マーケティング」,「ビジネスチャット」です。

##### 「Web チャット」

お客さんと対話できるチャットサービス

![](/images/blog/2021-7/channel/web.png)

##### 「CRM マーケティング」

お客さんに一括メールなどが遅れるマーケティングサービス。無料版だと使えない。

![](/images/blog/2021-7/channel/crm.png)

##### 「ビジネスチャット」

社内向けチャットサービス。slack みたいなもの？

![](/images/blog/2021-7/channel/chat.png)

今回は、「Web チャット」を目的に実装していきます。
細かい設定は別の機会とし、アイコンがポップアップされるところまでを実装します。

なお、[導入のためのドキュメント](https://guide-jp.channel.io/)も公式に用意があります。
ある程度コードが書ける人であれば、導入は難しくないでしょう。

### 要件

-   チャネルトークのアイコンを全ページの画面右下に配置させる。
-   問合わせページを削除する。

### チャネルトークに会員登録

チャネルトークのページに行き、右上の「ログイン」をクリック

![](/images/blog/2021-7/channel/channel-top-login.png)

「新規アカウント作成」をクリック

![](/images/blog/2021-7/channel/sign.png)

必要事項を記入して、新規アカウントを作成する

![](/images/blog/2021-7/channel/login.png)

新規アカウントの作成が完了したら、<span style="color: red; ">Plugin キー</span>と <span style="color: red; ">javascript </span>のコードを取得していきます。\
専用ページの左下設定マークをクリック

![](/images/blog/2021-7/channel/account.png)

「チャットボットのインストール」をクリックすると Plugin キーと基本コードが出てきます。

![](/images/blog/2021-7/channel/key.png)

今回は、Next.js 内に実装するので基本コードを貼り付けただけでは動きません。
[SPA サイト用のドキュメント](https://guide-jp.channel.io/626751dc-6f57-45a8-83fb-fcab2e2250dd)があるので、それを参考にします。

次に取得した Plugin キーと script を使って実装していきます。

### 実装

##### 1.ファイルの編集及び新規作成

編集するファイル：「src/pages/\_app.js」、「content/data/config.json」\
新規作成ファイル：「ChaneelTalk.js」

###### 1.1 app.js の編集

Next.js の app.js というファイルは、全てのページで必要な挙動を定義することができるファイルです。\
app.js でチャネルトークを呼び出しますが、１点注意点があります。\
チャネルトークのドキュメントに記載がある通り、<span style="color: red; ">クライアントサイドで呼び出さなければいけません</span>ので、useEffect を使用し、マウント後に実行されるように実装します。

```js
import { bootChannelTalk } from '../components/atoms/ChaneelTalk';
import '../sass/main.scss';
import React, { useEffect } from 'react';

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
    useEffect(() => {
        bootChannelTalk();
    });
    return <Component {...pageProps} />;
}
```

###### 1.2 ChaneelTalk.js の編集

[このページ](https://developers.channel.io/docs/web-installation#section-single-page-application)の Static Page をコピペ
<span style="color: red; ">PluginKey はご自身のもの</span>を入れてください。

```js
/* eslint-disable no-undef */
export const bootChannelTalk = () => {
    var w = window;
    if (w.ChannelIO) {
        return (window.console.error || window.console.log || function () {})('ChannelIO script included twice.');
    }
    var ch = function () {
        ch.c(arguments);
    };
    ch.q = [];
    ch.c = function (args) {
        ch.q.push(args);
    };
    w.ChannelIO = ch;
    function l() {
        if (w.ChannelIOInitialized) {
            return;
        }
        w.ChannelIOInitialized = true;
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'https://cdn.channel.io/plugin/ch-plugin-web.js';
        s.charset = 'UTF-8';
        var x = document.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
    }
    if (document.readyState === 'complete') {
        l();
    } else if (window.attachEvent) {
        window.attachEvent('onload', l);
    } else {
        window.addEventListener('DOMContentLoaded', l, false);
        window.addEventListener('load', l, false);
    }
    ChannelIO('boot', {
        pluginKey: yourPluginKey //please fill with your plugin key
    });
};
```

###### 1.3 config.json の編集

サイドバーに問合せページが表示されないように、nav_Links から contact を削除

## 完成品

![](/images/blog/2021-7/channel/channel.png)

## まとめ

イケてる問合せツールがいとも簡単に導入できました。\
無料で使えるので、皆さんもどんどん使っていきましょう。


位置指定道路化の判定プログラムを作った


### 位置指定道路の延長判定プログラムを作りました！

こんにちは、junwatanabe72 です。

先日、とある物件取得のために宅地の一部を位置指定道路にできないか検討しました。

結果、一部宅地の位置指定道路化は難しいとの結論でした。そうなると計画建物が成り立たないため検討見送りとなりました。\
※専門的にはボリュームが入らなかったと言います。\
結果としては残念だったのですが、せっかく位置指定道路化の判定基準を学んだので、エンジニアらしく javascript コードに落とし込みました。

#### 位置指定道路 とは

```
位置指定道路

特定行政庁（都道府県知事や市町村等）から「土地のこの部分が道路である（道路位置指定）」という指定を受けた私道。
不動産業者が一体の敷地を宅地分譲する際に、接道要件を満たすために設置する用途が一般的。
ちなみに接道要件とは、建築基準法に規定されており、
幅員4ｍ以上の道路に2ｍ以上接しなければ建物を建築することができないというもの。
```

位置指定道路の詳しい説明は[ここ](https://suumo.jp/article/oyakudachi/oyaku/chumon/c_other/ichishiteidouro/)とか[ここ](https://www.suumocounter.jp/chumon/report/jitsurei/entry/ichishiteidouro/)を参考にしてください。

#### 宅地の位置指定道路化

判定に必要な要件を引数にとる関数 isExtended を作成します。
第一引数から順に、計画地の総面積、道路幅員、道路の長さ、回転道路の数、袋地かどうか）です。
以下、位置指定道路化の判定コードです。

```js
const baseArea = 500;
const baseWidth = 6;
const baseLength = 35;

const isExtended = (landArea, loadWidth, loadLength, rotatingSquare, deadEnd) => {
    // 位置指定道路にする道路及び宅地面積が500㎡以上の場合は、開発行為に該当。
    if (landArea >= baseArea) {
        return false;
    }
    // 位置指定道路は通り抜け道である。（袋地じゃない。）
    if (!deadEnd) {
        return true;
    }
    //位置指定道路の幅員が6m以上である。
    if (loadWidth >= baseWidth) {
        return true;
    }
    // 位置指定道路の長さが35m未満である。
    if (loadLength < baseLength) {
        return true;
    }
    //   位置指定道路の長さが35m以上であるが、35m毎に回転道路を設けられている。
    const setRotatingSquare = loadLength / baseLength <= rotatingSquare;
    if (setRotatingSquare) {
        return true;
    }
    return false;
};
```

私が検討した物件の配置図です。
![](/images/blog/2021-10/position.png)

[42 条 2 項道路](https://www.city-yuwa.com/explain/ex_glossary/detail/douro.html)の終端に位置する物件でした。
黄色部分を位置指定道路にしたかったのですが、そのためには、2 項道路の一部に回転道路を設けなければいけません。

```js
// 私が検討した物件の条件です。回転道路を設けることができないので、result === falseとなります。
const result = isExtended(200, 4, 60, 0, true);
```

## まとめ

位置指定道路の判定基準は複雑ですが、コードに落とし込むことでシンプルになりました。

実際に位置指定道路化するには、設計士と連携しながら、関係諸官庁と事前協議が必要になりますので、こちらは簡易判定に使っていただけたらと思います！

不動産の複雑な条件分岐をコードで表現するという試みを今後もやって行きたいと思います！


とりあえずJSで！と答える５つの理由

/images/blog/2021-10/jsContent/jsLogo.png

## とりあえず JS やっとけ！

こんにちは、junwatanabe72 です。

プログラミング初学者にとって、どのプログラミング言語を勉強すれば良いのか悩みますよね？

結論からいうと、私のおすすめは <span style="color: red; ">JavaScript （JS）</span>です。

このことは、今まさに他のプログラミング言語を勉強している人にとっても当てはまると思いますし、 web 系のプログラミングをやる場合、 JS を勉強することでマイナスになることはないと私は考えます。

今回は、「JS とは」と、「なぜ私が JS やっとけと言うのか」を解説していきます。

## JavaScirpt とは

![](/images/blog/2021-10/jsContent/jsLogo.png)
JavaScript とは、ブラウザ上で動く Web サイトに動きをつけることができるプログラミング言語です。

[過去に不遇の時代](https://qiita.com/a_rcsin/items/0a3c8c98c8d703c49a22)などもあったらしいのですが、現在は[「JS の標準化」](https://www.weblio.jp/content/ECMAScript#:~:text=ECMAScript%E3%81%A8%E3%81%AF%E3%80%81%E4%B8%BB%E3%81%AB,International%E3%81%AB%E3%82%88%E3%81%A3%E3%81%A6%E7%AD%96%E5%AE%9A%E3%81%95%E3%82%8C%E3%81%9F%E3%80%82)や[「node.js」](https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb)の登場などにより web 系のプログラムにおいて確固たる地位を確立しています。

ちなみに、調査会社 RedMonk によると 2021 年 8 月時点、[JS の人気ランキングは 1 位](https://redmonk.com/sogrady/2021/08/05/language-rankings-6-21/)とのこと！

![](/images/blog/2021-10/jsContent/ranking.jpg)

<div style="text-align: right;font-size:0.7rem;">参照: RedMonk</div>

次から、JS やっとけな理由を「５つ」紹介します。

## JS やっとけな５つの理由

### 1.ブラウザ上で動く

![](/images/blog/2021-10/jsContent/browers.jpg)

プログラミングを勉強する人の多くは、web ページの作成を当面の目標にするのではないでしょうか。

もちろん Ruby や PHP、Python などの他の言語でも問題なく達成可能ですが、多少凝ったページを作成するとなると JS を無視することはできません。

なぜならば、クライアントサイトでの動きは、JS に頼らざるを得ないからです。

「Internet Explorer」「Microsoft Edge」「Google Chrome」「Firefox」「Safar」など、ほとんどのブラウザでは JavaScript を簡単に実行できるのです。

「ブラウザで動作する」を実感してみましょう。

ブラウザを開いた状態で、以下のどちらかの動作をしてください。

*   マウスを右クリックして「検証」を選択する
*   F12 ボタンを押す。

そうすると開発者ツールが開きます。

![](/images/blog/2021-10/jsContent/sc.png)

画面右手の「Console」が選択されてますが、ここが JavaScript 実行環境です。

ここに JS のコードを書けば、実行されます。

簡単ですよね？

以下を貼り付けてみてください。「3」が出力されるハズです。

```js
const add = (a, b) => {
    return a + b;
};
add(1, 2);
```

### 2.react や vue などのフレームワークが豊富

![](/images/blog/2021-10/jsContent/jsframe.png)

「React」,「Vue」,「Angular」といった流行りのフロントエンド開発フレームワークは すべて JS 製です。

そりゃそうですよね。ブラウザ上では JS しか動かないんですから。

ちなみに、このブログも React で書かれています。

詳細は公式ページを参照してください。

*   [React](https://ja.reactjs.org/)
*   [Vue](https://jp.vuejs.org/index.html)
*   [Angular](https://angular.jp/)

### 3.環境構築やデプロイが簡単

![](/images/blog/2021-10/jsContent/env.jpg)

冒頭でもお話ししましたが、JS は、 <span style="color: red; ">ブラウザ上で動く</span>のです。

Ruby や PHP、Python などのように言語自体をインストールする必要もありませんし、
Rails や Laravel,Django のようなフレームワークがなくても、簡単なアプリならば作成できます。

エディタとブラウザだけで実行できます。

そしてデプロイも簡単です。

もっとも簡単なやり方は github ページを使う方法でしょうか

[詳しくはこちら](https://prog-8.com/docs/github-pages)

私が作った以下のサイトは、github ページでホスティングされています。

*   [JS カレンダー](https://junwatanabe72.github.io/Calendar/)
*   [JS 計算機](https://junwatanabe72.github.io/Counter/)
*   [JS 〇 × ゲーム](https://junwatanabe72.github.io/js-tic-tac-toe/)

React や Vue のプロジェクトも [Netlify](https://www.netlify.com/)や [Vercel](https://vercel.com/) などのホスティングサービスを使えば、簡単にしかも無料でデプロイできちゃいます。

Ruby や Python といったサーバーサイドで使う言語の場合は、 Heroku や AWS などのクラウドサーバーやレンタルサーバーを用意しなけばいけませんが、初学者にとってはハードルが高いです。

JS ならば、web ページが簡単に公開できることを早期に体験することができます。

そういった「できる」が勉強を継続させてくれるハズです。

### 4.サーバーサイドの開発もできる

![](/images/blog/2021-10/jsContent/server.jpg)

[Node.js](https://nodejs.org/ja/) があればサーバーサイドの開発も可能です。
フレームワークとしては、[Express](https://expressjs.com/ja/) や [Nextjs](https://nextjs.org/) が有名ですね。

ちなみに、このブログも Nextjs と Netlify を使用しています。

私が作った以下のサイトはフロントエンドを Nextjs、サーバーサイド をExpress で作りました。

JS であれば単一言語で開発ができるのです！

*   [golfersfarm](https://golfersfarm.com/)

なお、ややこしいのですが、Node.jsはフレームワークではありません。不動産的に解説すると、Node.jsは基礎部分で、Expressなどのフレームワークは躯体部分ですかね？

### 5. TypeScript につながる

![](/images/blog/2021-10/jsContent/ts.png)

JS は型がなかったり、関数の引数に制限がなかったりします。

そのせいで、null が入り込み予期せぬエラーが発生する場合があるのですが、その弱点を補完してくれるのが [TypeScript](https://udemy.benesse.co.jp/development/system/typescript.html) です。

TypeScript は、2014 年頃に Microsoft によって開発・発表された JavaScript を拡張して作られたプログラミング言語です。

JS 拡張言語なので、JS を理解していれば問題なく TS も扱えます。

最近の新規開発では React でも、Vue でも、Express でも TS を使うことが一般的だと思うので将来的にはTSも使えるようになりたいですね。

ちなみに、以下が TS です。
このコードは、JS に非常に似てますが TS なので、ブラウザでは動きません。

```ts
const add = (a:number,b:number)=>:number{
     return a +b;
}
// OK
add(1,2)
// NG
add()
// NG
add("1","2")
```

## まとめ

以上、JS のおすすめ理由を５つ紹介しました！

私は、Ruby と Rails から勉強をスタートし、web アプリを作成したのですが、結局凝ったアプリを作ろうとすると JS の知識は必要不可欠になります。

しかも、調べたら今は JS でサーバーサイドも書くことができるとのこと。
ということで JS を勉強し、最近では Ruby を書くことはめっきり減ってしまって、JS と TS ばかり書いてます。


NetlifyのdeployのためにSSG対応のGithub Actionsを設定する


### GithubActions を設定してみました！

こんにちは、junwatanabe72 です。\
Netlify でも Next.js の web アプリをホスティング可能です。\
ですが、SSG ページを含んだ Next.js プロジェクトを build すると一回のビルドに 10 分以上かかってしまい、
数回のビルドで build 時間の上限である 300 分を意識してしまいます。\
というわけで、ググってみると github Actions を活用すれば Netlify 上の build 時間を
ゼロできるという情報が出てきたので、早速設定してみました。 \
結論として 、build 時間がほんとにゼロになりましたので、お勧めできます！

### 要件

-   Netlify の「Build & deploy / Build settings」を「Stop builds」に変更する。
-   Netlify の「Build & deploy / Deploy previews」を「None」に変更する。
-   Netlify の「Personal access tokens」とデプロイサイトの「API ID」を取得する。
-   Github リポジトリの「Settings / Secrets / Actions」に上記を追加する。
-   root に.github/workflows/netlify.yml ファイルを作成する。
-   pullRequest を送り、master/main に merge する。

### 実装

##### Netlify ページでの対応

-   Netlify の「Build & deploy / Build settings」を「Stop builds」に変更する

![](/images/blog/2022-2/buildSettings.png)

-   Netlify の「Build & deploy / Deploy previews」を「None」に変更する

![](/images/blog/2022-2/deployPreviews.png)

-   Netlify の「Personal access tokens」とデプロイサイトの「API ID」を取得する

[Personal access tokens](https://app.netlify.com/user/applications#personal-access-tokens)

![](/images/blog/2022-2/accessToken.png)

API ID

![](/images/blog/2022-2/apiId.png)

##### github リポジトリでの対応

-   github リポジトリの「Settings / Secrets / Actions」に上記を追加する。

![](/images/blog/2022-2/githubSecret.png)

##### プロジェクトルートでの対応

プロジェクトのルートに.github/workflows/netlify.yml ファイルを作成する  
基本的には、[こちら](https://dev.to/thedaviddias/how-to-deploy-your-next-js-app-on-netlify-using-github-actions-14bn)丸写しです。  
ですが、２点だけ修正しました。

```yml
# npm run install
npm install
```

install コマンドがないと怒られました。。

```yml
# args: deploy -m 'v${{ steps.package-version.outputs.current-version}} ・ ${{ github.head_ref }}'
args: deploy --dir=./out --prod
```

next build && next export を使うと out ディレクトリに html ファイルが生成されるらしく  
deploy 参照を out ディレクトリにします。
詳しくは[こちら](https://nextjs-ja-translation-docs.vercel.app/docs/advanced-features/static-html-export)

```yml
# netlify.yml
name: Main workflow

on:
    pull_request:
        branches:
            - master
            - main
        types: [opened, synchronize, reopened]
jobs:
    test:
        runs-on: ubuntu-latest
        steps:
            - name: Checkout code
              uses: actions/checkout@v2

            # Cache node modules and next folder
            - name: 📬 Caching
              uses: actions/cache@v2
              with:
                  path: |
                      **/node_modules
                      ${{ github.workspace }}/.next/cache
                  key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}

            - name: Use Node.js 14.x
              uses: actions/setup-node@v1
              with:
                  node-version: 14.x

            - name: 🧰 Install dependencies
              run: npm install

            - name: 📦 Build project
              run: npm run build --if-present

            # - name: 🧹 Run lint
            #   run: npm run lint

            # - name: 🐛 Run tests
            #   run: npm run test

            # Deploy to Netlify with a personalized message
            - name: 🚀 Deploy to Netlify
              id: deploy-netlify
              uses: netlify/actions/cli@master
              env:
                  NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
                  NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
              with:
                  args: deploy --dir=./out --prod
```

## 完成

![](/images/blog/2022-2/deploy.png)

## まとめ

SSG 対応の部分で少し手間取りましたが、うまく実装することができました。  
300 分が 0 分になるというのも極端ですが、githubActions も完全無料というわけではなく、
private リポジトリであれば build 時間 2,000 分という上限（そこまで時間使わないでしょ。。）があるので、deploy しまくりは要注意です。  
public リポジトリは無料。  
詳しくは[こちら](https://docs.github.com/ja/billing/managing-billing-for-github-actions/about-billing-for-github-actions)

[参考になったサイト１](https://dev.to/thedaviddias/how-to-deploy-your-next-js-app-on-netlify-using-github-actions-14bn)

[参考になったサイト 2](https://qiita.com/nwtgck/items/e9a355c2ccb03d8e8eb0)


Netlifyのbuild時間をなくすためにSSG対応のGithub Actionsを設定する


## 楽してブログを作りたい！

こんにちは、junwatanabe72 です。\
自身のポートフォリオや日々の勉強内容を発信していこうと決意しました。\
「はてなブログ」や「note」のような便利なサービスが既にありますが、せっかく自分でプログラムをかけるので、自分でサイトを作ろうと考えたものの、１から作るのはメンドくさい。。\
何か良いものがないかググっていると「Stackbit」なる良いものがあるではありませんか。\
というわけでさっそく「Stackbit」を使ってブログを立ち上げてみました！

## Stackbit とは

さまざまなサービスを連携させ、簡単に JAMstack なサイトを構築してくれるサービスです。JAMstack の詳細説明は、[こちら](https://qiita.com/ozaki25/items/4075d03278d1fb51cc37)の記事をご参照ください。簡単に説明すると、JAMstack とは、build 時にサーバーから情報を取得して html ファイルを作成するといったアーキテクチャです。その JAMstack を用いたサイトは高速かつ高セキュリティと言われています。

## Stackbit でサイトを作ってみる

##### ユーザー登録

![](/images/blog/2021-7/stackbit-top.png)\
まずは、右上の「SIGN IN」からユーザー登録。

##### テーマ選択

![](/images/blog/2021-7/stackbit-theme.png)

テーマを選択します。2020 年 6 月現在、17 の標準テーマがあるみたいです。個人ブログ用なので「Fresh」を選択しました。用途ごとにテーマが分かれていて良い感じです。

![](/images/blog/2021-7/stackbit-manage.png)

テーマを選択すると、一意のプロジェクトネームが割り当てられます。
ここから、サイトジェネレータや CMS の設定を追加していきます。

##### サイトジェネレータ選択

![](/images/blog/2021-7/stackbit-ssg.png)
サイトジェネレータを選択します。私は、「Next.js」にしました。

##### CMS 選択

![](/images/blog/2021-7/stackbit-cms.png)
CMS は「git」を選択しました。

##### CREATE SITE

![](/images/blog/2021-7/stackbit-manage.png)

また、自身の github アカウントに生成サイトを紐づけることも可能です。
設定を追加したら、「CREATE SITE」をクリックします。
これで、サイトが構築され、ビルド・デプロイまで完了しました。
無事にサイトが生成されたら、dashboard が表示されます。

##### Dashboard

![](/images/blog/2021-7/stackbit-dashboard.png)

「Open」を選択すると編集ページに遷移します。\
「View Live Site」をクリックすると、デプロイされたサイトに遷移します。\
「Change Plan」は有料プランを選択するページに遷移するボタンです。\
とりあえず「Open」をクリックして、編集ページに遷移します。

##### 編集ページ

編集ページには、「Preview」「Content」「Code」の３モードがあります。

##### 「Preview」

「Preview」モードは名前の通り、現在のページ UI を確認できます。

![](/images/blog/2021-7/stackbit-preview.png)

##### 「Content」

「Content」モードは、UI 上で直感的にページを編集できます。
このモードであれば、プログラムがかけなくてもページの編集が可能です。

![](/images/blog/2021-7/stackbit-content.png)

##### 「Code」

「Code」モードでは、editor を使って、コードを編集することができます。
next.js で作成しているので、言語は javascript になります。
ブログの記事をテーマごとに検索する機能を追加したいと考えているので、実装が完了したら別の記事で紹介したいと思います。

![](/images/blog/2021-7/stackbit-code.png)

## Stackbit を使ってみて

学習コストの高い最新のフレームワークをノーコードで、爆速で構築できる Stackbit は「素晴らしい」の一言です。
web アプリを作成する際の煩雑な作業はすべて Stackbit がよしなに対応してくれています。
もちろん、レイアウト変更や機能追加はある程度、JS や next.js,react に精通していないと難しいと思います。
まだまだこれからですが、stackbit を使ってみた感想をこれからも記事にしていきたいと思ってます！


StackbitでJAMstackブログを作成する。


Thank you for contacting me! I will get back in touch with you soon.

**Have a great day!**