
It's my life

2019年のエンジニア活動を振り返り。Vue.jsからReactまでフロントエンド技術の習得、テストコードやCI/CDへのこだわり、Go・Rust・Nim等の新言語挑戦、Chainerを使った機械学習、AWS Summit登壇など1年間の成長と課題をまとめます

tubone BOYAKIブログ用にSVG形式の新しいロゴを作成した過程を紹介。サメをモチーフにしたアイコンとMeriendaフォントを組み合わせ、テーマカラーの緑で仕上げたオリジナルロゴのデザイン制作記録です

Gatsby.jsのブログにEstimated Reading Time(読了時間)を実装する方法を解説。gatsby-remark-reading-timeプラグインの導入手順に加え、滞在時間が13.8%向上したBrian Crayの実験結果など、読了時間表示の歴史と効果も紹介します

GitHub API v4(GraphQL)とPython Requestsを使い、masterブランチへのPR情報からリリース実績を自動取得するスクリプトの作り方を解説。GraphQLの利点やISO8601時刻変換、BOM付UTF-8 CSV出力など実践的なTipsも紹介します。

大学時代に初めてJavaScriptで書いたプログラムを振り返るエッセイ。学籍番号のチェックディジット計算ロジックを解明し、HTMLとJSで計算機を実装した体験談を通じて、未経験からプログラミングに踏み出す大切さを伝えます。

プログラミング言語Juliaの入門として、ライプニッツの公式とガウス=ルジャンドルのアルゴリズムで円周率を計算。JuliaのLLVMベースJITや動的型付けの特徴を解説しつつ、BigFloat対応の実装コードと精度比較の結果を紹介します。

Nuxt.jsとVue Composition APIでVuexのStateをReactiveに扱う方法を解説。toRefsを使ったリアクティブなストア作成、setup内でのstore取得パターン、TypeScriptでの型定義の課題と解決策を実践コード付きで紹介します。

Nuxt.jsの@nuxtjs/toastモジュールでGlobal OptionとRegister機能を活用し、toast設定を共通化する方法を解説。nuxt.config.tsでの一括設定やtoast.global呼び出しにより、コンポーネント側のコードを大幅に簡潔にできます。

Nuxt.jsのmodulesをVue Composition APIで利用する方法を@nuxtjs/toastを例に詳しく解説。ClassAPIとの書き方の違いや、setup内でContextからモジュールにアクセスする実装パターン、エラーハンドリングとの組み合わせ方を紹介します。

Nuxt.jsでparticles-bg-vueを導入してかっこいいパーティクル背景を実装する方法を解説。pluginsでの読み込み、layoutsでの共通適用、Composition APIでの利用例に加え、canvasObjectによるスタイル調整方法も紹介します。

Hadoopのマスコットキャラである黄色いゾウの由来を、産みの親Doug Cuttingのインタビューから徹底調査。息子が愛したぬいぐるみの名前がHadoopだった逸話や、ロゴとぬいぐるみのギャップについて考察するユニークな技術コラムです。

GitHubに90日間毎日コントリビュートし続けた体験記。Write Code Every Dayの実践で得た実装スピード向上やCI知識の成長、一方で寝不足やアニメ断ちなどリアルな代償もまとめた振り返り記事です。

PythonのCLIパーサーdocoptがNim言語でも使えることを発見し、実際にCLIアプリを構築した体験記。Nimの実行速度やトランスパイルの特徴、parseoptとの比較、docoptによるUsageベースのコマンドライン解析の書き方を紹介します。

GASとAPI FLASHでWebページのスクリーンショットを定期取得し、SlackAPIで通知するシステムの構築方法を解説。ClaspによるTypeScript開発環境、JestでのURLFetchAppモック化テスト、GitHub Actionでの自動デプロイまで紹介します。

Slackの絵文字スタンプを組み合わせて「謝罪ピラミッド」「インベーダゲーム」「福笑い」などのユニークな表現を作るスニペット集。コピペですぐ使えるSlackスタンプアートで、チームのコミュニケーションを楽しくする方法を紹介します。

