beyooon Blog

GITHUB_TOKEN によってトリガーされたイベントでは他のワークフローは走らない

Thu, 11 Jul 2024 14:00:00 GMT

プロダクトで dependabot によるライブラリ更新を GITHUB_TOKEN を使ってオートマージしていたのだけど、ベースブランチで CI が走らなかった。

気になって調べてみるとそういう仕様らしい。
再帰実行されるのを防ぐためとのこと。

When you use the repository’s GITHUB_TOKEN to perform tasks, events triggered by the GITHUB_TOKEN, with the exception of workflow_dispatch and repository_dispatch, will not create a new workflow run. This prevents you from accidentally creating recursive workflow runs. For example, if a workflow run pushes code using the repository’s GITHUB_TOKEN, a new workflow will not run even when the repository contains a workflow configured to run when push events occur.

https://docs.github.com/en/actions/security-guides/automatic-token-authentication

対応策としては GITHUB_TOKEN の代わりに

Personal Access Token
GitHub App から生成したトークン

を使用すれば良い。

Personal Access Token は個人アカウントから発行するもので使用は避けたかったので、GitHub App から生成したトークンを使用する方法を選んだ。

具体的な手順はこちらの記事が詳しい。
https://blog.smartbank.co.jp/entry/2023/02/16/dependabot-auto-merge-with-github-app

今後もオートマージ以外でも GITHUB_TOKEN を使うと走らせたいワークフローが走らないケースはありそうなので覚えておこう。

nanoid v4 を使ったら jest が通らなくなった

Sun, 27 Nov 2022 14:47:00 GMT

最近、プロダクトに nanoid を新規インストールすることがあったのですが、その際に nanoid を使っている部分の jest のテストが落ちるようになってしまったため対応しました。

バージョンとエラーメッセージ

インストールした nanoid のバージョンは現時点で最新の v4 です。

"nanoid": "4.0.0",
"jest": "29.3.1",
"esbuild": "0.15.14",
"esbuild-jest": "0.5.0",

エラーメッセージ（一部抜粋）

SyntaxError: Unexpected token 'export'

原因

調べてみたところ、

nanoid は v4 で CJS をサポートしなくなり、ESM のみサポートするようになった
jest は Node で動いているため ESM は CJS にトランスパイルしないと動かない
デフォルトでは node_modules 配下のファイルはトランスパイルされない

ということのようで、nanoid が ESM のまま読み込まれてしまっていることが原因でした。

対応

対応案としては、

CJS をサポートしている nanoid v3 にダウングレードして使う
nanoid をトランスパイルするように設定変更する

を考えました。

あまり過去のバージョンに固定するライブラリは増やしたくないため、2 の「 nanoid をトランスパイルするように設定変更する」の方向で対応することにしました。

jest の設定変更

transformIgnorePatterns: で、トランスパイル対象から除外されている node_modules 配下のファイルのうち nanoid のみトランスパイルされるように変更します

jest.config.js

modules.exports = {
  // 無関係のその他の設定は割愛
  transform: {
    '^.+\\.(j|t)sx?$': 'esbuild-jest', // js ファイルもトランスパイルの対象にしておく
   },
  transformIgnorePatterns: [`node_modules/(?!nanoid/)`], // nanoid をトランスパイルする
}

transform については、このプロダクトが TypeScript のみで書かれていたため js ファイルも対象に含め直す必要がありましたが、元々 js ファイルが対象になっていれば変更する必要はありません。

これで jest が通るようになりました。

ちなみに同じように CJS 対応していないライブラリが他にも出てきた場合は以下のように記述することで対応できます。

jest.config.js

modules.exports = {
  // 無関係のその他の設定は割愛
  transform: {
    '^.+\\.(j|t)sx?$': 'esbuild-jest',
  },
  transformIgnorePatterns: [`node_modules/(?!(nanoid|hoge)/)`], // hoge もトランスパイルする
}

参考

phpbrew のインストールでエラー

Sat, 12 Jun 2021 00:00:00 GMT

php の複数バージョンを切り替えたいと思い、phpbrew をインストールしようとした。

公式の手順通り進めたが、指定のバージョンの php をインストールするところでエラーになったのでメモ書き。

環境

macOS 10.15.7
phpbrew 1.27.0

切り替え前の php のバージョン。

$ php -v
PHP 8.0.1 (cli) (built: Jan  7 2021 17:26:28) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.1, Copyright (c) Zend Technologies
    with Zend OPcache v8.0.1, Copyright (c), by Zend Technologies

