はてなブックマーク

2月6日、スタートアップ支援をしている Gaji-Labo と KARTE などの開発運営をしている株式会社プレイドさんとの共催で『UI＋FE合流点』を開催しました。 プレイドのプロダクトデザイナー tori（鳥越 良子）さんSmartHR のクリエイティブディレクター sekig（関口 裕）さんスマートバンクのデザイナー putchom（福嶋 瞭）さん三人のゲストと Gaji-Labo 代表の原田、UIデザイナーの今西がお話させていただきました。 ちなみに UI＋FE合流点 は『ゆーあい・ぷらす・えふいー・じゃんくしょん』と読みます。 UIデザイナーとフロントエンドエンジニア向けにお互いの狭間になりやすいポイントを境界ではなく「合流点」として業界のトッププレイヤーたちに語ってもらうリアル開催イベント。 ネット配信や動画はしないオフラインイベントならではの踏み込んだ話になるので、今回も冒頭

WebアプリケーションのUIの表現はどんどんリッチになってきています。しかしその一方でブラウザ上での描画の負荷は増大し、時としてスムーズに動かず体験を損ねることもあります。ユーザーにとって使い心地の良いUI体験はフロントエンドのパフォーマンスチューニングに大きく委ねられていると言えるでしょう。 スタートアップ開発を支援する株式会社Gaji-Laboでは、サービスの価値に直結するエンドユーザーの体験向上のため、快適なUIを提供する事をとても大切にしています。 この記事では、快適に動くUIを作るため、フロントエンドフレームワークのマジョリティであるReactとどう付き合っていくべきかを考えていきましょう。 Reactの仕事を理解するまず、Reactがどんな仕事をしているのかを理解するところからはじめましょう。Reactの主な仕事はUIを描画すること、そして必要に応じてそれを再描画することです。

こんにちは、及川です。 今回のテーマはdialog要素です。みなさん、dialog要素はご存知でしょうか？もう現場で使っているでしょうか？ dialog要素はいわゆるダイアログボックスを描画するための実装で、HTML要素の中では比較的新しめの要素です。このdialog要素の仕様を理解し、モーダルダイアログコンポーネントとしてどのように実装するかを学習することが本記事のゴールです。 dialog要素 ってなに？dialog要素はダイアログボックスを表現するためのHTML要素です。 cf) <dialog>: ダイアログ要素 – HTML: ハイパーテキストマークアップ言語 | MDN dialog要素は新しめとは言うものの意外と長い歴史をもっていて、2012年あたりから今の形でHTMLの草案に追加されたり削除されたりを繰り返し、全てのモダンブラウザで動くようになったのが2022年のことです。

こんにちは。Gaji-Labo で DevHR をしている関根です。エンジニア採用や組織作りを担当しています。 先日、Gaji-Labo が主催で『UI＋FE合流点』というトークイベントを開催しました。 ちなみに『UI＋FE合流点』と書いて、読み方は『ユーアイ・エフイー・ジャンクション』です。 名前の通り、UI デザインとフロントエンド開発の「合流点」を目指したイベントです。 イベント本編のトークセッションはもちろん、懇親会でも職種をまたいだ課題感の共有や相談などが活発に行われ、UI デザインとフロントエンド開発における合流の場として盛り上がりました！ 今回のイベントは、フロントエンド側にサイボウズの sakito さん、SmartHR の masuP9 さん、UIデザイン側で Chatwork の守谷絵美さんの3名をゲストにお迎えしました。 笑いあり、納得感ありの名言や迷言が 本編中で印

こんにちは、森田です。 2023年初記事です。明けましておめでとうございます。 本年も Gaji-Labo よろしくお願いいたします。 さて、年も変わったことですし本年からなにか新しいことを始めたいと思います。 今年は疑似クラス :has() を使えたらいいなと願っております🙏 疑似クラス :has() とは /* img要素を含んでいるa要素を指定 */ a:has(> img) { style } /* p要素が隣接しているh1要素を指定 */ h1:has(+ p) 擬似クラス :has() は、その名のとおり引数の中で指定したセレクタを含んでいる要素を指定します。 今までになかった親要素を指定できるセレクタとなりCSSで出来ることが格段に増えそうです。 このような場合、今までは JS でクラス付与などをしていたのでそれが CSS のみで実現できるのは素晴らしいです。 仕様:has

