UIコンポーネントをCSSで実装する時に、何を考えながら実装するのか、どういうことに配慮して実装するのかを紹介します。 CSSの何を使用して配置するのかベストか、レスポンシブの対応方法をはじめ、グラデーションをより美しく実装する方法、clamp()によるフォントサイズの定義、論理プロパティの使用など、CSSの実践的なテクニックについても解説されています。 Inside the mind of a frontend developer: Hero section by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 実装するヒーローコンポーネント HTMLの構造を考える グラデーションの背景 疑似要素 スマホでの表示を考える ヒーローの最小高さ 配置のためのCSS Gridとその際の課題 コン
Firebase をフロントエンドから適切に隠蔽するための「Hooks Injection パターン」 - JX通信社エンジニアブログ
取締役の小笠原(@yamitzky)です。 JX通信社では、React 製のフロントエンドでも Clean Architecture で設計するなど、なるべく特定のバックエンドに依存しない設計を心がけたりもするのですが、一方で Firebase をラップした react-firebase-hooks などの「便利な Hooks」を使って開発スピードを加速したい、という課題を持っていました。 そして先日、次の記事が話題になっていました。まさに「どう Firebase を隠蔽するか」と「どう Firebase を活用するか」を両立する悩みです。 blog.ojisan.io 結論を言うと「Hooks そのものを注入する」のが筋が良いのではないか と思っています。個人的に「Hooks Injection パターン」と名付けたこの方法をご紹介したいと思います。 今回の記事の完成形はソースコードを公
こんにちは、クレスウェア株式会社の奥野賢太郎 ( @okunokentaro ) です。今年もよろしくお願いします。 今回は、Reactでのクリーンアーキテクチャの採用の是非についてTwitterにつぶやいたところ、思いの外Likeが集まったため、まとめて閲覧できるようにツイートをまとめつつ、簡単に補足しようかと思います。 リアクションのもととなった記事 Webフロントエンドの開発効率を高く保つための考え方 @adwdさんのこの記事に感銘を受けて、Twitterでちらほら感想をつぶやいたところLikeやRTが予想外に集まりました。それが下記のツイートです。 筆者がツイートしたもの 補足 筆者は、元記事で言及されている『「悪い方が良い」原則と僕の体験談』や『質とスピード（2020秋100分拡大版）』は確認済みであり、『 Clean Architecture 達人に学ぶソフトウェアの構造と設計
FRONTEND CONFERENCE FUKUOKA2019の登壇資料です
変更に強いコンポーネント設計の方針と規約（Webフロントエンド） - Sansan Tech Blog
技術本部 データ戦略部 Newsグループの木田です。 最近、初めて自作キーボードに挑戦しました。ちょうど２枚目のモニターも買ったので、モニター２台と自作キーボードで快適に記事を書いています。 予めお断りしておきますが、この記事は元々、社内向けに設計方針や規約・ツールなどについて共有するために書いたものでした。最近、他チームの参考資料として役立ったこともあり、社外向けに手を加えて公開する運びとなりました。 はじめに 機構改革・人事異動情報(β) とは ⚛️ Atomic Design に従う ⚛️ Atomic Design とは ⚛️ Molecules と Organisms の分け方 ⚛️ コンポーネントの設計方法 📝 規約 📝 Component と Container を分ける 📝 データの繋ぎ込みは Organisms 以上で行う 💡 Tips 💡 Atoms はタグ本
アップデート版の記事を以下に用意しています。 2020年師走における Next.js をベースとしたフロントエンドの環境構築 さて、今年に入って既に２ヶ月が経ちました。ということは３月に突入しているってことで、それは僕が東京で働き初めて２年が過ぎ去り、SPA なフロントエンドの環境をプロジェクトとして初めて構築して１年あまりということです。そして、冬も過ぎ去り春が来ようかというようなこの時期に、小さくはあるけれど新たな挑戦として Next.js を使うことになりました。 こんな記事を読んでいる方なら分かるとは思いますが、Next.js とは JavaScript のライブラリである React のフレームワーク です。Next.js といえば、同くフレームワークである Gatsby になんとなく押され気味なイメージを感じていましたが、v9 以降のアップデートがよい感じで、さらにごく最近の
Yahoo! 知恵袋のフロントエンドには26000行を超えるユニットテスト(1つのcontrollerのユニットテスト)や、多くのロジックを含むcontrollerがあります。これらによって追加実装・保守が難しい状況です。この問題を解決するために、リアーキテクトを行いました。以下について主に話そうと思っています。 ・リアーキテクトで取り組んだこと ・リアーキテクトの結果・学び・反省点
ENECHANGEでは、電気とガスの料金シミュレーションサービス「エネチェンジ」を開発しています。リプレース前の「エネチェンジ」のフロントエンドは、jQueryがメインで、ところどころVue2が使われていました。今回は、長年の開発によって積み重なったフロントエンドの技術負債をどのように解消しているのかについてご紹介します。
はじめに 自分は2021年に新卒でWeb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は、現場で後輩に質問されたReactの技術質問をまとめていきます。 なお質問に対しては一問一答形式で答えるのではなく、深ぼって解説をしていきます。 この記事の対象者 フロントエンジニアを目指している人 React初心者から中級者 Reactの質問をされた時にうまく言語化できない人 この記事の目標 Reactでよく使われている技術を言語化できるようになる 何となくの理解から脱却する おことわり 本記事は面接等で聞かれる質問テンプレート集ではありません 現場で後輩に聞かれた質問を深ぼって解説をするノリで書いてます Reactフックとは何か？ Reactフックは公式ドキュメントにおい
フロントエンドエンジニアからみる、この界隈で今どんなIssueが話題になってるのかと、この先どういう動きがありそうかについて。 そこまで自分に先見の明があるとも思ってないけど、アウトプットしておかないと忘れてしまいそうなので・・。 ちなみにここでいうフロントエンドは、いわゆるブラウザとかJavaScriptのAPIのことです。 プロトコル的な側面はそこまで詳しくないのであまり触れません。 WebRTC 1.0 GitHub - w3c/webrtc-pc: WebRTC 1.0 API まず、RTCといえばズバリのWebRTCから。 昨年末にWDからCRへ格上げということで、もうAPIが激変したりはしない・・はず。 実際のところ、ここ半年くらい大きな対応した覚えがないです。（WebRTCそのものを実装してる人は、地味にいろいろ対応してると思うけど） ガワのAPIという観点でいうと、最近はも
Vue.js + Algoliaを使って、フロントエンド開発だけで検索機能を実現する - LiBz Tech Blog
はじめに 前回書いたvue-cli uiでVue.js開発環境を作る記事を書いたところ、同僚がそれを引き継いでvui-cli uiで立ち上げたアプリに「APIから取得したデータでユーザーの一覧を表示する」機能を追加した記事を書いてくれました。 tech.libinc.co.jp tech.libinc.co.jp 今度はそれを更に改良して、Algoliaを使ってユーザーの全文検索機能を作ってみました。 ちなみにTOP画像がゴリラなのは、少し前までAlgoliaのことをAlgorillaと勘違いしていたからです。ウホウホ Algoliaとは www.algolia.com AlgoliaはモバイルアプリやWebサービスに導入することで、全文検索エンジンが利用できるSaaSです。サービス内のコンテンツデータをAlgoliaサーバにアップロードすることで、API経由でコンテンツデータに対して全文
サイボウズが行うフロントエンドの品質保証 / Frontend Quality Assurance at Cybozu
フロントエンドエキスパートを中心に開発支援チームによるサイボウズのフロントエンドの品質保証に対する活動を発表しました。 質問・感想など: https://twitter.com/shisama_ 発表したイベント: 【オンライン】SaaSを支える品質担保術/レガシーコード、アーキテクチャ、EOL@ラクス - connpass https://rakus.connpass.com/event/177676/
Findy Team+でフロントエンドエンジニアをしている 川村(@peijun333)です。 Findy では、フロントエンドのコード品質と安定性を確保するために Jest などのテストフレームワークを積極的に活用しています。通常、Jest は CLI から実行してテスト結果をコンソールで確認しますが、コマンドを用意する手間や、テスト経過のデバッグのために都度 console.log などでその内容を確認しなければならずとても不便です。 そこで、今回はテストの自動化とリアルタイムなフィードバックを提供する JavaScript の統合テストツールである Wallaby.js を紹介します。Wallaby.js を導入することで、開発効率の向上が期待できます。 Wallaby.js とは？ 前提条件 VS Code でテストの修正 Wallaby.js はリファクタリングに強い スナップシ
ROUTE06 でソフトウェアエンジニアをしている @MH4GF です。 ROUTE06 ではエンタープライズ向けビジネスプラットフォーム「Plain」を開発しています。この記事では 2023 年 8 月に Plain クラウド EDI の Web フロントエンドで採用している技術について、その選定理由をまとめました。 現代の Web フロントエンド技術は領域ごとに選択肢が多く、プロダクトに最適な技術選定をする上で検討事項が多いと感じます。この記事がフロントエンド技術選定において参考になれば幸いです。 前提 プロダクトの特徴 技術選定に影響するプロダクトの特徴を箇条書きでまとめます。 エンタープライズ向け SaaS 現在開発中のプロダクトは商取引におけるクラウド EDI のドメインにフォーカス Plain が解決する課題は、元々フルスクラッチで開発すると 1 年かかるプロダクトの開発期間を
2022年、フロントエンドで注目されているJavaScriptやCSSのフレームワーク・ライブラリ・ツール・エディタ・機能などのまとめ
2022年、フロントエンドで注目されているJavaScriptやCSSのフレームワーク・ライブラリ・ツール・エディタ・機能などを紹介します。 今使用しているものはどんな感じか、これから勉強するならどれがよいか、知らない便利なツールや機能はないかなど、フロントエンドの制作で参考になる資料です。 State of frontend 2022 State of frontend 2022は、125か国のフロントエンドデベロッパーにアンケートをおこない、注目されているフレームワーク・ライブラリ・ツール・機能などをまとめたものです。 ここ2年のコロナ禍により、勤務形態が大きく変化しました。データは2022年と2020年の状態も比較できます。 あなたの勤務形態は？ 56%の人がリモートワークをしており、オフィスで働いている人はわずか5%でした。2020年の調査ではこのアンケートをおこなっていませんが、
フロントエンドの消失 - または戦争が激しくなる話
React Server Components に感じたフロントエンドの消失という記事に端を発する一連の議論だが、実際この記事で書かれていることはそうだろうなと思う。話の流れとして誤ってる部分はないと思うし同意する。 この記事ではフロントエンドエンジニアとして、この件についての僕の見解を書く。もちろんフロントエンド（とは？）の総意ではない。 元記事と重複する部分多いが、そこは同じ問題を取り扱う以上避けて通れないため、ご容赦いただきたい。 同じ領域を取り扱ってる以上、開発戦争は激しくなる 様々な理由によりユニバーサルが求められている ※この記事でいう「戦争」とは、お互いの領域を食い合う開発が、活発化することを「戦争」と称しているだけです。それ以上の意図は全くございません 領域がかぶっている 最近のフロントエンド系ユニバーサルエコシステムは、たしかに PHP や Rails の領分を侵そうとし
"Web フロントエンド"の悲しみと明るい未来
next.js が vercel を提供して CDN からサーバーサイドでの処理までをワンストップに提供しているとか、 firebase がクライアントサイドでの SDK と Cloud Functions をなるべく一貫した体験で提供しようとしていることとか、あるいは今話題の React Server Component とかについて、フロントエンドの最前線がいったいどのような苦しみにあるか、理解できる人は実はあまり多くないのではないか、と僕は思っている。 それは何かといえば、絶望的なまでのサーバーサイド/バックエンドへの忌避感だ。「とにかくフロントエンド領域しか絶対にやりたくない」という人が沢山いるが、しかし一方フロントエンドで無理しないでサーバーを書くだけで楽になるようなタスクはいくらでもある(典型的には API たくさんアクセスするとか)。 そうしたときに、フロントエンドメインだが
WEBフロントエンドにおけるソフトウェア設計の考察 / Consideration of software design in WEB front end
概要 ・現代Webフロントエンドにおける難しさは何によってもたらされるのか ・Webフロントエンドと「ドメイン」の関係について ・Webフロントエンドを「設計」することについて ・Webフロントエンドにおけるアーキテクチャ考察 参考資料（スライドにも記載） ・エリック・エヴァンスのドメイン駆動設計 ・Eric Evans（著）今関 剛（監訳）和智 右桂、牧野祐子（訳） ・Clean Architecture 達人に学ぶソフトウェアの構造と設計 ・Robert C. Martin（著）角 征典、高木 正弘（訳） ・未来を作った人々 - ゼロックス・パロアルト研究所とコンピュータエイジの黎明 ・Michael Hiltzik（著）エ・ビスコム・テック・ラボ（監訳）鴨沢眞夫（訳） ・オブジェクト指向のハードコア ・https://www.zerobase.jp/salon/2019/05/25/
「自分が現場に関与しなくても開発組織が円滑に回る状態」が理想。花谷拓磨がフロントエンドエンジニアとして実現したいこと
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog LINEで働くエンジニアにいろいろと話を聞く「LINE Engineer Insights」。LINEの技術組織で働く個々人に、何を重視して技術者としてのキャリアを歩んでいるのか、今LINEで何に取り組んでいるのか、今後実現したいことなどを聞いていきます。 今回登場するのは、フロントエンド開発センターに所属する、フロントエンド領域のスペシャリストでありエンジニアリングマネージャーを担う花谷拓磨です。花谷がLINEに入った理由や働くうえで大切にしていること、OSS活動にかける思いなどをインタビューし支える思想や行動指針を聞きました。 事業や組織の核心に迫る仕事に携わりたくて、LINEへ入社 ――花谷さんがLINEに入った理由につ
フロントエンド開発の効率化！Nx と Playwright でビジュアルリグレッションテストを賢く実施しよう - Techtouch Developers Blog
はじめに なぜ VRT が必要なのか？ VRTとは？ Nx と Playwright で賢く VRT を実施する どう賢く実施したか 結果 まとめ 参考資料 はじめに 「食べログ ラーメン TOKYO 百名店」の全店舗訪問を目指してラーメン巡りを続けているフロントエンドエンジニアの kenshin です。 フロントエンド開発者の皆さん、新機能を追加したり、ライブラリをアップデートした後に UI が予期せず変更されてしまった経験はありませんか？このような問題を素早く検知し、未然に防ぐ方法として、ビジュアルリグレッションテスト（以下、VRT）があります。 この記事では、Nx と Playwright を用いて VRT を効率的に行う方法をご紹介します！ なぜ VRT が必要なのか？ フロントエンド開発では、新機能の追加やライブラリのアップデートにより、予期せぬ UI 変更が発生することがありま
RustのWebフロントエンドフレームワーク「Kagura」をElectron上で動かしてみる - Qiita
RustでもWebAssembly出力ができるようになっているんですが、いつか触ろうと思いつつずっと触る機会がありませんでした。 ちょうど自身の周りでもElectronの利用事案が増えて来て(例えばPostludium/Peridotでパイプラインの設計エディタのためにElectron使おうと思ったこともありました......)、良い機会なので入門として件名のライブラリを触ってみることにしました。 Kaguraとは Rust製のWebフロントエンドフレームワークです。端的に言ってしまえばReactやVueなどの仲間です。 仮想DOMを用いて差分レンダリングを行う点は既存のフレームワーク同様ですが、アーキテクチャ的にはHalogenやElmが近いです (いわゆるTEAの形をとっています)。 RustでWebAssemblyを出力する、動かす Rustにはwasm-bindgenという便利ツー
こんにちは。LINE Growth Technology福岡開発室でサーバーサイドエンジニアをしている中村です。 この記事では担当していたプロジェクトで実施した、Swaggerを使ったAPIドキュメントの作成と、BE（バックエンド）とFE（フロントエンド）間の連携について紹介します。 プロジェクトの説明 はじめに、今回LINE Growth Technology福岡開発室（以下「GT」）がシステムの設計開発を担当した、LINE公式アカウント審査ツールのプロジェクトについて説明します。 LINE公式アカウント審査ツールとは、LINE公式アカウントで認証済アカウントが申請された際に、申請内容が適切であるか審査するシステムです。 このシステムは、LINE公式アカウントが利用されている各国に存在する審査パートというチーム（以下「審査チーム」）によって利用され、日本以外の国家も含め、一日あたり平均約
生成AI時代のフロントエンド開発術
2022年11月にChatGPTがリリースされて、1年と約半年が経過しました。私はChatGPTが話題になった頃から、継続して利用しています。ChatGPTを使い続けていると、Webアプリケーションのフロントエンド開発に役立つことがありました。 そこで、本記事ではフロントエンド開発でChatGPTを活用して効率よく進める3つのパターンにまとめました。これらのパターンを紹介し、読者の皆さんの開発に役立ててもらえればと思います。 以下は、本記事で紹介するFigma、ソースコード、デプロイ先URLです。 Wireframing photo - Figma silverbirder/figma-photo-sample-app-for-ai - GitHub https://figma-photo-sample-app-for-ai.vercel.app ChatGPTを使う前に ChatGPTに
クイックサマリー ‐ 私たちは一連の短い記事で開発者とデザイナーにとって有用なツールやテクニックを紹介しており、直近の記事ではCSS監査ツールとCSSジェネレータを取り上げました。この記事ではタブやテーブルからトグルやツールチップまで、信頼性の高いアクセシブルなコンポーネントを見ていきます。 目次 以下にすべてのアクセシブルなコンポーネントをアルファベット順に記載しました。目次をスキップするか、スクロールして1つずつお読みください。 :focus styles autocomplete buttons carousels "close" buttons content sliders checkboxes color systems color palettes comics component libraries cookie consent prompts dark mode data
Battle Conference Under30 の資料です。 https://bcu30.jp/2019/talk/tomatsu-toshihisa/
当社のフロントエンドコーディング標準技術について
当社はConcrete CMSを用いたWebサイト構築を主な業務としております。また、フロントエンドのみの構築（いわゆるコーディング）のご依頼も承っております。その中で、ご依頼の際に当社が標準的に採用している技術についてご説明する機会は多々ありますが、対外的にまとまって記載したページがこれまでなかったため、こちらのブログにまとめることとしました。ご依頼いただく際の参考にしていただければ幸いです。 CSSフレームワーク 当社ではCSSフレームワークとして Tailwind CSS （テイルウィンド・シーエスエス）を採用しています。Tailwind CSS は、2022年の調査において、直近４年間を通して満足度・興味・利用率の全てで１位を獲得し続けている、現在のフロントエンドデベロッパーから最も支持されているフレームワークです。Microsoft, Google, GitHub, Shopif
フロントエンドメンバーのTS型力向上を狙ったtype-challenges活用術 - HRBrain Blog
どうも、こんにちは。HRBrain でフロントエンドエンジニアをやってます。ちゃんかつです。 この前初めて代々木公園に行ったのですが、めちゃくちゃ広いですね。自然がいっぱいで気持ちが良かったです。 さて、HRBrain では今年の 6 月から、毎週月曜日に「type-challenges」を用いて社員の TypeScript （以下 TS） の型表現の向上を図っています。 この記事では、HRBrain ではなぜ type-challenges を解く時間を設けているのか、また、type-challenges への取り組み方を紹介します。 なぜ type-challenges を利用するのか いろいろ理由があるのですが、「解答がなるべく簡単にできる」が一番大きな理由です。 Typescript Playgroundで解答することが出来て環境構築の手間は不要、そして、type-challeng
https://fortee.jp/object-oriented-conference-2020/speaker/proposal/view/b06110e6-717e-4cb2-97c3-cd8d53693378 の初版スライドです 当日の発表版は https://speakerdeck.com/tooppoo/consideration-of-software-design-in-web-front-end で公開しています。
原文 Micro-Frontends – Paul Sweeney – Medium (English) 原文公開日 2019-05-26 翻訳依頼者 翻訳者 meiq 翻訳レビュアー doublemarket 原著者への翻訳報告 1781日前 原文へのコメントで報告済み 編集 あなたの現場には、リビルドに時間がかかって仕方がない、大規模なUIはありませんか？ 複数のチームで作業していてしょっちゅうコードがコンフリクトするなど、インテグレーションに問題が発生することはありませんか？ ひとつのアプリが、あまりにも多くの機能を抱えすぎていませんか？ そんなとき、きっとマイクロフロントエンドが役に立つでしょう。 マイクロフロントエンドは、バックエンドのエンジニアリングにおけるマイクロサービスアーキテクチャの概念を、フロントエンド開発に適用したものです。 しかしUIを複数のフロントエンドへ分割する
こんにちは！Acompanyのマッケイです！ この記事は Acompany5周年アドベントカレンダー 11日目 の記事です。 今回はAcompanyのプロダクト開発でも活用しているRemixを開発環境で使ってみた所感を書いていこうと思います。 Hello,Remix Remixは、Reactをベースとしたフルスタックフレームワークです。 Reactを魔改造して色々できるようにしようぜ、という昨今のモダンフレームワークに習うように、RemixもReactに厚化粧をした"React"フレームワークです。 書き心地はそのままReactですが、気づいたらサーバーサイドのコードを書いており、気づいたらデータベースをいじっているというなんとも不思議な経験ができるフレームワークです。 フルスタックフレームワークを使っているというよりは、Reactで開発しながら、サーバーサイドの処理も同時に書けるのがRe
「テストを書こうとしたけど、どう（いつ）書いたらいいかわからない」初心者向けガイドライン！ - HIKKYフロントエンドガイドラインより
本稿では、自動テストについての「ちょうど一歩くらい」進んだ内容について、述べていきます。 「テストを実施したいけど、どう書けばいいかわからない」という全人類は、これを読んでください。 損はさせませんよ！ これを読めば、「一歩目の知識」「初めてのテスト作成」「テストの初歩概念」を得ることができ、「次になにをすればよいか」がわかるようになります！！ 対象読者: 実際にテストを実装してみようと思ったけど、とっかかりがつかめなかった テストの概要はわかった（単体テストと結合テストガイドラインを読んだ） テストのTipsに興味がある なお本稿は株式会社HIKKYフロントエンドチーム向けのガイドラインであるものの、内容については筆者に一任されており、株式会社HIKKY及びその意向等とは無関係です。 テストってどういうフローで開発していくの？ どのタイミングでテストコードを書くの？ おおまかには以下の、
フロントエンドの制作者は持っておくとかなり便利！Webのさまざまなアニメーションの実装方法が分かる解説書 -動くWebデザインアイディア帳
Webページやスマホアプリに動きやアニメーションを加えたい、そんな時にすぐに役立つコピペで利用できる解説書を紹介します。 コードはサポートサイトから最新版がダウンロードでき、画面遷移、ナビゲーション、ボタン、スライドショー、検索フォーム、グラフなど19種類にバリエーションが200個くらいあり、「この1冊が丸ごとカバー」の文字通り大全集です。 フロントエンドの制作者は、1冊持っておくとかなり便利です。 よく見かけるさまざまなアニメーションが収録されており、実装の参考になるだけでなく、アイデア集としても非常に便利。19種類からのバリエーションも豊富で、こんなこともできるのかという発見もあるかもしれません。
一休.com 宿泊管理システムのフロントエンド設計と改善の変遷 - Developers Blog - 一休.com Developers Blog
宿泊の管理システムについて 新しい管理システムについて 開発初期のフロントエンド設計 コンポーネントは4レイヤー方式を採用 UIのコンポーネントライブラリを採用 これ以上の設計、方針は決めなかった 初期ローンチ後の課題 改善した内容 1. コンポーネント設計の見直し ディレクトリ構成の変更 大きくなったコンポーネントの分割 Fragment Colocationを導入してコンポーネントのインターフェースとFragmentを整理 2. 業務処理（composables）の分割 3. 型安全に開発できるように厳しいlint設定に変更 4. 秩序を保てる開発体制、ドキュメントの整備 現在と今後 今後やりたいこと 改善を継続するためのポイント まとめ おわりに 宿泊プロダクト開発部の田中（id:kentana20）です。 このエントリーは一休.com Advent Calendar 2023の14
11月2日（土）に実施された、FRONTEND CONFERENCE 2019 の登壇資料のまとめです。 資料を発見次第随時アップデートしていきます。
副業に120%の力で取り組む理由 はじめまして。フロントエンドエンジニアの林 恭央（@www_REM_zzz）と申します。 とはいえ、実際には色々なプロジェクトを異動しながらサーバーサイドもDBもと手広く実装をする環境にいて、直近だとサーバーサイドエンジニアに近い動きをしています。やっていることを一言で説明するのが難しいので、気になった方はSNSなどでぜひお声がけください！ さて今回は、もともとはフロントエンドが苦手だった僕が、フロントエンドの副業をするようになった経緯をお話できればと思います。 フロントエンドへの苦手意識を克服する 直接のきっかけは、異動でモダンフロントエンドへの対応が必須になったことです。もともとフロントエンドには苦手意識を持っていたのですが、以前のプロジェクトでは完全にサーバーサイドのみだったため、満足に勉強できていない状態でした。 本業でプロジェクトに入ってタスクを
はじめに 自分は2021年に新卒でweb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は実務でNext.jsプロジェクトにテストを導入することになり「React-Testing-Library」と「Jest」について改めて学び直したのでその内容を紹介します。 はじめに「React-Testing-Library」と「Jest」の概要を説明しその上で具体的なテストコードを何パターンか書いていきます。 この記事の対象者 フロントエンドのテストの概要を知りたい人 React-Testing-LibraryとJestについて知りたい人 具体的なテストの書き方を学びたい人 なお本記事では、React-Testing-Libraryの具体的な書き方についてをメインにしている
■イベント コンポーネント設計のすゝめ 〜ベストプラクティスを学ぶLunch LT〜 https://findy.connpass.com/event/296449/ ■登壇概要 タイトル：続・変更に強いコンポーネント設計の方針と規約（Webフロントエンド） 登壇者：技術本部 データ戦略部 木田 悠一郎 ■データ戦略部 エンジニア 採用情報 https://media.sansan-engineering.com/data-strategy
クックパッドのフロントエンド CSS in JS をゼロランタイムに切り替えました - クックパッド開発者ブログ
こんにちは。レシピ事業部のkaorun343です。我々のチームではレシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 - クックパッド開発者ブログにて紹介したとおり、レシピサービスを Next.js ベースの新システムへと移行しています。今回は、この新システムのCSS in JSをEmotionからゼロランタイムのvanilla-extractへ変更した話です。 vanilla-extract.style 背景 以前書いた レシピサービスのフロントエンドに CSS in JS を採用した話 - クックパッド開発者ブログでは、CSS in JSライブラリとして Emotion（@emotion/react）を採用した経緯と開発環境整備を紹介しました。採用理由としては以下の通りでした。 セレクタに一意なIDが割り振られるので、スタイルを適用した要
Sketch - The digital design toolkit 画像はSketch最高っていう顔です。 HTMLやCSSを書くWebフロントエンドエンジニアにとって、Webデザイナーが用意した理想像を現実に落とし込むことは1つの使命であり、費用対効果への葛藤に揺れる中で「技術的に難しいから」という理由でデザインを却下したくないのは誰しも同じだと思います。一方で、技術的に難しくなくとも、デザインファイルの作り方次第ではエンジニアの実装効率も多少なりとも変わってきます。そこで、僕のデザイナー及びエンジニアとしての経験則から、HTML/CSSで実装しやすい（≒Webフロントエンドエンジニアにやさしい）デザインファイルの作り方を、Sketchでの用例も挙げつつまとめてみます。近年はFigmaが注目されつつありますが、基本的な話は共通すると思います。 本来ならばデザイナーにこそ読んでいただき
こんにちは、クレイの阪本です。 もともと外部委託パートナーとしてクレイ案件のお手伝いをしていましたが、気づけば中の人となっていました。 よろしくお願いいたします。 先日、DocBaseはフロントエンド構成を Backbone.js+Coffeescript から React.js+TypeScript へ移行しました。大改修です。 どれくらい大きな変更だったかというと、10万行(2500ファイル)もの変更が行われ、それまでRubyだったはずのリポジトリ代表言語がTypeScriptに替わってしまったほどでした。 なお、2021/3/31のリリースでリニューアルすべてが終了したわけではありません。今後、機能拡張やUI改善をしやすくするための足がかりという位置づけです。 安全にリリースするためテスト期間を多めに取ったこともあり、期間としては1年ほどかかってしまいました。 今回はどのようにリニュ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで実装する時、フロントエンドのデベロッパーは何を考え、どういうことに配慮して実装するのか
フロントエンドで長持ちするプロダクトを開発するための心構え
フロントエンドにおけるアーキテクチャとの向き合い方
2020年初頭における Next.js をベースとしたフロントエンドの環境構築 - Qiita
Yahoo! 知恵袋フロントエンドをリアーキテクトしている話
レガシーなフロントエンドを リプレースするプラクティス。 エネチェンジが挑む 「React化」
フロントエンド(React)の技術質問 - Qiita
フロントエンド x RTC界隈の最近とこれから - console.lealog();
Wallaby.jsを使ってフロントエンド開発のテストを効率化しよう - Findy Tech Blog
Plainのフロントエンドにおける技術選定(2023年8月版) - ROUTE06 Tech Blog
Swaggerを使ったAPIドキュメントの作成と、バックエンドとフロントエンド間の連携
アクセシブルなフロントエンドコンポーネントの完全ガイド - 前編 | POSTD
大規模フロントエンドの技術的負債と向き合う。
WEBフロントエンドにおけるソフトウェア設計の考察
マイクロフロントエンド | Yakst
Remix入門: フロントエンドもバックエンドも爆速開発を実現する次世代Webフレームワーク
フロントエンドカンファレンス福岡 2019 登壇資料まとめ - Qiita
Reactの副業事情。苦手なフロントエンドの副業に挑んだ理由と得た経験 | Offers Magazine
【入門】フロントエンドのテスト手法まとめ - Qiita
続・変更に強いコンポーネント設計の方針と規約（Webフロントエンド）
Webフロントエンドエンジニアにやさしいデザインファイルの作り方 - Qiita
DocBaseのフロントエンド改修をどのように進めたか