ちゃなべの備忘録

ほぼ備忘録です。

TypeChallengeをやった_Easy編【備忘録】

はじめに 型パズルをやった備忘録を残しまする 環境整え これ入れた。 marketplace.visualstudio.com あとはフォルダ指定して、やるだけ。 解いた 4-Pick (Easy) 問題 組み込みの型ユーティリティPick<T, K>を使用せず、TからKのプロパティを抽出する型を実装しま</t,>…

「あれ?前回何やったっけ?」をなくす拡張機能【備忘録】

はじめに 前提理解 調査 簡単な拡張機能を作ってみよう まずはアイコンが出てくるだけ h1タグのテキストを取得して表示する chromeのAPIで検索履歴を取得する GithubのAPIでcommit履歴を取得する すべてのコミット履歴を取得する。 アクセストークンをOAuth…

ただただ最近の技術のキャッチアップ【備忘録】

はじめに キャッチアップ tRPC gRPC deno hono bun GraphQL はじめに 以下のことをキャッチアップしました tRPC gRPC hono deno bun GraphQL 詳しくは後日書くので、今日はどういう記事を読んだかだけ貼っとく。。許して。。 キャッチアップ tRPC これよんだ…

ISUCON本を見ながら書いたやつら【備忘録】

はじめに 1-2章 3章 private-isuの準備 alpとabの準備と実行 ログファイルのローテート mysqlの解析 mysqldumpslowがないよぉ。 mysqlに入れないよぉ。 4章 k6のinstall 5章 pt-query-digest query-digester はじめに これを読みながら勉強している備忘録 ht…

fastAPIを触ってみた【備忘録】

はじめに イントロ docker環境 諸々install fastapiの開始 tutorial 参考 はじめに ハッカソンの準備でFastAPIを触る必要があったので、触ってみました。 参考 fastapi.tiangolo.com イントロ さぁやってみんべ。 docker環境 いつものごとく。 とりあえずpyt…

openapiとそれ関連いろいろ実装してみるンゴ (後編)【備忘録】

はじめに 設計(再掲) Style周りの環境構築 UIライブラリの選定 CSS-in-JSの選定 Stitchesの導入 NextUIの導入 CDS作成 一覧画面 Cardコンポーネント headerコンポーネント footerの作成 style整え 詳細ページの作成 ページの枠の作成 ざっくりとレイアウト作…

Dockerでpythonの環境を整えるまで【備忘録】

はじめに 設定 docker周り ipynbファイルをgitで扱うために VSCodeの拡張機能 はじめに 表題の通りです。 pythonの環境をDockerで作るのにいろいろ準備が必要だったので、それを備忘録的にまとめました。 設定 docker周り まずお決まりの2つのファイル versi…

RSCとかがわからなかったから完全に理解するまで【備忘録】

はじめに panda CSSを触ってみたんですが、サーバー側でbuildするので、クライアント側での変更をいちいちCSSに反映するのが難しそうに思える。 まぁぼくの調査不足だと思うので、一旦pandaCSSを調査することにした。 その時に出てきたのが、「RSC互換性」と…

ブラウザ拡張機能フレームワークのPlasmoを使ってみた【備忘録】

はじめに やってみる Plasmoをinit 拡張機能を早速表示 chromeの履歴を取得できるようにしてみる。 はじめに chrome拡張機能を作ろうと思ったんだけど、手動でやるといろいろ面倒だったので、こないだリリースしたらしいフレームワーク Plasmo を使ってみた…

GithubのOIDCのチュートリアルをやってみた【備忘録】

はじめに 今回やるのはこれ 実装 GitHubAppの登録 Rubyの開発環境整え コマンドで1.2.3.のファイルを準備 手動でDockerfileとdocker-compose.yamlを作成 app.rb (アプリ自体のファイル) を作成 起動 OIDCの設定を進める ログインボタンを設置 Callbackを設定…

第1回 8時間ハッカソン【備忘録】

はじめに 今回のテーマ 使用言語 11:30 調査 12:30 調査 18:30 設計 はじめに 8時間ハッカソンとは? 今回のテーマ 認証機能を自作しよう! OAuth, OIDCなど 使用言語 Go 11:30 開始。 じゃあ、まずは方針を立てよう。 認証機能っていっても何やる?笑 とり…

Githubのリモートレポジトリをローカルから作る【備忘録】

はじめに 設定 はじめに 毎回Githubのサイトでリモートレポジトリを作ってたけど、そろそろだるい。。 なんかやり方ないかな?と思ったらあったから設定する 設定 まずGitHub CLIをinstallする cli.github.com $ brew install gh そしたら、新しいレポジトリ…

認証系について調べてみた (仕組み編)【備忘録】

はじめに 調査 OpenID Connectのざっくりフロー OAuthのざっくりフロー OpenID Connectのざっくりフロー (Part2) IDトークンってなに? OAuthのクライアント認証とは OAuthの全フロー OpenID Connectの全フロー はじめに 前回認証系のイメージ(概要)について…

認証系について調べてみた (概要編)【備忘録】

はじめに 調査 OAuthとOIDCとSAMLの違い Identity Providers (IdPs)とは何なのか SSO ( Single Sign On ) とは SSOのそれぞれの方式の違いは? はじめに 認証系について曖昧な知識が多かったので、ここらで調査して整理する 調査 OAuthとOIDCとSAMLの違い ww…

SSRってなんだっけ?【備忘録】

