書いた契機 GitHub Actions上でテストを実行する際に、使い捨てのデータベースにアクセスしたいと思いドキュメントを読んでいた。 docs.github.com これを読んでいて「コンテナーからサービスコンテナにアクセスするのと、ランナーマシンからサービスコンテナにアクセスするときの違いってどういうこと?」と思ったのであれこれ試行錯誤したメモ。 初歩的な理解ができていなかったので結構理解するのに詰まってしまった。 要約 GitHub ActionsのランナーマシンではDockerが動くので、コンテナ上でもJob を実行させることができる サービスコンテナはJobを実行させるコンテナとは別にコンテナを起動させて、Jobと通信することができる 用途として、PostgreSQLとかRedisを起動させて、スクリプトを実行するなど ランナーマシン上で直接Jobを実行する時はマシン内のDoc

筆者情報 今年からフリーランスとしてフロントエンドエンジニアをやっています。仕事では React + Redux Toolkit + TypeScript というごく普通の技術スタックです。 前職は受託開発会社で色々やっていましたが、直近1年はWordPressを触っていました。 Cloudflare Workers 2022年一番趣味で触った気がする。8月に無職になって暇になったので調べていた。「エッジサーバー上で動くFunction as a service」と言えば大体伝わると思う。 とにかくResponseが早い。無料プランなのにデプロイしたHello Worldレベルのコードが20-30msレスポンスを返す。 ちょっとした外部APIへのRequestでAPI Keyを秘匿して通信するために使ったり、キャッシュしてオリジンサーバーへのRequestを減らしたり、定期実行したりと色々

参画する前の状態 Web フロントエンド(主に React + TypeScript)を趣味で 2 年ぐらい触っていたけど、実務としてフロントエンドをがっつり触る案件に恵まれなかったという状況でした。 受託開発会社でWeb エンジニアとして 3 年ぐらい働いていましたが、どっちかというとコード書くより社内での Google Workspace 導入とか社内 Wiki 整備とかそういう DX 系のことの方が多かったです。 良かったこと 思っていたよりコードをガシガシ書く 思っていたより趣味でやっていることもちゃんと通用すると実感できた 「フリーランスとして活躍してるエンジニアは全員バキバキにできる人」という先入観がいい意味で崩れた 良くも悪くも React + TypeScriptを採用している現場のことを知れた 前職だとコード書く仕事が少なかったのでそういうものかと思っていましたが、現在の

お断り これは自分がフリーランスエンジニア(個人事業主)として開業するために行った役所の手続きの記録です。案件の獲得のノウハウはありません。 概ねの場合、これで充分だと思いますが、不安なら市役所の窓口に聞けばだいたい教えてくれます。そこで確認してください。 覚えるのが苦手な人は「退職後2週間以内にやらなきゃいけない手続きがある」と覚えてください。 やったこと 最低限やる必要があるもの 退職直前まで在籍していた会社へ退職証明書発行を依頼 (年金、保険の手続きで使います) 役所で国民健康保険への切り替え (退職してから2周間以内) 役所で国民年金への切り替え (退職してから2周間以内) 開業届を税務署に提出 (実際に仕事するまでに出す必要あり、それより早くてもいい) マイナンバーカードがある場合は電子で申請できます 確定申告 (2月~3月にやるもの、そのための準備を日頃からする) 必須ではない

Hasta la vista, baby 退職エントリーです。 2022/07/31 をもって 3年4ヶ月勤めた受託開発の会社を退職しました。 こういう内容を長々書くのはいかがなものか、という意見もありますが、他の人の退職エントリーを読んでて自分も転職の意思が言語化された経由があるので、自分も書きます。 退職した理由は下記に続いています。 会社の事業の方向と自分がやりたいことが噛み合わないため 一番の退職理由です。 会社の方針として非IT系企業のDX支援事業に注力すると発表がありました。具体的はグループウェアの導入提案や補助になる想定で、コードを書いてソフトウェアを開発することから離れそうでした。 一方で、自分は趣味の時間でもコードをガリガリ書いたり、ライブラリをチェックしたりするのが好きです。コードを書いて、プロダクトを開発して、それを改善するサイクルが好きです。 物事の解決に対して、コ

