FastApiでMongoDBを使ったREST APIをつくる際にBeanieを使うことで簡単に実装、操作できたのでその方法を忘備録として残す。

PythonのFWであるFastAPIの開発環境をコンテナで構築し、VScodeからコンテナ内で FastApiのREST APIを実装、動作させる方法をまとめる

dockerコンテナ上でpoetryを使ってPythonの開発環境を作りながら、poetryの使い方をまとめていく。

DockerでFastApiでの開発時、poetryでパッケージをインストールする際にrequirements.txtを読み込んでインストールする方法を調べた。

PythonのFastApiでデータをインスタンス、辞書、JSON文字列にそれぞれシリアライズ・デシリアライズする方法を調べたので忘備録として残す

pythonで色々な条件でリストを生成できるリスト内包表記の使い方について実装しながらまとめてみた。

Pythonで実装時にリストの編集でよく使うことになるpythonの組み込みの高階関数のmapとfilterについて仕組みと使い方をまとめておく

Pythonの並行処理ライブラリであるasyncioを使って、非同期処理を使った並行処理をする方法とそれに関わる用語等をまとめておく

FastApiのpydanticを使ったリクエストとレスポンスのバリデーションチェック方法と発生する例外のハンドリング方法をまとめる。

Pythonの高速フレームワークであるFastApiでREST APIを実装する際によく使うレスポンスの実装パターンとその動作についてまとめておく。

PythonnのフレームワークのFastAPIをVScodeの拡張機能「DevContainers」を使って コンテナでリモート開発する方法をまとめておく。

pythonでFlaskやFastAPIで開発する際に外部サーバーとして使用する 「Gunicorn」と「Uvicorn」についてそれぞれの特徴と違いを調べたのでまとめておく。

Pythonのフレームワークであるflaskの開発環境をコンテナで構築し、VScodeからコンテナ内でflask製の基本的なREST APIを実装、動作させる方法をまとめる

Pythonでスクリプトやアプリケーションを作るときの最低押さえておくべき例外処理の用語や基本的な使い方をまとめておく。

Pythonでログ出力を行いたい場合はloggingを使うことになるのでloggingの基本的な使い方や用語をまとめて忘備録として残しておく

pythonの標準で使える便利機能であるデコレーターの使い方とつかいどころをまとめておく。

pythonのpytestで実行中のログやメッセージをターミナル（標準出力）に出力する方法を調べたので忘備録として残す

dockerコンテナ上のpytestの実行とカバレッジ計測をVScodeとコマンドを使って行い、結果を確認をする方法をまとめる。

Pythonのflaskで作ったREST APIのレスポンスの日本語が文字化けしたので対応を方法を忘備録として残しておく。

Dockerコンテナを使ってPythonのFlaskを使った開発ができる環境を作成し、その中でFlaskの超簡単APIを作ってgunicornで動作させ、動きを確認する

PythonのFlask製のREST APIでpydanticを使ってリクエストとレスポンスのバリデーションを行う方法をまとめる。

PythonのWEBフレームワークであるFlaskで実装したREST APIで独自のカスタム例外クラスを作り、エラーハンドラー関数を使ってエラーハンドリングする方法をまとめる

pythonのFlask製のREST APIからMongoDBを使う方法として「PyMongo」と「Flask-PyMongo」を使う方法をまとめる

pythonのflaskのREST APIをプロジェクト構成やモジュールの役割のよる分割を考慮しながら実際に開発に使えるREST APIを実装してみた

dockerを使ってPythonのフレームワークであるflaskで実装したREST APIにPythonで書かれた負荷ツールであるLocustを使って負荷をかける方法をまとめる。

windowsにNode.jsのversion管理を行うことができるnvm（nvm for Windowsではない）をインストールしたのでその導入手順を紹介する。

ReactのGatsby製ブログをnetlifyにデプロイした時にnodeのversion違いによるエラーが発生したのでversion指定してnetlifyにあげる方法をまとめる

Dockerを使ってMongoDBコンテナを作成し、WebベースのMongoDB管理インターフェースであるmongo-exporessを使って操作をしてみる。

Dockerを使ったコンテナ作成時に環境変数を設定する方法を調べたのでまとめる。

pytestでwith pytest.raisesを使って例外（Exception）のテストを行う方法を忘備録として残す

