まーーーたstylelintが止まった。ちょうどいいから設定など見直しました。 あと!!!!!! 検索すると!!!!!! まーーーーーーだcssの並べ替えをcsscombにやらせよう、という記事がたくさん出てきて「そんな長らく開発されてねえもんを使うな! VScodeのプラグインも使うなって書いとる!」と憤ってしまった*1。cssの並び替えをしたい人はcsscombではなく、Postcssやstylelintにやらせましょう。自分はVScodeでscssをcssにコンパイルしていますが、live sass compilerがベンダープレフィックスやらコンパイルやらはやってくれるので、scssと…
stylelintとは? stylelintはCSSやSCSS、LESSなどのスタイルシートを検証し、一貫性のあるコードスタイルを維持するための静的解析ツールです。 昨今のフロントエンド開発には欠かせないツールとなっています。stylelintは以下のような機能を提供します。1. 構文エラーやタイポの検出 2. コードスタイルの一貫性の検証 3. プリプロセッサの変数や関数、ミックスインなどの使用方法の検証 4. パフォーマンスの問題を検出するルールの提供stylelintは様々な設定オプションを提供しており、ユーザーが独自のルールを追加することもできます。 また、stylelintはコマンド…
こんにちは、松久です。 食べチョクでは、デザインツールとして Figma を使っています。色の定義を Figma の Color Styles で管理しています。 管理はしているものの SCSS には反映できていない状態でした。このままだと何が管理されている色なのかエンジニアとデザイナーの認識が揃わなくなります。そこで、Figma の Color Styles と、SCSS で用意した色の変数を合わせられる状態を作っていくことにしました。 色を定義するまで 1 年前ぐらいに UI の色の定義の再確認をして、一部曖昧なところは残りつつも SCSS の変数の定義をしました。 決まっていない部分があ…
先々週から開発タスクをやりながらstylelint v14へのマイグレーションを少しづつ行なっていました。 SCSSを使っている方なら手順書にサンプルが記載されているのですんなり移行できるのではないかなと思いますが、 私の場合ですとCSS-in-JSで開発をしており、CSS-in-JSをstylelint使ってlintをできるようにするのに手順書に具体的なアプローチ方法がなかったので苦戦しつつもやり遂げたので以降に関するポイントをご紹介していけたらと思います。 公式サイトのマイグレーション移行手順はこちらです。 stylelint.io v14では以下の構文が含まれていないそうです。 Styl…
はじめに Next.js13の開発環境構築手順 step02 をやっていこうと思います。 Next.jsのベーシックな設定を確認する Next.jsのベーシックなESLintの設定を確認するために、まずは以下のドキュメントを読みました。 Configuring: ESLint | Next.js eslint-config-next の確認をする Next.js アプリケーションを create したときに生成された package.json の dependencies に初めから eslint-config-next があったので、どのようなpluginが既に含まれているか、 node_m…
はじめに 2024年4月時点での自分のためのメモとして、Next.jsの環境構築手順をまとめてみます。 かなり長くなるのでいくつかのstepに分けて書いていきます。 環境 主に以下のような構成でNext.js 14の環境構築を行なっていきます。 CSSを書くにあたってNext.js(React)では多くの選択肢があると思いますが、何か Zero Runtime のCSSライブラリを使用して、環境構築をしていこうと思います。 OS: macOS Ventura 13.6.4 node 20.5.1 npm 9.8.0 next 14.2.0 eslint + prettier 何か Zero R…
こんにちは。こんばんは。 開発生産性の可視化・分析をサポートする Findy Team+ のフロントエンド リードをしている @shoota です。 Findy Team+はエンジニア組織の開発生産性を可視化し、開発チームやエンジニアリングメンバーのパフォーマンスを最大化するための支援をしています。 そして(当然のことながら)Findy Team+ を作っている自分たちも、チームや個人でドッグフーディングをして、チームや自分自身の働き方やエンジニアリング組織の健康チェックをしています。 今回はそんな Findy Team+の開発チームのうち、フロントエンドチームがどのような開発環境・開発インフ…
こんにちは、株式会社クラウドワークスでエンジニアをしている、松尾です。 早いものでエンジニアになって、1.5年です。いや〜〜早い。 時の流れ早すぎ。。 最近、huskyとlint-stagedを用いて、下記の仕組みを作りました ステージングしたファイルに対して、コミット時stylelint, eslintを実行して、エラーの箇所を気づけるようになる 上記の具体的な解説記事というよりかはやってみた結果どうなん?的な記事です。 なぜやった? huskyで何をした? 「コミット時に毎回lintが実行されたら、ちょっと待たされるのでは?」という疑問に解答 【ビフォーアフター】husky導入の前後 【ビ…
はじめに 前提 ダッシュボード Nuxt3 移行 Nuxt3 実施前 package.json nuxt.config.js ブランチ戦略 Nuxt3 移行手順 Nuxt 本体のアップデート @nuxt/devtools の無効化制御 API 通信用の composable の作成 環境変数の設定 バリデーションライブラリの追加 認証系の実装 Sentry 実装 Bootstrap, BootstrapVue 導入 Chart.js 追加 DatePicker 対応 G タグ埋め込み 最後に はじめに お久しぶりです! クロスマート株式会社では主にフロントエンドのタスクを勉強させていただきつつ…
概要 stylelint系のバージョンが古いので最新化して解決 手順 stylelint系ライブラリ最新化 yarn add stylelint stylelint-config-recommended-vue stylelint-config-standard 依存関係を再インストール rm -rf node_modules yarn.lock && yarn 以上で解決。
2024/3/12 https://pixiv.connpass.com/event/310073/ 出版記念基調講演 工藤智祥さん https://speakerdeck.com/fsubal/tailwind-cssshi-jian-ru-men-chu-ban-ji-nian-ji-diao-jiang-yan TailwindCSSとの出会い https://charcoal-web.pixiv.design/ デザインシステムの技術選定 プロダクトたくさん 全部Reactというわけではない ->Tailwindがちょうどよかった もともとCSS in JSとかよりCSS Module…
以下のようにしてechoするだけにする。 "lint-staged": { "*.{js,ts,vue}": "echo Skipping eslint", "*.{css,scss,sass,html,vue}": "echo Skipping stylelint", "*.**": "echo Skipping prettier" },
導入 ブラウザ環境とNode.js環境におけるモジュールシステムの違い なぜ、npmパッケージはブラウザから読み込めないのか ES Modulesでrequireを使う方法 webpackでnpmパッケージをブラウザ環境で使う webpack.config.jsの設定 webpackで開発用サーバー立ち上げ フロントのビルドツール界隈の現状把握 様々なビルドツール タスクランナー Linter / Formatter Minifier トランスパイラー(JS/TS) トランスパイラー(Sass/CSS) バンドラー なぜバンドルする必要があるのか? 次世代ビルドツール Vite 開発サーバーと…
この記事は? フロントエンドの(に限らずですが)技術はよく言われるように移り変わりが早いです。とはいえ個人で全て追い切るのは難しく、また必ずしも新しいものを使い続けていればいいわけではないとも思います。個人的には新しい技術であっても古い技術であっても、きちんと自分の中に技術採用の軸があることが大事だと思っています。 このエントリではmanatenが2023年末現在でフロントエンド(周辺)でアプリケーション開発をするときに、利用することが多い技術を概要や理由付きで挙げていきます。 (なお年の瀬に思い出して書いてるため、抜けがあったり内容いい加減だったりすると思います。)
こんにちは、松久です。 デザインチームの 2023 年のブログ記事をふりかえり執筆後から変わったことや、変わらなかったことを書き出すことで、2024 年に向けて動き出せるようにします。 Figma のファイル管理ルール( 2022 年 12 月 ) ファイル名については、デザインチームでは浸透が進み当たり前の状態になっています。変える話もいまのところなく、やってよかったです。 マスターデータの運用は、GitHub Projects で「🏁 マスターデータに反映待ち」を用意し、ここを通らないと作業完了とはしないことにしました。ただ、マスターデータへの反映が滞りがちなところがあるので、課題は残って…
エンジニアたるもの、こういうところにも気を配って然るべき やりがちなのでメモの意味も込めて togetter.com JavaScript, TypeScript Firefox Facebook YouTube Twitter Homebrew ESLint Stylelint GitHub callback(一般名詞) Salesforce Datadog UI Flows(「UI フロー図」ではない)
最低でもこれくらい知っておくべき。
Vue3から以下のドキュメント記載の通りディープセレクタを利用する際に::v-deepから:deepに変更になりました。 <style scoped> /* deep selectors */ ::v-deep(.foo) {} /* shorthand */ :deep(.foo) {} /* targeting slot content */ ::v-slotted(.foo) {} /* shorthand */ :slotted(.foo) {} /* one-off global rule */ ::v-global(.foo) {} /* shorthand */ :global(…
まとめてみた。