概略 7 月末で 3 年間勤めた受託開発会社を辞めることにしました。 退職理由としては「実務上の開発経験がほとんど詰めず、雑用業務ばかりで、今後もそういうのに関われる可能性が低いため」です。 自分自身は Web 技術が好きで、特にフロントエンドの領域を独学していて面白いと思っているので業務でもそういうことに関わっていきたいと思っていたのですが、案件の運がなさすぎて今の会社ではそういう開発業務に殆ど関われませんでした。 そのため「経験年数の割に、開発経験がない」というのがコンプレックスになっていて、その上、自分のキャリア的には良くないと自覚していました。 そこで色々考えた結果としてフリーランスエンジニアとして転職しました。 退職後の選択としてフリーランスを選択した理由 Web フロントエンドポジションを志望しているのでそのポジションの求人がある会社に転職しようかと思っていたのですが、2 社連

取り組んだものは下記です。 notion.yumemi.co.jp 応募する予定はありませんが、フロントエンドの素振りの課題としては面白そうと思って取り組んでみました。 やってみた感想として、適切に作ろうと思うと意外に設計に頭を使うのと、Unit Test の経験値がないことを突きつけられて面白かったです。 自分にはフロントエンドの実務経験が一切ないので、自分の中でバラバラに知見があった ESLint や Prettier、husky や GitHub Actions をアプリケーション開発の中で使用する、経験が得られてよかったです。 また、コミットやブランチの運用も採点対象になるそうなので、普段ものすごい雑にやっていたコミットやブランチ運用に緊張感を持って、他人が見ることを意識して取り組めました。 テストは 100％カバレッジを通そうとしましたが、モチベーションが尽きてしまったのでこれで

誰向け? 2022 年度内に Web フロントエンドポジションに転職したい自分の整理 エンジニアとして 4 年目だけど Web アプリの開発経験があんまりなくて詰みかけている 友人 その他、Web フロントエンドのトレンドをざっくり追いたい人 それぞれの技術の詳細は書きませんが、ざっくり気になるポイントを書いてます。 情報源 どんなものが流行っているか、という肌感のチェックに使っている。 The State of JS 2021 Frontend Developer Roadmap Zenn フレームワーク＆ライブラリ React 18 17 は特に大きな変更なしだったが、18 では色々な Hooks が追加されりしている New Feature の項目を見ると使いこなすとパフォーマンスが上がりそうなので試してみる Zenn とかでも解説記事が出回っているので書き方を探っていく Next.

はじめに 静的コンテンツをCDNに乗せておくとアクセス時間が早い、という話ではなく、 Next.js を SG してブラウザで閲覧した時の挙動に絞っています。 TL;DR SGした際に、 getStaticProps() 経由で渡したコンテンツは _next/data/ ディレクトリ配下に JSON 形式として書き出される 該当するローティングに達すると、 JSON を読み込み、クライアントサイドでページを書き換える すべてのコンテンツを一気に読み込むのではなく、ページへのリンクが表示されたら、そのリンク先のコンテンツの JSON を先読みしている つまり、クリックする前に既にコンテンツは読み込まれているので、クライアントサイドの書き換えしか時間がかからない Chrome DevTools で見てみる Next.js の公式サイトは SG で構築されています。これを例として見ていきます。

TL;DR ローカルのリポジトリに入っていない、外部の API から取得した画像の最適化をどうするか 結局、 Vercel なら外部 URL の画像も最適化して高速で配信できるので Vercel を選択した 経由 Next.jsの getStaticProps と getStaticPaths を使ったStatic Generationの素振りをするために作成しました。 作ったもの https://nextjs-demo-spacex-crew.vercel.app/ リポジトリ https://github.com/ryokryok/nextjs-demo-spacex-crew 悩んだ末に結局 Vercel デプロイ 最初は Vercel にロックインはしたくないと思い、 next export で静的に書き出して firebase や Netlify にアップしようとしたしたのですが

TL;DR 第一引数に四捨五入する値を、第二引数に小数点以下の桁数を指定する関数を定義する。 /** * Rounding number with digit * Example: * round(3.14159265359, 2) = 3.14 * @param {number} value * @param {number} digits default : 0 * @returns {number} rounded number */ function round(value, digits = 0){ return parseFloat(value.toFixed(digits)) } // Math.E = 3.141592653589793 round(Math.PI, 3) // expected output: 3.142 round(Math.PI) // expecte