VScodeの拡張機能をでスクリプトで一括インストールする方法を調べたのでまとめておく。

dockerコンテナ作成し、コンテナ内で外部サーバーのgunicornで動作させているflask製のAPIをVScodeでデバッグする方法をまとめる。

pytestを実施する際にテスト対象モジュールとは関係のないモジュール等をモックに置き換える必要がある。その際の@patchやmonkeypatchの使い方についてまとめた

Dockerコンテナを使ってPythonのWEBフレームワークであるDjangoの開発環境を構築した場合のVScodeを使ったデバッグ方法をメモしておく

Reactの開発環境をDockerコンテナを使って構築し VSCodeからコンテナ開発を行う方法をまとめる

Flask製REST APIをREST APIを効率的に実装するためのライブラリである「Flask-RESTful」を使って実装をしたので基本をまとめておく

Python言語の関数の引数の「位置引数」、「キーワード引数」、「デフォルト引数」について使い方をまとめた

dockerコンテナを使ってFlaskのREST APIアプリケーションをGunicornサーバーのカスタムアプリケーションとして起動する方法をまとめる。

MongoDBについて具体的なイメージが湧かなかったのでDockerを使ってMongoDBコンテナを作成し、MongoDBをmongoshで操作して調べてみた

FlaskのライブラリであるBlueprintを使ってREST APIのリソースごとにルーティングを整理したので使い方を忘備録として残す

Pythonのモジュールやモジュールの中の関数等に対してのimportやfrom~importの使い方について調べたので忘備録として残す。

Pythonの超基本的なことだが使う言語やフレームワークでモジュールとパッケージの 概念が変わったりするのでPythonにおけるモジュールとパッケージ覚えておくために整理した

flaskのREST APIを効率的に実装するためのライブラリである 「Flask-RESTful」のabort関数の使い方を調べたのでまとめておく

今までの開発でよくCORSがでて、通信ができないことが多々あったが適当に調べて対応していた。 どういう仕組みなのかについてちゃんと調べてみたので忘備録として残しておく。

OpenAPIを使ってREST APIの設計をするにあたってOpenAPIとSwaggerについて調べたことや、その違いについてを忘備録としてまとめておく。

javascript(TypeScript)のfind、findIndex、indexOfメソッドの違いとそれぞれの使いどころについて動作確認してまとめてみた。

Docker-composeを使って開発する場合、データを永続化させる仕組みとしてvolumeオプションがある。volumeオプションの設定方法や使いどころをまとめておく

従来はfor文の二重ループなどを使って突合せをしていたが java8のstreamのflatMapとfilterを使って、二つのListを突合せすることができた。

Reactでinput 要素を扱う時、AngularやVue.jsみたいに変数を紐づけて書くと bindされるかと思ったがinputに値が入力できなくなったので原因調べてみた。

javaでLocalDateクラスを使った日付の前日、後日判定を行う方法とChronoUnitを使った二つの日付の差を算出方する方法を忘備録として残す。

Gatsbyでブログを作成していて、hover時にstyleを変更させたいところがあり、Reactでhoverイベントを検知する方法を調べて実装してみたので紹介する。

Gatsby製の当ブログをスマホでみても問題なく表示されるようにするためreact-device-detectのisMobileを使ってmobile対応をしたので、その方法をメモ

VScodeの拡張機能「Dev Containers」を使ってコンテナ開発環境での開発を効率的に行う方法をまとめる。

マイクロサービスアーキテクチャでREST APIを作ったのでREST APIやHTTPついて色々調べたことをまとめておく。

reactでCSS in JSのEmotionを使ってmodal画面の実装する方法。サンプル実装ではmolal画面でHooksのuseStateを使ってタグ選択画面を作る

TypeScriptの基本となるTypeAnnotation(型アノテーション)は結構パターンがあるので、その使い方とサンプルをまとめておく。※型注釈とも呼ばれる。

CSS in JSのemotionの標準で提供されているGlobalコンポーネントを使ってreactでglobalStyleを定義する方法を実装し、その使い方をまとめる。

CSSのFlexBoxで子要素を均等幅で横並びにしたいが、子要素の中身の文字数等が違う場合に大きさが変わってしまいちょっと詰まったので対応方法をメモ。

javascriptのプロトタイプチェーンについて仕組みや使い方よくわからなかったので、調べて動作を確認してみた。

