2021-11-02

改めてセッションについて学ぶ

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

2021-10-15

Webpackerを外したRailsをDockerで開発できるようにする

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

2021-10-09

RailsからWebpackerを外してpureなwebpack構成にしてみる その3

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

2021-10-07

RailsからWebpackerを外してpureなwebpack構成にしてみる その2

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

2021-10-06

RailsからWebpackerを外してpureなwebpack構成にしてみる その1

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

2021-10-01

React Hooksを再確認する2

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

2021-09-28

SmartHR UIを読む

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

2021-09-24

0からReact+TSの開発環境を構築する

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

2021-09-21

Babelを徐々に理解したい

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

2021-09-18

JSでA〜Zまでのランダムな文字列を生成する

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

2021-08-30

Railsで見つけた気になったコード

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

2021-08-28

Railsのvalidateメソッドを読む

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

2021-08-26

Cross Origin Resource Sharing(CORS)について

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

2021-08-23

Railsのvalidates_withメソッドを読む

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

2021-08-22

Railsのvalidatesメソッドを読む

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

2021-08-20

PMをやってみて思ったこととか振り返り

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

2021-01-18

aws-cliのちょっとしたメモ

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

2020-12-23

GoogleのAPIキー(json)を暗号化してリポジトリで管理する(crypto-js)

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

2020-12-11

Gatsby.jsのブログにページネーションとタグを導入する

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

2020-12-07

S3+CloudFrontの構成で静的なサイトを公開する場合の注意点

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

2020-10-02

Reactチュートリアルを弄って遊ぶ Hooks編

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

2020-10-01

Reactチュートリアルを弄って遊ぶ コード整理編

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

2020-08-26

GraphQL その2 言語仕様編

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

2020-08-14

GraphQL その1 GitHubのAPI叩いて入門編

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

2020-08-10

TypeScript その3 ジェネリクス・アサーション

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

2020-07-30

TypeScript その2 関数・クラス

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

2020-07-24

TypeScript その1 型の基本

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

2020-07-10

React Hooksを再確認する

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

2020-07-07

Markdownで行末のスペースを削除しない(VSCode)

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

2020-07-06

新しいMacBook Proがきた!

会社のパソコンがいろいろと限界だったので、嫌いだったバタフライキーボードが死滅した後初めてのMacBook Pro 13インチを先日買ってもらったスペックはメモリ32Gのストレージ512G 前に使ってたPCは4年くらい前のモデルだ...

2020-06-22

そういえばロードバイクを買っていた

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

2020-06-16

scriptタグのsrcの指定

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

2020-06-11

東京都 新型コロナウイルス感染症対策サイトを読む その4

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

2020-06-06

東京都 新型コロナウイルス感染症対策サイトを読む その3

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

2020-06-02

東京都 新型コロナウイルス感染症対策サイトを読む その2

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

2020-05-28

東京都 新型コロナウイルス感染症対策サイトを読む その1

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

2020-05-24

hubコマンドでPRをいい感じにまとめる

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

2020-05-23

package.jsonのmainとmodule

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

2020-05-20

Polymorphicについて

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

2020-05-19

既存プロジェクトへrubocopを導入する道すじ

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

2020-05-15

STIについて

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

2020-05-13

デフォルト引数はいつ評価されているのか

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

2020-05-09

GitHub Actionsによるデプロイが動かなくなっていた

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

2020-05-08

JSにおけるpublic/privateについて

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

2020-04-22

exercism.io

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

2020-04-21

AWSをやっていく IAM/AWS Organizations

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

2020-04-20

AWSをやっていく

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

2020-04-17

GitHub Actionsでブログを自動デプロイされるようにした

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

2020-04-16

HTTP学習メモ with Webを支える技術

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

2020-04-15

ブログをGatsbyJSで再構築した

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