Sassyブログ

埼玉県在住のシステムエンジニアです。多ジャンルなブログですが、基本的にはIT関連の内容を中心に発信していきます。

IT・ソフトウェア

ReactでSmartHRと連携して人事データを可視化するツールを作ってみた

概要 レポート出力結果 テナントIDについて アクセストークンについて ランキング参加中プログラミング 個人開発でSmartHRと連携したレポーティングツールを作成してみました。 simple-hr-reporter.saikicks.net 概要 このツールはSmartHRと連携してAPI経由…

最初のコミットにgit rebase -iを含める方法

少し前にjser.infoにて取り上げられていたWebContainersを試しています。 クイックスタートのページを見てサンプルプロジェクトを作ってnpm initして~、githubにプッシュして~とやっていたのですが、 チュートリアルのページがあったのでやはりそちらでや…

react-router v6 のサブルートのパスが一致しない

ランキング参加中プログラミング 現在個人プロジェクトでReactを使って開発しています。 その中で react-router v6 を使用しているのですが、v5とは仕様が変わっていて上手く動かなかったので少し内容を記事に書き起こそうと思います。 まずコンソールに表示…

"Error: connect ECONNREFUSED 127.0.0.1:5432" は突然に…

ある日突然運用中のアプリが開け無くなりました… ブラウザのコンソールには以下の表示が… Uncaught (in promise) TypeError: Failed to fetch とりあえずサーバーにログインしてバックエンドのプロセスが起動しているかPSコマンドで確認 プロセス一覧に表示…

PythonでGoogleDriveを操作するのにPyDrive2が便利

始めに 最近DBのバックアップを取るためにバックアップ先のストレージとしてGoogleドライブを利用することとしました。 バックアップは定期的に行いたく、プログラム上でバックアップファイルを収集して、それらをアップロードしようと考えています。 言語は…

FoalTSでDIしているサービスクラスを環境毎に出し分ける

始めに 背景 公式ドキュメントのどこを見たか ハマりポイント 1. 抽象クラスに定義するプロパティの説明がない concreteClassConfigPath concreteClassName defaultConcreteClassPath 2. export時のクラス名を揃える 最後に 始めに FoalTSというTypeScript製…

Udemyの大幅値下げセールを利用してWeb3.0を学ぼう!

今回はUdemyのセールで紹介されていた「【Web3.0アプリ開発入門】ReactとSolidity言語で簡単ブロックチェーンWebアプリ開発を体験してみよう!」という教材に興味があったので受講してみました! 【Web3.0アプリ開発入門】ReactとSolidity言語で簡単ブロック…

WordPressはもう古い?ヘッドレスCMSとは?WordPressとどう違う?JAMStackによる新しいWebサイトの在り方

どうもSassyです! 最近JAMStackについて興味を持っています。 JAMStackを調べていると出てくるのがヘッドレスCMSですね。 CMSと聞くと真っ先に思いつくのがWordPressかなと思います。 CMSとはContentsManagementSystemの略でWebサイトのコンテンツを管理す…

【ブログ運営者必見】記事校正に使える?校正サービスShodo(ショドー)を使ってみた

始めに どうもSassyです! 皆さんはブログの採取チェックにどれだけ時間をかけていますか? 私はサラッと目を通して気になったところは直して、後は気にせずそのままリリースしてしまっています。 そんな雑なチェックの為後々見返したときに、誤字や脱字が多…

TweepyでTwitterAPIを利用し始めた時に遭遇しそうなエラーの対処法

始めに 前提 453 - You currently have Essential access which includes access to Twitter API v2 endpoints only.・・・省略 1. In English, please describe how you plan to use Twitter data and/or APIs. The more detailed the response, the easier…

【JavaScript】pintoraを使ってテキストでダイアグラムを書いてみる

最初に 今回はpintoraというJavaScriptライブラリを使用してテキストでダイアグラムを書いてみようと思います! pintoraはブラウザとNode.jsで動作する拡張可能なJavaScriptライブラリです。 執筆時点ではActivity Diagram、Component Diagram、Entity Relat…

JavaScriptでのダミーデータ作成にはfalsoが便利!

Jser.infoというJavaScriptの最新情報を紹介するブログにてfalsoというダミーデータを生成してくれるライブラリが紹介されていたので手元で簡単に使ってみました。 falsoについてはこちら github.com githubのサンプルコードを使ってどんなデータが作れるの…

Jestでイベントリスナーのコールバック関数を検証する

画面のテストコードを書いている時に、画面を閉じた時やスリープした時に発生するイベントのコールバック関数の動作をテストしたい時があるかと思います。 そんな時にどうテストを書いたら良いかを以下にサンプルコードを交えながら備忘録として残していきま…

StorybookでknobsからControlsに書き換える

Storybook上でPropsの値を変更して表示などの確認を行う際にはaddon-knobsをインポートして使っていましたが、今後廃止予定となるため今後はControlsを使って実装するようになっていくかと思います。 既にaddon-knobsは deprecated となっています。 www.npm…

【React】useRouteMatchが返す戻り値をuseEffectの依存関係に含めない方がよい

react-router-dom に用意されている useRouteMatch というhooksを使って2種類のURLをマッチングして、パスパラメータを取得し数値に変換してからオブジェクトを生成してStateに保存するカスタムフックを作成しました。 このカスタムフックは特定の画面で使用…

画面幅を縮めたり広げたりすることで要素がカクカク左右や上下にずれる問題はマージンの自動算出による小数pxが原因