はじめに 調査 なんかわかりやすそうなサイト(小並) はじめに タイトルにもあるようにSSRがよくわからんかった。 だから調べた。 それをここにアウトプットします。 調査 なんかわかりやすそうなサイト(小並) www.ragate.co.jp CSR ( Client Side Rendering …

CSS-in-JSについていろいろ調べてみた【備忘録】

はじめに 調査 食べログさんのを勉強 styled componentsについて zozoさんを参考 ChatGPTに聞いてみた Stitchesってどうなんやろ はじめに 自作アプリを作っている途中でcss-in-jsについて知らないことが多すぎて、調べた。 それをまとめただけ。 調査 食べ…

openapiとそれ関連いろいろ実装してみるンゴ (前編)【備忘録】

はじめに 前提イメージ 実装 設計 環境構築 公式ドキュメントヨミヨミ 再設計 swaggerの作成 作成にあたって Stoplight Studioでつくっていく docker上で動かしてみる turborepoの導入 アプリの枠作成 turbo導入 package配置 package/tsconfigの設定 package…

Next.jsのサンプルアプリを作ってみた【備忘録】

はじめに 実装 dockerでnode環境を作る create-next-appコマンドで自動プロジェクト生成 next.jsのサンプルアプリ作成 いろいろ試してみる 手動でnext.jsを作ってみる。 はじめに turborepoを用いた開発をするときに、next.jsを使おうと思ったのですが、まぁ…

macの変換やばすぎ。【備忘録】

はじめに やる ダウンロード インストール あれ?入力できない? 使ってみて はじめに macの変換使えなすぎ!!(総意) 別のに変えます!!! (以下はmacの変換のヤバさを伝えるために、漢字への変換を修正しません) やる やっぱり無難にgoogle変換かな? も…

エンジニアのためのデイリーニュースラジオ欲しくない?【備忘録】

はじめに 前提イメージ 調査 ラジオ場所 自動音声 原稿作成 実装 SpotifyのPodcasterを登録 アイコン画像の作成 原稿作成依頼文の作成 第一稿 第二稿 第三稿 第四稿 第五稿 第六稿 原稿作成依頼文の作成(2023/04/02追記) 第七稿 音声に読み上げさせる。 spot…

さくらVPSでサーバー間通信をやってみた【備忘録】

はじめに これにいろいろ機能をつけてきた。 さぁ次はサーバー間通信かな。 localでのサーバー間通信はやってきたけど、本番環境でのサーバー間通信はやったことがない。 ワクワク。やっていこ! 前提イメージ さくらVPSにサーバー間通信の機能があるっぽい…

MySQLを使っているアプリで日本語を保存できるように【備忘録】

はじめに こちらでアプリをアップしました。 dockerを安くデプロイしたい【備忘録】【読みづらい】 - Qiita そのアプリがDBに日本語の登録ができません。 そこの設定周りをやっていこうと思います。 前提イメージ まずlocalでも登録できなかったし、本番環境…

CI/CDをマイクロサービスに導入してみた【GitHubActions】【備忘録】

はじめに 前提イメージ CI CD 調査 GitHubActionsの概要を掴む 実装の参考探し CI実装 キャッチアップ CIの導入 - client CIの導入 - back CDの実装 CDの導入 - db CDの導入 - back 方針決め 1. mainにマージかpushされたことを検知してCD開始 2. buildして…

vscodeの環境はプロジェクトごとがいいよね?【備忘録】

はじめに ぼくはVSCodeを使っている。 そしてプラグインをよく入れたりするし、設定もよく変える。 だが、このプロジェクトにはいるけど他のプロジェクトには入らないプラグインや設定ってあるよな。 つまり どのプロジェクトにも共通して使いたいプラグイン…

TypeScriptとGolangにformatterを適用してみた【備忘録】

はじめに ぼくの前提知識 調査 実装 TypeScript Go goimportをCLI で実行できるように goimportsを保存のタイミングで実行できるように はじめに 実装してみたプロジェクトにCICDを導入しようとしたんだが、 そもそもCIにやってほしいことがformatterくらい…

なんかGitHubから「mainブランチ守って!」って言われた【備忘録】

アラートは突然に。 やってみよう 参考 ver1 設定画像 考慮したこと ver2 アラートは突然に。 いきなりこんなの言われた。 Your main branch isn't protected Protect this branch from force pushing or deletion, or require status checks before merging…

CICDツールを比較してみたお話【個人開発用】【備忘録】

はじめに 前提イメージ 調査 市場調査 デメリットを比較 はじめに 先日マイクロサービスをdeployして、自動起動も行いました。 じゃあ、開発環境から自動deployのしたいじゃないか! ということでCICDをやってみよう。 とはいえ、CICDのツールは世の中にアホ…

Hatena Blogのサイドバーに固定目次を設置したときにつまづいた【備忘録】

はじめに 背景 つまづいた 解決 はじめに つまづいたところを書いただけ! 背景 Qiitaみたいに目次がサイドバーに追従固定されていたらみやすいのに。 (逆にないとくそ見づらい、ぼくの備忘録。) だからこれを参考にやってみる。 twilyze.hatenablog.jp つま…

サーバーが起動した時に特定のバイナリファイルを実行したい【備忘録】

はじめに このタスクの学び 参考 やってみよ ファイルの用意 ユニットファイル 自動起動設定 ユニットファイルを自動起動設定にする 起動してみる シェルスクリプトの準備 ファイルの作成 権限の付与 試しに実行 ユニットファイルの実行ユーザーを変更 ユニ…

zshをなんかかっこよくしたい【備忘録】

はじめに 調査 実装 oh-my-zshの導入 CLIでのdownload fig上でのPowerlineの設定 Powerline用のfontのinstall fig上でのpowerlineの詳細設定 CLI でのoh-my-zshのinstall oh-my-zshのダウンロード CLI でのPowerlineのinstall CLI上でのPowerlineの詳細設定 …