Webフロントエンド入門
まずはじめに HTML、CSS、JSを学んだ後にモダンなweb制作を行う上でこれから何を学べばいいだろうと手探り状態だった過去があるので、今同じ悩みを抱えている方に向けてこの記事を書こうと思いました。また、自分自身が2023年に多くのことを学んだのでそれの整理になればという思いもあります。 あと、いいね、コメントいただけると記事作成の励みになります😇 この記事の対象者 HTML, CSS, JSはある程度理解した モダンなWeb制作を行いたい これから学ぶべき技術 React, Next.js 一度は聞いたことある人も多いと思います。これは、Webサイトを効率的に開発することを目的に作られたJSのフレームワーク(正確にいうとReactはライブラリ)です。 ReactはFacebook社が開発したもので、それをVercel社がより使いやすくしたものがNext.jsです。 作成するものによっ
Web フロントエンドの推しディレクトリ構成と Next.js App Router なコードベース | Offers Tech Blog
Offers を運営している株式会社 overflow の あほむ でございます。暖冬と言われつつもすっかり寒い季節ですね。おかげさまで割と走っているほうの師です。（師走） n 年ぶり n 回目の Web フロントエンド 最後にメイン開発者の立場でコードをスクラッチしたのいつだったっけ？と遡ると 2018年ごろのブログ記事 がでてきました💀 実際には 2017 年から 2018 年にかけての作品ですかね。当時の構想から読み取れる重厚かつ自己表現の感に内心苦笑いしつつ久々の新規建立です。 今回はディレクトリ構造の面から紹介していきます。 推しディレクトリの先達たち 推しディレクトリという言葉に乗っかってみたものの、ゴメンそこまでの熱感は持っていないかもしれない🥺 とはいえ先達の記事もご紹介しておきます。 今回の前提 本稿において、これらの前提に依存した論はほとんど含まれない認識ですが一応
■イベント コンポーネント設計のすゝめ 〜ベストプラクティスを学ぶLunch LT〜 https://findy.connpass.com/event/296449/ ■登壇概要 タイトル：続・変更に強いコンポーネント設計の方針と規約（Webフロントエンド） 登壇者：技術本部 データ戦略部 木田 悠一郎 ■データ戦略部 エンジニア 採用情報 https://media.sansan-engineering.com/data-strategy
Web フロントエンドのテストと持続可能な方針の組み立てを考える | Offers Tech Blog
Offers を運営している株式会社 overflow の あほむ でございます。 今回はプロジェクトで Web フロントエンド領域のテストを書くにあたって方針を決めた際の ADR をブログ向けに再整理したものをお届けします。 テストコードを書くべきか書かざるべきか 逃げ切りが確約された作り捨ての納品プロジェクトでもなければ、継続的なメンテナンスを前提にテストコードは書くべきが現代のソフトウェアエンジニアにおける共通了解でしょう。 急がば廻れ、ほとんどの場合においてテストコードを書くメリットがデメリットを上回るものと捉えられています。ここでは書かなくても良いケースをあえて論じることをしませんが、個別具体でテストが不要と断定できるときはそうすればよいでしょう。 テストを整える工数をどう捉える TDD (Test Driven Development テスト駆動開発) に代表される、テストコー
メルカリ ハロ Webフロントエンドの開発スピードと品質両立の取り組み | メルカリエンジニアリング
こんにちは。メルカリのSoftware Engineerの@tanashoです。連載：Mercari Hallo, world! -メルカリ ハロ 開発の裏側-の6回目を担当させていただきます。 メルカリ ハロのWebアプリケーションは複数存在し、Webフロントエンドチームが横断的に開発をしています。本記事では、その前提を踏まえ、スピードと品質をどのように両立させて開発しているかを紹介します。 プロジェクトの概要とWebフロントエンドの担当領域 メルカリ ハロは「あたらしい出会いを繋ぎ、信頼と機会をひろげる」がミッションで、いますぐ働き手が欲しいパートナー (事業者) と、いますぐ働きたいクルー(働き手)を繋げるサービスです。クルーは自身のスキルや時間を活用して働くことができます。 メルカリ ハロは複数のアプリケーションが存在し、そのなかでWebフロントエンドが関わる領域として以下の3つが
この本の概要 E2Eテスト（End-to-End Testing）とは，システムの端から端（End-to-End）まで，全体を通して行うソフトウェアテストを指します。本書ではE2Eテストを「ユーザーの視点でWebシステムの動作を確認する自動テスト」として定義し，E2Eテストをこれからプロジェクトに導入しようとしている人，すでに導入しているがパフォーマンスや保守性で課題を感じている人を対象に，E2Eテストのフレームワークとして近年人気が急上昇しているPlaywrightをツールとして，その目的からモダンなノウハウまで，E2Eテスト初心者の方にもわかりやすくハンズオンを交えながら解説します。CIへ組み込む方法やユニットテストとの棲み分けなど，E2Eテストを実際の開発現場に投入するうえでの知見も数多く紹介します。 こんな方におすすめ E2Eテストをこれからプロジェクトに導入しようとしている人 す
こんにちは。sumirenです。 イントロダクション 先日、Twitterで以下のポストが話題になっていました。 一部曖昧なところもありますが、推測と動作検証結果も交えて要約すると、以下のことを言っています。 VercelがホスティングしているWebサイトは、エッジでのサーバーサイド処理を行うことをやめた Next.jsに関して、VercelでPPR(Partial Prerendering)を利用した場合、サーバーサイド処理はNodeランタイムで行われる この記事では、このポストに絡めて、PPRとエッジに関する筆者なりの所感や解説を述べていきます。この記事の大部分はポエムですが、一部、技術的な事実についても述べるつもりです。そうした部分について誤りがあればご教示ください。 Vercelがエッジでのサーバーサイド処理を行うことをやめた件について エッジの効能 そもそもエッジに期待していたこ
Webフロントエンド版DX Criteria (v202402)/プロダクトのユーザー体験と変化に適応するチームのためのガイドライン
Webフロントエンド版DX Criteria (v202402)/プロダクトのユーザー体験と変化に適応するチームのためのガイドライン
日本CTO協会から、プロダクトのユーザー体験と変化に適応するチームのためのガイドライン『Webフロントエンド版DX Criteria』を4月24日に新公開
一般社団法人 日本CTO協会(本社：東京都渋谷区／代表理事：松岡剛志、以下：日本CTO協会)は、Webフロントエンド版DX Criteria（プロダクトのユーザー体験と変化に適応するチームのためのガイドライン）を2024年4月24日に公開しました。 Webフロントエンド版DX Criteria（プロダクトのユーザー体験と変化に適応するチームのためのガイドライン） https://dxcriteria.cto-a.org/frontend Webフロントエンドの技術環境は日々変化しており、プロダクトを構成する技術要素だけではなく、ユーザーの利用端末や通信環境、要求も変化し続けています。その変化の速さに企業や団体の組織変革やWebフロントエンドエンジニアのインプットが追いつかないという現状があります。 Webフロントエンドはビジネス、デザイン、システム等の意思を総合する架け橋としてビジネスを加
先日（2024年6月19日）、技術評論社さまから「［入門］Webフロントエンド E2E テスト ──PlaywrightによるWebアプリの自動テストから良いテストの書き方まで」をフューチャーの有志と共に出版いたしました。 本書はエンジニア選書と言われるシリーズの1つとなります。 既にご購入いただいた方、誠にありがとうございます。 購入を検討されている方、詳しくはこちらをご覧ください。 https://gihyo.jp/book/2024/978-4-297-14220-9 書籍の概要E2Eテストをこれから導入しようとしている方を主な対象とし、必要なノウハウを詰め込んだ書籍となっています。本書では、E2Eテストを学ぶ際の実装手段（ツール）として、近年人気が急上昇しているPlaywrightを中心に据えました。 章の構成は次のようになっています。 第1章 Playwrightハンズオン第2章
急速に進化する「フロントエンド領域」に、エンジニアはどう対応すべきか？『Webフロントエンド版DX Criteria』100項目で目指すもの - Tech Team Journal
急速に進化する「フロントエンド領域」に、エンジニアはどう対応すべきか？『Webフロントエンド版DX Criteria』100項目で目指すもの 2024年4月24日、一般社団法人 日本CTO協会（以下、日本CTO協会）は「Webフロントエンド版 DX Criteria」を策定した。本ガイドラインは、日本CTO協会が監修・編纂する「DX Criteria」のWebフロントエンド領域特化版だ。近年、Webフロントエンドの技術環境は日々変化しており、組織としての変革やエンジニア個人の技術のキャッチアップなどの対応が困難になりつつあるのが現状だ。そのような中、フロントエンド領域では組織としてどのように課題を棚卸し、組織ひいては企業としてのケイパビリティを高めていくべきだろうか。本ガイドラインを策定した同協会DX Criteria策定ワーキンググループの佐藤歩氏と古川陽介氏に聞いた。 佐藤歩氏（画像左
「テクノロジーによる自己変革を、日本社会のあたりまえに」というミッションを掲げ、世界最高水準の技術者育成を図ることにより、日本経済の発展に資することを目的としています。
Webフロントエンドの社内祭 - Cybozu Frontend Day 2024 Summer を実施しました - Cybozu Inside Out | サイボウズエンジニアのブログ
この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend Stage) DAY 15 の記事です。 こんにちは、フロントエンドエキスパートチームの @mugi_uno です。 DAY 4 の記事で nus3 がすでに一部紹介していますが、2024年7月2日にサイボウズ社内で実施された開発・運用に関わるメンバーの交流イベント "開運夏まつり 2024" に併せて、サイボウズでのWebフロントエンドの祭 "Cybozu Frontend Day 2024 Summer" を実施しました。 その中で、フロントエンドクイズ大会やライブコーディングバトルといった変わり種コンテンツも行われ、大変盛り上がりました。 今回は、Cybozu Frontend Day とは一体何なのかと、具体的にどのような企画が行われたかをご紹介します。 Cybozu Frontend Day っ
【イベントレポート】「ZOZO Tech Meetup - Webフロントエンド」を開催しました！ - ZOZO TECH BLOG
はじめに こんにちは、DevRelブロックのikkouです。11月6日に「ZOZO Tech Meetup - Webフロントエンド」と題したWebフロントエンドに特化したオフラインイベントを開催しました。 zozotech-inc.connpass.com 目次 はじめに 目次 当日の登壇内容 アイスブレイク ZOZOTOWNにCSS in JS（Emotion）を導入して1年後の状況 React でコンポーネントを利用したテストをゴリゴリ書く ゼロから始めるアクセシビリティ啓蒙活動 現代のReactivityとSvelteの魔法 懇親会での取り組み 最後に 当日の登壇内容 ZOZOのWebフロントエンドエンジニア4名が以下の内容で登壇しました。 タイトル 登壇者 ZOZOTOWNにCSS in JS（Emotion）を導入して1年後の状況 菊地 宏之 (@hiro0218) React
これを書いてる人は職業エンジニアではなく、ただのしがない学生エンジニアです。なのでもしかしたら実際のお仕事とは違う部分があるかもしれませんが、そこはそういうものなんだな、とご理解いただければと思います。 この記事は CA Tech Lounge Advent Calendar 2023 20日目の記事です。 Webフロントエンドエンジニアってどんな人？ Webフロントエンドと言われるような領域を専門にするエンジニアのことをWebフロントエンドエンジニアとよく呼びます。しばしば単にフロントエンドエンジニアとも呼ばれます。[1](この記事の中でフロントエンドと言えばWebフロントエンドを指すことにします) Webフロントエンドエンジニアのイメージ画像 by GPT-4 Webフロントエンドエンジニアって何をしてるの？ WebフロントエンドエンジニアというぐらいですからWebのフロントエンド、つ
新米エンジニアの技術ブログです。主にWeb技術や数学で遊んでいます。日々楽しみながら学んでいくことを目標としています。
NTT Tech Conference 2024 での発表資料 フロントエンドを Vue.js から React にリプレイスしたお話 (前編)
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
続・変更に強いコンポーネント設計の方針と規約（Webフロントエンド）
［入門］Webフロントエンド E2E テスト ――PlaywrightによるWebアプリの自動テストから良いテストの書き方まで
VercelがPPRをNodeランタイムにした件からWebフロントエンドとエッジの動向に迫る
［入門］Webフロントエンド E2E テスト を出版しました | フューチャー技術ブログ
日本CTO協会から、プロダクトのユーザー体験と変化に適応するチームのためのガイドライン『Webフロントエンド版DX Criteria』を4月24日に新公開 ｜一般社団法人 日本CTO協会
Webフロントエンドエンジニアってどんな人？何をしてるの？年収は？彼女はいるの？調べてみました！
Connect-WebをMSWでモックする方法｜Webフロントエンド
Node-AI のリッチな WEB フロントエンドを支える技術