こんにちは森田です。 先日、GitHub Universe 2022 にて GitHub Codespaces が全てのユーザーに提供されることが発表されました。 私は会社のTeamレポジトリでは使えたみたいですが、今まで個人では使えていなかったので触ったことがなかったのですが触ってみたら凄かったので概要を紹介します。 ※無料プランの個人ユーザーは毎月60時間まで無料 GitHub Codespaces とはhttps://github.co.jp/features/codespacescodespace は、クラウドでホストされている開発環境です。 構成ファイルをリポジトリにコミットすることで、GitHub Codespaces のプロジェクトをカスタマイズできます (コードとしての構成とよく呼ばれます)。これにより、プロジェクトのすべてのユーザーに対して繰り返し可能な codespac

こんにちはフロントエンドエンジニアの茶木です。 最近は学習用の Next.js の ローカルの SandBox を育てています。 学習用の開発環境の重要性実際のプロジェクトのコードは、プロジェクトの進行に合わせて蓄積されます。 あるコードを理解するとき、プロジェクトが成熟しているほど、そのコードは学習難度は高い傾向にあります。その理由はいくつかあります。 プロジェクト特有の機能に対応したためやむを得ず標準的でない方法で実装したため周辺のコードが増えたため そこで、実際のプロジェクトとは切り離された、学習用の SandBox を育てておくと、軽いフットワークで学習や実験ができると考えます。 今回作る SandBox の概要TypeScript を標準装備の Next.js 環境を作ります。APIのコール周りを準備します。Next.js の API route 機能を利用します。 （具体的には

こんにちは森田です。 今回は Tailwind CSS v3.1 で実装された子孫セレクタを指定できる新機能 「arbitrary variants」 の紹介します。 arbitrary variantsarbitrary variants はセレクター修飾子を class に直接記述し親セレクタから子または子孫セレクタを指定する機能です。 Handling Hover, Focus, and Other States – Using arbitrary variants Tailwind CSS v3 より下記のコードのような任意の値を指定できる arbitrary value という機能はありました。

はじめにこんにちは kimizuy です。 弊社Gaji-Laboは受託開発の会社なので複数のプロジェクトに携われることが魅力の 1 つです。 私自身、色々な技術スタックのプロジェクトに関わった過程でいろいろな拡張機能をインストールしていたため、知らぬ間に VSCode のパフォーマンスが低下していました。 具体的には TypeScript のインテリセンスの表示が遅くなったり、カーソル移動やタイピングがカクついたりといった感じです。 そこで今回はどの拡張機能が VSCode のパフォーマンスに影響を与えているかを探る方法をご紹介します。 まずは「拡張機能」が原因かを特定するVSCode のパフォーマンスの低下は拡張機能が原因とは限りません。 ひとまず拡張機能をすべてオフにすることでパフォーマンスが改善するかを確かめましょう。 コマンドパレットを開き（Cmd + Shift + P）、「E

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。 今回は、普段自分が VSCode で使っている、AIによってコード補完をしてくれる拡張機能「Tabnine」をご紹介したいと思います。 Tabnineとは？Tabnine は VSCode などのエディタや IDE で使用できる AI によるコード補完ツールです。 コードを打ち始めるだけで、候補となるコードを予測してサジェストとして表示してくれます。 導入は公式サイトから拡張機能をインストールして行います。 初回はアカウントの作成が必要になりますが、他には特に設定することなく使い始めることが出来ます。 実際に使ってみるTabnine を有効にして簡単な React コンポーネントを実装してみます。 実際に書き始めてみるとあたかも書こうとしているコードを予測するようにサジェストされ、補完が効くようになります。これは便利！ T

こんにちは Gaji-Labo フロントエンドエンジニアの茶木です。 apiとの格闘の日々が続いています。 特にエラーの取り回しは、非同期処理も重なっており、地味に複雑だと思います。 そこで、一度使いやすいパターンを作ってしまおうと思います。 基本形エラー処理を書かない基本形は api の非同期処理を useEffect の中で吸収し、 res の有無で、ローディングとコンテンツを出し分けするようにします。 const [state, setState] = useState(); useEffect(() => { (async () => { const res = await getSomthingApi(); setState(res); })(); }, []); if(!res) return <p>ローディング中</p> const {data} = res; return