エラーメッセージ

$ phpbrew install 7.4.4 +default
===> phpbrew will now build 7.4.4
===> Loading and resolving variants...
Homebrew prefix "/usr/local/opt/libxml2" does not exist.
Homebrew prefix "/usr/local/opt/bzip2" does not exist.
Homebrew prefix "/usr/local/opt/mhash" does not exist.
Downloading https://www.php.net/distributions/php-7.4.4.tar.bz2 via curl extension
[==================================================================] 12.12/12.12MB 100%
===> Extracting /Users/hogehoge/.phpbrew/distfiles/php-7.4.4.tar.bz2 to /Users/hogehoge/.phpbrew/build/tmp.1623451524/php-7.4.4
===> Moving /Users/hogehoge/.phpbrew/build/tmp.1623451524/php-7.4.4 to /Users/hogehoge/.phpbrew/build/php-7.4.4
===> Checking patches...
Checking patch for replace apache php module name with custom version name
Checking patch for replace freetype-config with pkg-config on php older than 7.4
===> Configuring 7.4.4...


Use tail command to see what's going on:
   $ tail -F '/Users/hogehoge/.phpbrew/build/php-7.4.4/build.log'


Error: Configure failed:
The last 5 lines in the log file:
checking for ZLIB support... no

checking whether to enable bc style precision math functions... yes

checking for BZip2 support... yes

checking for BZip2 in default path... not found

configure: error: Please reinstall the BZip2 distribution

Please checkout the build log file for more details:
         tail /Users/hogehoge/.phpbrew/build/php-7.4.4/build.log

bzip2 のパスが見つからないことがエラーの原因のように見える。

また variants のロードで他に見つからないものもあるようなので、あわせてインストールするする必要がありそう。

Homebrew prefix "/usr/local/opt/libxml2" does not exist.
Homebrew prefix "/usr/local/opt/bzip2" does not exist.
Homebrew prefix "/usr/local/opt/mhash" does not exist.

コマンド

見つからないものを homebrew でインストール。

$ brew install libxml2 bzip2 mhash

インストール再チャレンジ

再度、php をインストール。

$ phpbrew install 7.4.4 +default
===> phpbrew will now build 7.4.4
===> Loading and resolving variants...
Checking distribution checksum...
Checksum matched: 308e8f4182ec8a2767b0b1b8e1e7c69fb149b37cfb98ee4a37475e082fa9829f
===> Distribution file was successfully extracted, skipping...
===> Checking patches...
Checking patch for replace apache php module name with custom version name
Checking patch for replace freetype-config with pkg-config on php older than 7.4
Found existing build.log, renaming it to /Users/hogehoge/.phpbrew/build/php-7.4.4/build.log.1623452001
===> Configuring 7.4.4...


Use tail command to see what's going on:
   $ tail -F '/Users/hogehoge/.phpbrew/build/php-7.4.4/build.log'


===> Checking patches...
Checking patch for php5.3.x on 64bit machine when intl is enabled.
Checking patch for openssl dso linking patch
2 changes patched.
Checking patch for php5.6 with openssl 1.1.x patch.
===> Building...
Build finished: 9.6 minutes.
Installing...
---> Creating php-fpm.conf
---> Creating php.ini
---> Copying /Users/hogehoge/.phpbrew/build/php-7.4.4/php.ini-development 
---> Found date.timezone is not set, patching...
Initializing pear config...
config-set succeeded
config-set succeeded
config-set succeeded
Enabling pear auto-discover...
config-set succeeded
Congratulations! Now you have PHP with 7.4.4 as php-7.4.4

* To configure your installed PHP further, you can edit the config file at
    /Users/hogehoge/.phpbrew/php/php-7.4.4/etc/php.ini

To use the newly built PHP, try the line(s) below:

    $ phpbrew use php-7.4.4

Or you can use switch command to switch your default php to php-7.4.4:

    $ phpbrew switch php-7.4.4

Enjoy!

build に10分近くかかってるけど、いけた！

php のバージョンを切り替える。

$ phpbrew switch php-7.4.4

バージョン確認

$ php -v
PHP 7.4.4 (cli) (built: Jun 12 2021 08:04:51) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies

オッケー！

最後に

php の複数バージョン切り替えは他に phpenv があるけど、今回はスター数の多い phpbrew をインストールした。

