ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載8回目となる本記事では「フロントエンドエンジニアの移り変わり」をテーマとしてアンケート結果を紹介します。 あなたが最近使っているJavaScriptライブラリ/フレームワークはどれ？（2022年版） 国内で最近人気のあるJavaScriptライブラリ/フレームワークはどれでしょうか。 5,168票の回答があり「React」が46.67%、「Vue」が23.9%、「Angular」が4.3%、「jQuery」が25.1%でした。 3年前の2019年にアンケートをしたとき（参照記事）は「React」が23%、「Vue」が37%、「Angular」が7%、「jQuery」が33%でした。
BASE株式会社 ServiceDev Payment Group 所属の田仲です。 現在はエンジニアリングマネージャーを担当していますが、以前はサーバーサイドエンジニアとして開発をしていました。その頃の経験を紹介したいと思います。 BASEのエンジニアはPM・ディレクターから要件を聞き、設計を行います。 仕様や設計を元にサーバーサイドエンジニアはサーバーサイドの実装し、フロントエンドに関してはフロントエンドエンジニアが実装しています。 少し前のプロジェクトになるのですが、「送り状データダウンロードApp」の開発プロジェクトを担当した際にサーバーサイドだけではなくフロントエンドの開発にも携わることになりました。 普段、サーバーサイドエンジニアとして開発を行っているエンジニアがフロントエンドの開発も行うことで良い経験になったという話を紹介したいと思います。 送り状データダウンロードAppにつ
新型コロナダッシュボード爆速リリースの舞台裏 〜小さく始めて大胆に変えるフロントエンドプロジェクト〜 - JX通信社エンジニアブログ
JX通信社CDOの小笠原(@yamitzky)です。 JX通信社は「今起きていることを明らかにする報道機関」というミッションの元に、新型コロナリアルタイムダッシュボードを 2月16日 から提供し続けています。今回は、「新型コロナプロジェクト」の発足から現在に至るまでの、プロジェクトの進化についてご紹介します。 プロジェクト発足 そもそものプロジェクトの発足としては、2月14日の下記のツイートが発端でした。およそ 2 日でリリースしたことになります。 日本の感染者増えているので、もうそろそろ中国がやってる地域別まとめページ作っても良いのでは？https://t.co/6gSg3s16Nw pic.twitter.com/TyNeP44NbO— けろっと (@kerotto) 2020年2月14日 当時は、東京都のような自治体公式の特設サイトや、国内全体の動向をまとめたサイトはほぼありませんで
流行りのフロントエンド技術よりもサイト構築や SEO の基礎知識のほうが重要だ みたいな主張があり、 WordPress のカスタマイズをしている人たちがこれを言いがちであり、実際間違ってないと思います。 では我々(我々とは誰か？)がそれに対していえることが何かというと、 PHP と jQuery で頑張って WordPress をカスタマイズするよりも JSON API と nuxt.js/next.js でサイトを組んだほうが簡単だということです。 WordPress のカスタマイズをやってきた人たちは長年のノウハウを積み上げており、それを活用してバリューを出しているわけですが、 nuxt.js でやっていっている人たちが熟達したとき、すべてが破壊されます。 じゃあ実際僕が nuxt.js でかっこいいサイト作る仕事して WordPress の人たちの仕事を奪っていくぞ！！！という気持
大規模toB SaaS「HRMOS」のフロントエンド開発にDesign Systemを導入した理由
HRMOSでは複数存在するモジュールの体験を統一するために「Design System(デザインシステム)」の開発を行ってます。 そこで本日は HRMOSにおけるDesign System メリットだけではない、Design Systemのデメリット を中心に紹介をしたいと思います。 Design Systemとは？ 『Design System』という本の一節にこう書かれています。 デザインシステムとは、デジタルプロダクトの目的を達成するために首尾一貫したルールで編成された、お互いに関連づけられたパターンとその実践方法です。パターンは繰り返される要素で、これらを組み合わせてインターフェースを作成します。 — Design Systems - アラ・コルマトヴァ HRMOSにおいてのDesign Systemとは、いわゆるUI Kitのようにデザインパターンが羅列されているだけでなく、いつ
プロトタイピング向けにペライチで最低限のフロントエンドスタックを動かす方法について。 注意: 本番で使わないでください。tailwind は CDN モードで動かしているし、 esm.sh はスクリプトを動的にビルドするのでパフォーマンスは良くないです。 前提 jsconf.jp で色々なツールを使えばそれっぽいバンドルレス実現できる(けどパフォーマンスに難)という話を書きました。 具体的には NativeESM + importmaps + esm.sh 等の組み合わせます。 <script type="importmap"> - HTML: ハイパーテキストマークアップ言語 | MDN ESM>CDN これに、 esm.sh の v135 の新機能を使って tsx をバンドルするのを組み合わせる話です。 esm.sh/run 使い方は簡単。 <!-- esm.sh からランナーをロード
最速でフロントエンドを刷新するための開発フロー - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロリアでQAエンジニアをやっている中園です。 現在サイボウズでは kintone のフロントエンドリアーキテクチャプロジェクト（フロリア）と称して、Closure Tools から React へと置き換えるプロジェクトが進行中です。 フロリアの詳細については 次の記事をご覧ください。 今回は、フロリアのチームの一つで、利用者に気づかれない形で React への置き換えを行っている Mira チーム1の開発・テストフローの紹介をします。 "最速で" React に置き換えたい Mira チームはただ React に置き換えるのではなく「最速で React に置き換える」という目標があります。 フロリアの各チームはそれぞれのチームごとにオーナーシップを持っており、チームごとに意思決定を行っています。Mira チームでは「最速で置き換える」という目標に向かって、開発スピードを向上
フロントエンドの Monorepo をやめてリポジトリ分割したワケ / Why did we stop using Monorepo on the frontend and split the repository?
2024/06/25： モノレポは、令和のソフトウェア開発における銀の弾丸か？ https://hack-at-delta.connpass.com/event/319792/ フロントエンドの Monorepo をやめてリポジトリ分割したワケ 坂井 学 ソフトウェアエンジニア
この記事は、ドワンゴもスポンサードしていた JSConf JP 2021 にて、「Web フロントエンドのリプレースを支えるテストの考え方」というタイトルで berlysia がトークした内容をもとに再構成したものです。トークのアーカイブもご覧いただけます。 この記事は ドワンゴ Advent Calendar 2021 の3日目の記事です。 speakerdeck.com 宣伝 『ドワンゴ EdTech Talk』と題した事業説明イベントを 12/8(水) に開催します。 ドワンゴの教育事業で提供するオンライン学習サービス「N予備校」のライブ配信の授業を体験いただきながら、教育事業での取り組みを知っていただくためのイベントです。 最後までご参加いただくと N 予備校の有料会員相当の教材を 3 か月間無料で利用できる ように用意をしております。 Web 開発を学ぶ教材として好評をいただいて
kintoneのフロントエンド刷新に向けた取り組み - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。kintone開発チーム Webエンジニアの村田です。 本記事では kintone のフロントエンドの刷新をはじめるに至った経緯と、その取り組みについて紹介します。 はじめに なぜフロントエンドを刷新するのか 小さくはじめる Proof of Concept リリース戦略を考える 移行前と移行後の技術スタック 既存資産の再利用 Closure Library製の複雑なコンポーネントを再利用する E2Eテストを再利用する スタイルを再利用しない 開発体制 フロントエンドエキスパートチームの支援 アクセシビリティチームの支援 生産性向上チームの支援 これからの活動 おわりに はじめに 現在 kintone 開発チームでは、フロントエンドの開発に使用している Closure Tools (Closure Compiler、Closure Library、Closure Templat
Renovateを使ってフロントエンドのバージョンアップを改善した話 | PR TIMES 開発者ブログ
こんにちは、フロントエンドエンジニアの小張です。Renovateを使ってフロントエンドのパッケージやライブラリのバージョンアップを改善したことについて紹介します。 PR TIMESではReactに関するコードを、monorepoとしてprtimes-frontendという1つのリポジトリで管理しています。 このリポジトリは作成されてから2年ほどしか経っておらず、使っているライブラリも比較的新しいため、今までバージョンアップの仕組みを特に整備していませんでした。 ただフロントエンドのライブラリはバージョンアップの頻度が多く、異なるライブラリ間でバージョンの依存関係があることもあり、将来のことを考えればライブラリのバージョンを更新する仕組みを作ることはほぼ必須でした。 また、monorepoであるためライブラリのバージョンを大きくあげようとした際の対応コストも大きく、最新との差が小さいうちに細
これは未実装のアイデアを含む記事です。(後述する lint rule が未実装です) 要は EffectSystem を作ろうとしました。 https://www.eff-lang.org/ void に意味を込めたい こういうフロントエンドのコードについて考えてみましょう。 function mount(): void { const div = document.createElement('div'); div.textContent = "hello"; document.body.append(div); } function print(): void { console.log("hello"); } function maybeError(): void { // 低確率で例外が起こる関数 if (Math.random() > 0.999) { throw new Err
JavaScript初学者が現場で活躍するフロントエンドエンジニアにレビューしていただいた内容【もりけん塾】 - Qiita
前置き 私が所属している「もりけん塾」で受けたコードレビューについてまとめていきます。 「もりけん塾」では、先生がマークアップエンジニアからフロントエンドエンジニアになるための課題を作成してくださっており、塾生はその課題を通してJavaScriptの基礎を学んでいきます。 本当に1段1段階段を登っていくように作られており、課題を終える頃にはある程度自走しながらコードが書けるようになります。 私もこの課題に挑戦し、先日課題を終えることができました。だいたい2~3ヶ月くらいかかったと思います。JavaScriptが全然わからない状態から、ここまで書けるようになるとは思っていなかったです。 JS課題はこちら 成果物 👈 README.mdに置いてます。 先を見越したコードを書く編 仕様が増えたときを想定する バリデーションを実装する課題でのレビューです。 名前のバリデーションでは、変数名を n
ICSはフロントエンドを専門とするウェブ制作会社ですが、オウンドメディアとして技術情報発信サイトを運用しています。このサイトは開設から8年目をむかえましたが、今年は「国内のウェブ水準を前進させる記事を。話題のテーマも、他のサイトでは読めないニッチな技術も」をテーマとしてやってきました。そんなICS MEDIAにとっての2021年を、あらゆる数値を使って多角的にレポートします。 今年はどの記事がもっとも読まれたのでしょうか？ 今年執筆した記事で上位10記事をピックアップしました。 1位 : スクロール演出の作り方 トレンドウェブサイトから学べ！ JavaScriptで作る本格スクロール演出 20,800 PV ウェブサイトを魅力的にするスクロール演出。スクロール演出を3種類にわけ、それぞれの実装方法を解説しています。ウェブサイトを「より良く魅せたい」というニーズが大きいのか、この記事が202
Chrome DevToolsのRenderingタブを活用しよう | フロントエンドBlog | ミツエーリンクス
Chrome DevToolsにはさまざまな機能が搭載されています。そのうちの1つ「Rendering」には、ページのレンダリングパフォーマンスを視覚化する機能や、さまざまな見え方を疑似的に再現する機能が含まれています。 サイトのレンダリングパフォーマンス改善の取り組みに活用できる、こちらのRenderingタブ内の各機能についてご紹介します。 利用方法と各機能について Renderingタブはデフォルトだと非表示になっており、利用するにはまず次のいずれかの方法で表示する必要があります。 Chrome DevToolsを開いた状態でWindowsではCtrl+Shift+P、MacではCommand+Shift+Pを押して表示されるコマンドメニューに「Rendering」と入力し、「Show Rendering」を選択 Chrome DevTools内の三点ドットから「More tools
フロントエンドの真実
起源 まだフロントエンドという言葉が生まれる前。 古代のプログラマー達はサーバーで一画面ずつ丁寧にHTMLを構築していた。 ところがあるとき一人のプログラマーがブラウザ上で動的にHTMLを書き換えることに成功する。 これに多くのプログラマーが続いた。 次第に勢力を増していった彼らはサーバーを離れ、自らをフロントエンドエンジニアと名乗り、サーバーに残ったもの達をバックエンドエンジニアと呼ぶようになった。 きっかけ 先日こんな投稿がとある掲示板（ここではXと呼ぶことにしよう）に寄せられた。 たしかに、Server Actionsを使って書くReactと、いにしえのPHPは非常によく似ている。 ふと10年近く前の出来事を思い出した。 それは次のような同僚との会話だった。 👨🏻💻「React触ってみました。」 👨🏻💼「え、どんな感じやった？」 👨🏻💻「なんかPHPに近い感じ
フロントエンドとオブジェクト指向
フロントエンドの実装にオブジェクト指向をどのように取り入れるかを考えます。 動機 近年のフロントエンドは、Reactなどのフレームワークを使ったコンポーネントベースの設計が主流だと思います。コンポーネントは、HTMLによるマークアップ、CSSによるスタイリング、JavaScriptによる振る舞いがひとまとめにされた、再利用可能な部品です。 コンポーネントの設計を考えていると、次のような疑問が生じます。 何を基準にコンポーネントで分割すればよいか。 コンポーネントの粒度はどれくらいが適切なのか。 どのタイミングで抽象化すれば開発コストが無駄にならないか。 分業した際にコンポーネントの分割や粒度の基準をどのように統一するべきか。 そこで、いろいろ調べたり試したりしたところ、フロントエンドの設計にオブジェクト指向を取り入れることが、これらの答えの一つになるのではないかと考えました。 この記事では
フロントエンド開発のためのセキュリティ入門 知らなかったでは済まされない脆弱性対策の必須知識 作者:平野 昌士翔泳社Amazon 書籍「フロントエンド開発のためのセキュリティ入門」を読みました。 どういう本か この本は、Webアプリケーションにおける脆弱性やその対策について、フロントエンドに焦点を当てて解説しています。 Webやセキュリティに関する知識のない人でも理解できるよう、HTTPやオリジン、ブラウザの同一オリジンポリシー、Cookie、DOMといった基本的な用語や概念についても説明されています。 また、ハンズオン形式なので、まずは手元で攻撃を成功させてから対策を入れた結果を確認できるので理解を深めれます。 初学者がわかりやすいように噛み砕いて身近な例で説明していたり、画像や図もあり、とても分かりやすかったです。あと、文章が読みやすくてスラスラ読めました。 ハンズオンはNode.js
再利用可能なUI部品を組み合わせて画面を構築していくのは、多くのGUIアプリケーションにとって効率の良い開発手法です。ブラウザ向けにも多くのライブラリが再利用性を担保するための工夫を重ねてきましたが、実はブラウザ自身が再利用可能なUI部品を作成するための機能を備えていることはご存知でしょうか。本記事では、Web Componentsという名称で総称されるブラウザの機能について解説します。 対象読者 AngularやReactなどのフレームワークに頼らずに再利用可能なHTMLやCSSを整備したいマークアップエンジニア AngularやReactなどのフレームワークとWeb Componentsを併用する利点を学びたいJavaScriptエンジニア 前提環境 筆者の検証環境は以下の通りです。 macOS Monterey 12.3.1 Google Chrome 100.0.4896.127
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
nextjsとは nextjsはjavascript, Reactを用いて静的及びサーバーサイドレンダリングアプリケーションを構築するための軽量なフレームワークです． Reactでフレームワークを用いずにSPAを開発する場合，ルーティングの処理やSSR，リソースの管理など様々な要件により，アプリケーションはどんどん複雑になっていきます． nextjsではアプリケーションを開発する際の問題点を解決するような特徴をもっているため，快適にアプリケーションを開発することができます． 大まかなnextjsの処理の流れ nextjsではnext devという，各ファイルをwatchし，編集された場合hot loadしてブラウザに反映するようなコマンドが用意されています．よくあるやつです． devコマンドではサーバー側のupから一連の流れを追えると思うので追っていきましょう． devコマンド devコマ
JSConf JP 2022 https://jsconf.jp/2022/talk/pack-front-end-practices-into-the-design-system-and-redistribute Twitter https://twitter.com/__sakito__
はじめに こんにちは、フロントエンドエンジニアのねだです。 いきなりですが、タイトルの通りです。 弊社は元々フロントエンド環境に主にAngularを利用しており、Reactでの採用の募集も行っていましたが、当面Angularに一本化する方針に転換しました。 この事はもちろん他のライブラリについて否定的な意図があることを意味するわけではありません。現状のGitHub Star数などを確認しても、より新しいフロントエンドでの設計や開発について知るためにはReactを追い続ける必要がある現状がありますし、いわゆる通常のWEBサイトをカジュアルにSPA化する場合にはVueが入りやすいです。ですが、それを理解した上での判断になります。 JavaScript ライジングスター 2021 Angularのメリット Angularはもともと、2009年にAngularJSとしてスタートし、その後、後方互換
はじめに おはようございます、加藤です。今回はフロントエンドエンジニア向けに静的なWebサイトをホスティングなどが出来るサービスであるAWS Amplify Consoleの使い方や出来る事を紹介します。 古の時代、ただの静的なコンテンツを表示する為だけだとしてもサーバーを建ててApache or nginxをインストールして...という事をやっていました。フロントエンドエンジニア or デザイナーが作成し、インフラエンジニアに依頼する必要がありました。古の時代といった通り現代では、NetlifyやFirebase hosting、そして本ブログで紹介するAmplify Consoleを使えば自分自身で簡単に簡単にリリースを行うことができます。より多くのエンジニアにそういった体験をして貰えれば良いなと思いこのブログを書きます。 AWS Amplifyとは AWS Amplify（以降、Am
はじめに hey のネットショップ開設サービス「STORES」 の開発フロントエンド組織で EMをしています、 daitasu と申します。 2022年の上半期、私たちのフロントエンドチームで「除雪部」という技術負債解消ワーキンググループ(以下、WGとします)を立ち上げました。 この記事では、「除雪部」とは何なのか、なぜ設立したのか、何をしているのか、半年間の振り返りをご紹介します。 「除雪部」とは 除雪部は、フロントエンド内で、通常のプロジェクト(以下、PJTとします) と並行して、有志数名で集まり、技術負債の解消をハンドリングするWGです。 フロントエンド関連で負債に感じている課題を集約し、優先度付け、必要な各所への連携やタスクの分解をして、「負債を各メンバーが対応可能な状態まで落とし込むこと」、「負債の解消を一歩でも前に進めること」を役割として動いています。 なぜ設立したのか STO
なぜ ES2022 で文字列リテラルを使った import/export ができるようになるのか | サイボウズ フロントエンドエキスパートチーム
11 月 11 日に、以前から一部で注目されていたある Pull Request が tc39/ecma262 にマージされました。 この Pull Request がマージされたことで、識別子ではなく文字列リテラルを使った import/export が可能になりました。 この仕様変更はプロポーザルという形で扱われてはいませんが、構文上の影響があるので、JavaScript ユーザーとして知っておくに越したことはないものになります。 概要 まず具体例を示します。 今回の変更によって、次のように import/export する際の名前として文字列リテラルを使えるようになります。 基本的にはこれだけです。 詳解 ここからは仕様上の用語を使って解説をします。 この変更が入る前の ECMAScript では ImportSpecifier で as を使う場合 as の左側は Identifi
主要ブラウザで使える！CSS Cascade Layers で新しいCSS設計の手法を考える | サイボウズ フロントエンドエキスパートチーム
Chrome99に新機能として CSS Cascade Layers が実装され、Firefox、Edge、Safari といった主要ブラウザで CSS Cascade Layers が使えるようになりました。 CSS Cascade Layers とは CSS の仕様において、要素にどのスタイルを適用するかはざっくりと次のような優先順位で決定されていました。(カスケード順を省いて簡略的に記述しています) !important インラインスタイル セレクターの詳細度 同じ詳細度であれば最後に宣言されたもの ここに CSS Cascade Layers が導入されると次のように変わります。 !important インラインスタイル Cascade Layers セレクターの詳細度 同じ詳細度であれば最後に宣言されたもの 従来の CSS が抱える複雑な詳細度の管理 どのスタイルを適用するか判断
ミツエーリンクスでは全社的にInterop 2022の重点分野について調査をしています。 今回はその中から「新しいビューポートの単位」について紹介します。 ビューポートとは ビューポートはWebページを表示するための領域で、ブラウザウィンドウからアドレスバーなどのUIを除いた部分になります。 ビューポートの単位とは ビューポートの単位は相対的な長さの単位で、ビューポートの長さに従って指定します。 ブラウザで表示したビューポートの長さが対象となるため、@pageで宣言した印刷用のスタイルでは無効になります。 なぜ新しいビューポートの単位が必要になったのか 従来のビューポートの単位はUIがスクロールによって拡大縮小するような機能を持つ前に作成されました。 そのため後発の動的にサイズが変わるUIに対応しておらず、画面をスクロールする前の初期表示時に決定されたビューポートサイズを維持し続けます。
なぜモダンフロントエンドを使いたいのか 宣言的な制御編｜食べログ フロントエンドエンジニアブログ
こんにちは。FEチームリーダーの辻です。 食べログには技術情報を発信する社内ブログがあります。エンジニアはもちろん企画やデザイナーなど技術者ではない職種の方とも、食べログを支える技術や今後食べログに取り入れたい技術について共有しています。 この記事はその社内ブログで投稿したものです。 エンジニアでなくても理解しやすいよう、わざと大雑把に説明している部分もありますが、ご容赦いただけると幸いです。 ----------------------- はじめに食べログでは、 モダンフロントエンド（React）へのリプレースプロジェクトが進行中です。 2014年頃以降、React,Angular,Vue.jsなどのフレームワークやライブラリが流行し、いまも続いています。これらフレームワークやライブラリとその周辺技術をモダンフロントエンドと呼んでいます。 この記事では、そもそもモダンフロントエンドとはな
Neovimでのフロントエンド開発環境 2021
最近はフロントエンドエンジニア(主にReact)をしているYano (@yuki_ycino) といいます。 この記事では自分が開発に使っているNeovim周りの環境と、その大まかな構成について書いていきます。 追記 後日、自分がNeovimでフロントエンド開発を行っている理由とVSCode という記事を書きました。 合わせて読んでいただけると幸いです。 はじめに 自分は現在フロントエンド開発のほぼ全てをNeovimで行っています。 個人的にはVSCodeと遜色なく(むしろ効率よく)開発できていると思うのですが、VSCodeではシンプルな設定で開発を始められるのに対し、Vimはどうしても設定のハードルが高いです。 具体的には現在5000行弱のVimの設定ファイルと100個前後のプラグインを導入して開発しています。 ただ、それを他の方に勧めるのは無茶なので、この記事ではほぼ最小構成に近いTy
フルスタック、VPoE、デザインエンジニア、フロントエンドの極み──4つのパターンで語る「フロントエンドキャリアの分岐点」 - TECH PLAY Magazine
TECH PLAYERが「なりたい姿」を叶えるために、背中を後押しするTECH PLAY Talkシリーズ。第一弾はフロントエンジニアとして紆余曲折を経てきた『フルスタックパターン』小林泰士さん、『VPoEパターン』あほむさん、『デザイナーパターン』ymrlさん、『フロントエンドの極みパターン』mizchiさん、4人の現役＆元フロントエンドエンジニアの「キャリアの分岐点」を紹介する キャリアの分岐点#1『フロントエンド→フルスタックパターン』小林 泰士さん 株式会社NEW SHIP CEO 小林泰士さん フリーランスのコーダーからキャリアをスタート トップバッターで登壇したのは、NEW SHIP CEO 小林泰士さん。業務委託でROXX、シェアダイン、APERITEが運営するワインのサブスクサービス「ポケットソムリエ」などの開発に携わっている。 大学時代は広報やライターといった活動と平行し
フロントエンドの世界も随分と様変わりしました。便利なツールが多数導入され、高度なフレームワークが整備され、言語には静的型検査が付き、より本格的なアプリケーションの制作に集中できるようになりました。 しかしそれらの環境は業務には適していても、必ずしも個人開発に適しているとは言えません。過剰な抽象化がほどこされ、混乱を招くこともあります。 そんな中で、最近話題のフレームワークとしてSvelteというものがあります。Svelteはシンプルかつ十分な機能を提供します。 対象とする読者 この記事は以下の読者を対象としています： HTML/CSSはある程度わかるJavaScriptはちょっと書いたことがあるReact/Vue/Angularは自分には難しすぎたでもフロントエンドで遊んでみたい フロントエンドの参入障壁 フロントエンドと言えば、かつてはちょっと頑張れば誰にでもできるような平和な分野でした
Next.jsにSentryを導入した際の課題と解決策について｜食べログ フロントエンドエンジニアブログ
はじめまして、2021年11月に食べログFE(フロントエンド)チームにジョインした遠藤です。 Next.jsを採用した新規プロジェクトに参画し、Sentryの導入を行いました。本記事ではSentryを導入した際の課題と解決策について記載していきます。 1. はじめに「Sentryとは何か？」、「食べログでSentryを選定した理由」などにご興味がある方はまず下記の記事を読んでみてください。 Sentryは便利ですが以前はアプリケーションに導入するにはいくつかのファイルを作成して、エラーやパフォーマンスをトラッキングするのに様々な設定を行う必要がありました。 そこでSentryが簡単にセットアップができるように@sentry/nextjsでwizardを提供してくれています。 wizardはコマンドを実行するだけでSentryに必要なファイルを自動で生成し、設定までしてくれる便利な代物です。
こんにちは、Classiに入社して1年になるGoogle Developers Expert for Angularのlacolacoです。 今日はClassiに新しく フロントエンドエキスパートチーム を作った話を紹介します。 フロントエンドエキスパートチームとは？ 日本のフロントエンド界隈（？）の方なら、フロントエンドエキスパートチームと聞いて真っ先に思い浮かぶのはサイボウズさんのチームだと思います。 Classiで新たに立ち上げたチームは、名前も含めてサイボウズさんのフロントエンドエキスパートチームをかなり強くインスパイアしています。 そのメンバーであり友人でもあるsakito君にはチームの設計にあたって相談に乗ってもらい、名前をそのまま真似ることも快諾してくれました。この場を借りて改めて感謝です！ speakerdeck.com メンバー構成 2021年1月現在、lacolaco
かなり昔に Elasticsearch ベースの検索システム（Heineken）を作っていた。 Elasticsearch で部内 Wiki 検索高速化 - Speaker Deck 特に更新せず数年動かしていたのだけど、サーバーの置き換えに伴って Kubernetes に置きたいよねという話になり、ついでに Elasticsearch も新しくしたいよね、となった結果、現状のフロントエンドだと最新の Elasticsearch では動かないということがわかった。 nonylene.hatenablog.jp フロントエンドの改修が必要なわけだが、ここでフロントエンドの構成を見ると… FlowType create-react-app PureComponent Bootstrap 3 古すぎる！絶対アップデート難しいし触りたくない技術しかない。 フロントまわりの構成を変えたいとずっと思っ
こんにちは！LayerXバクラク事業部エンジニアの加藤 (@tatane616) です。 本記事では、私の所属するバクラク申請・経費精算チームで主に展開しているフロントエンド開発Tipsについて紹介します。 ※本記事は LayerX Tech Advent Calendar 2022 4日目の記事となります。 背景 バクラク申請・経費精算チームでは、以前「半年で3倍以上にスケールしたプロダクトチームを支える文化｜tatane｜note」で紹介させていただいたように、2022年12月時点で5名のエンジニアがいます。 LayerX では厳密に専門性で業務を縛ることは少ないです。プロダクトチームのエンジニアであれば、フロントエンドもバックエンドも（今後はおそらくアプリも）書きます。 その中には今までバックエンドやモバイルアプリを専門にやってきた方もいますが、上記引用の通り、LayerXの開発では
2023年11月24日紙版発売 株式会社ICS 池田泰延，西原翼，松本ゆき 著 A5判／344ページ 定価2,860円（本体2,600円＋税10%） ISBN 978-4-297-13871-4 Gihyo Direct Amazon 楽天ブックス honto ヨドバシ.com 電子版 Amazon Kindle この本の概要 フロントエンド開発の範囲は広く，習得すべき技術は多種多様です。 HTML・CSS・JavaScriptはフロントエンドエンジニアにとって共通言語ではあるものの，Webサイトを制作するのか，Webアプリケーションを開発するのか，その違いによって採用すべき技術は全く異なります。それは，Webの多様性に対して技術的な正解がひとつではないことを示しています。 本書はフロントエンドの技術を俯瞰し，「エンジニアが共通して知っておくべき技術はなにか」，「（多種多様なエンジニアにと
Neovimでのフロントエンド開発環境 2022
投稿が予定より大幅に遅れてしまい申し訳ありません。 忙しかったのと記事のボリュームが想定より大きくなってしまい執筆に時間がかかってしまいました。 はじめに フロントエンドエンジニア(主にReact)をしているYano (@yuki_ycino) といいます。 去年のAdvent Calendarでは Neovimでのフロントエンド開発環境 2021 という記事を書きました。 この1年でかなり情勢が変わったので現在の状況について解説する記事となります。 去年に引き続きこの記事では主にLSPによる開発サポート及び現代の開発における必須プラグインの紹介をメインに進めています。 具体的には coc.nvim とNeovim built-inのLSP実装であるnvim-lspでの設定の2つについて解説と具体的な設定の紹介をしようと思います。 自分はcoc.nvimを普段使っており、nvim-lspを
Mirrativ のWebフロントエンドで使っているライブラリを紹介する！ - Mirrativ Tech Blog
こんにちは、フロントエンドエンジニア 兼 バックエンドエンジニアの駒木です。 iOS / Android / バックエンドのライブラリ紹介に引き続き、MirrativのWebフロントエンドで使用しているライブラリをご紹介します！ JSフレームワーク: React with TypeScript / Vue.js 8割以上のアプリケーションはReact + TypeScriptで実装されていますが、数年前に立ち上げた一部のイベントページはVue.js + Vanilla JSで実装されています。 ビルド・バンドルツール: Vite / Parcel / webpack 2021年5月くらいからViteを利用し始め、以後立ち上げたプロジェクトはViteベースとなっています。 Vite 8割、Parcel + webpackが2割といったところでしょうか。 webpack → Parcel →
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドのトレンドは変化したか？ アンケート結果から分析する2022年のウェブ制作 - ICS MEDIA
サーバーサイドエンジニアがフロントエンドの開発に参加してみた話 - BASEプロダクトチームブログ
流行りのフロントエンド技術よりもサイト構築や SEO の基礎知識のほうが重要だ - Diary
インストール不要。ペライチHTMLでReact+TSX+Tailwind のフロントエンド一式を動かす
Web フロントエンドのレガシーコードを置き換えるためのテストの考え方 - ドワンゴ教育サービス開発者ブログ
フロントエンドの main() を合成関数として副作用を集約する
これがフロントエンドで話題になった記事！ ICS MEDIAの2021年 - ICS MEDIA
「フロントエンド開発のためのセキュリティ入門」を読んだ - toshi-toma blog
進化し続けるフロントエンド技術「Web Components」はライブラリ不要！――気軽に始めて開発の生産性を高めよう
フロントエンドウェブ開発者 - ウェブ開発を学ぶ | MDN
nextjsの大まかな流れをソースコードから読む - フロントエンジニアの
デザインシステムにフロントエンドのプラクティスを詰め込んで再配布する
フロントエンドをAngularに一本化した話 - EmotionTechテックブログ
フロントエンドエンジニアに捧げるAWS Amplify Console | DevelopersIO
フロントエンド技術負債解消WG「除雪部」を立ち上げた話 - STORES Product Blog
日産、「ノート」マイナーチェンジでフロントデザイン一新
新しいビューポートの単位（sv*、lv*、dv*） | フロントエンドBlog | ミツエーリンクス
Svelteで始める頑張らないフロントエンド生活 前編
Classiにフロントエンドエキスパートチームを作った話 - Classi開発者ブログ
検索システムのフロントを SSR・Remix で作り直した - Unyablog.
チーム全員がフルスタックになるためのフロントエンド開発Tips - LayerX エンジニアブログ
フロントエンドの知識地図—— 一冊でHTML/CSS/JavaScriptの開発技術が学べる本