Mission-Street.

先日、STTOKEというメーカーのタンブラーを買った当然タンブラー自体は以前から持っていたんだけど、以下の条件を満たすタンブラーをずっと探していた食洗機対応を公式で謳っていること食洗機に対応していない食器に人権などない蓋があり、片手でも簡単に開けて飲めること水筒だと蓋外したらもう片方の手で持たないと...

前回の続き勉強メモなので間違ったことが書かれている可能性があります 🙏IAP(Identity-AwareProxy)を試してみる前回、踏み台サーバーを立てて、同じサブネットにある外部 IP を持たない VM へ gcloud コマンドでログインできることを確認したがその調査の際、この記事を見つけ...

前回の続き勉強メモなので間違ったことが書かれている可能性があります 🙏第 5 章踏み台サーバーの構築のお話なので割愛パブリックなサブネットにスペック低めで配置して ssh できればいいのでそんなに書くことがないが、多少作業したことがあるので書いておくVM を作ったら「ブラウザウィンドウで開く」から...

前回の続き勉強メモなので間違ったことが書かれている可能性があります 🙏第 4 章VPC についてネットワークを構築していくGCP にも VPCネットワーク があるのでそれを使っていくGCP の VPC も AWS と同じく、他の利用者とは完全に独立したプライベートなネットワークとなるAWS との違...

インフラの勉強をしようと思って「AWS ではじめるインフラ構築入門」を買ったんだけど、2 年くらい積読してしまっていた本が発売になってからしばらく経つので AWS の画面は変わりまくっていそうだけど、インフラの構成自体がめっちゃレガシー化して、「こんな構成で構築しねーよ！」みたいなレベルにはなってい...

nokke/cablesさんで、HHKB のために超かわいいコイルケーブルを買った何度見てもかわいくてとても満足している今まで作業環境とかデバイスとかにあまり深いこだわりがなく、割と適当にそれっぽいものを買って仕事をしていたんだけど、最近 Youtube とかでデスクツアー動画などを見るようになった...

ブログを 2 年放置してしまったこともあり、ブログで使っていた Gatsby.js のバージョンアップで完全に詰んでしまった(わけわからぬエラーを永遠に解消できない)もはや Gatsby.js に何の思い入れもない + 今後仕事で使う可能性がありそうということで、次のブログ構築には Next.js ...

前回 Next.js でブログを作るにあたって調べたことを記事にしたけど、その後も作っていたら色々調整が必要なところがあったので、それもメモしておこうと思う記事内の画像が表示できない僕のブログは以下のように記事のデータを保持している1 つの記事とその記事に使う画像データを同一ディレクトリで持っている...

脱 Gatsby.js すべく Next.js のドキュメントを読みながら SSG でブログを再構築しようとしている個人的な感想だけど、Gatsby.js よりもとっつきやすい気がするのと、公式のドキュメントが大変わかりやすいので割とスムーズに移行作業が進んでいる今回は Next.js の App ...

久しぶりです。生きています。消えていた約2年間色々ありました2021/11 万葉からSmartHRへ転職していたドメイン設定いじっていたら事故が発生して、しばらくブログにアクセスできない状態になっていたこのブログはFirebaseにホスティングしているのだけれど、もともと使っていたプロジェクトは万葉...

Webアプリケーションの開発をしているとほぼ必ずログイン機能を実装すると思いますが、その時にセッションという言葉が必ず現れますセッションがどう言うもので、何をやっていて、何のために必要なのかは理解しているのですがとても大切な概念の割に記事にしてなかったので、改めてRailsのセッション周りの機能を見...

前回、無事にホットリロードまで使えるようになり、フロントエンド開発環境としてはほぼ問題ない状態になったと思うものの、Railsサーバーとwebpack-dev-serverのプロセスを2つ立ち上げないといけないのはとても面倒なので、今回はその部分をなんとかしていくひと昔前ならForeman gemと...