ちなみに今回 php 7.4.4 にしたのは AtCoder のバージョンに合わせたかったため。

NuxtのSSGで一部のページのルートが生成されない

Wed, 05 May 2021 05:00:00 GMT

副業で Nuxt を初めて使って SSG することがあり少しハマったのでメモ書きです。

プロジェクトの構成など

version

{
  "dependencies": {
    "@nuxt/content": "^1.13.1",
    "nuxt": "^2.14.12",
  }
}

説明用に簡略化してますが、ディレクトリはこんな感じで、

.
└── src
    ├── content
    │   └── post
    │       ├── 1.json
    │       ├── 2.json
    │       └── 3.json
    └── pages
        ├── post
        |   └── _slug.vue
        └── index.vue

やってることは

ルート	vue ファイル
/	src/pages/index.vue	`src/content/post/` 配下の json を nuxt/content を使って全て取得して一覧表示
/post/[slug]	src/pages/post/_slug.vue	`src/content/post/[slug].json` を nuxt/content を使って取得して詳細表示

という感じのオーソドックスな SSG のプロジェクトだと思います。

Nuxt の SSG における動的ルート

Nuxt の場合、クローラーが統合されていて動的ルート（今回だと /post/[slug] ）なども特に何もしなくても検出してルートを生成してくれます。このあたりは Gatsby や Next で SSG する際には自分でルートを設定する必要があったので、楽できて良いなぁと思っていたわけです。

nuxt/content を使って json ファイルを読み込んで動的にページを作成していましたが、実際に動かしてみるとちゃんと自動クロールしてくれているようでした。

一部のページのルートが生成されていない？

ある程度開発が進み、お客さんからフォードバックをもらうタイミングになって、一部のページでURLに直接移動した場合やリロードした場合に 404 になることが発覚しました。

ルートが生成されてないんだろうなということはすぐに分かったのですが、なぜ一部のページだけが？と不思議に思いながら原因を探りました。

自動クロール出来てなかったことが原因

結論から書くと

自動クロール出来てなかったページがあって、そのページのルートが生成されていなかった

ということでした。

もう少し詳しく説明すると、今回作っていたのは下記のような一覧ページと詳細ページがあるよくあるタイプのページ構成でした。

一覧ページを開くと、9件のデータのリンクが表示される
「もっと見る」ボタンを押下すると、10件目以降の全てのデータのリンクも表示される
データのリンクを押下すると詳細ページに遷移する

ルートが生成されてないページというのは、全て10件目以降のデータの詳細ページだということが分かりました。

この「もっと読む」ボタンを押下して残りのデータを表示する処理は JavaScript で State を変えて出し分けしているだけで、リンクを介してページ遷移しているわけでありません。

リンクを介して遷移する通常のページネーションなどであれば自動クロールしてくれるはずですが、今回みたいなボタンを押すと JavaScript が走って初めて表示されるようなリンクは自動クロールされないと思われるので注意が必要です。

例えば無限スクロールなども普通に実装すると最初に表示されていないリンクは検出されないはず。

対応

原因が特定できたので、2つの方向性で対応を考えました。

自動クロールされるように実装を変える
自分でルートを追加する

1 は自動クロールされるためだけに実装変えるのも気持ち悪いなと思い却下。 2 の方法で対応することにしました。

nuxt.config.js を編集してルートを追加

generate.routes プロパティを使って、自分でルートを追加することが出来ます。

nuxt.config.js

export default {
  generate: {
    dir: 'public',
    async routes() {
      const { $content } = require('@nuxt/content')
      const files = await $content('post')
        .only(['slug'])
        .fetch()
      return files.map(file => `/post/${file.slug}`)
    }
  },
}

シンプルにルートの文字列が入った配列を設定しているだけですね。

ちなみに generate.crawler プロパティに false を設定するとクローラー自体を無効化することも出来ます。

export default {
  generate: {
    crawler: false
  }
}

最後に

以上、Nuxt を使って SSG してちょっとハマったところでした。自動クロールは便利だなぁと思いましたが、場合によってはクロールしてくれないことがあるので注意が必要ですね。

余談ですが、今回初めてちゃんと Vue と Nuxt を触ってみて、 React が出来れば Vue も割と何とかなるという実感が得られたので収穫でした。

Gatsby v3に移行しました

Tue, 04 May 2021 12:00:00 GMT

