こんにちは、株式会社ナレッジワークの@nakajmgです。 今回はChrome 127 betaの機能紹介を見て「こんなのあったの？」となった、擬似要素に代替テキストをつける機能について紹介します。 /で区切って代替テキストが指定できる ::beforeや::afterのcontentプロパティは、/区切りで代替テキストが指定できます。

こんにちは。ナレッジワークの torii です。 最近、プロジェクトで使用している TypeScript の型検査にかかる時間を 3 割ほど短縮することに成功しました。 参考までにどのようにボトルネックを調査して改善に繋げたのかを書いてみます！ きっかけ 改善のきっかけは、たまたまネットを徘徊していて見つけた Zenn 記事でした。 （素晴らしい記事をありがとうございます！） これを読んで「自社のプロダクトでも型検査にかかる時間を短縮できるのでは？」と思い立ち、試してみたところ実際に改善に役立てることができた、というのがこの記事の概要になります。 改善対象 改善対象は、弊社のメインプロダクトであるナレッジワークのフロントエンドです。現在マルチプロダクト化に向けたコード分割に取り組んでいる最中ですが、執筆時点はモノリシックな構成となっています。 改善前の TypeScript ファイルは自動

はじめに 本記事では実践的な Cloud Run のデプロイパイプライン実装を通して Cloud Deploy の理解を試みます。Cloud Deploy は元々 Kubernetes 用のプロダクトとしてリリースされたこともあり、Cloud Run に限って利用するには学習コストが高すぎるところもあります。本記事では Cloud Run のデプロイの本番環境構築・運用に必要な部分のみをピックアップして次のようなことを説明します。 Cloud Deploy の仕組み Cloud Deploy を使ったデプロイパイプラインの設計・実装方法 Service Account、IAM 設計 おすすめの Infra as Code の方法 おすすめの skaffold.yaml の書き方 Automation、デプロイフック、カナリアデプロイなどの高度なパイプライン、監視などは上記のような基本をおさ

どうも、株式会社ナレッジワークのざわきんといいます。 最近よく mermaid というテキストベースの図作成ツールを使っていて、ChatGPTやGitHub CopilotのようなLLMを活用したツールとめちゃくちゃ親和性が高いなと思い、居ても立っても居られないので記事にしました。 TL;DR LLM(Large Language Model)の普及により、テキストベースの図作成ツール（例：mermaid）はますます普及していくと思うので、ガンガン使っていこうぜ！という記事です。 はじめに 言葉によるコミュニケーションの難しさ 突然ですが、言葉によるコミュニケーションって難しいですよね。 頭の中にある構造を言葉だけで相手に正確に伝えることって、なかなか難しいです。 例えば、インフラ構成を説明する場合 例えば、インフラ構成を他の人に説明する場合を考えてみましょう。 ChatGPT に出力して

はじめに 株式会社ナレッジワーク Engineering Division のわだまる（@wadackel）です。 ナレッジワークの Web フロントエンド開発では、Storybook を活用したコンポーネント開発を行っています。そして、昨年末により良いコンポーネント開発の基盤整備を進めるべく @storybook/test-runner（以降 Storybook Test ruuner）を導入しました。導入目的としては主に、各 Story に対するスモークテスト、play 関数を活用したコンポーネントテストを行うことです。 さらに、ナレッジワークでは前述した通常のコンポーネントテストに加えて、reg-suit と storycap を利用した Visual Regression Testing（以降 VRT）を行っています。 これまでは Storybook を活用したテストは VRT の

こんにちは。ナレッジワークの torii です。 7 月にフロントエンドエンジニアとして入社してもうすぐ半年、そろそろ技術記事の一つも書きたいなと思っていたところに、ちょうどいいネタを見つけたので投稿してみます！ Jest から Vitest に移行してみた 早速やったことですが、フロントエンドのテストフレームワークを Jest から Vitest に移行しました。理由としては、Jest が CJS を前提として動作しており、ESM 前提のモジュールを動かすのに一手間も二手間もかかるからです。 ナレッジワークのフロントエンドは Next.js を採用しており、テストフレームワークには Next.js と相性の良い Jest を採用していました。関数単位のテストや UI コンポーネントのテストを書く分には問題なかったのですが、それより上層（ページなど）になるとたちまち ESM 互換性の問題を

はじめに 株式会社ナレッジワーク Enablement Groupの上田(tenntenn)です。 2023年12月2日（土)に京都で開催されたGo Conference mini 2023 Winter in KYOTOに参加してきました。 本記事では、登壇および運営のお手伝いをさせて頂いたため、そのレポートを書きます。 また、当日のオフライン参加者のみに出題したクイズの解説も行います。 なお、この活動はナレッジワークのナレッジスポンサー制度を活用して行っているものです。 生成AIによる静的解析ツールの自動生成 筆者は「生成AIによる静的解析ツールの自動生成」というタイトルで20分のセッションを行いました。 このセッションでは、筆者がOSSで開発している静的解析のスケルトンコード生成ツールのskeletonに生成AIを導入してみた話をしました。 Goの静的解析ツールは、analysisパ

