GitHub Actions の実践的なノウハウが凝縮されている一冊「GitHub CI/CD 実践ガイド」を読んだ📕 本書ではソフトウェア開発ライフサイクルから GitHub Actions 基礎トピック・GitHub Actions 実践トピックが紹介されていて，さらに GitHub Actions を活用して実現するリリース自動化・パッケージ管理・セキュリティのシフトレフトまでもカバーされている❗️素晴らしい👏 GitHub Actions をなんとなーく使っていたり，いつも既存のワークフローをコピーしていたりする人は必読かなと ＼( 'ω')／ また著者の経験に基づくベストプラクティス（こうすると良いよ〜的な）が散りばめられているのも現場目線で読めて良かった❗️ GitHub CI/CD実践ガイド――持続可能なソフトウェア開発を支えるGitHub Actionsの設計と運用 エ

はじめに 今回は、コードレビュー観点表を作った話について少し書かせていただきます。 社内ではGitHubを用いてコードレビューを行っていて、バックエンドの開発においては、コーディングガイドラインも策定しています。 しかし開発において、ガイドラインに書かれている事項が全てではないため、コードレビューを行う際のポイントが自分の中で綺麗に整理しきれていませんでした。 また、ガイドラインの重要なポイントを十分に把握できず、効果的なコードレビューができていない現状がありました。これを改善するために、コードレビューの観点表を作成したことで、コードレビューの質が上がった話についてお話ししようと思います。 問題となっていたこと 一貫性がないレビュー 毎回レビューを行う際に、自分の中のレビューポイントが明確に決まっていなかったため、的確にレビューができていないこと レビューにかかる時間が長い 自分の中でのレ

2024年度リクルート エンジニアコース新人研修の講義資料です

こんにちは。サーバエンジニアのnsym-mです。普段はGoでバックエンドの開発などをしています。 最近テストに関する書籍や記事などを色々読み漁ったので、現時点での自分のテストについての考え方を備忘録として残しておきます。 今回の話はWebフロントエンドやiOS/Androidなどでも適用できる汎用的な考え方として記載していますが、ベースの文脈はバックエンド開発になりますのでそのつもりで読んでいただけますと幸いです なお、本記事では主にGoogle、『単体テストの考え方/使い方』、@t_wadaさんの発表されている考え方（いわゆる古典学派）に倣っています。 用語整理 よく使われるテストスコープ 単体テスト（ユニットテスト） 人によって定義に差がある 統合テスト（インテグレーションテスト） 結合テスト（E2Eテスト） 単体テストの定義がブレることから、スコープではなく実行時間で判断するテストサ

【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って，Unreal EngineのFPSミニゲームを完成させてみよう 編集部：或鷹 1234567→ これを読んでいる人なら重々分かっていると思うが，昨今のゲーム市場において大きな存在感を示しているのは，プラットフォーマーでも大手メーカーでもなく，Steamだ。 何十億円もの開発予算こそもっていないが，いままでに見たこともないようなアイデアに満ちた珠玉の作品達が，それこそ遊びきれないほど眠る豊穣の大地である。 Steamを見ていると，本当にゲームというものは「アイデアと気合い」なんだと思うことも多い。美麗な超絶グラフィックスである必要はなく，なんなら文字だけでも面白いゲームは作れるわけで，そういうもので遊んでいると自分もむずむずしてくる。もしかしたら自分にも，何か作ってみたいゲームがあったりするんだろうか？ しかし，世の中はそ

2024年度リクルート エンジニアコース新人研修の講義資料です