このサイトは Gatsby という静的サイトジェネレータで作っています。 Gatsby は2021年3月に v3.0 がリリースされているので、遅ればせながらこのサイトを Gatsby v3 に移行しました。

基本的に公式の移行ガイドを参考に行います。 Migrating from v2 to v3 | Gatsby

Version差分

下記コマンドで古いパッケージをリスト表示出来ます。

$ yarn outdated

Package                          Current Wanted  Latest  Package Type    URL
@emotion/core                    10.1.1  10.1.1  11.0.0  dependencies    https://github.com/emotion-js/emotion/tree/master/removed-packages/core
@emotion/styled                  10.0.27 10.0.27 11.3.0  dependencies    https://github.com/emotion-js/emotion/tree/main/packages/styled
@types/react-helmet              6.1.0   6.1.1   6.1.1   dependencies    https://github.com/DefinitelyTyped/DefinitelyTyped.git
@types/yup                       0.29.10 0.29.11 0.29.11 dependencies    https://github.com/DefinitelyTyped/DefinitelyTyped.git
@typescript-eslint/eslint-plugin 4.9.1   4.22.0  4.22.0  devDependencies https://github.com/typescript-eslint/typescript-eslint#readme
@typescript-eslint/parser        4.9.1   4.22.0  4.22.0  devDependencies https://github.com/typescript-eslint/typescript-eslint#readme
axios                            0.21.0  0.21.1  0.21.1  dependencies    https://github.com/axios/axios
emotion-theming                  10.0.27 10.0.27 11.0.0  dependencies    https://emotion.sh
eslint                           7.15.0  7.25.0  7.25.0  devDependencies https://eslint.org
eslint-config-prettier           6.15.0  6.15.0  8.3.0   devDependencies https://github.com/prettier/eslint-config-prettier#readme
eslint-plugin-flowtype           5.2.0   5.7.2   5.7.2   devDependencies https://github.com/gajus/eslint-plugin-flowtype#readme
eslint-plugin-prettier           3.2.0   3.4.0   3.4.0   devDependencies https://github.com/prettier/eslint-plugin-prettier#readme
eslint-plugin-react              7.21.5  7.23.2  7.23.2  devDependencies https://github.com/yannickcr/eslint-plugin-react
formik                           2.2.5   2.2.6   2.2.6   dependencies    https://formik.org
gatsby                           2.28.1  2.32.12 3.4.0   dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby#readme
gatsby-image                     2.7.0   2.11.0  3.4.0   dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme
gatsby-plugin-emotion            4.5.0   4.5.0   6.4.0   dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-emotion#readme
gatsby-plugin-eslint             2.0.8   2.0.8   3.0.0   devDependencies https://github.com/mongkuen/gatsby-plugin-eslint
gatsby-plugin-feed               2.9.0   2.13.1  3.4.0   dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-feed#readme
gatsby-plugin-google-analytics   2.7.0   2.11.0  3.4.0   dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-google-analytics#readme
gatsby-plugin-manifest           2.8.0   2.12.1  3.4.0   dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-manifest#readme
gatsby-plugin-offline            3.6.0   3.10.2  4.4.0   dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-offline#readme
gatsby-plugin-react-helmet       3.6.0   3.10.0  4.4.0   dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-react-helmet#readme
gatsby-plugin-sharp              2.10.1  2.14.3  3.4.0   dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp#readme
gatsby-plugin-sitemap            2.8.0   2.12.0  4.0.0   dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sitemap#readme
gatsby-plugin-typegen            2.2.1   2.2.4   2.2.4   dependencies    https://www.gatsbyjs.org/packages/gatsby-plugin-typegen/
gatsby-plugin-typescript         2.8.0   2.12.1  3.4.0   devDependencies https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-typescript#readme
gatsby-remark-copy-linked-files  2.6.0   2.10.0  4.1.0   dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-copy-linked-files#readme
gatsby-remark-images             3.7.0   3.11.1  5.1.0   dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-images#readme
gatsby-remark-prismjs            3.9.0   3.13.0  5.1.0   dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-prismjs#readme
gatsby-remark-responsive-iframe  2.7.0   2.11.0  4.1.0   dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-responsive-iframe#readme
gatsby-remark-smartypants        2.6.0   2.10.0  4.1.0   dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-smartypants#readme
gatsby-source-filesystem         2.7.0   2.11.1  3.4.0   dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-filesystem#readme
gatsby-transformer-remark        2.12.0  2.16.1  4.1.0   dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-remark#readme
gatsby-transformer-sharp         2.8.0   2.12.1  3.4.0   dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-sharp#readme
moment-timezone                  0.5.32  0.5.33  0.5.33  dependencies    http://momentjs.com/timezone/
prismjs                          1.22.0  1.23.0  1.23.0  dependencies    https://github.com/PrismJS/prism#readme
react                            16.14.0 16.14.0 17.0.2  dependencies    https://reactjs.org/
react-dom                        16.14.0 16.14.0 17.0.2  dependencies    https://reactjs.org/
react-share                      4.3.1   4.4.0   4.4.0   dependencies    https://github.com/nygardk/react-share#readme
typescript                       4.1.2   4.2.4   4.2.4   devDependencies https://www.typescriptlang.org/
yup                              0.32.6  0.32.9  0.32.9  dependencies    https://github.com/jquense/yup

