VS Codeを使いこなせ! フロントエンジニア必須の拡張機能7選 - ICS MEDIA
「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターへとカスタマイズできます。 本記事では、HTMLコーダーやフロントエンドエンジニアに役立つ拡張機能を紹介します。 1. IntelliCode IntelliCodeはMicrosoft謹製の公式プラグイン。AI支援による次世代のコード補完がJavaScriptやTypeScriptで利用できるようになります。APIの一覧がアルファベット順に提示されるのではなく、利用する可能性の高いAPIがAIによって予測されます。 コード補完の様子を次のスクリーションショットでご覧ください。入力候補の「★」マークが付いているところが、補完候補になっているところです。人工知
Next.js Web アプリケーションにおける SSG とSSR の比較： 正しいレンダリングアプローチの選択 | Amazon Web Services
Amazon Web Services ブログ Next.js Web アプリケーションにおける SSG とSSR の比較： 正しいレンダリングアプローチの選択 人気の React フレームワークである Next.js は、開発者がモダンな Web アプリケーションを構築する方法を変えました。Next.js は、Static Site Generation (SSG) や Server Side Rendering (SSR) といった強力な機能を提供し、アプリケーションのパフォーマンスとユーザー体験を最適化します。本記事では、SSG と SSR の主な違い、利点、いつどちらかを選択するか、それぞれのアプローチで AWS Amplify を使ってデプロイする方法を説明します。Amplify は、フロントエンドの Web やモバイル開発者が AWS 上でフルスタックのアプリケーションを簡単に
フロントエンドのディレクトリ設計思想
はじめに フロントエンドのディレクトリ構成、世の中に色んな「推し」が有って悩みますよね。 例えば、、、 さらに最近は、App Directoryの登場や、それに合わせたNext.js公式の「推し」構成がドキュメント化されたりと、さらに色々なパターンが出てきています。 本記事の趣旨 本記事では、具体的な構成そのものではなく、 様々ある構成を横串で見通して整理できる設計思想を紹介します。 新しい推し構成の紹介ではなく、構成を考えたり決めたりするときに役立つ抽象的・汎用的な指針を提供できればと考えています。 基本となる考え 分割の方向 一般的に、アーキテクチャにおける分割には2つの方向が有ります。 (出典も良書なのでリンクを貼っておきます： https://www.amazon.co.jp/dp/4873119820) これはディレクトリにおいても同じだと思っていて、筆者は分かりやすさのために
組織・プロセス・技術 - フロントエンドの生産性向上への複眼的アプローチ - Findy Engineer Lab
2023年9月、ファインディ株式会社は「フロントエンドの開発生産性」と題したオンラインカンファレンスを開催。第一線で活躍しているエンジニアを招いて、フロントエンド領域における開発生産性を向上するための組織づくりや戦略について語っていただきました。 本稿では、弁護士ドットコム株式会社にてクラウドサイン事業本部Product Engineering部マネージャーを務めている芳賀 将至さんのセッション「組織・プロセス・技術 - フロントエンドの生産性向上への複眼的アプローチ」の内容をご紹介します。 クラウド型電子契約サービス「クラウドサイン」を手がける同社は、コロナ禍で事業が急成長。サービスの成長に伴い、フロントエンドエンジニアのメンバーは3年で5倍に増えました。人員増加により、できることが増えた一方で、対応すべき課題も発生。解決に向けて、技術、プロセス、組織といった三つの領域で行われた取り組み
組織状況の変化の中で運用するフロントエンドエコシステム - Findy Engineer Lab
2023年9月、ファインディ株式会社は「フロントエンドの開発生産性」と題したオンラインカンファレンスを開催。第一線で活躍しているエンジニアを招いて、フロントエンド領域における開発生産性を向上するための組織づくりや戦略について語っていただきました。 本稿では、合同会社DMM.comのフロントエンドグループにてマネージャーを務めている小西一平さんのセッション「組織状況の変化の中で運用するフロントエンドエコシステム」の内容をご紹介します。 同社は、フロントエンドの開発生産性とUI/UXの一貫性の向上を目的として、2021年にフロントエンドグループを立ち上げました。エコシステムを整備することで当初の目的は達成しつつあったものの、しばらくしてから別の課題が発生してしまったのだそう。新たな課題とはどんなものだったのか、その対処法とは？ ■プロフィール 小西 一平（こにし いっぺい） 合同会社DMM.c
認知負荷で考えるフロントエンドの組織体制 - Findy Engineer Lab - ファインディエンジニアラボ
2023年9月、ファインディ株式会社は「フロントエンドの開発生産性」と題したオンラインカンファレンスを開催。第一線で活躍しているエンジニアを招いて、フロントエンド領域における開発生産性を向上するための組織づくりや戦略について語っていただきました。 本稿では、Chatwork株式会社にてエンジニアリングマネージャーをしている澁谷 哲也さんのセッション「認知負荷で考えるフロントエンドの組織体制」の内容をご紹介します。 2019年に上場を果たし、急成長を遂げている同社。それに伴い開発組織の拡大が急務となり、職能別組織から職能横断型組織への移行がスタートしました。しかし簡単に移行できるわけではなく、澁谷さんは「プロダクトの特性もあり、組織体制を移行するためにはいくつかの課題もある」と語ります。Chatworkが直面した課題とは、どのようなものだったのでしょうか。 ■プロフィール 澁谷 哲也（しぶた
corepack is 何?
追記: 2023-11-19 corepack v0.20.0 にて、CLI のコマンド体系が一新されて多少わかりやすくなりました (PR#291)。新しいコマンドは README を参照。 追記: 2022-02-03 Node.js v14.19.0 に corepack が標準バンドルされました。 corepack がバンドルされていない Node.js v12 系は 2022-04-30 に EOL を迎えるので、あと 3 ヶ月もすればアクティブな Node.js 環境には必ず corepack が揃っているという状態になりますね。引き続き experimental ステータスのままではありますが。 追記: 2021-09-08 Node.js v16.9.0 で corepack が標準バンドルされました。まだ experimental 扱いですが。 デフォルトでは yarn も
パフォーマンスの高みを目指せ！ CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順 - ICS MEDIA
パフォーマンスの高みを目指せ！ CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順 ウェブサイトの高速化はあらゆるウェブ制作者の悲願です。1ミリ秒でも早くコンテンツを届けるために、エンジニアたちは血と汗と涙を流します。しかし、ウェブサイトの高速化は、ウェブサイトの構成要素を最適化するだけでは実現できません。 大きな課題として次の2つが挙げられます。 コンテンツの転送量が大きく、表示までに時間がかかる 物理的なクライアント/サーバー間の距離が遠く、転送に時間がかかる これらの課題を解決するため、様々な技術が発展してきました。今回はその中でもSSR（サーバーサイドレンダリング）と、CDN（コンテンツデリバリーネットワーク）に注目します。 本記事ではSSRとCDNの概念について解説し、実際にCloudflareというCDNからコンテンツを配信する方法を紹介します。フレ
フロントエンド開発を安全かつ素早くできるように取り組んでいること | 株式会社PLAN-B
エンジニアの田川です。 インフルエンサーマーケティングを支援するCast Me!というプロダクトでフロントエンド開発を担当しています。 アプリケーション開発において、スケールすることを想定した設計は非常に大切です。 私が入社した当初のCast Me!は、フロントエンドの設計方針などが定まっておらず、機能改修などをした際に意図せず他の機能が壊れてしまう問題が多々ありました。 直近では、新規開発と並行して新アーキテクチャへの刷新を行ってフロントエンドの設計の見直しやルールの策定などをしています。 今回は安全かつ素早く開発をできる状態にするために、Cast Me!で行っている取り組みを紹介します。 機能ごとにディレクトリを作成するコードを変更する際、特定の機能に関連するコードが散乱していると、変更の影響を完全に理解するのが困難になり、結果としてバグを生む可能性が高まります。
フロントエンドの歴史から React を知りたい
こんにちは、上條（mk-0A0）です。 早いものでこの web 業界に入って3年目に突入しました。新卒時にはすでに React が普及していたため、私はそれ以前の React を使わない開発の経験がありません。 ちょうど読んでいた『りあクト！ TypeScriptで始めるつらくないReact開発 第4版【② React基礎編】』でフロントエンドの歴史について解説されていたので、React が誕生するまでの経緯を自分なりにまとめてみます。 React が生まれるまでのフロントエンドの歴史「8-1. React の登場に至る物語」 P.119 の内容をもとに年表を作成してみました。書籍では約8ページに渡って React が登場するまでの大きな出来事がまとめられています。私のように、すでに React が普及してから働きはじめた人にとっては過去のことが分かる内容なのでぜひ書籍を読んでみてください
フロントエンドのテスト手法、何がある？ 知っておきたいテストとその戦略を網羅的に解説
フロントエンドの役割が増す中、効率のよく確実なテストを行うことはもはや常識になってきています。フロントエンド・アーキテクトとして活躍する吉井健文さんの著書『フロントエンド開発のためのテスト入門』（翔泳社）では、フロントエンドエンジニアが押さておくべきテストの基本と具体的な実践手法が解説されています。今回は本書から、テストの種類とその戦略について網羅的に説明されている「第2章 テスト手法とテスト戦略」を抜粋して紹介します。 本記事は『フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識』の「第2章 テスト手法とテスト戦略」から抜粋したものです。掲載にあたって一部を編集しています なお、5月10日（水）に、著者の吉井健文さんをゲストに迎えたCodeZine主催のウェビナー「Webフロントエンドのための実践『テスト』手法」が開催されます。こちらもぜひチェックして
Chrome DevToolsを使ったフロントエンドパフォーマンス改善 | 株式会社PLAN-B
自社プロダクトのフロントエンド開発に携わっている山口です。 社歴が長いこともあって関わったプロダクトはたくさんありますが、1番長く関わっているのはSEARCH WRITEです。今回はSEARCH WRITEで行ったパフォ… 本記事ではChrome DevToolsのPerformanceパネルを使って実際のプロダクト開発で行ったパフォーマンス計測と改善の記録をまとめました。 パフォーマンス改善の対象SEARCH WRITEはVue.jsで作られたSPAで、バックエンドとのデータのやり取りはVue.jsを介して行います。 今回のパフォーマンス改善の対象ページでは、Web APIから受け取ったデータをもとにリストを表示しています。 データの表示件数は、ある値をしきい値として制限していましたが、そのしきい値を解除してほしいとの要望がありました。 そのしきい値はバックエンド側で制御しているもので、
Storybookを活用したUIコンポーネントの管理について紹介します - NRIネットコムBlog
本記事は Design Week 2023 5日目の記事です。 🌈 4日目 ▶▶ 本記事 ▶▶ 6日目 💐 はじめまして。フロントエンドエンジニアを目指して日々奮闘中の中平です。この春でNRIネットコムに入社して2年目になります。 昨年の8月に現場配属され、9月頃からはコーダーとしてWeb画面リニューアルの案件に参画しました。初めて参画したこの案件では、画面上に表示するボタンやチェックボックス等のUIパーツ（以下、UIコンポーネントと記載）がStorybookを使って管理されていました。 私自身は途中からの参画だったこともあり、案件参画中はStorybookの導入方法や活用方法をあまり理解しておらず、サイトで使われているUIコンポーネントが一覧で見られるもの程度の認識でした。しかしうまく活用できていれば、さらにスムーズにページのコーディングができていたということに気づき、もう少しSto
リクルートテクノロジーズのフロントエンド計測 | Recruit Tech Blog
同時に、redux-protoはリクルートテクノロジーズならではの大規模Web開発に必要な機能を盛り込んだ高機能なフレームワークでもあります。主なもので以下のような機能があります。 サーバサイドでHTMLを描画するためのSSR機能(Server Side Rendering) マイクロサービス化されたAPIを組み合わせて利用するためのBFFサーバ機能(Backend For Frontend) Atomicデザインを採用し、表示(Presentation)とロジック(Container)を切り分けるデザインパターンの徹底 titleタグ、metaタグ等のheadタグ要素の動的な変更のサポート URLに対応したルーティング、データフェッチとルーティングおよび描画の同期を行う機能 戻る操作時に以前の状態とスクロール位置を復帰する機能 ルーティングに応じたwebpackのコードスプリット、および
話題のesbuildをさっくりと調査してみた - Qiita
う〜ん、とはいえみなさん、ビルドツールってなんか地味な印象ありませんか？私はそうでした。 ビルドツールといえば、フロントオタクがwebpackをゴリゴリチューニングしたり、rollupなどの色々ツールがあるもいまいち根本的にビジネスメリットがあるわけでもないし、 下手に手を出すと技に溺れやすい世界だし(公式ドキュメントにシンプルに保ちなさい的なこと書いてあるよね！)、第一最適化はフレームワークに任せればいいじゃん！っと考えていました。 しかし、今回注目したいesbuildはまさにフロントエンドの次の時代を作ってくれる様な、「すごい」ツールであるとキラキラとした期待を寄せてしまいます。 esbuildとは webpackなどに変わるフロントエンドのコード変換+バンドルツールで、なんとWebpackと比較して10-100倍速度が早いそうです。 これが本当だとすると、フロントの開発効率は根本的に
実装例から見る React のテストの書き方 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @testing-library/react の renderHook を使う 参考リンク 色々なテスト事例 setTimeout を使うコンポーネントのテスト 補足: Storybook の story を使
フロントエンドのテストコードを書くときに大切にしていること - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの @mugi_unoです！ kintone では フロントエンドの刷新プロジェクト（通称フロリア）が進行中です。 blog.cybozu.io kintone の開発では E2E 主体の自動テストを整備していましたが、 フロントエンドの刷新に合わせて、新たにフロントエンド側でのテストコードを積極的に書いています。 テストを書くことに不慣れなメンバーもいるため、日々 Pull Request 上でのレビューやペア・モブ作業を通じて、知見の共有が行われています。今回はフロントエンド刷新のテストを書いてきた中から、筆者が有用だと感じた知見やノウハウを紹介したいと思います。 目次 💡「実はそれ最初からパスしてるかもしれない」 期待する操作で期待する結果になることを厳密に検証する 他のテストケースによって前提条件を担保する 💡「テストコード上のロジッ
Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか｜ハイクラス転職・求人情報サイト AMBI（アンビ）
Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか Reactを取り巻く状態管理のアプローチは変化を続けていますが、いま知っておくべき手法とはどのようなものでしょうか。小林 徹（@koba04）さんに、現在、そしてこの先の状態管理について執筆いただきました。 こんにちは、小林（@koba04）です。 2019年5月に『SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷』という記事を書きましたが、そこから2年以上が経過し、Reactを用いた状態管理は大きく変わりました。本記事ではReactを取り巻く状態管理の変遷について解説します。 広がるReduxの採用 Hooksの登場 コンポーネントツリーから独立した状態管理 Concurrent Featuresによる新しいユーザー体験 状態とキャ
ヤフー全社横断「Webパフォーマンス改善」の取り組み（Tech-Verse 2022）
ヤフーで全社を横断して行ってきたWebパフォーマンス改善の取り組みを紹介します。以下の表の数値は、ヤフーのWebサービスと競合のWebサービスのパフォーマンス速度を比較したとき、ヤフーのWebサービスのほうが高速であるサービスの割合を示しています。プロジェクトの実施前は62％でしたが、実施後は83％まで改善することに成功しています。 ■ヤフーのサービスと、その競合に当たるサービスをベンチマークとして比較したとき、ヤフーのほうが速い割合 実施前 実施後 下図のサーチコンソール画面を見てください。Yahoo!映画におけるWebパフォーマンスが良好であることを示す「緑色」が大幅に増えています。Yahoo!知恵袋に至っては、改善が必要な「黄色」の割合をほぼ0まで減少させることができています。 このような結果を出すことができたプロジェクトで実践してきた内容を、3つに分けて紹介します。 実施した背景
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://localhost:3000/frontend/micro-frontends-in-context/