reactでアニメーションを実装する際のCSS in JSライブライのEmotionの@keyframesやanimationプロパティの使い方をメモ。

ES6の分割代入をTypeScriptで使う場合の動作を実装しながら確認してみた。

javascriptにおける非同期通信処理（async）をjavascriptライブラリの【axios」を使って行うパターンをサンプル実装し、その動作を確認して使い方をまとめる。

javascriptにおける非同期通信処理（async）をXMLHttpRequestオブジェクトを使って行うパターンをサンプルReactで実装し、動作を確認して使い方をまとめる。

javascriptにおける非同期通信処理をモダンブラウザの標準機能であるfetchAPIを使って行う方法を調べて実装してみたので忘備録として残す

dockerコマンドを毎回、vscodeのターミナルで打つのが面倒なのでtask機能を使ってショートカット実行できるようにしてみた。

React + EmotionでReactHooksのuseStateを利用して、動的に要素のstyleを変更する方法をサンプル実装して確認する。

ReactHooksのuseRefの使い方とuseStateとの違いについて調べてみた。 またuseStateとuseRefを使ったサンプルもいつか紹介します。

ReactHooksのuseContextの使い方をサンプル実装しながら確認したので忘備録として残す。propsを使わずにプロパティを渡せるので便利そうです。

ReactでCSSinJSのEmotionのThemeProviderを使って簡易darkmodeを 実装しtheme切り替えの動きを確認してみる。

Dockerコンテナ上に構築したReactプロジェクトのデバッグをVScodeから行う方法をまとめる。

ReactのNext.jsの開発環境をdockerとVScodeを使って作成し、VScodeからコンテナ開発する方法をまとめる。コンテナ作成はdocker-composeで行う

Pythonを使って開発をすることになったためDockerを使ったPythonのコンテナ開発環境をVSCodeで作る方法をメモしておく。

【java8】streamのCollectorsクラスのgroupingbyの使い方を実装し確認する。groupingbyは指定した条件でgroupingし、Mapで取得できる。

java8のstreamAPIを使ってオブジェクトのListの重複チェックを行い、重複しているオブジェクトの削除または抽出をする方法をまとめておく。

javascriptのforEach文の中では基本はbreak、continueは使えないが書き方によっては左記と同じ動作をさせることができるので、その方法をメモ。

vscodeでリモート開発時にプロキシが未設定だったため拡張機能がインストールできなかったので、vscodeプロキシ設定をする方法をまとめておく

ReactとTypeScriptでCSS in JSのEmotiionのcsspropsで使う方法と実装サンプルをまとめておく。

【ReactHooks】useStateでオブジェクト配列をstateに設定した場合の扱い方について、サンプル実装を行いながら動作を確認した。

ReactでCSS in JSのEmotionを使う時の基本的な記法（StringStyles、ObjectStyle、styled-component風）を簡単にメモしておく。

codesandboxのプラン変更で、freeプランでもsandboxはプロジェクト数、devboxは時間制限付きになりブログで使うのが難くなりStackBlitzに乗り換えた

javascriiptでオブジェクトのプロパティのチェックのいつかの方法を忘れそうなので、忘備録として残す。

VScodeの便利機能で独自スニペット（ユーザースニペット）を登録する方法をメモ。よく利用する構文などは登録しておくことでコーディングの時間短縮が図れる。

javascriptでArrayを任意の区切り文字で区切った区切り文字列に変換したり、またその逆でArrayを任意の区切り文字の文字列に変換する方法をまとめる。

プロジェクトでAngularを扱ったのでの次使う時にスムーズに理解できるようにルートモジュールの使い方や@NgModuleの詳細ををまとめて残しておく。

@NgModuleのimportsとexportsを使って共有モジュールを作り、異なるモジュール間でコンポーネントを共有する方法をまとめておく

reactで画面上の最上部へ戻る処理（scrollToTop）をCSS in JSのEmotionを使って行う方法をサンプル実装する。

javascriptでエラーチェック処理を実装する時、値のnull、blank、undefinedのチェック方法を調べてみたので動作確認してまとめておく。

react + emotion11におけるメディアクエリー(@media)をサンプル実装し使い方を確認した。

Reactのjavascriptソースで「return !!value」というちょっと見かけない書き方を見つけたので、使い方と動作を調べたみた

everyメソッドを使ってReact(typescript)のタグ絞り込み機能をサンプル実装してみる

