[B! frontend] anakuma_guumaのブックマーク

フロントエンドのディレクトリ設計思想

App Router への移行は「改善」となり得るのか？/ Can migration to App Router be an improvement

anakuma_guuma 2023/10/17

リンク

(Jay Freestone’s) Front-End Predictions for 2022 | CSS-Tricks

anakuma_guuma 2022/02/22

frontend

リンク

フロントエンドを集中的に学習できる究極の無料リソースを厳選してみた！ - paiza times

どうも、まさとらん︵@0310lan︶です！今回は、フロントエンド開発者およびこれから学習をしようと考えている人に最適な無料リソースを厳選してご紹介します。学習コンテンツばかりでなく、開発に便利なサービスやツールなども紹介しつつ、初心者から中級者くらいまで役に立つドキュメントもまとめています。すべて無料なのでWeb開発にご興味ある方はぜひ参考にしてみてください！ ■何を学習したらいいのかをロードマップで確認する︻ Developer Roadmaps︼フロントエンドの学習といっても意外に広範囲なので、まずは何から勉強をすればいいのか迷う人も少なくありません。この﹁Developer Roadmaps﹂はWeb開発者が勉強するための学習内容をロードマップとして無償公開しています。さまざまな種類が用意されていますが、例えばフロントエンドの場合は以下のような感じです。有名なロードマ

anakuma_guuma 2022/01/20

frontend

リンク

2021年振り返り｜Takepepe

今年は昨年と比較し、活動がうまく回り、おおくの経験を積めた年になりました。一年越しのプロジェクトでFEアーキテクトを担当年始から Next.js を採用したプロジェクトで、フロントエンド周りのアーキテクトを担当させていただきました。11月には JSConf JP で、会社スポンサー枠登壇という大役をいただいたので、その活動内容の振り返りを発表しました。本日の発表資料です！10人並列開発でも破綻させない、開発フロー構築・チームビルディングにどう取り組んだかという話をしました #jsconfjp #jsconfjp_c https://t.co/inOMMIwosb — Takepepe (@takepepe) November 27, 2021 このプロジェクトを通して技術的に得た一番の収穫は、Storybook と MSW をベースにした開発フローの構築だったと思います。MSW は S

anakuma_guuma 2021/12/31

frontend

リンク

パフォーマンス改善のいろは