とりあえず全部 Latest にしました。下記コマンドでリスト化しつつアップデートするパッケージを選択できるので便利。

$ yarn upgrade-interactive --latest

エラーつぶし

Latest にするだけだとエラーだらけなので、一つずつ潰していきます。

gatsby-image を gatsby-plugin-image に移行

公式の移行ガイドを参考に Migrate

パッケージをインストール

$ yarn add gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp

gatsby-config.jsを修正

module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

移行用のコマンドが用意されているので実行。

$ npx gatsby-codemods gatsby-plugin-image

基本的にこれでエラーが出なくなればそれで問題ないと思いますが、自分の場合は TypeScript のエラーが出ていたので対処。

Property 'fluid' does not exist on type 'Pick<ImageSharp, "gatsbyImageData">'.

+ import { getSrc } from 'gatsby-plugin-image';
// 中略
      <SEO
-         image={
-           post?.frontmatter?.image?.childImageSharp?.fluid
-             ?.src
-         }
+         // @ts-ignore
+         image={getSrc(post?.frontmatter?.image)}
      />

はい。@ts-ignoreでエラー無視しましたw getSrcを使って画像のsrcは取得出来るようでしたが、この引数の部分で再びTypeScriptエラー。

Argument of type 'Maybe<{ readonly childImageSharp: Maybe<Pick<ImageSharp, "gatsbyImageData">>; }>' is not assignable to parameter of type 'ImageDataLike'.
  Type 'undefined' is not assignable to type 'ImageDataLike'.

ここはgatsby-plugin-typegenが型を自動生成してくれてる部分なので v3 対応してくれるまで待ちます。

emotion 関係

CSS in JS ライブラリですね

@emotion/core が @emotion/react に統合

まずはパッケージの加除

$ yarn remove @emotion/core
$ yarn add @emotion/react

コードの修正

- import { Global } from '@emotion/core';
+ import { Global } from '@emotion/react';

- import { css } from '@emotion/core';
+ import { css } from '@emotion/react';

emotion-theming が @emotion/react に統合され、Theme の型定義がシンプルに行えるように

更新前は styled コンポーネント内でprops.themeを使う場合 props が暗黙の any になってしまうのを防ぐために、 emotion の styled をラップしたコンポーネントを使って型定義を行っていましたが、更新後は型定義ファイルを作るだけで事足りるようになっていました。 Emotion - TypeScript

まずはパッケージの削除。（@emotion/react は install 済み）

$ yarn remove emotion-theming

src/types に emotion.d.ts を追加。

import '@emotion/react'
import { Theme as MyTheme} from './index'

declare module '@emotion/react' {
  export interface Theme extends MyTheme {}
}

ソースコードの修正。

- import { ThemeProvider as EmotionProvider } from 'emotion-theming';
+ import { ThemeProvider as EmotionProvider } from '@emotion/react';

- import styled from '../atoms/styled';
+ import styled from '@emotion/styled';

src/components/atoms/styled.tsx が emotion の styled をラップしているコンポーネントで最早不要なため削除。

eslint-config-prettier 関係

v8.0.0 で全ての設定が prettier に統合されているみたい。

Error: "prettier/@typescript-eslint" has been merged into "prettier" in eslint-config-prettier 8.0.0.
Error: "prettier/react" has been merged into "prettier" in eslint-config-prettier 8.0.0.

eslintrc.js の修正。

const path = require('path');
module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    `eslint-config-react-app`,
    'plugin:react/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:prettier/recommended',