前回、無事に脱Webpackerして開発を進めること自体は問題なくできるようになったしかし、ホットリロードが使えないのは開発体験としてはかなり辛いので、今回はホットリロードも使えるようにしていく脱Webpacker後のホットリロード対応webpack --watch ではファイルの変更を検知して再ビ...

前回、脱Webpackerすべくデフォルトの設定をいろいろ見て行ったが、今回はそれを参考に自分でwebpack.config.jsを作成し、Railsを繋ぎ込んでいこうと思うWebpackerを除去するとりあえずWebpackerと関連ファイルをきれいにしていくGemfileとpackage.jso...

Railsに導入することで、フロントエンドエコシステムの知識がなくてもある程度モダンな構成でフロント開発ができるようになるWebpackerさん巷では色々言われているけど、僕は正直WebpackやBabelなどのエコシステムに精通していたわけではないので、よくわからんけど色々任せられて結構ありがたい...

前回SmartHR-UIのコードを追ってみたが、自分のHooksの記憶が曖昧過ぎたので、もう一度最低限のコードを書きつつHooksを再確認していく去年7月に確認した記事はこちらuseStateとuseEffectとuseReducerは↑で確認しているので、この記事では触れないuseReducerに...

今回はSmartHR社がOSSで公開しているSmartHR UIのコードを読んでいくReact+TSなので勉強にはもってこいな構成当然React+TSの構成がビルドできる環境が必要なので、ここで作成した環境を一部削ったものを流用してみていくまずは導入READMEに書かれているのでやっていくnpm i...

フロントエンド開発の環境構築は大変ややこしいことで有名ですが、とりあえず一回やっておけば最低限流れくらいは理解できるだろうということで、今回はReactとTypescript(以下TS)の開発環境を0からやってみるNode.jsのインストールまずはNode.jsがなければ何も始まらないので、node...

フロントエンド開発に欠かせないBabelですが、正直「新しい仕様のJSを、古い仕様のJSに変換するもの」という程度の理解しかないので、もう少し挙動を理解したいなので今一度Babelについて動作を追っていくいきなりソースコードは読めそうにないので、ここではBabelの表面的な動きからみていき、徐々に理...

とあるところで、以下のコードでA〜Zまでの範囲でランダムな文字を1つ返す方法があったString.fromCharCode(65 + Math.floor(Math.random() * 26))何をやっているのかみていくまず Math.random() は 0以上1未満のランダムな不動小数を返すそ...

僕はそこそこ長いことRailsで開発をしていて、今まで色んな会社で色んなコードを見てきたけど、Railsのソースコードを読んでいるとパッと見ただけでは説明できないコードと遭遇するRuby大好きで読めないコードがあるのはとても悔しいので、しっかり読んで意味を理解したいと思う世界最高のRubyist達が...

前回 validates_with メソッドは内部的には validate を呼び出しているだけということがわかったので、当然 validate メソッドも読んでいくファイルが require されたり、include/extend される点についてはここで書いたので省略するRails: 7.0.0...

日頃仕事をする中で、意外とこのブログに書いた記事が新人教育の時などに役に立つことが多いので、知っていることでもきちんと記事にまとめておくと便利ということがわかったなので今回はたまーに遭遇するCORSについて記事にしておこうと思うあと、いつブログ書く気力なくなるかわからないので、少しでも書く気力があれ...

前回 validates メソッドは内部的には validates_with を呼び出しているだけということがわかったので、当然 validates_with メソッドも読んでいくファイルがrequireされたり、include/extendされる点については前回書いたので省略するRails: 7....

今までRailsとかOSSのコードを読むことは結構あったけど、ちゃんと記事にして残すということをしてこなかったので、今後は暇な時に読んだコードについてちゃんと記事を書いていこうと思った僕はRailsエンジニアなので、Railsについては常々内部をもっと知りたいと思っており、今回はなじみ深い vali...