こんにちは森田です。 弊社のプロジェクトは基本的に Github のプルリクエストをベースに開発をしています。 今回はそんな Github のプルリクエストのレビューが少し便利になる小技を記事にしたいと思います。 「レビューの精度が上がる」「より速くレビューができる」といった話ではなく、ちょっとだけ Github のプルリクエストが便利になる小技のお話です。 コードコメントは複数行選択できるコードコメントの際によくやってしまうのが「ここのコードが」という抽象的なコメントを1行コメントでしてしまい、レビューされた側はどこのことを指しているかよくわからないことがあります。 コードコメントで行番号の上をドラッグか Shift を押しながら複数行を選択しコメントをすることができます。 選択した行が黄色く反転する選択されたコード全体が引用されコメント表示されるので、どこのことを指しているかわかりやす

こんにちは森田です。 タイトル通りですが React/Vue を使わない案件でも UIコンポーネントカタログの Storybook を使いたいことがあります。 そんな時は Storybook for HTML を使えば html ファイルもStorybookで導入することが可能です。 今回はStorybook for HTML の導入について説明させていただきます。 ちなみに、UIコンポーネントカタログにつきましては、弊社茶木の書いた記事が熱いので是非お読みいただきたいです。 Storybook for HTML とはIntroduction to Storybook for HTMLその名の通りですが HTML でも Storybook を使えるようにしたものです。 基本的に stories.js などの書き方は従来のものと変わりませんが、html ファイルを import して使うこと

こんにちは、森田です。 2022年初記事です。明けましておめでとうございます。 本年も Gaji-Labo よろしくお願いいたします。 さて、年も変わったことですし今年から新しいことを始めたいと思います。 今年はまず疑似クラス :is() を使っていきたいと思います。 疑似クラス :is() とは /* 今まで */ section h1, article h1, aside h1, nav h1 { font-size: 25px; } /* 疑似クラス :is() を使うと */ :is(section, article, aside, nav) h1 { font-size: 25px; } :is() は、複数のセレクタを1つにまとめて指定できる疑似クラスです。 上記のように、今までカンマで子孫セレクタまで何度も書かなければいけなかったものを1つにスッキリした記述にすることができま

はじめにこんにちは。胃もたれすることが増えてきたような気がしている kimizuy です。今回は Stylelint のバージョンを 13 から 14 に上げる機会があったので、そこで得た知見をもとに v14 の変更点や設定のサンプル（SCSS と CSS-in-JS）をご紹介します。 前提VSCode で普段開発しているのですが Stylelint の拡張機能 に以下の警告が出るようになっていました。 Stylelint version 13.12.0 is no longer supported. While it may continue to work for a while, you may encounter unexpected behavior. Please upgrade to version 14.0.0 or newer. See the migration gui

こんにちは、森田です。 Node.js のバージョン管理ツールは色々ありますが、Volta がとても便利だったので紹介します。今後はVolta が使われることが多くなると思います（すでにそうなっているかもしれません） Volta – The Hassle-Free JavaScript Tool Managerサイトのタイトルにこのように書かれています。 The Hassle-Free JavaScript Tool Manager https://volta.sh/直訳すると「手間のかからない JavaScript ツールマネージャー」と言ったところでしょうか、そのキャッチフレーズどおりの手間のかからない使いやすい Node.js のバージョン管理ツールでした。 サイトに書かれている３つのキーワードで特徴を紹介させていただきます。 速いRust製ということで実行速度が速いです。 実際 n

iOS 15 がリリースされたので、早速手持ちの iPhone をアップデートしてみました。新しもの好きなので、iPhone は躊躇なくアップデートする派です。 デザイナーとしては、iOS 15 でのUIの動作の変化が気になるところ。今回のSafariのUIは、とくにデザインの設計に関わるレベルでも変化が大きいので、はやめに試してよかったと思います。 簡単に感じたことをまとめてみます。 今回は、SafariのコンテンツになるUI要素の変化をまとめています。SafariのタブバーのUIの位置による操作の大改革はあえて、あまりふれてません。 フォーム要素のスタイルiOS 15のUIの変更はSafariのUI自体だけでなく、ブラウザデフォルトのフォーム要素もUIが新たになっています。 フォームのUIの見た目としては、iOS 15でスッキリとしたフラットデザインになりました。 フォーム要素の見た目

