フロントエンド

コミューンエンジニア的最強CLI環境を作ってみた

コミューンに今年の8月にエンジニアとして入社した角田です。 入社して3ヶ月、業務には慣れてきましたがシェルの設定は空っぽ、ターミナルも初期設定のままです。 また、ブログのネタにも困っていました。 これを機に先輩エンジニアたちのCLI環境についてイ…

TypeScript Compiler APIを活用してi18nの不整合をチェックする

こんにちは。業務委託としてコミューンのグローバルチームでエンジニアをしているhiro08と申します。 グローバルチームでは主に海外展開に向けた開発や施策を行なっています。もし、グローバルチームに興味のある方は日本のSaaSスタートアップが世界で戦うた…

Next.js Conf 2022で最も感動したライブラリ、vercel/satoriについて紹介させてください。

はじめまして。コミューンでサーバーサイドエンジニアとして働いています、あのちっくと申します。 突然ですが皆様は昨年 10 月に開催されたNext.js Conf 2022はご覧になられましたでしょうか。 Next.js Conf は Next.js の開発・メンテナンスを行っている V…

プロダクトスペシャリストに転向して半年が経ちました

初めに こんにちは。コミューンプロダクトサポートチームにおいてプロダクトスペシャリストとして活動している栗山と申します。 元々EMとしてコミューン開発に携わっていましたが、紆余曲折を経て現在のポジションに転向しまして、既に半年ほど経ちました(…

問題を早期発見して開発体験を上げる試み

はじめに こんにちは。2022 年 7 月に入社したエンジニアの浅見(@astatsuya1)です。 今回は 20%ルールで実施した問題の早期発見をして開発体験を上げるために行ったことを紹介します。 はじめに コミューンの 20%ルールとは 何をやるか考えた commmune の開…

Cloud Build上でNext.jsのコンテナイメージのビルド速度を改善した話

はじめに SREチームの磯村です。 去年入社してからフロントエンドエンジニアとして働いていましたが今年6月からはSREチームに転属しました。 SRE見習いとして奮闘中です。 コミューンはアプリケーションの基盤としてGoogle CloudのCloud Runを利用しています…

日本のSaaSスタートアップが世界で戦うためのプロダクトを開発するということ

こんにちは。昨年の11月にエンジニアとしてコミューンに入社したざびえる(仮名)です。 コミューンは、CEOのブログ「進出して分かった日本とアメリカのSaaSプロダクトニーズの違い|高田優哉/commmune|note」にもある通り、アメリカ進出をしており、私はそ…

良いコンポーネントを作るために気をつけている3つのこと

はじめに 良いコンポーネントとは 良いコンポーネントを作るためのポイント 1. コンポーネントを要素ごとに過不足なく分割する 2. コンポーネントの抽象度を揃える 3. 利用する側を意識せずにコンポーネントを作る 最後に はじめに こんにちは、コミューンで…

Reduxの基礎を理解する

コミューンに今月入社した磯村です。 コミューンのフロントエンドは状態管理にReduxを使っています。1 今回Reduxの基本的な動作について調べたので、自分なりに理解した内容と理解するためにやったことをまとめました。 tech.commmune.jp↩

読みたい!TypeScript製のOSS紹介

こんにちは,@unvalley_ です. 僕の数少ない趣味の一つに,「GitHubを徘徊して,スターを付けまくる」というものがあります. この記事では,そんな趣味の中でスターを付けたリポジトリを紹介します.

styled-jsxの記法をまとめる

フロントエンドエンジニアの根岸です。 css in jsのstyled-jsxを2年ほど使っているのですが、どんな記法があるかちゃんと勉強したことがなかったのでまとめてみました。

TypeScript 4.2のリリースまとめ

こんにちは,@hulsc2esです. 2021年2月23日に,TypeScript4.2がリリースされました. 本記事では,4.2にて追加された機能についてまとめました. 本記事は,主にTypeScript公式のリリース記事から得た情報を元にしています. それでは,早速中身に入ります.

Next.jsのAppとDocumentとページはどんな順序で実行されるのか調べてみた

先日commmuneの_app.tsxの整理をしました。 そのときに_app.tsxと_document.tsxとページコンポーネントがどんな順序で実行されるのか混乱したので調べてみました。

DATADOGを用いたフロントエンドのパフォーマンスの定期的な計測

ある朝、前原夏樹が気がかりな夢から目ざめたとき、購入したサピエンス全史の上巻(2年ぶり2冊目)に玄関の郵便受けがすっかり破壊されてしまっているのに気づいた。 皆様こんにちは。 最近寝る前にカフカ全集を読んでいるせいで悪夢を見る回数が増えたよう…

React Hook Formは非制御コンポーネントからどうやって変更を検知しているのか

こんにちは。エンジニアの根岸です。 コミューンには2年ほど前から副業で関わっていたのですが、昨年の12月に正社員としてジョインすることになりました。 コミューンのプロダクトには比較的長く関わっているのですが、知らないうちにフォームライブラリのRe…

Next.jsとTypescriptが奏でるUniversal JSの世界 ~commmune を支えるアーキテクチャ~

Next.jsはサーバレンダリング、ゼロセットアップなどモダンな機能を兼ね備えたフルスタック系Reactフレームワークです。commmuneではUniversal JSを実現する手段として採用し世界的なトレンドの先端を切り拓いています。 また、Typescriptは今や大規模開発に…

【全文和訳】Next.js 9.2

(以下は2020年1月15日に公開された Next.js 9.2 の日本語和訳です。 以下原文 ) https://nextjs.org/blog/next-9-2 心躍る、Next.js 9.2の発表です: Built-In CSS Support for Global Stylesheets: アプリケーションは .css ファイルをグローバルスタイル…

【webpack】bundleサイズを40%減らしてJavaScriptビルドも40%高速化する方法

Moment.jsのLocaleがでかすぎる問題 Webpack Bundle Analyzer という解析ツールがあります。まだ使っていないエンジニアの方は早急に npm i しましょう。チューニングのバイブルです。

【全文和訳】Next.js 9.0.7

(以下は2019年9月30日に公開された Next.js 9.0.7 の日本語和訳です。 以下原文 ) https://nextjs.org/blog/next-9-0-7

【全文和訳】Next.js 9

(以下は2019年7月8日に公開された Next.js 9 の日本語和訳です。 以下原文 ) 70のカナリアリリースを経て、遂に Next.js 9 がお披露目されます 主な特徴は以下です。 (訳者注* アップデート機能名は原文のまま) nextjs.org