ReactのGatsby製ブログでドラックアンドドロップのタグ選択させたいと思い、調べると「react-draggable-tags」というパッケージがあったので使い方を紹介する

reactのライブラリのReact Hook Formのversion7を使って画面Formを実装した。エラーハンドリングや非同期通信方法のサンプルも作ってみた。

javascriptで使っているJSON.stringifyの使い方を少し詳しく 調べてみたのでメモ。 特にコンソールにオブジェクトを出力する時などに使えそうな方法があった

ReactHooksの「React.memo」を使ってコンポーネントのレンダリングを効率化する方法を調べたのでまとめる。コンポーネントをmemo化することでコストを削減する

ReactとGatsbyでデバイスがダークモードかどうかをjavascriptのメディアクエリを使って判定する方法をメモ。

Reactの関数でonClickやonChangeなどのeventオブジェクトを受け取る方法を忘備録として残す。

CSSGridを【React × Emotion】で使う際の「grid-template-columns」の詳しい使い方についてサンプルをまとめておく。

Gatsby製の当サイトをspeedinsightsで調べたところcodeSplitngしろと言われるのでReactでcodeSplitnする方法を調べて見た。

Adsenseで広告をつけているのだが、よく広告が未取得（ data-ad-status="unfilled" ）で空白ができてしまうので、未取得時は非表示にするよう対応した

javaのジェネリクスを使用方法（仮型パラメータ）を使った クラス、メソッドの定義方法をまとめる

Next.js × TypeScriptにEmotion（css Prop）を導入する方法を忘備録として残す。 JSXプラグマではなくBabelで設定する方法を使って導入する。

プロジェクトでシステムに負荷をかけることが必要になり、その時にベンチマークツールである「sysbench」を使ったので使い方を忘備録として残す。

サーバーリソースを監視するためにオープンソースソフトウェアの監視システムを使ってみたので導入方法をまとめておく。 ※とりあえず動かすところまで

プログラムを開発環境を準備しないでオンライン環境を使って、コーディングし動作確認できる便利なサイト等をまとめておく。frontであればCodeSandboxが一番おすすめできる。

typeScriptにて空オブジェクトを作成し動的にプロパティを設定する方法をメモ。javascriptと同様の方法ではtypeScritpでの型づけが崩れるためエラーになる。

javaやjavascriptで使用されるアロー関数について 省略記法をまとめる。実際に見るコードはほとんど省略記法で書かれているので、覚えてくおくメリットは大きいと思います！

React + EmotionでCSS Grid Layoutを使ったサンプル実装行い、基本的なプロパティの動作を確認していく。

GatsbyにおけるGraphQLの役割や使い方（pageQueryとstaticQuery）を実装サンプルを作成してまとめておく。

Reactでスタイリングをする時に色々やり方があったので 簡単に実装方法を残しておく

gatsby-remark-images-contentfulを使ってGatsbyで 表示させている画像が中央になってしまうので左寄せにする方法をまとめる。

Reactでどのようにしてコンポーネントを画面に表示し、どう画面の変更を検知して再描画しているのか？その仕組みを色々調べてみた結果をまとめる。

Gatsby製のブログを作成するにあたり、Reactで使うJSX記法の基本的なことを完全に主観で簡単にまとめておく。

Pythonでコンテナ開発をするためDockerのdocker-composeを使ってPythonディストリビューションの一つであるAnacondaの開発環境を作る方法をメモ

PythonのWEBフレームワークであるDjangoの開発環境をDockerコンテナを使って構築して、実際に動かしてみる。

javascriptにおける配列の作り方が複数種類あったので、それぞれの使い方と特徴をまとめてみた。

java8のstreamAPIを使って配列を任意の区切り文字（","や":"）を指定して区切り文字で区切られた文字列列に変換する 方法をまとめる。

java8のstreamのreduceには引数の数でできることが少し変わるので、サンプル実装しながら動作を確認してみた。

java8のstremAPIのmapメソッドについて他のstreamAPI(reduceやsorted)と組み合わせて便利に使う方法をまとめてみた

【java8】streamのCollectorsクラスのpartitioningbyの使い方を実装し確認する。groupingByは指定した条件でListを分割しMapで取得できる

javaで配列やListなどから対象のオブジェクトが存在するかを チェックするときに使えるStreamのanyMatch、allMatch、noneMatchの使い方をまとめる。

java8のstreamインターフェースのsortedを使ってオブジェクトのList等をsortする方法を実装サンプルを使ってまとめてみた。

java8 streamのCollectors.toMapメソッドは引数の数で３パターンの使い方ができるのでサンプル実装しながらまとめてみた。

javaで配列やCollectionのArrayListからStreamを使って対象の値やオブジェクトを検索する メソッドの要点と使い方をまとめる。

java8のStreamのcollectメソッドについて普段、toListやtoMapなどで使っているが、特に意味を考えることなく利用していたので仕組みを調べてみた。

java8のStreamAPIを使って二つ、または複数のjavaのオブジェクトのArrayListを結合（マージ）する方法をよく使うので整理してまとめておく。

最近は値を文字列で扱わずともfrontからbackendに来た時にSpring等で変換されていることが多いがレガシィなシステムを触ると以外と文字列変換と戻しを使うのでまとめておく。

分割代入やスプレッド構文にも関連するjavascriptでオブジェクトをコピーする方法（シャローコピー、ディープコピー）についてまとめたので忘備録として残す。

当ブログで紹介してきたjava8のstreamAPIのメソッドの使い方を用途別に一つの記事にまとめました。

Gatsbyのv4のFileSystemRouteAPIを導入したことでブログの一部のページが開けなくなった件について、原因と対策を忘備録として残す

reactに入門したときソースで見かけるが意味がわからなかった「&&」や「||」はショートサーキット評価と言ってreactでは条件付きレンダー時によく使われる。

npmまたはyarnを使ってインストールしたpackageのversionにつけることができるキャレット(^)やチルダ(~)について調べた結果を忘備録として残す

基本に続いて応用編ではuseStateに配列やオブジェクトを設定したパターンについて、どう扱うかを実装しながら確認していく。

ReactHooksでよく使わるuseStateについて、基本的な実装方法とその使い方をできるだけ簡単にまとめてみた。

Vagrantで作成した仮想マシン(vagrantVM)にホスト以外の同じLAN内のPCから接続させる方法を調べていてネットワーク設定について色々わかったことをまとめておく

Gatsbyとcontentful製のブログで記事ページのURLが変わった場合、googleの評価を引き継がせる対応方法についてまとめてみた。

ES6で導入された分割代入、スプレッド構文、レスト構文をサンプル実装して動きを確認した。初見はわかりずらいが慣れてくると使いどころはかなり多く、無駄なコードが削減できます。

Pythonを使った機械学習の基本的な仕組みや用語をPythonの機械学習ライブラリである「scikit-learn」を 使った簡単な実装を例にして素人がまとめてみる

Gatsby製ブログでmdx形式で書いた記事のコードブロックの指定行をハイライトさせる方法を実装してみる

当ブログはReactのフレームワークのGatsbyで作成しているのだが、ページのよっては初期ロード時間が長かったりするのでcodeSplitngを使って対応することにした。

java8には関数型IFがあり、その型の変数に関数を入れて扱うことができる。つまりjsの高階関数を関数型IFを利用することでjavaでも作ることができるようなので試したみた

ブログで使っているReactのフレームワークのGatsbyのversionを4系から5系にアップデートしたので、その方法を忘備録として残す

Angular Libraryを使ってAngularでライブラリを作成する方法をメモ。ライブラリを作ることで複数のプロジェクトで共通に使えるコンポーネントを作成できる。

React + EmotionでCSSの疑似要素（hover,before,afterなど）の使い方をサンプル実装して確認する。

Gatsby製のホームページに導入したAlgoliaにタグ絞り込み機能をつけてみたのでその過程をメモ。

ES6のスプレッド構文(Spread Syntax)をTypeScriptで使う場合の動作や注意点（スプレッド構文はシャローコピー）を実装しながら確認してみた

javaの例外処理（exception）におけるthrowとthrowsについて、いつも忘れるので基本的な使い方や動作についてまとめておく。

Gatsbyのv4から使えるようになった遅延静的生成 (DSG) を Gatsby製の当ブログで導入したので、その実装方法をGatsbyの ページ生成パターン別にまとめる。

ReactのGatsbyのv4系から使えるようになったFileSystem Route APIを導入したので、その効果と使い方をまとめる

Gatsby製ブログでcontentfulで管理している記事をMDX形式で扱う方法と実装方法を解説する。

VSCodeの拡張機能「Remote SSH」を使ってリモートサーバー上で開発していく方法をメモ。

DockerのDocker-Composeを使って作成したコンテナに任意の固定IPを割り振る方法を調べたのでまとめておく。

システムのリソース監視をする必要があり、システムのリソースのモニタリングツールであるGlancesをDockerコンテナで使ってみたのでその使い方をまとめる。

chocolateyを使ってWindowsTerminalでsudoやmake、treeなどのLinuxのコマンドを使えるようする方法をまとめておく

Dockerのdocker-composeで作成したコンテナに入る方法が毎回コマンドを忘れてググることになるので、まとめておく。

Gatsbyでコードブロックハイライトを「prism-react-renderer」を利用して いる場合にデフォルトで対応されていない言語を追加する方法をまとめる。

PythonのPythonAPIを使ってAnsibleを実行する方法をDockerコンテナでサンプルサーバーを作って試した見たのでその方法をまとめておく。

LinuxのUbuntu端末にWindows10からsshでログインする際の認証時にパスワードを打つのが面倒で公開鍵認証を設定したのでその方法をメモ

ReactHooksのuseState、useEffectで更新した値が画面にいつ反映され、画面描画されるのか？そのタイミングを実装しながら確認してみた。

windowsマシンからUbuntuマシンにリモートでssh接続（パスワード接続） する方法をメモしておく。

virtualBoxをCUIで簡単に操作して仮想マシンをつくることができるVagrantについて調べてみた。仮想マシンの作成からssh接続までを試してみる

パソコン上でVagrantで作成した仮想マシン（VagrantVM）のすべてをVagrant-global-statusを使って一覧表示させる方法をメモ。

java8のOptionalクラスでできることと、そのメリットや使い方ついて自分なりにまとめてみた。

GatsbyをデバッグするためにVScodeから起動した際にnvmでnodeのversionが変更できなくなり、少しはまってしまったので 対応方法をメモしておく。

サーバーにssh接続するための認証の設定で少し詰まったのでパスワード認証と公開鍵認証のそれぞれの設定の仕方を 忘備録としての残しておく。

WindowsからUbuntuにssh（パスワード接続）でホスト名を使って接続する方法をメモ。

javaのMapインターフェースについて、Mapクラスとその操作メソッドの基本的な使い方を調べてまとめてみた。

PythonのFastAPIをVScodeでデバッグするための 設定方法をまとめておく。デバッグはVScodeのDevContainerを使ってdockerコンテナ上で行う。

PythonのPycharmで「インデックスを更新中」と「インタープリターを更新」が長いのでメモリ設定を増やす方法をメモ。

Windows環境でvirtualboxなどの仮想化をせずにdockerをインストールする方法をメモしておく。

vmを入れたらVScodeからGatsbyのデバッグ（build時）ができなくなったので 対応方法をまとめておく。 暫定的な対応のため、解決方法が見つかったまた記事にしたい。

マイクロサービスアーキテクチャのAPIゲートウェイとしてkongを使用したので Kong Gateway (OSS 版)のインストール方法ををまとめておく。

javaのBigDecimalの初期化方法や丸め処理（四捨五入）や四則演算、0判定、比較を行う 方法をまとめる。

Next.jsで作った静的サイトをNetlifyにデプロイする時、エラーがでてちょっと躓いたりしたので の手順をメモしておく

Next.js製サイトでnext-seoを使って簡単なSEO対策をする方法をまとめる。

Next.js × TypeScriptでMDXプラグイン(@next/mdx)を使ってMDXファイルから直接pageコンポーネントを生成する方法をまとめる。

Gatsby開発時のdebugをVSCodeやChromeDevToolsで行う方法をまとめる。gatsby-node.jsはノード用ChromeDevToolsでもデバッグできる

ReactのNext.jsのbuild時に実行されるgetstaticpropsをVSCodeとNode用のChromeDevToolsでデバッグする方法をまとめる。

Zennブログみたいに記事の画面をスクロールすると目次が合わせてハイライトされる ようにしたいと思いReactとIntersection ObserverAPIを使って実装してみた

ReactのGatsby製のブログでパッケージとプラグインを使って目次をクリックすると対象の見出しの位置までスムーズにscrollさせる方法についてまとめる。

contentfulにmdx形式で記事を格納しているReactのGatsby製のブログで記事から目次生成して表示する方法をまめる。

javaで年月日データではなく、年月を扱いたい場合に使用する java8のYearMonthクラスの使い方をまとめておく

javaの時間データをDBに登録するためTimestampに変換する方法を 忘備録として残しておく

仕事でDBから取得した日付データを集する機会が多いので java8でLocalDateを使用して 日付データを操作する方法をまとめておく。

Gatsby製ブログに全文検索機能としてAlgoliaを導入したので、その導入手順と実装手順を残しておく。

Gatsbyでpageコンポーネント間でwrapRootElementまたはwrapPageElementを使ってstateを共有する方法をまとめておく。

ReactのGatsbyでボタンやリンクはIconを使う方法としてfortawesomeを使う方法がある。実装サンプルを作って使い方をまとめておく。

reactのgatsby v4にCSS in JSライブラリのemotion11を導入し、cssprops方式で利用する方法をサンプル実装してまとめる。

Colectorsメソッドの一つで動きはreduceとほぼ一緒になる。通常のmapとreduceを使うようにする。

javascriptで開発を行う時にコードの静的解析ツールのESLint を使うことが多いが突っ込んで調べると深そうなので使用するにあたっての基本的な要点だけを抽出してまとめる。

Gatsgyをv2からv4にバージョンアップした際に使用した便利なインストール済のpackageを最新化するyarnコマンドの使い方をまとめておく。

Gatsby製のブログでscrollbarのスタイルをcssのwebkitを使って変更できたので、その実装方法をメモしておく。

Next.js × TypeScriptでcontentfulからMDX形式の記事データを取得してnext-mdx-remoteを使って表示する方法をサンプル実装しながらまとめる。

【Next.js × TypeScript】でContentfulのcontentmodelの型を自動生成し、ContentfulのAPIを使って記事一覧を取得する方法をまとめる

Gatsby製ブログにdarkmodeを導入した際、Emotionを使ったのでその時の実装方法と手順を忘備録として残す。

React + EmotionでCSSのtransitionプロパティを使ってCSSアニメーションを試してみる。

Gatsbyで使用するGraphQLで複数クエリを同時に実行したい時はエイリアス（別名）をつけて実行するだけで実現できる。

javaの動作確認において、オブジェクトの中身をログ出力させる方法があったので、使い方をメモとして残す。

Gatsby製の当ブログはもしもアフィリエイトの「かんたんリンク」 で広告を貼ったら表示できなかったのでEmotionを使ってアフィリエイト商品紹介コンポーネントを自作してみた。

もしもアフィリエイトの広告とどこでもリンクはサイトで自動生成したhtmlをそのままではGatsby製のブログには貼れないのでEmotionで編集して貼れるようにする方法をまとめる

ESLint×Prettierを使ってVSCode開発時にコードを保存するとESLint × Prettierによる静的検証とコード整形を実行させる開発環境構築手順をまとめる。

ReactのGatsbyで作ったブログにgoogleのAdSense広告を付けてみたので その実装手順をメモとして残しておく。

Algoliaの全文検索機能をGatsby製ブログに導入した際、検索コンポーネント（instantsearch）をカスタマイズしたのでその実装手順を解説する。

CSSのFlexBoxを使ってホームページをデザインしたとき、flexboxの子要素の高さが揃わないことで詰まったので対応方法を忘備録として残す。

今後使うことが多そうなのでCSSのposition:stickyの基本的な使い方を簡単にメモしておく。

ReactHooksのuseEffectについてライフサイクルメソッドとの関係や定義方法、動作タイミングをサンプル実装しながら確認してみた

setTimeout関数はブラウザの機能であるため、setTimeout関数が実行された時点で処理をブラウザに移すことができ、javascriptのDOM操作を実行することができる

javascriptでjavaのdistinct処理をどう行うかについて調べたでメモ。javascriptにはdistinctがないため、findeIndexやSetを使う。

HOC（Higher-order Components）とは何なのか？まとその使いどころやメリットなどを実際にサンプル実装して動かしてみる。

関数の引数として関数を渡したり、戻り値として関数を返す高階関数をReactでサンプル実装して実際に使ってみた。

codesansboxを使ってreact + emotionのcsspropsのサンプル実装を行い、その動作を確認した。codesandboxはreact等の動作確認には便利”！！