はじめに 株式会社hitocolorのKanonとしてはお初にお目にかかります。実は2024年2月からhitocolor様に副業先としてジョインさせていただいてます。 hitocolor様ではkokoroeというeラーニングサービスの開発をお手伝いしています！ hitocolor様にjoin後、最初に着手した本格的な案件が今回の記事で書くStrykerの導入です。 Stryker自体は本業[1]の方の社内勉強会で登場したTOPICSで、その時から関心を持っていました。 本業の方ではそれよりも優先度の高いタスクがたくさんだったので導入の目処がなかったのですが、hitocolor様の方で提案したところ「いいね！」とおっしゃっていただき導入する運びになりました。 そして導入にあたっていろいろやったことを、「せっかくなので記事として公開してみよう！」とお話をいただき今に至ります。 Mutation

Renovateはプロジェクトの依存関係の更新を自動化するツールです。 npmライブラリやGitHub Actions、Dockerイメージのバージョンなどを監視し、ライブラリアップデート用のPRの作成を行います。 Renovateは豊富な構文から柔軟な設定ができますが、プリセットと呼ばれるカスタマイズされた設定集を利用することもできます。 その中でconfig:best-practicesというRenovateが考えるベストプラクティスのプリセットが用意されています。 このプリセットを読み解くことで、Renovateがどのようにライブラリのバージョンを指定し運用するべきか知ることができます。 この記事ではconfig:best-practicesの設定を読み解き、どのようにライブラリの依存関係を扱うかを考えていきます。 config:best-practice で設定されている項目 執筆

Vue/Vite 関連のライブラリー名の読み方は間違えられやすいものが多く、混乱を招くことがあります。この記事では、2024 年現在における Vue/Vite 関連ライブラリーの正式な読み方や由来をまとめ、正しい知識を共有することを目的としています。 Vue フロントエンド UI フレームワークのひとつ。 「ヴュー」と読む（口語だと「ビュー」と発音することが多い）。 Vue（発音は /vjuː/、view と同様） https://ja.vuejs.org/guide/introduction.html#what-is-vue Pinia Vue 公式の状態管理ライブラリー。 「ピーニャ」と読む。スペイン語で「パイナップル」を表す単語 piña に由来。 「ピニア」ではない。 Pinia (pronounced /piːnjʌ/, like "peenya" in English) htt

🐱2年かけてZennで本をガチで書いてみたので、これからZennの本を書くことに興味があるという方向けに知見や収益やらまとめておきます。 ①Zennの本を2年間ガチで書いてみた Zenn本を合計5冊書いて公開しました。特にガチで書いた本はこちらの本「UnrealEngine5の教科書 ゲーム開発入門編,第一巻」という有料本です。 Zennで本を書き始めたのが2021年3月ぐらいで、そこから「UnrealEngine5の教科書」を書き続けて本がやっと2023年12月に完成した感じです。本を書き始めて2年と9ヶ月かけて本を完成させました。なお本に関してはアップデートしつつ、販売していたのでこれから紹介する収益などは本が未完成の状態の情報になります。 🐱本を購入してくれた方、応援してくださった方、改めて感謝申し上げます。今後Zenn本制作に携わる方のために収益を公開させていただきます。 ②本

ESLintのv9.0.0ではFlat Config(eslint.config.js)がデフォルトになりました。これまでの.eslintrcの形式のファイルも使えますが、ESLINT_USE_FLAT_CONFIG環境変数を設定する必要があるようです。 これを機にFlat Configで普段使っているルールを整理して書いてみることにしました。その際やって良かったことをまとめます。 作成した設定はSharable Configとして公開しています。 typescript-eslintのtseslint.configを使う Flat configはこのように配列で書きます。 export default [ { rules: { "no-unused-vars": "error", "no-undef": "error" } } ]; // @ts-check import eslint f