こんにちは、@kaa_a_zu です。私は、今までいくつかの組織でフロントエンドのパフォーマンス改善に取り組んできました。パフォーマンスが劇的に改善したこともあれば、改善点の洗い出しで終わったこともありました。この記事では、それらの経験に基づいて、どのようにしたらチームがパフォーマンスに意識を向けることができるのか、改善を習慣化できるのかについて基本的なことを紹介させていただきます。少しでも参考になったらありがたいです。また、ご指摘や感想も随時お待ちしております。 ※この記事はWebフロントエンド領域を対象にしています。なぜパフォーマンス改善をするのかパフォーマンスを改善する目的には、大きく3つあると考えています。ユーザー体験の質を向上させるため(追記: この動画はパフォーマンスの重要性を説いています) SEO対策のため将来的にリッチな機能を導入するため(既にTWA化の基準にはパフ

anakuma_guuma 2021/10/22

frontend

リンク

Web技術における標準化の歴史｜マイクロフロントエンド入門

anakuma_guuma 2021/07/23

frontend

リンク

React で作る中規模 SPA のレイヤードアーキテクチャ - GiXo Ltd.

TAG : Advent Calendar | Firebase | Firestore | React | Refeed | TypeScript | トチカチ | フロントエンド AUTHOR : ギックス POSTED : 2020.12.23 08:25 この記事は GiXo アドベントカレンダーの23日目の記事です。昨日は、少人数の開発で Kubernetes を活用するための設計戦略でした。 MLOps Div. の堀越です。本記事では、React と TypeScript で SPA の実装を行う際に採用しているレイヤードアーキテクチャについてご紹介します。レイヤードアーキテクチャというとクリーンアーキテクチャや DDD が有名ですが、弊チームフロントエンドの場合はクリーンアーキテクチャから SPA にマッチする箇所を部分的に取り入れた簡易版のレイヤードア

anakuma_guuma 2021/06/07

frontend

リンク

Micro Frontends in 3 minutes｜Micro Frontends Architecture Patterns

anakuma_guuma 2021/06/07

frontend

リンク

grdの作者が考える、いまフロントエンドエンジニアに求められる「速度という機能」 - エンジニアHub｜Webエンジニアのキャリアを考える！

grdの作者が考える、いまフロントエンドエンジニアに求められる﹁速度という機能﹂ Webパフォーマンスの改善に、並々ならぬ情熱を傾けるエンジニアの泉水翔吾︵@1000ch︶さん。氏の手がけるOSSはこの情熱を体現するかのように、パフォーマンス改善にフォーカスしたものが多数あります。なぜWebパフォーマンスにこだわるのか、そして現在のフロントエンドエンジニアに求められる技術を聞きました。﹁サイトの表示に3秒以上かかると、訪問者の53%がそのサイトから離脱する﹂ Googleが公開した上記のドキュメントは、Webの﹁使いやすさ﹂とは、スピードと不可分なものであることを示しています。﹁パフォーマンスはサービスが持つべき“機能”の一部﹂と語るのは、﹃超速! Webページ速度改善ガイド﹄の著者の一人である泉水翔吾︵せんすい・しょうご／ @1000ch ︶さん。彼は、前職の株式会社サイバーエージェ

anakuma_guuma 2021/05/10

frontend

リンク

Shared Element Transitions | CSS-Tricks

anakuma_guuma 2021/05/05

Native Appのようなページ間transitionを実現するAPIが提案されたよう

frontend

リンク

フロントエンドエンジニアというものについて余計なことを考える（2019秋版）｜terrierscript

元ネタとか https://shgam.hatenadiary.jp/entry/2019/09/21/104413 https://twitter.com/Nkzn/status/1177794507741335552 自分はよくJSやCSSについての発信をしていて、﹁JSが得意です﹂とか﹁CSSが得意です﹂と言うこともあるのですが、その反応として﹁じゃあフロントエンドエンジニアなんですね﹂と言われると、﹁いやあ、うーん、どうなんですかね、、﹂みたいなぼやっとした返答をすることがよくあります。その理由として﹁フロントエンド技術は好きだけど自覚としてはサーバーサイドエンジニアだし、DB設計とかもやりたいし・・・かといってフルスタックで言うのいやだし・・・﹂となだったのですが、このJSON色付けという話題を見て﹁実はここに自信が無いからという理由が本質なのでは？﹂と思えてきました。ちょう

anakuma_guuma 2021/05/03

リンク

JSON色付けたいへん問題 - 旧gaaamiiのブログ

この前、以下のツイートを目にして、面白いな〜と思いました。たしかにフロントエンドの仕事は、サーバーからJSONとして返ってきたデータを人向けに表示するという仕事が多く、雑に言い表せてる感じが面白い。湯婆婆﹁フン。フロントエンドエンジニアというのかい？﹂フロントエンドエンジニア﹁はい﹂湯婆婆﹁贅沢な名だねぇ。今からおまえの名前は "JSON色付け係" だ。いいかい、 "JSON色付け係" だよ。分かったら返事をするんだ "JSON色付け係" ！！﹂— ぷーじ (@YuG1224) 2019年9月15日上のはジョークだと思うんですが、とはいえ真面目に考えてみると、JSONを人に見やすくする作業をひたすらやっているのだから、もう少し仕事楽になってもいいんじゃないか？なんでJSON色付け係は相変わらず大変なんだ？という疑問が湧いてきます。それについて、自分なりに考えを整理しておきたいと思い

anakuma_guuma 2021/05/03

frontend

リンク

モダンBFFを活用した既存APIサーバーの再構築 - クックパッド開発者ブログ

技術部の青木峰郎です。去年までは主にデータ分析システムの構築を担当していましたが、最近はなぜかレシピサービスのサービス開発をやっています。今日は、そのサービス開発をする過程で導入したBFF︵Backends for Frontends︶であるOrchaについて、導入の動機と実装の詳細をお話しします。 Orcha導入にいたる経緯まずはOrcha導入までの経緯、動機からお話ししましょう。最初のきっかけは、わたしが去年から参加しているブックマークのようなサービスの開発プロジェクトでした。このプロジェクトの実装のために新しいmicroserviceを追加することになったのですが、そのときにいくつかの要望︵制約︶がありました。1つめは、撤退するとなったときに、すぐに、きれいに撤退できること。2つめが、スマホアプリからのAPI呼び出し回数はできるだけ増やしたくない、という要望です。

anakuma_guuma 2021/05/01

BFF
frontend

リンク

Backends For Frontends（BFF）はじめました - ZOZO TECH BLOG

はじめにこんにちは。EC基盤本部SRE部プラットフォームSREの三神です。 2021年3月18日、ZOZOTOWNは大規模なリニューアルをしました。その中でも、コスメ専門モールのZOZOCOSMEと、ラグジュアリー&デザイナーズゾーンのZOZOVILLAを同時にオープンし、多くの反響をいただきました。今回のリニューアルではBackends For Frontends︵以下、BFF︶にあたるZOZO Aggregation APIを構築しています。本記事ではZOZOTOWNが抱えていた課題とBFFアーキテクチャを採用した理由、またZOZO Aggregation API構築時に発生した課題と解決法についてご紹介します。 ZOZO Aggregation APIのサービスメッシュについてはこちらの記事でご紹介していますので合わせてご覧ください。 tech blog.zozo.com BFFと

anakuma_guuma 2021/04/30

frontend

リンク

Next.js と Gatsby の比較

最近 React ベースのフレームワークである Next.js と Gatsby を使っています。ある程度客観的に比較できるだけの知識がたまったと思うので、 Next.js と Gatsby の比較情報をまとめてみました。これからどちらを使うか・学ぶか迷っている方のご参考になれば幸いです。あくまで私が知る範囲での説明であり 100% の正確さを保証するものではないのでその点にご留意ください。尚、本記事は Next.js と Gatsby が以下のバージョンが最新のときに書いています。 Next.js 9.4.1 Gatsby 2.22.3 いずれも活発に開発が行われており、バージョンが進むとあてはまらなくなる記述も出てくるものと思います。「そもそもスタティックサイトジェネレーターって何？」「 Jamstack って何？」という方には、別ブログですが次の記事がご参考になると思います

anakuma_guuma 2021/04/24

frontend

リンク

Micro Frontends Architecture Patterns

本書は、Micro Frontends Architecture Patternsというタイトルを付けていますが、モノリスからJAMstack、Micro Frontendsまで、Webフロントエンドを包括した様々なアーキテクチャパターンの詳細を体系的に紹介しています。ソフトウェアとしてのアーキテクチャ全体を俯瞰し、他のシステムとのやりとりを設計するような考え方が役に立つことは多いです。フロントエンド観点で、様々なアーキテクチャパターンをまとめることで、Web開発の助けになればと考えています。また、アーキテクチャの歴史と変遷を知ることで﹁Micro Frontends﹂への理解を深めることができると筆者は考えました。Micro FrontendsはThoughtWorksのTechno logy RadarではすでにADOPTとなり、海外で多くの事例が存在します。Micro Fronte

anakuma_guuma 2020/12/22

リンク

React初心者がReactを学ぶために使用したサイトや書籍

Reactを学習する時に実際に使ったサイトや書籍を紹介します。私が使用した順ではなく、一通り実践した結果、この順番だと基礎から学べるかなと思った順番に紹介してます。 Reactを学習する時に実際に使ったサイトや書籍を紹介します。私が使用した順ではなく、一通り実践した結果、この順番だと基礎から学べるかなと思った順番に紹介してます。ちなみに学び始める前の私のスキルは下記の通りです。 JavaScriptの基本的な理解はあるjQueryは仕事で使えるレベルReactは全く使ったことがない注意 Reactは変化が早く、ここ数年で書き方の主流も大きく変わっており、Reactコンポーネントの主流はクラスコンポーネントから関数コンポーネントに移り変わってきているようです。（私もまだちゃんと理解はしてない。。）ここで取り上げた教材や書籍も、情報や書き方が今では古くなっていたりするものもあります。そち

anakuma_guuma 2020/12/11

リンク

フロントエンドに関わる人のスキルとして触れておきたい・知っておきたいこと

CSS SASS、SCSS、Stylusのいずれかを利用できる変数を使用した効率化について理解がある、準じたコードを書ける CSS設計についてが何のためにあるか理解している各設計のメリットについて説明できる詳細度について理解している IDを含む場合の優先度順 !importantが付与される場合の優先度順 media queryの扱い方について理解している stylelintなどの静的解析ツールを使用できる Grid, Flexboxを使用したレイアウト調整ができる inline-blockやfloatを使用した横並び以外の手段が使える CSS変数について知っている CSSフレームワークについて紹介できる

anakuma_guuma 2020/12/11

リンク

これぞプロの実装テクニック！フロントエンドのデベロッパーはCSSで実装する時に何を考えるか

ページのレイアウトやUIコンポーネントを実装する時に、フロントエンドのデベロッパーはいろいろなことを考えます。スクリーンのサイズが小さい時はどうなるのか、デザインでは中央配置に見えるけど実装はどうすべきか、要素が少ない場合や多い場合があるのか、max-やmin-を定義した方がよいのか、、、フロントエンドのデベロッパーはCSSでレイアウトを実装する時に何を考えるか、その思考プロセスを言語化した解説記事を紹介します。下記は、頭の中のメガネで見える実装のイメージです。 Thinking Like a Front-end Developer by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにデザインのディテールは脇に置いておく配下ページのレイアウトを実装する時に考えることディテールを掘り

anakuma_guuma 2020/12/08

リンク

プロダクト間共通の React コンポーネントライブラリを運用する話 - SmartHR Tech Blog

こんにちは、フロントエンドエンジニアの @nabeliwo です。弊社には SmartHR というプロダクトの他に SmartHR の従業員 DBを利用して開発・提供される SmartHR Plus アプリ (以下、 Plus アプリ)というものがあります。 SmartHR CTOが語る中長期戦略。徹底的なアプリ開発とAPI対応で﹁プラットフォーム化﹂促進へ - SmartHR ガイド既に多くの Plus アプリがリリースされており、そのほとんどのプロダクトのフロントエンドは React x Redux という技術スタックで構成されています。オンライン雇用契約カスタム社員名簿ラクラク人事レポート etc Plus アプリは毎回新規でプロジェクトを立ち上げて開発していくことになります。とはいえブランディングの観点から見ると、基本的なトンマナや UIパーツは SmartHR

anakuma_guuma 2020/11/13

リンク

はてなブックマーク

タグ

関連タグで絞り込む (4)

frontendに関するanakuma_guumaのブックマーク (22)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス