とーますメモ

Ruby on Rails / Goなどの学習メモ

【Next.js】Apollo Queryの返り値を元に、新しいデータを非同期で取得する場合

ちょっとハマったので、自分のメモ用。以下のissueにかかれていたことを元にして解決。 github.com上記の内容をカスタムフックにラップすればOK const { loading, data, error } = useQuery(SOME_QUERY) const [state, setState] = React.useState([]) React…

年月のみを入力した場合、その月の最終日を自動補完する方法

年月のみが入力されたときも、当月の最終日を自動補完するコードを作った。ex) A1に年月または年月日が入力される前提 TEXT(IF(LEN(A1)=7, EOMONTH(A1, 0), C2:C), "YYMMDD") 2022/06 => 220630 2022/06/20 => 220620ポイントはLEN関数の長さが7の場合で、年…

TypeScriptで簡易Sprintfを作成する

Validationメッセージなどのメッセージには決まった文言が入るが、一部を置き換えたい場合などは、テンプレートリテラルよりC言語系で使われるSprintfが便利なのだが、JavaScriptにないため自作した。 export const sprintf = (format: string, ...args: str…

React Hook Form v7 × Material UIを使用したときのメモ書き

React Hook Formを使用するのは初めて。 React Hook Formを使用することでform内の値を管理するstateが不要になり、バリデーション機能も含まれているため、コード量を大幅に減らすことができる。またネット上にサンプルも非常に多いのも魅力的。form値の監…

【React】Material UIについてのメモ書き

Material UI学習時のメモ書き Gridシステム bootstrapを使用するときも同じだが、まずは基本のGridシステムの使い方を最初に知る必要がある。Gridは親Gridでcontainerを書き、その内側の子Gridでitemを定義する。 boostrapでいう、div class='container'とdi…

TypeScript 4.5 ファーストインプレッション

個人用メモ。解釈が正しいかは不明なので参考までに。TypeScript4.5がリリースされたので、その内容を簡単に試してみる。 devblogs.microsoft.comTypeScriptを既にインストールしている場合は、以下で最新版に更新。 $ npm update typescript 初めてインスト…

【Ruby】[2021版] MacでRailsが突然動かなくなった話

以前やらかしたことを、またやらかしてしまったので、 再度動作できるようにするまでのメモ。 thoames.hatenadiary.jp TL;DR opensslが1.1系に書き換わってる可能性大!!!! なので以下のことをすれば直った。 1) openssl1.0をインストール 2) /usr/local/…

【Next.js】Material UIをSSRで使う方法

何も考えずにNext.jsでMaterial UIを使おうとすると以下のエラーが出ます。 Warning: Prop 'className' did not match. Server ... Material UIではSSRへの対応方法が準備されており、以下がそのサンプルです。 material-ui/examples/ssr at master · mui-or…

【GraphQL】GraphQL Code Generatorについてのメモ

GraphQL Code Generatorとは、GraphQLのスキーマからTypeScriptの型定義ファイルを作成することができるツール。テスト環境はNext.js + TypeScript + Apollo + GraphQL Code Generator + Hasuraの構成する。CSRでGraphQLリクエストはせず、SSRとSSG内でのみG…

【VSCode】Apollo GraphQLをHasuraと組み合わせて使う方法

下記のページを参考に設定 Guides: Visual Studio Code Setup | Hasura GraphQL Docs インストール まずはVSCodeにプラグインのインストール Apollo GraphQL - Visual Studio Marketplaceこのプラグインを入れるとGraphQLにシンタックスハイライトがつき、Gr…

【VSCode】Next.jsのコードをデバックする方法

Tl;dr ルートディレクトリに.vscodeフォルダを作り、launch.jsonを以下の内容で作成する。 $ mkdir .vscode && cd .vscode $ touch launch.json launch.json { "version": "0.2.0", "configurations": [ { "name": "Next: Node", "type": "node", "request":…

Instagramでフォロワーをうまく集める方法についてのメモ

基本ルール 自己満足を排除し、読者に支持されるものを提供する プロフィール欄をきれいに簡潔に書くこと 興味を持てくれた人は、プロフィールを見てフォローするかを決めるので、 しっかり書いていく。 写真をまずは6〜7枚投稿してから、他のユーザにアプ…

【Next.js】Netlifyの設定についてのメモ

目標1: Next.jsプロジェクト(プレレンダリング + SSG)をNetlifyで公開したい 目標2: Next.jsプロジェクト(SSR + SSG)をNetlifyで公開したい Netlifyアカウント作成 基本的には以下のサイトさんをみて設定 【5分で公開・簡単】Netlifyの使い方を解説する …

【React】実装方針メモ

・コンポーネントはクラスコンポーネントではなく、関数コンポーネントを使用する。 ・Atomic Designをベースにコンポーネントを管理する 自分はとりあえずこの構成でやる。 - src - pages (only container: データ取得、APIアクセス、ロジック) - component…

【React】Styled-components導入時のメモ

CSS in JS。 コンポーネント内にCSSを記述できるのでスコープが明確になる。TypeScriptを使用するので、@types/styled-componentsをインストール。 TypeScript内のCSSの補完を行いたいので、typescript-styled-pluginもインストール インストール $ npm inst…

【React】React × TypeScript × ESLint設定時のメモ

パッケージマネージャーはnpmを使用。 エディターはVSCode。VSCodeの設定とPrettierの設定は以前書いた。MacでVSCodeを使用してみた - とーますメモ 【VSCode】 フロントエンド開発の使う自分用のPrettier設定まとめ - とーますメモ Next.jsインストール $ n…

【VSCode】 フロントエンド開発の使う自分用のPrettier設定まとめ

以下の記事さんがすごいまとまっていてよかった。 【Prettier】「なんとなく使う」から「分かって使う」へ【Visual Studio Code】 - AI can fly !!要はVSCodeで、Prettierを使うには以下の2つの方法がある。1)npmやyarm経由でインストールしたPrettierを…

【Nginx】ngxtopを使用してリアルタイムアクセスログ監視をしてみた

環境はUbuntuを使用。アクセスログ解析ツールとしてGoAccessというツールもあるが、単純にシンプルなツールを使いたかったので、ngxtopを採用した。 インストール github.com $ pip3 install ngxtop 使用方法 access_logのパスが/etc/nginx/nginx.confに記載…

【Nginx】複数ドメイン+SSLを同じサーバで設定する方法

昔は、1台のサーバに複数のドメインが設定できても、SSL証明書は1つしか設定できなかったが、今はSNI (Server Name Indication)という仕組みを使うことで1台のサーバでもドメイン数だけSSL証明書をできるようになった。(ワイルドカード証明書、通常SSL証…

【Nginx】IPアドレス直接アクセスを防ぐ(ドロップさせる)方法

Hostヘッダが未定義なリクエスト、つまりIPアドレス直接アクセスを防ぐために試したことのメモ。未定義のリクエストをさばくためのServerコンテキストを以下のように定義する。 server { listen 80 default_server; server_name _; return 444; } 設定で複数…

【Nginx】同一サーバで複数サイトを運営し、ログをサイト毎に分ける

自分用メモ。access_logとerror_logはserverコンテキスト内に以下のように記述 access_log /var/log/nginx/{service_domain}.access.log warn; error_log /var/log/nginx/{service_domain}.error.log; サイト毎に新たにディレクトリを作成するのではなく、 …

MacでNode.jsをインストールする

Macでインストールする場合は、brewでnodebrewというnode.jsのパッケージマネージャーを入れてNode.jsをインストールする方向が良さげ。 導入 nodebrewのインストール $ brew install nodebrew インストール可能なバージョン一覧 $ nodebrew ls-remote Node.…

【Shopify】Mailchimpを使ってみた

まずはアカウント作成。参考にしたのは以下のサイトさんtakapon.net注意するのはアカウント作成時、会社名と住所を入力する必要があること。 この会社名と住所はメルマガに強制的に入り、消せないためビジネス用の住所がない方は注意が必要。また無料プラン…

【Shopify】Theme Kitの使ってみて思ったこと

自分用メモ。インストールはbrewでコマンドでインストール可能。 詳細は以下を参考にした(公式) https://shopify.github.io/themekit/ https://qiita.com/t-kurasawa/items/21f887fea399c0d07529 https://www.non-standardworld.co.jp/22987/ 使ってみた所感…

ZohoメールでSMTP設定を行ってみる

自分が管理している一部のWordPressでは、メール送信にWP Mail SMTPというプラグインを使用している。 今回このプラグインにZohoメールのSMTP設定を行い、メールを送信してみた。SMTPの設定は、Zohoのページを参照し、設定は以下のように行った。 https://ww…

Zohoメール内で可能なセキュリティ設定と迷惑メール設定

前回の記事からの続き thoames.hatenadiary.jp SPF 送信元IPアドレスが入ったSPFレコードをDNSに入れることで、受信先のサーバが送信元IPアドレスがSPFレコードに登録されているかを確認し、詐称(なりすまし)メールなのかを確認する仕組み。 インターネット…

MacのThunderbirdをダウングレードする

現時点で最新の78では、Enigmailというアドオンがうまく動作しないことが判明したため 動作確認ができていた68に戻す作業を行ったので、作業記録をとる。 1) プロファイルのバックアップ 超重要。[Thunderbirdを起動]→[メニューバーのヘルプ]→[トラブルシュ…

MacでVSCodeを使用してみた

公式サイトからダウンロードして解凍し起動。 以下が設定した内容 基本設定 ATOMから使用している設定。この設定に慣れているのでこの設定をそのまま使う。 一覧 コアな設定 設定名 値 メモ Editor: Font Family Menlo, Monaco, 'Courier New', monospace Ed…

Zohoメールを使ってみた

個人的なサイトに使用する用途だったので、Freeプランで十分。 詳細は参考にしたサイトさんが詳しく説明されているが大事なのは以下。1)SPF、DKIM、DMARCのセキュリティ対応 2)mail-testerでスコアを確認 thoames.hatenadiary.jp[参考] ZOHOでセキュアな…

NinjaFirewallとCloudflareを併用時の設定

Cloudflareを使用すると、CloudflareのIPからのアクセスのみが記録されてしまうので オリジナルからのIPを取得したい場合は、別途設定が必要になる。 以下の記事を参考に.htninjaファイルを作成し、ドキュメントルートの親ディレクトリにデプロイする。 Ninj…