昨日ひっさびさにデプロイしたらまたデプロイに失敗するようになっていたエラー内容は↓Failed to get Firebase project hako-blog. Please make sure the project exists and your account has permission...

2020年10月〜12月に担当した案件と、2021年2月〜継続中の案件でそれぞれPMを担当している案件を進めてみて、学びや感じたことがあったので、今回はそれをを記事にしておこうと思いますどうまとめればいいのかわからないので、多分まとまりは悪いですがご容赦いただければと思います前回の記事からとても日が...

さて、前回設定ファイルを追加することで、middlewareとして有効になるというところまで理解できたので、今回は /auth/:provider で認証ページへ飛ぶ謎を解き明かしていきます。前回みた通り「 Rack Middleware に登録される」という時点で、Railsに到達する前にリダイレ...

RailsでSNSログインを実装する場合、 config/initializers あたりに以下のような設定ファイルを追加すると思います。Rails.application.config.middleware.use OmniAuth::Builder do provider :azure_act...

AWSをCLIで使う場合 aws-cli を使いますが、こいつについていくつかメモしておくaws configureの設定をミスった時aws-cliを使う際は aws configure --profile hogehoge コマンドでユーザー毎にprofileを登録しますがこの入力をミスってしまっ...

Gatsby.jsで記事の閲覧数ランキングみたいなページを作ろうとした場合、google analyticsのAPIを叩いて閲覧数が多いページを取得して、そのデータをよしなにいじくりまわしてページを作ると思いますが、ちょっと色々問題があって単純にリポジトリで管理できなかったので暗号化して管理するよう...

このサイトには入れてないんだけど、Gatsbyを使った別のサイトでページネーションとタグの機能を追加したので、せっかくなのでメモしておくhakozaru.com => 次ページへ => hakozaru.com/page/2 みたいになるタグの一覧でも hakozaru.com/tags/hoge ...

最近静的なサイトを公開するためにS3と、サイトをSSLにするため+高速化のためにCloudFrontを組み合わせて構築した際に、サブディレクトリのページを更新すると403が返されてしまう現象に遭遇し、一時間くらいハマったのでメモしておくなお、このサイト(hakozaru.com)は単にFirebas...

引き続きReactチュートリアルで遊んでいく今回はReact Hooksを使ってクラスコンポーネントを関数コンポーネントにリファクタリングしていく現在の状態はこんな感じ対象となる箇所Square コンポーネントは既に関数コンポーネントになっているのでやることはないBoard コンポーネントはクラスコ...

Reactチュートリアルは最初にReactを学ぶには最高の教材で、これやっておけば最低限コードを組むことはできるようになるはずとはいえfunctionalコンポーネントとか、Reduxとか、適切なファイル分割とか、現場でよく見かける書き方は含まれていないので、公式チュートリアルを改変してこの辺の重要...