こんにちは、よしこです。 今回は、参加者が800人を超え大盛況となった Encraft #4 「React/Next.js 最前線」 の開催レポートをお届けします！ Encraftとは？ Encraft（エンクラフト）は 株式会社ナレッジワーク が提供する、 "Enablement" と "Craftsmanship" をテーマにした勉強会です。技術にこだわりを持つ人々が集まって互いに知見を交換し、できることを増やしていく場を作りたいと思っています。 過去のイベントの開催レポートは以下からご覧ください。 Encraft #1 「フロントエンド × 設計」 開催レポート Encraft #2 「サーバーとクラインアントを結ぶ技術」 開催レポート Encraft #3 「エンジニアイネーブルメント - 共有・育成・評価・効率化 -」 開催レポート それではさっそく今回のセッション資料と動画アー

はじめに 2023年5月10日に開催されたEnablement Workshop for Gophersで「並行処理の基礎を学ぼう」というタイトルで講義を行ないました。 Enablement Workshop for Gophersは、ナレッジワークが学生向けに提供する手を動かしながら基礎を学ぶ"Enablement"の機会です。 今回のテーマは2023年6月21日〜23日に行われるEnablement Internship for Gophersに合わせて『並行処理』です。 具体的には主に以下のような並行処理の基礎や最近または今後のアップデートについてお話しました。 ゴールーチンとチャネル syncパッケージ コンテキスト 講義の様子はYouTubeで公開されています。 ゴールーチンとチャネル Goの有名な特徴の1つとしてゴールーチンとチャネルを用いた並行処理があります。 講義では、ゴー

こんにちは、よしこです。 この記事では、わたしの所属する株式会社ナレッジワークで最近コードベースに取り入れた「エラーハンドリング漏れ防止の仕組み」について紹介します。 背景 「通信を伴うアクションに失敗しても画面にエラーフィードバックが表示されない」という実装漏れをしてしまったことがあり、今後こういうことが起きないように仕組みで防止したいと思いました。 「忘れてしまった」という問題なので、テストで担保するのも難しいように思いました。実装するのを忘れてしまっているということは、テストを書くこともセットで忘れてしまっているはずだからです。 「気をつける」「チェックリストを作る」のような人間が注意する方向ではなく、「嫌でも気付く」「忘れていたらCIが通らない」のように、必要なハンドリングを強制する形にできないか？と思いました。 課題 実行時に通信エラーが起きる可能性があり、ユーザーフィードバック

こんにちは、よしこです。 今回は、弊社ナレッジワークで初の開催となったオフライン勉強会「Encraft #1」のイベントレポートをお届けします！ Encraftとは？ Encraft（エンクラフト）は株式会社ナレッジワークが提供する、 "Enablement" と "Craftsmanship" をテーマにした勉強会です。技術にこだわりを持つ人々が集まって互いに知見を交換し、できることを増やしていく場を作りたいと思っています。 “Enablement” はナレッジワークの事業内容、”Craftsmanship” はナレッジワークのStyle（行動指針）から持ってきています。Encraft、造語ですがなかなか良い語感ではないでしょうか？ 今回は#1としてシリーズ初の開催となりましたが、20名の参加枠に対して100名以上の応募がある盛況ぶりとなりました！ご応募いただいた皆様、ありがとうございま

こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「linter/formatter」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいて便利だったLint/Format関連の設定についてご紹介していきます。 使っているのは、TSのlintのためにESLint, CSSのlintのためにStylelint, 主なファイルのformatのためにPrettierです。 ESLint pluginsとextendsだけどんなもの入れてるか載せておきます。 "plugins": [ "strict-dependencies", // 後述 "unused-imports", // 後述 ], "extends": [ "a

こんにちは、よしこです。 株式会社ナレッジワーク というスタートアップで、2020年4月の創業時から一人目のフロントエンドエンジニアをしています。 初期に考えて組み上げたスタックで1年半ほど開発・運用してみて、なかなか快適に日々開発ができているので 新規開発のプロダクト立ち上げ時にどのようにフロントエンドを構築したのか？ 立ち上げから1年以上開発・運用を続けてきた今、それらの選択はどうだったのか？ を記事にして振り返り、公開したいなと思いました。 （プロダクトの内容はステルスで進めていてあまり対外的な発信ができないので、かわりに技術的なところはどんどんオープンにしていきたいなという気持ちがあります） いろいろな項目ごとに振り返りたいので、この記事は各項目を横断するindexとして項目ごとの概要を簡単に説明し、深堀りは項目ごとに追って詳細な記事を書いていく予定です！ 前提 プロダクトとしての