はじめに 本記事の目的は、Web フロントエンド(TypeScript) と BFF(Spring Boot) をタイプセーフに繋ぐ方法を紹介することです。 以前、以下の記事を書きました。 この記事からの変更点は、次の２点です。 OpenAPI Spec を出力する Springfox を springdoc-openapi に変更しています。Springfox はメンテナンスされなくなっているようです。 生成するコードが Angular 用のクライアントでしたが、より汎用的な fetch のクライアントに変更しています。サンプルコードも React に変更しています。 ざっくり説明 まずは、以下のような Spring Boot(BFF)のコードを作成します。 @RestController public class AppController { @GetMapping("/greet"
Webフロントエンドのリリース戦略
Webフロントエンドのリリースをどうするのか 前置きWeb開発に分業化が進み、Webフロントエンドの開発は独自に行われることが多くなった。 しかし、Webフロントエンドのリソースの配信はサーバサイドが絡むことも多く、Webフロントエンドに取って最適な方法が取られているとはいえない場合も多い。 ここでは、主にiOS, Androidアプリなどのリリース方法を参考にWebフロントエンドのリソースの配信（リリース）をどうするかを書く。 Webフロントエンド特有の事情iOS, Androidアプリの場合、リリースに関しては事実上プラットフォームから指定されているため選択肢が少ない。 しかし、Webフロントエンドの場合、事実上URLで指定できる場所にさえおければリリース処理が終わることが多く、自由度が高い。 前提ここで言う「Webフロントエンド」とは、「Webアプリケーション」と言われるようなそれな
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社のコーポレートサイトはこちらです。 当ページに記載されている情報は、2023年9月30日時点の情報です。
Webフロントエンドだけでファイルを読み書きしたい
こんにちは、Webアプリは作りたいけどサーバは立てたくないWebプログラマのpirosukeです。 今回はアプリケーションサーバやデータベースを使用せず、Webのフロントエンドだけでファイルの内容を読み込んだりファイルを出力したりする機能を作る方法を紹介します。 使用するのはファイルのアップロード機能とダウンロード機能です。 Webサイトでファイルをアップロードしたりダウンロードしたりする機能といえば、ファイルをインターネット上のサーバに送ったりサーバからファイルを受け取ったりする形が多いですが、実は選択したファイルをそのままフロントのJavascriptで読み込んで使用したり、Javascriptでファイルを出力したりすることができるのです。 この仕組みを使うことで、例えばメモ帳のようにファイルを開いて中身を編集し、編集が終わったら保存するような機能をWebアプリをHTMLとJavasc
こんにちは。Wantedly で Frontend Chapter Lead をしている原 剛士(@chloe463)です。この記事では、Wantedly のフロントエンドが抱える課題とそれを解決するための戦略や方針について紹介します。先日開催された JSConf JP 2022 のスポンサーLTでざっくりと同じような話をしたのですが、5分という短い発表時間では伝えきれなかった詳細まで踏み込んで説明しようと思います。 目次 Wantedly のフロントエンドの歴史と現状 我々が目指す理想郷 理想郷へ至る道Web アプリとシステムをつなぐ GraphQL gateway の整備 Ruby on Rails に乗っている主要機能の段階的な React 化 分離した Web アプリでの生産性向上のための基盤整備 Wantedly のフロントエンドの歴史と現状 Wantedly は10年以上運営し
「テクノロジーによる自己変革を、日本社会のあたりまえに」というミッションを掲げ、世界最高水準の技術者育成を図ることにより、日本経済の発展に資することを目的としています。
フロントエンドとバックエンド フロントエンドのいま、むかし、SPAとMPA 最低限、知っておきたいフロントエンド開発に必要な知識 チームで開発するために注意すること トレンドを知る 良いUI/UXを考える
2019年8月6(火)に開催されたヤフー名古屋 Tech Meetup #3 - Webフロントエンドを支えるノウハウ - の#Twitterまとめで(#ヤフー名古屋 のまとめ)
Web フロントエンドの実装において本来の機能を損なってはいけない
2022.12.24 昨今の Web フロントエンドの開発においては、React や Vue.js などを利用した SPA を採用することが多くなりました。従来の MPA と比較して、リンククリック時やフォーム送信時にページリロードを挟まないので、高速な画面遷移を実現できるため、快適な操作を実現できます。 一方データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾キーが有効でなかったりと、とある要素が当然に持っているべき機能が失われていることがよくあります。 普段よく見かける要素が本来持っている機能を損なっている場合、ユーザーは期待を裏切られたような体験を感じてしまいます。例えば青文字に下線が引かれている文
【イベントレポート】「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
36歳Webフロントエンドがメガベンチャーからスタートアップに転職した動機と感想 | Offers Tech Blog
プロダクト開発人材の副業転職プラットフォーム Offers を運営する株式会社 overflow で VPoE を務めている あほむ と申します。よろしくお願いします。今回は体験談の名目でいちエンジニアの身の上話を淡々と書かせていただきます。 スタートアップに興味をもつ人が増えるといいな 私自身は 2022 年 1 月の入社ということで、副業転職（副業でお互いのマッチングを確かめてから転職に至るムーブ）したての社員としては新参者でございます。 今回は似たような境遇の人がスタートアップに飛び込む一助となればと思いタイトル通りの内容の記事を書いてみました。なお、社会的な体裁を整えたバージョンは下記の記事をご覧ください :) 1. 転職を考えるようになったワケ 明確な転職意思というわけではないにせよ、当時このようなことを考えていたような気がします。このあたりのことはいくら取り繕っても自己本位にし
これを書いてる人は職業エンジニアではなく、ただのしがない学生エンジニアです。なのでもしかしたら実際のお仕事とは違う部分があるかもしれませんが、そこはそういうものなんだな、とご理解いただければと思います。 この記事は CA Tech Lounge Advent Calendar 2023 20日目の記事です。 Webフロントエンドエンジニアってどんな人？ Webフロントエンドと言われるような領域を専門にするエンジニアのことをWebフロントエンドエンジニアとよく呼びます。しばしば単にフロントエンドエンジニアとも呼ばれます。[1](この記事の中でフロントエンドと言えばWebフロントエンドを指すことにします) Webフロントエンドエンジニアのイメージ画像 by GPT-4 Webフロントエンドエンジニアって何をしてるの？ WebフロントエンドエンジニアというぐらいですからWebのフロントエンド、つ
Webフロントエンドのバージョニング
Webフロントエンドのバージョンをどうするか 前置きネット上での「バージョン」と言えば xxx.yyy.zzz 形式の SemVer が一般的である。 ただ、同時に「アプリケーションにSemVerは向かない」というのもよく言われる。 しかし、「アプリケーションにSemVerは向かない」というのは主にiOS, Android関係から言われることが多かった。 そのためここでは「Webフロントエンドからみたバージョニングの話し」を書く。 Webフロントエンド特有の事情iOS, Androidアプリの場合、プラットフォームの要求からバージョンをつけざるを得ず、バージョンの形式も制約を受ける。 しかし、Webフロントエンドはそもそもバージョン自体ない場合も多い。 （もしくはせいぜい package.json の version を適当にカウントアップするのがせいぜいだったりする） ここでは「なぜWe
A5判 160P お試し版（78P） https://rabbit-house.tokyo/proto-book-trial-rev2.pdf 本書はウェブフロントエンドとバックエンドを併用して実践的なプロトタイピングについて解説する本です。 ウェブフロントエンドのみのプロトタイピングに使える資料はそれなりにあります。Firebase のような特定の機能をバックエンドに持った本も多く見られます。 既存のそれらの本はバックエンドにはあまり踏み込みません。NoSQLやファイルストレージ、認証サービスなどを利用することがほとんどです。 この本の特徴は2点あります。 1. 実際のプロトタイピングを様子を解説すること（ストーリー仕立てではありませんが、プロトタイピングでよくありそうなシチュエーションを想定して、プロトタイピングを解説します） 2. Next.js および Hasura GraphQL
セッション概要 イベントページ 第1回は、4/24刊行の『フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識』の著者、吉井さんをお招きしました。 フロントエンドを含むWebアプリケーションの「テスト」に対する関心は年々高まっているものの、自信を持って「テストを実践できている」という現場はまだまだ多くないのが事実。フロントエンドのテストを根付かせるためにも、吉井さんは「テストには目的が大切」と語ります。 今回のセッションでは、『フロントエンド開発のためのテスト入門』で紹介したテストに関するトピックのなかでも、StorybookやWebアクセシビリティなど比較的新しいものを中心に、デモを交えながら紹介します。また本セッションを通じ「テストを書く目的」の大切さを伝えることで、テストを実践するきっかけとなる場を目指します。 参加者の方からの質問の回答（開催中に回
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、ヤフー名古屋オフィスでエンジニアをしている一円真治です。 第3回目となるヤフー名古屋 Tech Meetupを2019年8月6日（火）に開催しました！ 今回のテーマは「Webフロントエンドを支えるノウハウ」です。 実務に基づいたフロントエンド開発の知見を5つのセッションを通してお話いただきました。 今回も大変ありがたいことに、イベント公開直後に定員が埋まってしまう人気ぶりでした。 本記事では、参加できなかった方にも少しでも当イベントを知ってもらえるよう、セッション内容とイベントの雰囲気を簡単にお伝えします。 セッション1: Nuxt.jsを使った電子書籍販売サービスの構築 まず最初にヤフー名古屋オフィスで勤務するエンジ
モダンフレームワークとハイドレーションの未来 前編 既存のフレームワークとハイドレーション 2022年6月2日 サイトのパフォーマンスやユーザー体験と、サイトのレンダリング手法は密接に関係しています。ハイドレーションをキーワードに、既存フレームワークの仕組みを概観してみます。
Connect-WebはgRPCを使いたい人にとっては導入も簡単で使い勝手の良いブラウザ用APIライブラリです。 一方で新しい技術であることからも日本語ドキュメントが少ないという弱点もある。
Webブラウザで唯一実行が保障されているプログラミング言語はJavaScriptです。しかし規模の大きなシステムを書きたがらなかったり、サーバサイドは別な言語を使っているケースもあります。 そこで今回はRubyでWebアプリケーションが書けるPrismを紹介します。 Prismの使い方 デモです。 Prismのコードです。Rubyで書かれているのが分かります。 class HelloWorld < Prism::Component attr_accessor :name def initialize(name = "World") @name = name end def render div(".hello-world", [ input(onInput: call(:name=).with_target_data(:value)), div("Hello, #{name}") ]) e
Webフロントエンドでも Clean Architecture に関する考察や実際のサービスへの導入の事例をよく見かけるようになりました。 n番煎じですが Clean Architecture をWebフロントエンドのアプリケーションに導入する際の考察をコードを書きつつしてみました。 サンプルコード はこちらにあります。 また、今回のコードを書くにあたり、 @ttiger55 さん、@pirosikick さんのエントリーやコードを参考にしました。ありがとうございます :) Pros/Cons コードを書いてみた上での結論を先に述べておきます。 Pros/Cons で言えば Pros の利点が多く感じられますが、結局のところ「ビジネス要件」がある程度固まっているか否かというソフトウェア側でコントロールしにくい箇所がボトルネックとなっているのため、ここをどう捉えるかは個人によって差が出そうか
ep.86 Chrome extension - そしてサーバーサイドエンジニアの Web フロントエンド活用術 | UIT INSIDE
@spring_raining がLINEのサーバーサイドエンジニアである @dayflower と @kazuki-ma に、サーバーサイドエンジニアがフロントエンドを開発することやChrome extensionの活用例について聞きました。 サーバーサイドエンジニアが作るChrome extenision 社内で実施されたGW自由研究発表会 @dayflower さんがICOOON MONO (https://icooon-mono.com/) からアイコンをクリップボードにコピーするChrome extensionを作成 他にも業務の一環でChrome extensionを作成する事例あり 業務中の不満解決やスピードアップのために作る サーバーサイドエンジニアがフロントエンドを開発する機会 実はいろんなところでサーバーサイドエンジニアが開発する 社内向けの管理ツール 技術スタックの変
個人的にHaskellを学び始めてから、世の中のソフトウェアは不純なもの（副作用）で溢れていることに気づいたので、Webフロントエンドに当てはめて考えたことをまとめてみます。 主にReactやVue等でのSPAを想定して執筆しています。 （が、副作用の考え方自体は抽象度の高い概念なので、バックエンドやモバイルアプリ等についても応用できるところはあるかもしれません。） 副作用とは Wikipediaには以下のようにあります。 副作用 (プログラム) プログラミングにおいて、式の評価による作用には、主たる作用とそれ以外の副作用(side effect)とがある。 式は、評価値を得ること(※関数では「引数を受け取り値を返す」と表現する）が主たる作用とされ、それ以外のコンピュータの論理的状態(ローカル環境以外の状態変数の値)を変化させる作用を副作用という。 この説明だけでは理解が難しそうな気がしま
※筆者による主観的な評価であること、2022年8月時点の評価であり今度変動する可能性が高いことについてご注意ください。 ※コミュニティ情報とはQiitaやStackOverflowなどに掲載されている非公式情報を指しています。 どのフレームワークも基本的な公式ガイド、公式チュートリアル、リファレンスは充実しています。初歩的なWebアプリを作る分には困ることは無いと思われます。 各フレームワークのドキュメントの特徴について補足説明します。 React: コミュニティ情報が非常に多いです。フレームワーク自体の需要が多い（後述）こともあり、コミュニティが最も活発です。Qiita、note、Zennのどの媒体でも最も多くの記事が掲載されています。そのためフレームワーク利用の研究が最も進んでおり、フレームワークに踏み込んだ内容であればあるほど優位にあると思われます。 Vue.js: 大きな特徴として
Offers 技術組織の課題 a.k.a 誰か手伝ってリスト - Web フロントエンド編 | Offers Tech Blog
Offers を運営している株式会社 overflow の あほむ でございます。 今回は Web フロントエンドの技術課題と展望です 前回は CTO の 大谷旅人 から バックエンドや DevOps の領域における技術課題をご紹介 しましたが、今回は Web フロントエンド編ということで私からお送りします。 Issue 1. リアーキテクチャと付随する技術スタックの変更 前提として Web フロントエンドは ユーザー体験を維持するだけでも外的環境の変化に応じた新陳代謝を特に必要とする と考える立場にあります。とはいえ、リファクタリングという規模ではなく式年遷宮（技術スタックの抜本的刷新）であることから事業とも足並みを揃えつつ進める長期課題です。 1-1. Ruby on Rails と密結合している実装の漸進的な剥離 現状の Offers は Ruby on Rails にフロントエンド
React/Reduxでカンバンボードの開発！ReduxをReactに導入する方法や、Reduxを使った設計のベストプラクティス、Reduxのアクションをユニットテストする方法までをわかりやすく解説。
こんにちは、アルダグラムのエンジニアの影山です。 今回は KANNA（弊社アプリ）の Webフロントエンドに Integration Test を導入するにあたっての背景などを話そうと思います。 Integration Test 導入によって達成したいこと いきなり Integration Test を導入するとなっても、モチベーションとなる材料が薄ければ、おそらく途中で挫折してしまうでしょう。 ロジックのテストも増やしていきたいのに、何故さらにテスト構成を増やすのか。 弊社では、下記のような項目を達成したい動機がありました。 フロントエンドのモジュラーモノリス化 Presentational Component を実現するリファクタリングの実施前に、結合テストによる安全性を担保したい。 Integration Test が通っていることで、リリースブロック判定を１段階緩めたい 1つずつ簡
NTT Tech Conference 2024 での発表資料 フロントエンドを Vue.js から React にリプレイスしたお話 (前編) Node-AI OSS (GitHub)
SoftwareDesign on Twitter: "「謝罪と告知」本誌10月号は9月18日発売です。 特集1について、お詫びすることがあります。詳細は次URLです。https://t.co/C29Np2boGk 第1章のtatane氏の執筆記事には『Webフロントエンド ハイパフォ… https://t.co/OKY21UDUzO"
「謝罪と告知」本誌10月号は9月18日発売です。 特集1について、お詫びすることがあります。詳細は次URLです。https://t.co/C29Np2boGk 第1章のtatane氏の執筆記事には『Webフロントエンド ハイパフォ… https://t.co/OKY21UDUzO
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web フロントエンド(TypeScript) と BFF(Spring Boot) をタイプセーフに繋ぐ 2022
第11代Webフロントエンド黒帯が語る──私たちはこうして鍛えられ、エキスパートになった - linotice
10年モノWebフロントエンドの改善に立ち向かう | Wantedly Engineer Blog
日本CTO協会から、プロダクトのユーザー体験と変化に適応するチームのためのガイドライン『Webフロントエンド版DX Criteria』を4月24日に新公開 ｜一般社団法人 日本CTO協会
ようこそ！2020年、Webフロントエンドの世界へ | Tech Blog | CRESCO Tech Blog
ヤフー名古屋 Tech Meetup #3 - Webフロントエンドを支えるノウハウ - のTwitterまとめ
Webフロントエンドエンジニアってどんな人？何をしてるの？年収は？彼女はいるの？調べてみました！
実践プロトタイピング 〜Webフロントエンド＆バックエンドでプロトタイピング〜 - 東京ラビットハウス - BOOTH
【アーカイブ動画】Webフロントエンドのための実践「テスト」手法 CodeZine Night #1
Webフロントエンドのノウハウ大集合！ ヤフー名古屋 Tech Meetup #3を開催しました
特集 Webフロントエンドで起きている変化、きちんと知りたい！ | CodeGrid
Connect-WebをMSWでモックする方法｜Webフロントエンド
Prism - Rubyが使えるWebフロントエンドフレームワーク
Webフロントエンド Clean Architecture 考 - Qiita
Webフロントエンドにおける副作用について考える
どのWebフロントエンドフレームワークから始めるべきか？（考察編） - Qiita
【React/Redux】カンバンボードを実装して Web フロントエンド上級者を目指そう！ | Techpit
Webフロントエンドに Integration Test を導入するに至った諸々の話
Node-AI のリッチな WEB フロントエンドを支える技術