-   'prettier/@typescript-eslint',
-   'prettier/react',
+   'prettier',
  ],
  // 中略
};

これで全てのエラーを潰しました。

最後に

Gatsby v3 に無事移行できました。途中からは Gatsby v3 への移行というより、他のパッケージの更新に伴うエラーつぶしでしたがw

v3 での新機能は主に大規模サイトでのローカル開発の高速化やビルド時間の短縮、パフォーマンス改善のようですが、基本的にメリットしかなさそうなので移行できて良かったです。

個人事業主になったので事業用のWebサイト作った

Tue, 08 Dec 2020 12:00:00 GMT

フリーランス（個人事業主）として活動していくにあたり、屋号ドメインで事業用のWebサイトを作りました。技術的な発信などもこちらで行っていく予定です。

URLをのせた名刺はかなり前に完成していたので、やっと名刺を完全体にすることが出来ましたw

事業の屋号はbeyooon（ビヨーン）

前向きな印象
遊び心

といった要素を屋号に盛り込みたいなと思い、バネが伸びるイメージで**「beyooon（ビヨーン）」**と付けました。響きに遊び心もあってなかなか気に入ってます。「～を越えて」といった意味で英単語のbeyondともかけています。

遊び心や好奇心を大切にしながら、「びよ〜ん」と日々前に進んでいきたいと思います。

Web制作やアプリ開発を中心に活動

新しい技術を使ってチャレンジングに活動していきたいと考えています。

具体的には、

静的サイトジェネレーターを使った爆速Web制作（このサイトがそうです）
Flutterを使ったiOS/Androidアプリケーション開発
Laravelを使ったWebアプリケーション開発

を中心に行っていきたいと考えています。

これらに興味のある方や仕事を頼みたい方はお問い合わせから連絡をいただければ嬉しいです。

仕事ください。（切実）

このWebサイトでこだわったところ

Gatsby製の爆速サイト

このサイトはReactの静的サイトジェネレーターであるGatsbyという技術を使って作りました。技術的な詳しい部分は他の記事で紹介したいと思いますが、Web制作で主流となっているサーバーにWordPressをインストールする方法と比べて、高速かつセキュリティーも高いです。

こちらはWebサイトをGoogleが評価してくれるLighthouseの結果ですが、このWebサイトは全ての項目で満点を取れました。（パフォーマンスはタイミングによって若干変動します）

前々からこの構成で作ってみたかったので、やっと実現できました。

ダークモードの切替

右上のメニューバーの切替ボタンからダークモードを切り替えることが出来るようにしました。（右上にボタンがない場合は上に少しスクロールするとヌルッとメニューバーが現れると思います）

バッテリー消費が気になる方などはぜひダークモードに切り替えてもらえればと思います。

機能はさらに充実させていく予定

制作実績ページ
全文検索
ブログをカテゴリーで絞り込み
ブログをタグで絞り込み

などなど追加したい事がまだあるので、徐々に作り込んでいくつもりです。

最後に

技術的な知見や事業に関係すること、その他雑記などこちらで発信していきたいと思いますので、今後ともよろしくお願いします。

Markdownチートシート

Sun, 06 Dec 2020 08:40:32 GMT

自分用のMarkdownチートシートです。アイキャッチ画像は適当。

見出し

## 見出し h2
### 見出し h3
#### 見出し h4

見出し h2

見出し h3

見出し h4

h5以降はスタイルを設定していないので使わない。

インラインテキスト装飾

*イタリック*になる
**太字**になる
~~打ち消し線~~
インラインで`code`を挿入する
[Twitter](https://twitter.com/hideyuk1_jp)

イタリックになる

太字になる

~~打ち消し線~~

インラインでcodeを挿入する

Twitter

テーブル

| Head | Head | Head |
| ---- | ---- | ---- |
| Text | Text | Text |
| Text | Text | Text |

Head	Head	Head
Text	Text	Text
Text	Text	Text

コード


```js:title=hoge.js
const hoge = 'hoge';
console.log(hoge);
```

hoge.js

const hoge = 'hoge';
console.log(hoge);

画像

![sampleAlt](./thumbnail.jpg)

引用

> 文頭に>を書くと引用になる
> 複数行にまたがる場合は、全ての行の文頭に>を書く
> > ネストも
> > 出来るよ

文頭に>を書くと引用になる複数行にまたがる場合は、全ての行の文頭に>を書く

入れ子にも出来るよ

水平線

------