問題 これはコンテンツ部分の左右マージンにmargin: 0 auto;をしており、画面幅を変えてもコンテンツが中央に配置されるようにしていた。 コンテンツ内にはSVGで描画した円の中心にアイコンを配置していたのだけど、画面幅を変更するとSVGで描画した円が左右…

SES会社を見極めたい!見分けるポイントからメリットデメリットまでを解説します!

対象読者 まず始めに SESとは? SES会社を見分けるポイント 1. 勤務地があいまい 2. 資本金に対して社員が異様に多い 3. 「未経験OK」と求人情報に記載がある SESってそんなにヤバいの? SESのメリット/デメリット メリット 派遣により1つの企業で働くわけで…

【備忘録】error: insufficient permission for adding an object to repository database .git/objects でgit pullできないときの対処法

問題 AWS上で運用しているボットのリポジトリを最新化しようとしてgit pull したときに以下のようなエラーが発生していた。 ちょいちょい頻発するのだけど、毎回どう解消したっけ?ってなるので備忘録として残しておきます。 error: insufficient permission…

解決できない問題に悩む時は「テディベア効果」を試してみよう

どうもSassyです! 駆け出しエンジニアの皆さん!「テディベア効果」というものをご存じでしょうか? どなたでも当てはまりますが今回はITエンジニアをベースに説明させていただければと思います。 「テディベア効果」というのは物事に行き詰った時に誰かに…

stylelint v13 → v14へマイグレーションしました

先々週から開発タスクをやりながらstylelint v14へのマイグレーションを少しづつ行なっていました。 SCSSを使っている方なら手順書にサンプルが記載されているのですんなり移行できるのではないかなと思いますが、 私の場合ですとCSS-in-JSで開発をしており…

【最新版slackアプリ開発】久しぶりにslackアプリを作った時にslackbotライブラリでは使えなかったのでBoltに移行した

始めに Slackアプリの作成と設定手順 Slackアプリを作成します ImcomingWebhooksを有効化します WebSocketを有効化します Event Subcriptionsを有効化します アプリを起動して動作確認する 最後に 始めに もう1年半前くらいに作ったSlackアプリを久々に動か…

RxJSで実装したretry処理のretry回数を検証する方法

今回はエラーの種別ごとに最大リトライ回数を取得して指定回数分リトライかける実装のテストコードを書いた時に、苦戦したのでその解決策を残そうと思います。 世の中に同じ思いをしている方はいるのですが、アンサーを見てもあまりピンとこなかったので、メ…

【備忘録】MariaDBでパスワードやユーザー名、権限を変更するコマンド

WordPressでDBを構築する時ついつい忘れがちなのでメモとして残します。 ※[ ]で囲っている部分は置き換えて下さい。 ※MariaDBで動作確認済み パスワード変更コマンド データベースを切り替える use mysql パスワードを変更する update user set password=PAS…

【Wordpress】デモサイト用に立てたAWS EC2からロリポップへWordpressのデータ移行する際の手順と注意点

始めに 準備 Wordpress本体をAWSからダウンロードする DBデータをエクスポートする 手順 ロリポップへwordpressをアップロードする DB作成 DBデータをインポートする wp-config.phpを編集する 公開設定を行う 最後に 始めに WordPress制作のお仕事をいただい…

HTMLVideoElementのイベントハンドラの悪夢

イベントハンドラとは? 仕様が複雑化するとイベントハンドラにロジックを書くのはバグの温床になりやすい 解決方法はあるのか? 最後に 参考 最近JavaScriptでHTMLVideoElement周りをゴリゴリ触っています。 そこで得た知見を共有できたらと思い記事として…

LightHouseを使ってサイトのパフォーマンス改善を行った

経緯 LightHouseとは? 品質を計測してみる どのように対応したのか Performance Accesibillity Best Practices SEO 最後に 今回、私が開発・運用しているHiramekiというサービスのパフォーマンスをLightHouseというツールを使って改善した話をしたいと思い…

おススメWordpressプラグイン!【Organize Media Folder】を導入してメディア管理を便利にする方法

今回はWordpressで扱う画像が多くなり、画像や動画ファイルを整理したい時におすすめのプラグインをである【Organize Media Folder】をご紹介します! こちらは【Organize Media Library by Folders】の後継であり、【Organize Media Library by Folders】は…

おススメWordpressプラグイン!【Category Order and Taxonomy Terms Order 】を導入してカテゴリの並び替えをできるようにする方法

背景 インストールから使い方まで AWS環境化にてFTP認証情報を入力せずに突破する方法について プラグインを入れずに順番を変更したい場合について 最後に 今回は【Category Order and Taxonomy Terms Order】というカテゴリの順番を並べ替えできるようにす…

Safariで動画を開いた時に途中から再生できなかった時の対処法

問題 原因 対処方法 問題 ページを開いたときに途中から再生を行う機能を実装したのですが、なぜかSafariでは途中再生がされず最初からの再生となってしまう事象が発生していました。 Chrome、FireFox、Edgeでは等のブラウザではしっかり途中から再生されて…

jest v27.2.0へのアップデートで発生した不具合の回避方法について

問題 2021/9/17時点で確認された不具合 原因 対処方法 問題 仕事先ではRnovateを使用して週1でライブラリのアップデートを行っています。 Renovateって何?って方はこちらから www.whitesourcesoftware.com メジャーバージョンアップ時はその対象のモジュー…