この記事はCybozu Advent Calendar 2021の 18 日目の記事です（業務なので前日に出してます 🍀）。 サイボウズには 10 年以上運用が続いているプロダクトがいくつかあります。フロントエンドエキスパートチームは、そんなプロダクトや開発メンバーへの支援を横断的に行うチームです。 フロントエンドエキスパートチームの今年の取り組みを紹介します。 フロントエンドエキスパートチームの立ち位置とミッション フロントエンドエキスパートチームは特定のプロダクトなどに属さない、独立した横断的な支援チームです。活動内容についてはすべてチームに裁量があり、何をどうしていくかは自律的に決めて動く必要があります。 フロントエンドエキスパートチームでは「サイボウズのフロントエンドを最高にする」というミッションを掲げています。このミッションを達成するための活動を日々考えながら活動しています。
この記事はモバイルファクトリー Advent Calendar 2021の25日目の記事です。 メリークリスマス🎉 エンジニアのid:kfly8です。 技術ブログの「ネタがない」といったコメントや「この記事の課題がよくわからない」といった記事レビューをすることがあります。技術アドベントカレンダーの時期は、短期間に記事が集中するので、特に困らせているように感じます。 普段から意識する習慣で、楽ができないかと考えると、「技術ブログが書ける開発をする」のが良いと思いました。 誤解しないでほしいのが、「技術ブログを書くために開発をしよう」と言いたいわけではないです。あくまで、チーム、事業の目的ありきです。 ただ「技術ブログが書ける開発をする」ことは、普段の開発の質を高めると思っています。 技術ブログが書ける開発とは？ モバファクの技術ブログでは、「課題を解決する方法や経験を発信したい」と思ってい
この記事はemacs Advent Calendar 2021 の22日目の記事です。 小ネタで恐縮ですが、diff など表示するときに シンタックスハイライトして表示できるdelta というページャーと、delta を magit から呼び出せるようにする magit-delta というパッケージに感動したので紹介させてください。 delta とは 主には先も記載した通り diff など表示するときに シンタックスハイライトして表示できるツールとなっています。 詳しい機能の説明は下記となっています。 ハイライト以外にも良いなと個人的に思っているのは下記の機能です。 サイドバイサイドで縦に分割してdiff を表示できるオプション(--side-by-side) 'n' や 'N' キーで 差分ごとに移動できるオプション(--navigate) Githubになどにリンクできるオプション (
企業でWebアプリケーションエンジニアとして働き始めて2年と4ヶ月ほど経ちました。様々な仕事を経て、自分が向いていることや楽しく感じることが徐々に明らかになり、数年後になりたい像がぼんやりと浮かび上がってきました。そして、その将来像が世間的には「エンジニアリングマネージャー」（以降EM）と呼ばれていることもわかってきました。この記事では、EMについて自分が周囲から受け取った知識を整理するとともに、そこに向けてどんな戦略を取ろうとしているかをまとめてみます。マネージャーというとネガティブなイメージも拭えませんが、EMは年を重ねて吸い込まれるものではなく、積極的に取りに行くに値する面白いポジションであると思います。この記事を読んでEMに魅力を感じる同世代の仲間が増えると嬉しく思います。 EMについての理解 エンジニアリングマネージャーという職務についてのオーバービューは、広木大地さんによるエン
Ameba事業部の谷（@hiloki）です。Amebaのデザインシステム Spindleのマネージャーをしつつ、UIの設計・開発をしています。 2021年は多くのガイドラインやUIコンポーネント設計・開発に取り組んできました。この記事ではCyberAgent Developers Advent Calendar 2021の3日目の記事として1年を振り返り、特に考えることの多かったカルーセルUI について、その設計視点やアクセシビリティを考えてみました。 カルーセルUI とは あらためてこの記事におけるカルーセルUI（以下「カルーセル」と呼称します）を定義します。 『デザイニング・インターフェイス（第2版）』におけるカルーセルの定義を引用すると下記のように説明されています。 視覚的に興味を引くことができる項目のリストを、横一列またはアーチ状に配置し、画像のサムネイルを左右にスクロールまたはス
この記事は Money Forward 関西拠点 Advent Calendar 2021 - Adventar の1日目の記事です。 株式会社マネーフォワード の 関西拠点 に所属するメンバーのテーマ自由なアドベントカレンダーです。 こんにちは。マネーフォワード関西拠点の 西村 (id:Sixeight) です。 マネーフォワードでは現在、コミュニケーションのために週一回の出社を推奨していますが、それ以外はリモートワークを選択することが可能です。 私も今年1月の入社以降、基本的にはリモートワークで自宅から勤務しています。 今回はリモートワークをするにあたって買って良かったものを紹介したいと思います。 みなさんのリモートワークをより快適にするための参考になれば幸いです。 第10位 HHKB Professional HYBRID Type-S happyhackingkb.com みなさん
Next.js + Apollo Next.js の公式リポジトリには Apollo を使用する際のサンプルコードがあるが、 これらを参考に SSR するとかなりパフォーマンスが悪い。 with-apollo with-typescript-graphql 例えば、with-typescript-graphql の/pages/index.tsx を見てみる。 ... import { useViewerQuery, useUpdateNameMutation, ViewerDocument, } from '../lib/viewer.graphql' import { initializeApollo } from '../lib/apollo' const Index = () => { const { viewer } = useViewerQuery().data! ... re
はてなで働くエンジニアにアンケートシリーズ第18回は、マンガメディア開発チームのWebアプリケーションエンジニア、id:nakaoka3に話を聞きました。 id:nakaoka3のデスク 京都で働くのもよさそうだと思って その時々で一番良いフォーメーションを取る 開発合宿で作った推薦システムを実際のサービスに実装 オープンに文章を書くことが会社のカルチャーとなっている 京都で働くのもよさそうだと思って ── Q. はてなidとその由来を教えてください 本名から付けました。GitHubやTwitterで使っているユーザーネームは入社時点で既に取得されていたため、それに近いものを選んでいます。 ── Q. いつどんなきっかけで入社されましたか？ 入社する前は神奈川に住んでいて、Androidアプリのエンジニアとして働いていました。転職を考えている時にはてなのコーポレートサイトを見たところ、An
![「新しいことへの挑戦」を大事にしています | はてなで働く nakaoka3 にアンケート [#18] - Hatena Developer Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/2b5d0b92f9f8b9671ddc896558489fa3c54c6916/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F9ea86df4c7f7840b0bc52c2bdd3cd934f1870ea7%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fh%252Fhatenatech%252F20210721%252F20210721154840.png)
本記事では、Shokzの骨伝導ワイヤレスイヤホン『OpenRun Pro』をレビューしています。Aeropexの後継機とも言うべきモデルで、従来モデルと比較して音質が劇的に向上しています。満充電で10時間も連続再生可能で、Bluetooth5.1対応のため接続のスムーズさも特徴的。その名の通りランニングにもピッタリなモデルです。 こんにちは。ランニングするときには骨伝導ワイヤレスイヤホンを愛用している”はしかん(@hashikan3)”と申します。 骨伝導は長時間付けていても全く耳の中が痛くならないのが良いです。時々つけているのを忘れるほど。 骨伝導ワイヤレスイヤホンと言えば耳を塞がずに使えるのが最大の特徴ですが、通常のイヤホンに比べて構造上どうしても音質が劣ってしまうという欠点がありました。 音声配信や動画視聴には全く問題ないのですが、BGMを聴く際にはやはり音質は良いに越したことはあり
完全なるポエムです。自分にとって斬新な考え方だったので思わず勢いで書いていますが、知っている人からすると当たり前ですし、冷静に読み返すとだから何だよという内容に仕上がっています。読んだあとにだから何だよと言われても責任は取れません。 はじめに とある方の話 他人に任せる 記事執筆 社外発表 社内発表 マネージメント まとめ はじめに 以前、苦手分野を思い切って捨てて得意分野に集中してみるという話を書かせていただきました。 engineer-lab.findy-code.io 今回も通ずるところはあるのですが、一歩踏み込んで自分の気の進まないことはいっそ得意な誰かに任せようという話です。一歩引いた視点で見れば上のブログの話も結局誰かが自分の穴を埋めてくれているので同じに見えると思うのですが、自分の気の持ちようとしては大きく異なるので書いています。つまり、これ苦手だけど一生懸命やってるので許し
こんにちは。フロントエンドエンジニアの小林和弘です。 Vue.js + Atomic Designでつくられたプロジェクトにビジュアルリグレッションテストを導入しました。 ビジュアルリグレッションテストでUIの安全性を高める コンポーネントの改修、新機能の追加、ライブラリのアップデートを行う際、UIに不要な変更が入っていないか不安になることがあると思います。リファクタリングをしようにも、意図しないところでUIが壊れないか心配になります。 画面表示に関わるコードを改修するたびに、ローカル環境やステージング環境で全UIコンポーネントを確認するのは難しいです。 また、ステージング環境と本番環境を並べて変更されたUIを目視で確認するのも非現実的です。 ビジュアルリグレッションテストはその名前の通り、視覚的な回帰テストを指します。改修前後のスクリーンショットの差分を検証するためのテストです。 開発に
Checklist Use meaningful HTML elements: <form>, <input>, <label>, and <button>. Label each input with a <label>. Use element attributes to access built-in browser features: type, name, autocomplete, required. Give input name and id attributes stable values that don't change between page loads or website deployments. Put sign-in in its own <form> element. Ensure successful form submission. Use auto
はじめに 仲亀と申します。さくらインターネットでエバンジェリストやインフラエンジニアをしています。エンジニアとしてはシステムの監視まわりの仕事をしています。最近は、今回もご紹介するPrometheusとかGrafana Lokiとか、あの辺が結構好きで触っています。 この記事では、監視について興味をお持ちの皆さんに向けて「Observabilityをはじめよう！」ということで、Observabilityの概念や、それが必要となる背景を少し説明した上で、Observabilityを実現するための要素となる、MetricsやLogsやTracesなどをどこから始めていけばいいんだろう、といったところをご紹介していこうと思います。 この記事のゴールとしては、皆さんに「Observability完全に理解した」と言っていただけたらいいかなと思っています。しかし、この記事を読んだだけですぐに皆さんの
今年からフロントエンドエキスパートチームでは活動内容の一つである探求の一環として、メンバーが気になった技術に対して、気軽に触ってみる会をしています。次の画像は筆者が Slack で、気軽に触ってみる会の開催を宣言してる時のものです。 今回は去年の 12 月に Vercel に買収されたニュースがあった Turborepo を気軽に触ってみました。 個人的には 1 人で調べるときよりも複数人でわいわい調べた方が、その技術や関連する周辺知識の話を色んな人の観点で深掘ってできて、とても有意義な時間でした。 概要 Turborepo はモノレポのためのビルドシステムで次のような特徴があります。 Yarn, npm, pnpm の workspaces に対応してるリポジトリに対して簡単に導入できる workspace 内のコマンドの依存関係をシンプルに設定してくれる Turborepo で実行する
Chromatic とは Chromatic とは、Storybook のメンテナーが作成している Storybook 用のツールです。Storybook をビルドして公開したり、ストーリーごとのスクリーンショットを撮影し、差分を比較してくれる機能を備えています。 Chromatic を使うことにより、UI の予期せぬ変更を事前に検知することができます。本記事では Chromatic の導入、活用方法をご紹介します。 なお、BASE 社では社内の UI コンポーネントライブラリである BBQ で Chromatic を導入、活用しています。その経緯はアドベントカレンダー15日目に公開する記事でご紹介します。 Chromatic をプロジェクトに導入する サンプルプロジェクトを作成する 今回は Storybook 公式で用意されているサンプルプロジェクトを利用します。 プロジェクト作成にあた
最近、OSS やってないけど飽きたの？ってたまに聞かれることがある。飽きたというよりも、タイトル通り優先順位が変わってしまった。去年も健康診断を会社で受け、すべて大丈夫だったのだが、10 月ぐらいから明らかな不調がわかっていて今も通院している状態である。 自分が通院しているのは眼科である。エンジニアという仕事柄、自分にとっては一番大切な箇所であり、返しづらい負債となっている。病状としては、眼圧が上がっていて、緑内障の疑いがあり(検査予定)、視力の低下。もともと視力はかなり悪いのに更に追い打ちがかかってしまった。特に眼圧なんてなかなか治らないしどうすればいいんだ感ある。目の手術はまだ気が進まない。毎日、目薬をうったりすることすら昔ならめんどくさく感じてしまうが、さすがにヤバさを感じたのか毎日できている。 中学の頃からゲームのようにプログラミングにハマって、数年前までは毎日 13 時間以上でき
はじめに こんにちは。株式会社Flatt Securityセキュリティエンジニアの村上 @0x003f です。 本稿では、Webアプリケーション上で実装される「ログイン機能」の実装パターンをいくつか示し、その「仕様の中で起きうる脆弱性」とその対策について解説していきます。 「ログイン機能」はToB、ToC問わず多くのWebアプリケーションで実装されている機能で、XSSやSQL Injection、Session Fixationといったような典型的な脆弱性の観点については、なんらかの解説を見たことのある方も多いと思います。 しかし、「仕様の脆弱性」というのはあまり多く語られていない印象です。今回はそのようなタイプの脆弱性についての解説を行います。なお、IDaaSを用いずに自前でログイン機能を実装しているケースを複数パターン想定しています。 はじめに ログイン機能の仕様パターンとセキュリティ
ECMAScriptは、毎年6月ごろに新しいバージョンがスナップショットとしてリリースされます。 次のバージョンであるECMAScript 2022は6月に公開される予定です。 ECMAScriptの策定プロセスについては、JavaScript Primer - 迷わないための入門書(jsprimer)でも解説しています。 ECMAScript · JavaScript Primer #jsprimer 毎年これに合わせる形で、jsprimerのECMAScript 2022の対応作業をやっています。 リポジトリ: asciidwango/js-primer: JavaScript Primer - 迷わないための入門書 jsprimerはJavaScriptの入門書ですが、毎年のECMAScriptのアップデートに合わせて更新しています。 JavaScript Primerを出版しました
前提 Cloudflare Workers は知っていたが最近触って、本番環境へ導入済み。 普段は Erlang/OTP を書いてるので JavaScript は専門外 自社サービスの本番環境には Cloudflare Workers を導入済み OpenResty はエンタープライズ大規模環境向けで設計/開発経験あり 雑感 Cloudflare Workers® ざーっと見た感じ Nginx + Lua (OpenResty) のマネージド、さらに Edge で動かしてくれて、スケールも勝手にしてくれるバージョンという認識。実際 shared.dict / redis の代わりが Workers KV が利用できる。 さらにローカル開発環境が充実している、デプロイ後のログ確認も管理画面から簡単に利用できる。 Lua Introducing Cloudflare Workers これを読む
2021年のVue.jsは新しいVue 3のコアが安定し、開発環境からライブラリやコードの書き方まで、新しい発表の多い一年でした。ICSではすでに複数のプロジェクトでVue 3やVite等の新しいフレームワーク・ツールを使用していますが、まだまだ様子見という方も多いでしょう。 変化の大きいVue 3の周辺ですが、2021年11月のVueConf Toronto 2021（セッション動画）でようやく次の定番と言える構成がアナウンスされました。この記事では、Vite・cteate-vue・<script setup>・Piniaといった新しい推薦構成を紹介し、Vue 2時代から何が良くなるのかを比較します。 新しい構成は何が良くなる？ メリットを確認 新しい構成ではプロジェクトを作成する際のコマンドラインツールからVS Codeの機能拡張やコードの書き方まで、さまざまな部分が変わっています。個
この度、お仕事として公式エバンジェリストをすることになりました。 セミナー講師をやったり、Mackerelの便利な使い方をアウトプットしたりするのが役割です。 MackerelチームにはCREってロールがあるわけですが、その中でも顧客活動のサポートにあたります。 ついにMackerelプラグイン解説シリーズの続編とか出るかもしれません*1。 初回活動 プライベートセミナーをやります。 詳細は下記のページを御覧ください。 日時：2022年2月10日（木） 14:00〜15:00 会場：Zoom Webinar 参加費用：無料 お申し込み：イベントページからお申し込みください はじめてのMackerelクラウド監視入門編（2022年2月10日開催オンラインセミナー） connpassもあるけど、申込みは上記のサイトです。 mackerelio.connpass.com はてなはCREを募集して
2 年ぶりに労働し始めたことでブログの更新頻度が露骨に落ちているが、文章を全く書いていないわけではなく、折に触れて社内で長文を投下している。 社内向けの怪文書ばかり書いていて、パブリックなブログを全然書けない。— なむ (@numb_86) 2021年12月29日 内容は本当に個人的なものというか、自分が考えていることや思っていることを書いているだけで、ブログと同じノリでやっている。 これは私だけがやっているわけではなく、例えば代表の庄田も最近考えていることや意識していることを scrapbox に書いていて、いくつかはブログの一部として社外にも公開されている。 自分の考えを文章にすることは私にとって自然なことなので深く考えずに書いていたのだが、その結果、会社から特別手当が支給された。 勤務先の HERP ではクオーター単位で全社的な振り返りを行っているのだが、そのタイミングで、会社が掲げ
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog みなさんこんにちは。UIT Front-end Dev7チームの吉澤です。主にUITが扱う社内サービスやミドルウェアの開発/運用などを行っています。またDev7チームにはLIFF（LINE Front-end Framework）というLINEが使っているフレームワークの開発をしているメンバもいます。他のUITのチームとは一風変わった特徴的なチームです。 このチームの業務の1つにUITが管理しているPrivate npm registryの拡張、関連機能開発/運用があります。実はこれに関連した全社的にnpmが使えなくなるという障害が2021/2/15にLINE社内で発生していました。今回はその障害について話しながら私たちUIT
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
Ubie DiscoveryでSREなどをしている@itkqです。 UbieではGitホスティングにgithub.comを使っています。プロダクト開発に必要なprivateなコードベースはもちろん、OSSや就業規則といったドキュメントをpublicにホストしたりもしています。また、この記事を書いている時点で、メインのOrganizationのメンバーは121名です。 自分が入社したのは一年前（2021年1月）で、まだ情報システム専任の人がいませんでした。それから今に至るまで、GitHubの運用を「会社」にしていく話を書きます。 一年前のGitHubの運用 当時、UbieのOrganizationに所属していた人数は、業務委託含め80〜90名ぐらいで、Businessプランを利用していました。私はSREとして入社しましたが、情報システム専任の人がおらず、SREをはじめとする何名かのメンバーが
kintone フロントエンドリアーキテクチャプロジェクトリーダーの @koba04です。 昨年末から、kintone フロントエンドリアーキテクチャをプロジェクト（フロリア）として再構成してスタートさせました。フロリアという名前は社内での公募により決定しました。 今回はプロジェクトで目指していることについて紹介します。本プロジェクトの開始前に Cybozu Meetup で話したスライドや動画も公開されているのでよければ見てください。 speakerdeck.com www.youtube.com これまでの取り組みについては下記の記事にて紹介しています。 blog.cybozu.io 3 行まとめ フロリアのゴール 全てのページが React によって表示されている 現状 今後 フロントエンドが技術的にもチーム的にも分割されている モノリスな構成からの脱却 アーキテクチャとチーム（
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