デザインパターンライブラリを作った JSRの話だけ読みたい人は読み飛ばしてもOKです。 JavaScriptのtry-catchはC++の影響を受けており、以下の特徴があります。 (A) throwは大域脱出的である。 (B) try-catchはブロック内の全ての例外副作用に対して一括で作用する。 (C) try-catchは文であり、値を返せない。 (D) TypeScriptにおいて、例外型は明示されない。 このうち (B), (C), (D) の問題を解決するため、RustのResultや類似のパラダイムをJSに輸入する試みがしばしば行われています。しかしこの解決手段にはいくつかの問題があり、 (E) rethrowの専用構文がないためボイラープレートが増える。 (F) 出力ストリームに対するwriteなど、戻り値を持たない副作用関数に対するエラーハンドリングが抜け落ちないようにL

AWS Lambdaで突如としてHTTPヘッダが消失し、それにより悩まされることとなった日の経験を共有します。この問題がどのように生じ解決に至ったのか、また、私たちが学んだ教訓について述べていきます。 対象のLambda関数 今回問題が起きたLambda関数では、ランタイムにNode.jsを利用していました。Lambda関数の中には、外部のAPIサーバに対するリクエスト処理が含まれます。 環境情報は以下の通りです。 ランタイム: Node.js 18 (18.18.2) リクエストライブラリ: ky v1.0.1 エラーの発生 ある時、APIサーバからのレスポンスが"415 Unsupported Media Type"というエラーで返ってくるようになりました。エラーメッセージは以下のようなものです。 問題が起きる前は一度も発生していないエラーでしたが、一度発生した後は、全てのリクエストが