Mac環境構築のAnsible+ServerspecワークフローをクリーンなmacOS環境で検証するため、Azure DevOps Build PipelineでCI化する手順を解説。無料でmacOSイメージが使えるCIの選定理由やYAML定義の書き方を紹介します。

Ansibleで構築したMac環境をServerspecで自動テストする方法を解説。RSpecベースのテストコード作成手順、パッケージインストール確認・コマンド結果検証・ファイル内容チェックの具体例をコード付きで紹介します。

AnsibleでMacの開発環境構築を自動化する方法をInventory・Role・Playbookの設定手順に沿って解説。Homebrewモジュールによるパッケージ管理、lineinfile/blockinfileでのPATH設定、Makefileによる一発実行まで紹介します。

Netlify Formを使ってGatsby.js製の静的サイトにお問い合わせフォームを実装する方法を解説。data-netlify属性の設定、スパムBot対策のhoneypot設定、フォーム送信通知の確認手順まで、コード付きで紹介します。

Write Code Every Dayに挑戦してGitHubに30日間毎日コントリビュートし続けた体験談。社会人向けにテーラリングしたルール設定、毎日コードを書くことで得られたメリットと慢性的な寝不足などのデメリットを正直に振り返ります。

JSON ResumeとAPI With GitHubを使って職務経歴書をJSON APIとして公開する方法を解説。JSON Resumeのスキーマ各項目(職歴・学歴・スキルなど)の書き方を海外事例も交えて紹介し、resume-cliでHTMLレジュメを生成する手順もまとめました。

SentryをVue.js(TypeScript)プロジェクトに導入してフロントエンドのエラーをリアルタイムに検知する方法を解説。main.tsへのSentry初期設定、エラー発火時の通知確認、Slack連携によるリアルタイム通知まで、実装手順をコード付きで紹介します。

GitPitchを使ってMarkdownからおしゃれなプレゼンテーションを作成する方法を紹介。Azusa Colorsを参考にした配色設定、背景画像やフォントのカスタマイズ、GitHub BadgeのREADMEへの貼り方まで、実例付きで解説します。

Vue.jsでparticles.jsを手軽に導入してかっこいいパーティクルエフェクトを実装する方法を紹介。vue-particlesのインストールからmain.tsでの設定、CSSによるz-indexの調整まで、コード例付きでわかりやすく解説します。

Nightwatch.jsのE2Eテストが動かない原因はnode_modules内のChromeDriverにあった。vue-cliが依存するChromeDriverのバージョン不一致を特定し、CircleCIのDockerイメージ上で解決するまでの調査過程と対処法を詳しく解説します。

VirtualBox用のMetasploitableをHyper-vで動かす手順を解説。VMDKからVHDXへのディスク変換にMicrosoft Virtual Machine Converterを使い、PowerShellでの変換コマンドから仮想マシン作成・起動までの流れをまとめました。

CircleCIでChromeDriver v76非対応エラーが発生した際のトラブルシューティング記録。DockerイメージのChrome Betaへの差し替えやバージョン固定など、E2Eテスト環境のChrome互換性問題への対処法を試行錯誤した過程をまとめました。

GitHub Actionを使ったCI環境の構築手順を紹介。YAMLでのWorkflow定義、PythonのPytestによるMatrixテスト、Trigger設定など、GitHub純正CIの基本的な使い方を実例付きで解説します。

Netlify CMSとGatsbyを使ったブログ構築の手順を解説。GitHubとの連携、CMS管理画面の設定、独自ドメインの適用まで、静的サイトジェネレーターを使ったHeadless CMSブログの作り方を初心者向けにまとめました。

余ったPCやスマホを活用してSETI@homeで地球外知的生命体探査に貢献する方法を解説。BOINCのインストールからアカウント作成、分散コンピューティングによる宇宙電波解析タスクの実行手順まで、初心者向けにわかりやすく紹介します