フロントエンドのライブラリ134個を一気にアップデートしてリリースした話

2025/01/09 15 users アップ VRT リリーススケジュール ユニットテスト 根幹

このアップデートは開発組織全体に影響を及ぼすため、QAスケジュールやリリーススケジュールをあらかじめ調整していました。 またアルダグラムではユニットテストやE2E、VRTなどを整備してはいるものの、フロントエンドの根幹となるライブラリをアップデートするため、全体的にQAした方が良いのでは？という考えに至り、... 続きを読む

フロントエンドからファイルをダウンロードさせるやり方について

2025/01/06 195 users API ファイル CSVダウンロード CSVデータ やり方

いまどきのWebアプリにおいては、ファイルのダウンロード機能が必要な場面が多々あります。例えば、バックエンドが生成したCSVデータをファイルとしてダウンロードさせる「CSVダウンロード」機能などです。 今回はAPI[1]から得られたデータをファイルとしてダウンロードさせたい場合のフロントエンドの実装方法について... 続きを読む

Cloud Build での Next.js のビルドを最適化する

2024/12/27 11 users ビルド Cloud Build Next.js GitHub

はじめに Zenn のプロジェクトでは、フロントエンドに Next.js を使っています。実行環境は Google Cloud の Cloud Run で、ビルドは Cloud Build で行っています。 以降、すべてステージング環境の話となります。 Cloud Build は、GitHub の 特定のブランチの push をトリガーとして、Next.jsのビルドを行い Dockerイメ... 続きを読む

フロントエンドでPythonを活用！PyScriptの魅力と使い方

2024/12/27 24 users 文法 ライブラリ 空飛ぶモンティ・パイソン コメディ番組 由来

はじめに 皆さん、はじめまして。Thinkings株式会社でプロダクトエンジニアとして働いている、まろんです！ 突然ですが、皆さんは「Python」をご存じでしょうか？ 「空飛ぶモンティ・パイソン」というコメディ番組が由来で、今や非常に人気のあるプログラミング言語です。 Pythonはそのシンプルな文法と豊富なライブラリ... 続きを読む

これがフロントエンドで話題になった記事！ ICS MEDIAの2024年 - ICS MEDIA

2024/12/27 67 users ICS MEDIA ICS 話題 オウンドメディア ウェブ水準

ICSはフロントエンドを専門とするウェブ制作会社ですが、オウンドメディアとして技術情報発信サイト「ICS MEDIA」を運用しています。このサイトは開設から10年目をむかえましたが、今年は「国内のウェブ水準を前進させる記事を。話題のテーマも、他のサイトでは読めないニッチな技術も」をテーマとしてやってきました。... 続きを読む

Vol.10 Bill Oneのフロントエンドを通じて学ぶモダンフロントエンド技術入門 - Sansan Tech Blog

2024/12/25 11 users Sansan Tech Blog

こんにちは。技術本部Bill One Engineering Unitの豊田（@helloyuki）です。Bill One 開発 Unit ブログリレー2024 Vol.10、Sansan Advent Calendar 25日目の記事です。実は1pxの微妙な画面上のズレが気になって仕方のないタイプです。 私自身はこれまでのキャリアでは、ほとんどバックエンドエンジニアとして過ごしてき... 続きを読む

React・Node.js・CloudflareWorkersでRustから作成したWASMを動かす - iimon TECH BLOG

2024/12/25 17 users rust WebAssembly wasm ＣＴＯ 名産品

こんにちは！iimonでCTOをしているもりごです。 本記事はiimon Advent Calendar 2024最終日の記事となります！ 今年はふるさと納税で沖縄に沢山寄付をしたので、沖縄の名産品を食べるのが毎日の楽しみとなっています。 今回、フロントエンド・サーバーサイド・エッジコンピューティングの3つの環境でWASM（WebAssembly）... 続きを読む

LAPRASのフロントエンド改善活動ふりかえり [2024年]

2024/12/24 5 users LAPRAS 負債 有志 インフラ エンジニア

LAPRASのエンジニア組織ではフロントエンド専任のエンジニアはいません。皆プロジェクト単位でバックエンドもフロントエンドも（ときにインフラも）触りながら開発しています。 ただそれだけだと個別領域の技術的負債の解消が進みにくいので、フロントエンドに関心のある有志のエンジニアがフロントエンド改善委員会とい... 続きを読む

NxのGeneratorを活用した管理画面200ページのリニューアル事例 - Findy Tech Blog

2024/12/23 7 users GENERATOR Findy adventar.org

ファインディ株式会社でフロントエンドの開発をしております千田(@_c0909)です。 この記事はFindy Advent Calendar 2024 24日目の記事です。 adventar.org 転職サービス『Findy』の管理画面リニューアルプロジェクトで、約200ページ規模の開発をしました。 管理画面の機能は構成が似通っているため、NxのGeneratorによる... 続きを読む

フロントエンドの技術的負債と向き合っている話 - 弁護士ドットコム株式会社 Creators’ blog

2024/12/22 14 users 負債 篠田 Creators’ blog クラウドサイン 普段

この記事は、弁護士ドットコム Advent Calendar 2024 の 23 日目の記事です。 はじめに こんにちは、クラウドサイン事業本部の篠田（@tttttt_621_s）です。普段はクラウドサインのフロントエンドの改善活動を行なっています。 「負債」という言葉で何をイメージしますでしょうか？ 経営的には「負債」はポジティブな意味... 続きを読む

フロントエンドの状態とリアクティブ (なぜuseEffect()でsetState()がアンチパターンか)

2024/12/22 16 users LayerX リアクティブ アドベントカレンダー 一筆 すべて

すべての状態をできるだけ減らしたいypresto (プレスト) です。 12月頭に予約してたアドベントカレンダーですが12/23になってしまいました。 LayerXのバクラク事業部では、Webフロントエンド領域もがんばっています！！ ということで一筆。 バクラク事業部のエンジニアは、バックエンド・フロントエンドの垣根なくプロダ... 続きを読む

フロントエンドエンジニアが未経験のバックエンドに挑戦して得た学び - ryu-fのブログ

2024/12/15 42 users adventar.org 古田 未経験 ファインディ キャリア

こんにちは、ファインディでFindy Team+の開発をしている古田(ryu-f)です。この記事はFindy Advent Calendar 2024 15日目の記事です。 adventar.org ファインディでは主にバックエンド領域の開発を担当していますが、エンジニアのキャリアのスタート地点は実はフロントエンドでした。ファインディにジョインするまではバ... 続きを読む

今アツい（気がする）UIライブラリ...?ではないらしい shadcn/uiを使ってみる - Nealle Developer's Blog

2024/12/10 28 users shadcn ニーリーアドベントカレンダー2024 アツい

この記事はニーリーアドベントカレンダー2024の10日目の記事です。 はじめまして、Nealleのデザイナー音部です。 profile.unotovive.io アドカレでデザインチームのことを書くつもりが、全然思いつかずにフロントエンドの話をします。 タイトルにある通り、shadcn/uiというモノの紹介と、実際に使ってみたレポートです。... 続きを読む

バックエンドもフロントエンドもインフラも Terraform でつくってみた

2024/12/09 11 users Terraform サンプルアプリ インフラ バックエンド

この記事は terraform Advent Calendar 2024 の 9 日目の記事です。 Terraform だけでアプリケーションのバックエンド・フロントエンド・インフラをつくったので紹介します。 つくったもの 利用技術 バックエンド フロントエンド インフラ Full-Stack Terraform まとめ つくったもの 画像を表示するだけのサンプルアプリ... 続きを読む

フロントエンドのディレクトリ構成どうしてる？　Feature-Sliced Design 導入体験談

2024/12/09 140 users ディレクトリ構成

「関西フロントエンド忘年会2024 HACK.BAR × KINTOテクノロジーズ」のLTで発表したスライドです。 https://kinto-technologies.connpass.com/event/337002/ 続きを読む

Full-Stack TypeScriptの最終到達点、T3-Turboで新規開発した話

2024/12/07 45 users TypeScript TSKaigi 新規 インフラ 最初

はじめに この記事はTSKaigi Advent Calendar 2024の記事です。(TSKaigiの運営メンバーとして最初の記事になりそうです。) みなさん、TypeScript書いてますか？最近、フロントエンドもバックエンドも（加えてインフラも）TypeScriptで統一する、Full-Stack TypeScriptを採用する事例が増えてきました。 Full-Stack TypeS... 続きを読む

フロントエンドの段階的モダナイズ、のための自走設計 (株式会社スタディスト様)

2024/12/06 65 users モダナイズ Rails ソースコード 提案 作業

株式会社スタディスト様の依頼で、フロントエンド傭兵として、Rails 内の巨大SPA の段階的なモダナイズの提案を行った事例紹介です。 いつもはパフォーマンス視点で仕事にかかるのですが、今回はマクロな設計視点でソースコードを読んでいきます。一旦は中期ゴールを提案しつつ、その作業の必要性を通して、なぜその変更... 続きを読む

第841回　ローカルLLMの実行ツール「Ollama」のGUIフロントエンド、Alpacaを使用して生成AIを使用する | gihyo.jp

2024/12/04 11 users Alpaca Ollama ローカルLLM gihyo.jp

Ubuntu Weekly Recipe 第841回ローカルLLMの実行ツール「Ollama」のGUIフロントエンド⁠⁠、Alpacaを使用して生成AIを使用する 今回は、ローカルLLMの実行ツール「Ollama」のフロントエンド、Alpacaを紹介します。 Alpacaとは Ollamaに関しては第825回で紹介しました。そこではフロントエンドとして、Open WebUIを使いまし... 続きを読む

フロントエンドのテストを書きたい！ - iimon TECH BLOG

2024/12/05 21 users iimon tech blog テスト Mui redux

はじめに テストの種類 テストレベル テストタイプ テスト戦略 Reactのテストで個人的に躓いたところ UIコンポーネントのテスト Reduxを使っている場合 @mui/x-date-pickerを使用している場合 MUIのコンポーネントでテーマを使用している場合 カスタムフックのテスト まとめ 参考記事 はじめに こんにちは、株式会社iimo... 続きを読む

Nx活用術！モノレポ内のStorybookのパス設定自動化 - Findy Tech Blog

2024/12/03 7 users StorYBook Nx活用術 ユーティリティ puku0x

ファインディ株式会社でフロントエンドのリードをしている新福(@puku0x)です。 Nxはモノレポ管理の便利なユーティリティとして @nx/devkit を提供しています。 今回は @nx/devkit を利用したStorybookの設定の自動化についてご紹介します。 Nxについては以前の記事で紹介しておりますので、気になる方は是非ご覧ください... 続きを読む

なぜ僕はデザイナーの作ったデザインを「見づらい」と感じてしまうのか

2024/12/01 200 users デザイナー デザイン ウェブデザイナー 傍ら 特定

「PLAID Design Advent Calendar 2024」の1日目の記事です。 僕はこれまでフロントエンドの開発者として働いてきた傍ら、自身をウェブデザイナーとしても自認して、自分なりのやり方でデザインに携わってきました。この記事は、特定の組織での経験をテーマにしたものではなく、そうした自分の成り立ちを省みるためのもの... 続きを読む

生成AI×アプリ開発！bolt.newでフロントエンドが苦手な私でもWebアプリ開発 - Taste of Tech Topics

2024/11/25 20 users bolt.new 熱々 前田 アプリケーション 肉まん

こんにちは。バックエンドエンジニアの前田です。 最近はかなり冷え込んできて、冬が近づいてきたなと感じます。 社内では、肉まんを販売しています。 寒い日に熱々の肉まん、良いですよね。 さて、今回はbolt.newを用いて、ゼロからアプリケーションを作成していきます。 （私は、フロントエンドの経験があまりなく、苦... 続きを読む

Nx活用術！Larger runnerの動的設定でGitHub Actionsのコスパ改善！ - Findy Tech Blog

2024/11/21 15 users GitHub Actions Nx活用術 設定 puku0x

ファインディ株式会社でフロントエンドのリードをしている新福(@puku0x)です。 皆さん、GitHub ActionsのLarger runnerはご存知でしょうか？ 高性能なマシンを使ってCIを実行できる一方、変更の少ない場合や計算負荷の低いCIではコストパフォーマンスが悪くなってしまいがちですよね？🤷‍♂️ この記事では、Nxの機能を利用し... 続きを読む

【最新版】フロントエンドを学べる最高の教材集 - Qiita

2024/11/17 195 users 教材 全体像 フロントエンド技術 Next.js ロードマップ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに フロントエンドを学べる教材をまとめました。 今回紹介するフロントエンド技術は下記になります。 ロードマップ (全体像) JavaScript TypeScript React Next.js 対象者 こ... 続きを読む

複雑なフロントエンド（ノーコード）を堅牢に作る | ドクセル

2024/11/16 15 users ドクセル 堅牢 ノーコード

猫でも分かる UE5.0, 5.1 におけるアニメーションの新機能について【CEDEC+KYUSHU 2022】 続きを読む