はじめに絶賛、CSS Modules を使ったプロジェクトで作業している kimizuy です。最近、vanilla-extract という良さげな CSS フレームワークの 1.0.0 がリリースされたので、本記事では CSS modules と vanilla-extract を比較して、この新しいフレームワークの利点について書きたいと思います。 CSS Modules で作業するときの辛さCSS Modules はローカルスコープがデフォルトの CSS フレームワークです。CSS の名前衝突の問題を回避できて、これ自体はとても強力な機能です。 ただ問題なのは、作業する際に CSS ファイルでクラスネームを追加したり変えたりしてもコンポーネント側でエラーが出ないので気づけないこと、これに尽きます。 つまり、コンポーネント側でクラスネームが間違っていてもエラーが出ないため、実行するまでス

こんにちは、Gaji-Labo UIデザイナーの今西です。 アカウントの新規登録フォームなどにある生年月日の入力UIについて、考えてみます。 生年月日の入力UIのパターン生年月日の入力でよく見るものの日付入力パターンは下記のようなものではないでしょうか。 年月日でそれぞれ分かれたプルダウン年のみ数字の入力ボックス ＋ 月と日のプルダウン年月日でそれぞれ分かれた入力ボックスに数字を手入力1つの入力ボックスにすべて数字で入力（例：19900625）カレンダーのUIで入力生年月日のフォームで良く見るものは1の「年月日でそれぞれ分かれたプルダウン」、その次くらいで3の「年月日でそれぞれ分かれたフォームに数字を手入力」だと思います。 年の入力があるのでカレンダーUIタイプは見かけないように感じます。 カレンダーは日にちの入力についてはしやすいのですが年へのアクセスはあまりよくない場合が多く、カレンダ

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。 Gaji-Labo のコーポレートサイトを運用しているなかで、より効率的に更新が行えるようにするために、最近は使用するCMSやホスティングなど、サイトを動かす環境をアップデートすることを検討しています。 今回は、そんなアップデートを検討しているなかで知った、React 用静的サイトジェネレーターの GatsbyJS から派生した Gatsby Cloud というサービスについて知見をまとめたいと思います。 Gatsby Cloud とは？Gatsby Cloud とは、静的サイトジェネレーターの GatsbyJS のローンチを容易にするプラットフォームです。 GatsbyJS を使用しているWebサイトの GitHub リポジトリと連携し、リポジトリに push があったり接続している CMS から投稿を行ったりすると、イ

こんにちは、森田です。 先日、横田が Gaji-Labo式、破綻しにくいHTML+CSSコーディングルールの一部を紹介します という記事で弊社の HTML+CSS コーディングルールを紹介していたのですが、今回はその中の CSS の class 命名について掘り下げたいと思います。 主に使う class 命名について命名はキャメルケース

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。 今日は僕が普段使っているDo Not Merge WIP for GitHubというGoogle Chrome拡張機能をご紹介したいと思います。 Do Not Merge WIP for GitHubを使うメリットGitHubでプルリクエストを使ってチーム開発している時、まだWIP(Work in Progress = 作業途中)だったり、未達成のタスクがある時はプルリクエストをマージ出来なくさせたいものです。 これが明らかに作業中であればマージする危険は少ないですが、もしレビュー後に必要なタスクがあった場合（ダミーファイルの削除など）、万が一それを漏らしてマージしてしまった場合、差し戻したり追加のプルリクエストを立てるなどして作業の進捗に大きい影響が出てしまいます。 そこでこのDO NOT MERGE for GitHu

Gaji-Labo では稼働中のウェブサービスやウェブアプリケーションの CSS の改善するお仕事をいただくことがちょいちょいあります。 その際「CSSのリファクタリングなんて請けてくれる会社聞いたことない」というような趣旨のお話をぽろっといただきます。（実際にはほかにもやってる会社さん沢山あると思いますが、たしかにあまり聞かないですね） 今回は初めて入るプロジェクトで CSS の改善をする際、最初に CSS のどこを見るかまとめてみました。 CSS の得意な方が参加していないチーム向けの軽い内容です。ここに上げているような箇所に思い当たりがある場合、少しずつ CSS の実装にストレスを感じはじめているかもしれません。 真っ先に見極めることプロジェクトに参加して CSS が見られるようになり、手元の開発環境も無事整ったとき、僕が最初に気にする点です。 CSS はこうなってると大変というポイ