今回はより詳細にGraphQLの言語仕様を見ていく前回同様GitHubのツールを使う引数(Arguments)公開されているリポジトリの情報を repository を使って取得してみるrepository の仕様は以下の通りrepository(name: String!owner: String...

このブログの最初の記事で入門したいと言いつつもずっとスルーしていたGraphQLへ入門したので、簡単に記事にまとめておくちなみに読みは「ぐらふぃくる」らしいGraphQLとは？なにはともあれまずは公式ページへ行くと、でかでかとこう書いてあるA query language for your API ...

つづきをやっていく今回はTS独特の概念を中心に書いていくType Compatibilityhttps://www.typescriptlang.org/docs/handbook/type-compatibility.htmlTSでは変数の代入が行われる際、それぞれの型に互換性があるかどうかを常に...

つづきです(めんどいのでTypeScriptはTSと書く)関数でTypeScriptを使うときの注意点前回も少し書いたけど、関数でTSの型を使う際に気を付ける箇所は引数戻り値の2点のみJSでは色々な方法で関数を定義することができるが、それぞれの関数における書き方は以下の通り// functionキー...

もはやフロントエンドを触る人にとってはTypeScriptは義務教育感があるので今回はTypeScriptについて基本的な部分を調べてまとめておくTypeScriptとは所謂AltJSと呼ばれるもので、最近名前を聞かないが昔はCoffee Scriptが一世を風靡していたAltJSで書いたコードを、...

Reactはクラスコンポーネントと、関数コンポーネントの2つ存在しており、大きく状態(state)があるかないかで、コンポーネントを使い分けていた(状態があればクラスコンポーネント、なければ関数コンポーネント)React 16.8からHooksという機能が追加され、状態のあるなしに関わらず全て関数コ...

このブログはmarkdownで書いていて、編集にはVSCodeを使っているんだけどmarkdownで改行を表す「行末の半角2スペース」が削除されてしまうことに昨日の記事を書いていて気がついた他のファイルでは行末の余計なスペースなどは消して欲しいんだけど、markdownでは消されては困るので設定方法...

会社のパソコンがいろいろと限界だったので、嫌いだったバタフライキーボードが死滅した後初めてのMacBook Pro 13インチを先日買ってもらったスペックはメモリ32Gのストレージ512G前に使ってたPCは4年くらい前のモデルだったんだけど、案外重さは変わらなくてちょっとしょんぼり(すでに限界近く薄...

コロナの影響で外出ができなくなってしまったので、人がいないところへ人と密集しないで移動するために、妻と一緒にロードバイクを買った(2ヶ月くらい前)買ったロードバイクがこちら。FELTのVR60(2020)めちゃくちゃかっこいい...完全に見た目だけで決めた。後悔は全くないなんだかんだ毎週末30〜50...

↓のような記述を見かけた<script src="//js.〇〇.jp">この書き方を知らなくて調べてしまったのでブログに残しておく結論ページが https で表示されているのか http で表示されているのかを勝手に判定して、いい感じに現在のプロトコルに合わせてくれる。という書き方自分の...

続きをやっていくちょっとDockerの知識を今一度再確認してまとめる必要があると思う出来事があったので、今回はDocker周りを見ていこうと思うまずDockerfileとはイメージ作成の手順が書かれた設定ファイルDockerクライアントのbuildサブコマンドを実行すると、対象ディレクトリにあるDo...

yarnとかnpmとか使っていると絶対に見かける XXX has unmet peer dependency 〇〇 という警告peerDependencies で指定されている依存パッケージが入っていないのが原因なので、対象となるパッケージを yarn add とかで入れれば解決するんだけど、これっ...

続きをやっていく前回みたいに順番に見ていってもいいけど、特に気になる箇所がないコンポーネントもあるので適当にソースを眺めて気になった記述の部分を重点的に見ていくことにするi18nタグ(コンポーネント)pages/about.vue に以下のような部分がある<i18n tag="p" p...

これの続きをやっていく知ってることでもちゃんと改めて自分の言葉で書くポート3000はRailsで使ってしまうので、ポート5000に変更してやっているnuxt.config.tsserver: { port: 5000}トップページNuxt.jsは pages ディレクトリ内のVueファイルの木構造...

プログラミングに関して何か学習しようと思った場合、最も手っ取り早いのは以下の2つだと思っているなんか作るOSS読む何かアイデアがあれば作って学ぶのはいいが、常に何かアイデアがあるわけでもないので適当に有名なOSSを漁ってコードを読むのが考える時間も少なくて便利最近はUdemyとかもいいね色々あってフ...

近頃dependabotなどを利用してパッケージのバージョンアップを自動化しているチームも多いと思いますがPRがパッケージ毎に立つため、1つ1つマージするとCIのクレジットを大量に消費してしまうので節約の為にもまとめてマージしたいところですしかも、ブランチを切って git merge --no-ff...

最近パッケージの更新屋をやっているのですが、moment.jsの2.25.3の変更のRemove package.json module property. It looks like webpack behaves differently for modules loaded via module...

STIやったなら、ポリモーフィック(ポリモーフィズム)についてもやらんといかんだろうということでポリモーフィックについても調べてみた知ってることでもちゃんと言語化するのは大切だとSTI書いた時に学んだポリモーフィックとはGoFのデザインパターンで言うところの「プログラムは実装に対してではなく、インタ...

新規アプリケーションならまだしも、既存のプロジェクトへrubocopを入れると警告がとんでもないことになるのでどのように入れていくのがいいのか、一つの案としてメモしておく基本rubocopとはRubyのコード解析ツールRubyは様々な書き方ができるが、チームで統一されたスタイルでコードを書くことが可...

最近STIが用いられている箇所を触ることがあったのですが、STIについては軽くしか学んだことがなく、適切な実装が行えたのかどうかいまだに判断がつかないので、今更ながら学習しなおしてみる議論も含めてこの記事が参考になったので、この記事に書かれていることを中心に理解を深めていくSTIとは単一テーブル継承...

デフォルト引数はdef my_method(hoge = "hoge") puts hogeendみたいなやつで、誰でも一度は書いたことがあるかと思うのですがこのデフォルト引数に変数を指定していた場合はいつ評価されているのか、そう言えばちゃんと確認したことなくて曖昧だったので確認してみたメモ(変数...

5/8に記事作ってpushしたらデプロイフローがこけるようになっていたエラーログを見ると、Firebaseへのデプロイで public ディレクトリがないと表示されていたなんでやと思ってActionsのdownload-artifactを見ると、いつのまにかV2になっていて挙動が変わったらしい今まで...

Typescriptはプライベートでしか使った経験がないのですが、publicとかprivateとかが素のJSの機能だと思っていたら違っていた(恥)もちろん効果は知っていたけど、さすがに境界があいまいなのはアレなのでメモJSのドキュメントを見ると当然public/privateの記述はないが、ちゃん...

会社の後輩に教えてもらったんだけど、 exercism.io というプログラミングのトレーニングをちょっとやってみたまだRubyを数問やっただけだけど、結構自分の書くコードに隙があることに気づかされる ^^;;;この手のサイトは死ぬほどたくさんあるけど、いつも登録だけして全く使わずに終わるパターンが...

IAMIdentity and Access Managementの略安全にAWSの操作を実施するための認証の仕組みのことAWSではセキュリティに対して、AWSと利用するユーザーとで、責任分解して対応する責任共有モデルとなっているAWSはインフラ部分(ハードウェア、ネットワーク)、ユーザー側は利用す...

ここんところ個人開発ではFirebaseを使ってサーバーレス構成にすることが多いけど、やはりAWSをはじめとするクラウドサービスを使えると構築できる幅が広がるので、AWSもガチっていきたいそんなわけで最近AWSを一から学習しているこの記事はそのメモですAWSについてAmazonが所有する「オンプレミ...

このブログがmasterにpushされると自動でFirebaseにデプロイされるようにした本当はmasterにmergeされたらデプロイとなる方が望ましいのだろうが、まぁ個人のブログなのでブランチ運用は適当にやっているやったこと作業ディレクトリルートに .github/workflows ディレクト...

既に読んだことはあるが、定期的に読み返すべき良書なので読み返しているApple純正のメモによくメモしているのだけど、せっかくなのでブログにも置いておく(今後はブログがメモ帳替わりになるように頑張っていきたい)HTTPはTCP/IPをベースにしているTODO: TCP/IPは別途学習する基本的な処理の...

思い出せる範囲で WordPress => Middleman => Rails と遷移してきた当ブログですがやはり定期的にブログを作り直したくなるので、(今更感あるけど)巷で話題のGatsbyJSで再構築しなおしてFirebaseでホスティングするようにした。gatsby-starter-blog...