生成AIをよりよくする手法の一つにRAG = Retrieval-Augmented Generationがあります。これは単純な仕組みから作ることができて、効果的で面白いです。そして、Cloudflare Workersを中心としたCloudflareスタックで実現できます。やってみると、Cloudflareを使ったアプリケーション作成に必要なエッセンスをいくつも体験できることが分かりました。そこ今回は、シンプルなRAGアプリを作りつつ、Cloudflareスタックを学んでみましょう。 リポジトリ 今回扱うコードや関連する例は以下のリポジトリでみれます。 CloudflareスタックでRAGを作るとは？ RAGの実装方法を説明します。いくつかありますが、簡単な方法にします。 LLMと会話をするにはsystem、userというロールで以下のようなパラメータを渡します。 app.get('/

2024年のブラウザならCSSの:has()疑似クラスが使えます。この:has()疑似クラスは非常に強力なポテンシャルをもっています。というのも:has()疑似クラスを使えば、どんな関係のセレクターも指定可能になります。これを使えば多彩なセレクターが記述できるようになり、より表現力豊かなCSSを実現できます。この記事では:has()疑似クラスを使ったCSSの表現手法やテクニックを紹介します。 サンプルを別ウインドウで開く コードを確認する :has()疑似クラスの基本的な使い方 :has()疑似クラスの使い方について簡単に説明します。:has()疑似クラスは渡したセレクターを持つ親要素を選択します。たとえば、次のようなHTMLとCSSがあるとします。 <p class="text"> <strong>メロス</strong>は激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。

MozillaとGoogleは、ブラウザを用いたテスト自動化のためのフレームワーク「Puppeteer」がFirefoxを正式にサポートしたことを発表しました。 PuppeteerはGoogleが開発しており、Chrome DevTools Protocol（CDP）を通じてChromeをリモートコントロールすることでテスト自動化を実現しています。 CDPはWebSocketによる高速な双方向通信、コンソール上のメッセージを取得するなど低レイヤのAPIにも対応するなど、より柔軟かつ高度なテスト自動化を実現できます。 しかしCDPはChromium系のWebブラウザしか実装されていません。FirefoxはCDPのサブセットを実験的に実装してPuppeteerから操作可能ですが、あくまでも非公式なサポートにとどまっていました。 新しい標準のWebDriver BiDiをPuppeteerとFi

はじめに こんにちは、計測プラットフォーム開発本部SREブロックの山本です。普段はZOZOMATやZOZOGLASSなどの計測技術に関わるシステムの開発、運用に携わっています。 我々のチームは、複数サービスを運用する中で障害対応の経験不足や知見共有の難しさといった課題に直面していました。そこで、半年ほど前にカオスエンジニアリングの導入を開始しました。 本記事では、カオスエンジニアリングを一過性のものではなくチームの文化として根付かせ、継続的な改善サイクルを生み出すための導入から運用まで、我々のチームでの実践から得られた具体的な方法をお伝えします。 これからカオスエンジニアリングを始めようとしている方はもちろん、すでに導入しているものの効果的な運用に悩んでいる方の参考になれば幸いです。 目次 はじめに 目次 背景・課題 カオスエンジニアリング導入の流れ 1. 目標とKPIの設定 1.1 目標

概要 Cloudflare の利用を徐々に減らし、Akamai Connected Cloud へ移行しているのでそれを記録していくことにする。 移行理由 ただのアンマッチで、自分のサービス選定ミス。 自社の商用サービスが期待するレベルのサポートを得るには、Cloudflare エンタープライズプランが必須な事をわかっておらず、費用面でアンマッチになった。 サポートが必要になった状況 WebSockets · Cloudflare Network settings docs 商用環境で WebSocket を利用する場合はサポート契約が必要 サポートに問い合わせ、年 2400 ドルのビジネスプランを契約を推奨されたので契約 Cloudflare LB で WebSocket が突然切断される問題 問題の報告から 6 ヶ月以上経過しても、連絡も無く問題も継続して発生 8 ヶ月目にやっと返信が

TOPコラムテック最前線レポート【t-wada】自動テストの「嘘」をなくし、望ましい比率に近づける方法【Developer eXperience Day 2024 レポート】 【t-wada】自動テストの「嘘」をなくし、望ましい比率に近づける方法【Developer eXperience Day 2024 レポート】 2024年8月8日 プログラマ、テスト駆動開発者 和田 卓人 学生時代にソフトウェア工学を学び、オブジェクト指向分析/設計に傾倒。執筆活動や講演、ハンズオンイベントなどを通じてテスト駆動開発を広めようと努力している。『プログラマが知るべき97のこと』（オライリージャパン、2010）監修。『SQLアンチパターン』（オライリージャパン、2013）監訳。『テスト駆動開発』（オーム社、2017）翻訳。『事業をエンジニアリングする技術者たち』（ラムダノート、2022）編者。テストライブ

後から優秀な人がどんどこ入ってくる 自分は創業期ではないけど社歴でいえばかなり初期の頃に入社しており、それはそれで運が良かったし、カオスな時期ものどかな時期も大変だった時期もあってそれを乗り越えたといえば聞こえがいいが、会社が整うにつれてめっちゃ優秀な人に囲まれるようになって、ふと気が付くとちょっと引け目を感じる。 その優秀な人がみんな年下だったりする 社歴が長いのでその分年を重ねるわけだけど、若くて優秀な人がたくさんいて、みんなすごくて、もちろん出世（昇格を指す）もしていくので、ちょっとした置いてきぼり感がある。 チームが生まれたり消えたり統合したり分割したりするので、それに伴う降格（？）もあったりする いろいろな試行錯誤があるのでチームが変わり、一瞬上長的な役割になったけどそこから外れることももちろんあって、気持ちの持って行き場所がない時があった。 ちなみにこれは、以前の上長が「マネジ

CSSの@propertyがFirefoxにサポートされ、デスクトップ・スマホのすべてのブラウザでサポートされました。 @propertyは次世代変数と呼ばれるもので、これまでの変数（カスタムプロパティ）の使い勝手が大幅に向上します。@propertyによるカスタムプロパティの記述方法、@propertyを使ったCSSのテクニックを紹介します。 @property: Next-gen CSS variables now with universal browser support by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに @propertyのメリット @propertyによるカスタムプロパティの記述方法 @propertyの使い方: きらめくグ

こんにちは。 jQuery から商業プログラミングに入門したやまゆです。 なぜ jQuery だと古い、ダメだと言われるのでしょうか？いいじゃん。 $.ajax で簡単にデータ引っ張ってこれるし、 $("#btn").click(function () { alert("押した！"); }); は誰が見ても何が起こるか一瞬で分かる Simple さがあるじゃん。なんでわざわざ React/Vue/Svelte その他 jQuery ではないライブラリを使わなければならないんでしょうか？ 100 億回言われてきたことだと思いますが、私なりに振り返ってみます。 手続き型 UI と宣言型 UI は、手続き型です。 btn という ID の DOM 要素を取得して、それらの(一応複数になる可能性があります)要素に対して click イベントハンドラを登録します。 この処理が実行される前と後では、

ファインディ株式会社でフロントエンドのリードをしております 新福(@puku0x)です。 この記事では、ファインディで導入しているモノレポ管理ツール「 Nx 」について紹介します。 モノレポとは Nxとは Nxワークスペースの作成 Nxの機能 コード生成 変更検知 依存関係の管理 キャッシュ機構 自動マイグレーション まとめ モノレポとは モノレポは全てのコードベースを単一のリポジトリで管理する手法です。 monorepo.tools コードの共通化や可視化、ツール・ライブラリの標準化、一貫性のあるCI/CDパイプラインを構築できるといったメリットがあります。また、マイクロサービスと相性が良いとも言われています。 circleci.com ファインディでは主にフロントエンド系のリポジトリをモノレポとして運用しています。 アプリケーションとそれに関連するフィーチャー、UIライブラリがひとつに

世界中の大学のコンピュータサイエンスやプログラミング講座が日本語で学べる「MOOC」（大規模公開オンライン講座）サイトまとめ。2024年版 インターネット上にはコンピュータ関連の情報があふれていますが、その情報の正確さや網羅性は玉石混淆で、いざそれらから学ぼうとしても取捨選択の段階で立ち止まってしまうこともあるはずです。 そうしたときに頼りになるもののひとつが大学のような専門の教育機関による講座であり、それらの講座を有料もしくは無料で提供する「MOOC」（Massive Open Online Courses：大規模公開オンライン講座）のWebサイトはここ数年で広く知られるようになってきました。 そこで本記事では、世界中の大学の講座などを提供している主要なMOOCサイトから、日本語で学べるコンピュータ関連の講座で、しかも無料で学べるものをピックアップしてみました。 もちろん、MOOCサイト

重い腰を上げて FlatConfig 対応をした ESLint が新しい設定形式として FlatConfig を導入してから随分と経ち、最新バージョンの v9 では FlatConfig がデフォルトになりました。一方で利用者の多い plugin でもなかなか対応が進まず、周りでは思ったよりも FlatConfig への移行が進んでいない印象を受けます。 とはいえ次のバージョンである v10 では FlatConfig しかサポートしないことが予定されており、今まで移行を見送ってきた方も「さすがにそろそろ移行するか...」と思っているのではないでしょうか。自身の所属チームで管理している ESLint の rule セット : @cybozu/eslint-config でも遅ればせながら FlatConfig 対応を進めています。（現在はアルファ版で提供中です） そんな @cybozu/e

こんにちは！サイボウズ株式会社フロントエンドエンジニアの おぐえもん（@oguemon_com） です。 サイボウズの技術ブログの夏フェス・CYBOZU SUMMER BLOG FES '24が始まりました！企画の一環として、フロントエンドの記事が今日から20日連続投稿されますので、みなさんお楽しみに！ 今回は、コーディングに手放せない存在の1つ「配列」をテーマに、JavaScriptの配列操作の中でも普段使いしやすいものをピックアップして、細かいテクニックや比較的新しい話を交えながらお届けします。 身近ながらも今まで見落としていたポイントを拾ってもらえたらと思います！ // 凡例 const arr = ["a", "b", "c"] arr // console.logした出力結果 ← 出力結果に対するコメント