動機 以前から React を自作しよう を見かけてやりたいと思っていたが GW でやっとまとまった時間が取れたのでじっくり取り込んだ。 React をよく個人的に使うので、その設計と実装を経験したほうが React への理解が深まるのでは?と思った。 TL;DR 作業結果は下記のリポジトリにアップした。 https://github.com/ryokryok/practice-diy-react 感想 記事の中で実装したのは下記の React の関数を簡素化したものだった。 React.createElement React.useState ReactDOM.render 実際手を動かした見た所感は下記。 本当に 1 からの実装して数百行のコードで React の関数を置き換えるので面白かった /** @jsx Didact.createElement * とコメントを書くだけで JS

プライムデーから2週間ぐらい経過したけど振り返る。 なんだかんだで合計3万円ぐらい買った。基本的に必要なものを買えたので満足。 Amazon Basicの10mm厚のヨガマット 自宅トレーニングの環境を改善するために買った。 ケトルベルを振ったりスクワットするときに足裏の負荷がかなり減って助かる。 今まで4mm厚のヨガマットを使っていたけど、全く別物。 ゴム臭いというレビューがあったが、プランクぐらいの姿勢なら感じない。鼻を近づけて感じるレベル。 www.amazon.co.jp 8畳向け LEDシーリングライト 3年ぐらい前に買ったLED電球の天井照明が暗かったので買った。 6畳の部屋だけど、8畳タイプでも値段が変わらなかったのでこちらを購入。 LEDシーリングライトって初めてなんだけど、最大光量にするとキンキンに明るくて目が覚めるレベル。 基本的には最低光量から1段上げて、1段温色寄り

TL;DR サンプルコードは下記です。サンプルで必要な箇所以外は極力シンプルにしています。 https://github.com/ryokryok/react-ts-jest-rtl React + TypeScript(with Webpack) Jest(ts-jest) React Test Library 前提 最低限の yarn または npm コマンドの使い方がわかること。 JavaScript には Node.js 環境で実行されるものと ブラウザで実行されるものがあるのを知っていること。 この記事では基本的な環境構築と簡素なテストのみ実行記載するが、詳細は各自公式ドキュメントを読むこと。 Webpack 環境 前提として、下記のような Webpack 環境で React + TypeScript がビルド&開発用サーバーが立ち上がることを前提とする。 詳細なファイルの内容は

動機 毎回 npx create-react-app で React アプリを生成していて Webpack の勉強から逃げていたが、いい加減向き合いたいと思ったため。 昔 Webpack に入門しようとしたら難しいという先入観を抱いたので、できるだけシンプルに、一歩一歩づつ入門する。 最終的に、React + TypeScript の環境を作れるようにする。 リポジトリ 各ステップごとにコミットしているので逐次さかのぼってください。 github.com 前提 最低限の yarn または npm コマンドの使い方がわかること。 npx create-react-app で React プロジェクトを作成した事があること。 ※VSCode 使用を前提としています。 Config なしで実行する 最低限の構成で Webpack が何をするのか理解する。 準備 # run at project

React Hooks で追加されたuseRefは最初は使いどころがよく分からなかったのですが、実践例を見つつサンプルを書いてみたら使いどころが掴めてきたのでまとめます。 前提 ReactのuseStateとuseEffectの使い方は覚えたけどuseRefについてはあまり公式例を見てもイメージがつかない人向けです。 サンプルコードはnpx create-react-app my-app --template typescriptで作成して、App.tsxに書いています。 https://create-react-app.dev/docs/adding-typescript .current を利用して初回レンダーのuseEffect()を早期returnで終了させる useRefには.currentプロパティがありますが、これはコンポーネントのレンダー時に毎回セットした初期値を返します。

toyokeizai.net プログラミング教育が学校教育でも始まるということや、人手不足だからスキルを身につけると稼げるとか、未経験から数ヶ月でエンジニアにとか、プログラミングが話題になってますね。 学習していた記録を思い出しながら早めに知りたかったことや詰まった点を思い出していく。 何をやってきたのか 25歳の時に転職したかったのでそこから本格的に始めて、趣味ではWebのフロントエンド/バックエンドを書いて、仕事ではVBAやフレームワークのプラグインを書いたりしてます。それ以外だと中学生の時にHTMLとCSSで使って個人サイトを作っていました。 本格的にやり始めてから最近までの履歴はこんな感じです。 転職のためにプログラミングスクールでJavaでECサイト作成 RailsのためにRubyを学習してWebフレームワークでMVCやHerokuを使ったデプロイを学ぶ フロントエンドの開発に興