SPA モードの Remix を GitHub Pages にデプロイする方法が Remix のアカウントでポストされていたので、ふとそのリポジトリを見てみると、GitHub Actions を使った GitHub Pages へのデプロイが簡単に行えるようになっていて驚いた。 このポストを見ると GitHub Actions から提供されている Action など知らなかったものがいくつかあったので、Remix SPA モードのデプロイ方法など含め、内容を紹介したい。 動作確認した環境 関連がありそうな依存を記す。 "dependencies": { "@remix-run/node": "^2.8.1", "@remix-run/react": "^2.8.1", "@remix-run/serve": "^2.8.1", "react": "^18.2.0", "react-dom"

Go のコードで文字列の変換をする関数があり、これが Google スプレッドシート上の関数としても利用できれば検証[1]に便利かもしれないと思いました。 Google スプレッドシートでは Apps Script の関数をセル上で実行できるので、Go のコードを Wasm にビルドして JavaScript から呼び出すことができれば良いのではないかと考え、実際に試してみることにしました。 動作環境 Go 1.22.2 Apps Script の設定 Chrome V8 ランタイムを有効にする その他 macOS の pbcopy コマンド[2]を利用した手順を記載していますが、Linux 環境でも pbcopy を他の手段に置き換えることで同様に動作しました。 事前調査 Go を Wasm にビルドして GAS で動かす事例は見当たりませんでしたが、Rust を Wasm にビルドして

ritou です。 これについての話です。 この辺りずっとやってると「認証認可について詳しくなりたいです！」「OIDCに興味があります！」みたいなところから「何をやればいいですか！？」みたいなことを聞かれたりします。(やりたいことやればいいじゃんと思いつつ) 昔は 年に一回ぐらいIdPを作りましょう なんて言っていた時期がありますが、まぁそう簡単にできるものでもありません。ふじえさんの記事をdisっているわけではないですが、OIDCのところから始めても他にやることが多すぎて結構つらいのです。 何から始めたら良いか 現状のおすすめとしては、 Webアプリケーションフレームワークを使って単一アプリケーションを動かして、既存コードを追ったり拡張できるならやってみて色々細かい部分を理解するところから始めましょうというところです。 なんと、ひと昔前にQiitaに溢れたようなやり方ですが どのフレーム

はじめに この記事の内容は、以下の動画でも解説しているので、ぜひ見てみてください。他にもフロントエンドに関する解説動画を投稿しているので、良ければチャンネル登録よろしくお願いします！ CDNとは CDNとは、「Content Delivery Network」の略で、インターネット上でコンテンツを効率よくユーザーに配信するためのネットワークのことです。 CDN（Content Delivery Network）とは、Web上で送受信されるコンテンツを効率的に配送するために構築されたネットワーク IT用語辞典 - CDN 例えば、日本からアメリカのサーバーでホスティングされているWebサイトにアクセスする場合を考えてみましょう。 日本とアメリカのサーバー間では、物理的な距離が遠いため、日本でホスティングされているWebサイトにアクセスする場合に比べて、Webページを表示するスピードが遅くなっ

はじめに 初めまして！京都大学理学部3年の田本と申します。 去年の5月にプログラミングを学び始め、そろそろ1年が経とうとしています。 これまでの総括と自己紹介を兼ねて、プログラミングを1年間本気で学んでできたことをここでアウトプットしていこうと思います。 この記事を読んで、プログラミングに少しでも興味を持つ人が増えれば幸いです。 きっかけ 僕は大学2年までは決して優秀な学生とは言えませんでした。 大学へは平均週2コマ程度しか出席せず、期末テストのみ受けて取れる単位を取り、それ以外の時間はほとんどゲームに費やしていました。 そんな中、ゲームで知り合った元エンジニア・経営者の溝口さんという方に「プログラミングやってみない？」とTwitterのDMで誘われたことがきっかけで、プログラミングを勉強することになります。 溝口さんは以前にもいくつか会社を経営しており、簡単に言うと20代で10億稼いだめ

ritouです。 こちらの記事の続きです。 前回の記事の振り返り 3行でまとめると まずは単一アプリケーションのID管理について解像度を上げてみよう Webアプリケーションフレームワークを使って新規登録から退会までざっくり動作確認してから、色々いじったり調べてみるのが良いよ セキュリティ関連の機能とか、新規登録時の身元確認、ログイン方法を拡張してみよう といったところです。個人的にはこれは全エンジニア向けの研修であってもいいぐらいのものだと思います。 今回の内容 タイトルにある通り、複数のアプリケーションが関わる部分に入っていきましょう。 というか、OAuthとOIDCやりたいんですよね？え?SAML? まずはID連携のベーシックな部分に触れていきましょう。 プロトコルは混ざっちゃっていますが、順番としてはこんなのはどうでしょう。 OAuth 2.0のClientとしての機能を設計/実装す

最近関わっているプロジェクトでは、大きなアプリケーションのリアーキテクチャを行っています。 そこではフルスクラッチでインフラの構成を書き直す機会がありました。 そのプロジェクトは社内では比較的複雑な構成になっていて、リアーキテクチャにあたっては、アプリケーション特有の事情により、考慮すべきポイントや難度が高いところがたくさんありました。 具体的には、複数のマイクロサービス間の協調性や独立性とそれに付随する認証/認可、クライアント証明書(mTLS認証)の管理、歴史的経緯による複雑性を正すためのawsアカウント移行などなど。 それらは別の機会で語る(or 同僚の誰かが語ってくれることに期待したい)として、この記事ではインフラをフルスクラッチで書き直すにあたって選択したCDKTFについて、紆余曲折を経つつも最終的に採用したディレクトリ構成について書きたいと思います。 タイトルには「ベストな」とあ

はじめに Rustを使っているとすべてをRustで書きたい欲に駆られることがあります。 たとえば負荷試験ツールもRustで書きたい、みたいなことがあったりします。 ありがたいことにRustではGooseという負荷テストフレームワークがあり、これを使えば負荷テストをRustで実装できます。 ちなみに、GooseはRust Foundationのメンバーであるtag1が開発しているので安心感があります。[1] 本記事はGooseについて基本的・応用的な使い方などについて紹介していきます。 Gooseとは GooseはPython製の負荷テストツールであるLocustにインスパイアされたRust製の負荷テストフレームワークです。 Locustと比べて、約11倍ほどのトラフィックを生成でき、CPUコアを可能な限り使用してくれます。[2] またLocustと違い、フレームワークなのでビルドしたバイナ

はじめに こんにちは。calloc134 です。 自分は以前から Linux パソコンを欲していたのですが、ついに先日、ThinkPad を購入し、Manjaro Linux をインストールしました。 ここでは、セットアップ手順についてまとめていきます。 完成形 以下のようなデスクトップが完成しました。 利用したもの Manjaro Linux Cinnamon Edition White Sur GTK Theme White Sur Icon Theme Noto Sans CJK JP WezTerm Zsh Sheldon Starship Neovim fcitx5-im 事前準備 Linux を導入するための ThinkPad を購入します。 自分は以下のスペックで購入しています。 ThinkPad X13 Gen 4 AMD Ryzen 7 PRO 7840U 32GB RA

はい、Copilot なめてました。すみません。 この記事は PowerShell を書くのがめんどくさい、もしくは普段書かない方のために、Copilot を利用して 一文字も書かず 望みの PowerShell が生成されて感動したというだけの大したことない記事です🤣 1. はじまり 「Intune で管理されてるデバイスに最後にサインインしたユーザーが知りたい」 そんなことを時々言われるのです。 15 年くらい前に Configuration Manager のサポートエンジニアをやってた時代にもよく聞かれてた話で、WMI や監査ログでゴリゴリ頑張ってもいいんだけど、確か資産インテリジェンス(今は非推奨) を追加するとひっそりレポート増えたよなーとか、もはやどうでも良い思い出。 しかし、この SIEM だ UEBA だ XDR と言われる分析・自動化の世の中でもサインインログってまだ

超楽にRubyで雑に書いたスクリプトをsystemdで管理したい！ - 宇宙行きたい で systemd がユーザ権限で使えることを知る。 開発環境用では nohup と cron の @reboot を使っていました。こちらもお手軽なので紹介。 @reboot とは crontab(5) に @reboot があれば使えます。その名の通りリブート時に一回だけ実行。Ubuntu なら利用可能。 $ man 5 crontab (省略) Instead of the first five fields, one of eight special strings may appear: string meaning ------ ------- @reboot Run once, at startup. @yearly Run once a year, "0 0 1 1 *". @annual

はじめ はじめまして、チームラボ フロントエンド班のLIUです。中国四川出身で、CSSとホラー映画が大好きマンです。新卒でチームラボに入社し、現在フロントエンドエンジニアとして働いています。 この記事では、フロントエンド勉強会（チームラボ内で、隔週で開催しているフロントエンドに関するLT会）で発表したDefensive CSSについての内容を紹介します。 レスポンシブデザイン タイトルは「Defensive CSS」ですが、まずはレスポンシブデザインについて話したいと思います。 モバイル通信の発展や、スマホブラウザがPC並みのパフォーマンスを実現したことで、レスポンシブデザインが広く普及しました。これにより、フロントエンジニアはスマホ専用サイトの制作から脱却し、CSSを用いて簡単に画面サイズに応じたレイアウトを実装できるようになりました。 しかし、レスポンシブデザインにはメリットだけでなく

はじめに 弊社マイベストでは、エンドツーエンドの機能開発チームとは別で、組織の価値提供能力を高めることを目的としたイネーブリングチームがあります。（と言ってもまだ他チームとの兼任メンバーがほとんどですが） イネーブリングチームは、バックエンドやフロントエンドなど、領域ごとに技術課題を解決すべく活動していて、自分はフロントエンド領域を担当しています。 これまで様々な活動を行ってきたので、その考え方を整理しつつ、フロントエンドイネーブリングの実践例をご紹介したいと思います。 参考：マイベストのチーム構成イメージ（記載は一部のみ・名称は仮です） 「イネーブリングチーム」とは イネーブリングは『チームトポロジー 価値あるソフトウェアをすばやく届ける適応型組織設計』、通称チートポから持ってきた名称なので、まずはチートポをベースにその役割を説明します。 https://amazon.co.jp/dp/