はじめに フロントエンドもバックエンドもTypescriptで書きたい！ということで、T3 Stack（T3スタック）について調べてみました。 T3 Stackを利用したプロジェクトを作成するためのCLIツールcreate-t3-appが用意されており、簡単に雛形プロジェクトが作れるため、実際に使ってみました。 この記事は以下の内容をメインに紹介します。 create-t3-appの環境構築手順 雛形プロジェクトの解説（特にtRPCを用いたAPIの呼び出し方法について） T3 Stackとは T3 Stackとはsimplicity（簡潔さ）、modularity（モジュール性）、full-stack type safety（フルスタックの型安全）を追求した思想に焦点を当てています。 そしてそれらを実現するために以下6つの技術スタックが採用されています。 ✅ Next.js ✅ tRPC
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
フロントエンドエンジニアとは、WebサイトやWebアプリケーションの見た目や動作など、ユーザーが直接目にする部分を開発する職種です。 今後のキャリアプランを考えるうえで、フロントエンドエンジニアの平均年収を知りたいと思っている方もいるのではないでしょうか。 そこで本記事では、レバテックフリーランスが保有する案件から、フロントエンドエンジニアの平均年収を算出しました。すでにフロントエンドエンジニアとして働いている方はもちろん、今後フロントエンドエンジニアとして働きたいと考えている方も、ぜひ参考にしてください。 【調査概要】 調査対象：「レバテックフリーランス」の利用者が参画した案件データから、稼働日数が5日のものに絞り、月額案件単価と参画者の年齢、案件に紐づくフレームワーク・ライブラリを算出しました。 対象期間：2023年6月～2024年6月 対象案件数：358件 対象職種：フロントエンドエ
TypeSpec、Orval、Storybook を使ってフロントエンドのモック生成を自動化する
はじめに フロントエンド開発において、効率的かつ一貫性のあるモック生成は非常に重要です。本記事では TypeSpec、Orval、Storybook の 3 つのツールを使用して自動生成でモックを実現する方法を紹介します。 TypeSpec は、大規模な API を提供するために Microsoft が開発し、使用している新しい API 記述言語です。 Orval は、OpenAPI 仕様から TypeScript のクライアントコードを生成するツールです。これにより、最新の API 仕様に基づいたクライアントコードを常に保持し、API との通信がスムーズに行えるようになります。 Storybook は、コンポーネントを独立して開発・テストするためのインタラクティブなツールです。コンポーネントの見た目や動作を個別に確認できるため、UI の一貫性を保ちながら効率的に開発を進めることができます
スタートアップなのにフロントエンドのテストカバレッジが90%を超えている話 | Resilire Tech Blog
はじめに サプライチェーンリスク管理クラウドサービスResilireでエンジニアをしている奥村@showkittie です。 Resilireでは、1歳の子の育児に悪戦苦闘しながら、フロントエンド、サーバサイドを問わずプロダクトエンジニアをやっています。 ResilireはシリーズAを迎えたばかりのアーリースタートアップでありながら、フロントエンドのテストカバレッジが90%を超えており、必要なケースについてはほぼテストが網羅されています。 私は今年の4月に入社したばかりですが、すでにテストカバレッジの高さに助けられ、不具合の混入をせずに済んだことが何度もあります。 今日は、Resilireのフロントエンドのテスト戦略とカバレッジの高さの理由についてお伝えしたいと思います。 スタートアップとテスト 冒頭にもお伝えした通りResilireはアーリースタートアップです。エンジニアリングに求められ
こんにちは、LINEスキマニのフロントエンド開発担当や、フロントエンド開発に関するイベントの運営をしている板井（@itatchi3_）です。 LINEヤフーでは、社員が海外のカンファレンスや学会に参加することを支援する制度があります。これを通じて、最先端技術の情報収集や現地の温度感の調査を行い、得た知見を会社に持ち帰ることで、全社的な技術力向上に努めています。 この制度を活用し、2024年5月13日と14日にアメリカ・サンフランシスコ州マウンテンビューで実施された「Google I/O 2024」に現地参加してきました。 現地のエンジニアと実際に触れ合った中で、その熱意の高さからも重要であると感じ、さらにLINEヤフーでも導入の検討が進められているフロントエンド技術について解説します。 Built-in AI 兎にも角にもAI一色の「Google I/O 2024」でした。AI関連の発表が
こんにちは、ファインディ株式会社でフロントエンドのリードをしております 新福(@puku0x)です。 この記事では、IT/Webエンジニアの転職・求人サイト Findyのメッセージ画面の改善についてご紹介します。 メッセージ画面の課題 メッセージ画面の改善 Apollo Clientキャッシュの利用 読み込み画面の条件修正 ページ設計の最適化 まとめ メッセージ画面の課題 Findyのメッセージ画面は数年前にデザインを刷新しました。 現在では、3種類のメッセージを表示するようになっています。 通常のマッチングのメッセージ プレミアムスカウトのメッセージ Findyからのメッセージ 機能拡充される一方で「読み込みが多い」「画面遷移がサクサク動くようにして欲しい」との声をいただく機会が増えていきました。 実際に触ってみると確かに読み込み画面が頻繁に表示され、画面遷移に時間がかかっていることがわ
先日（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
2024年4月24日、一般社団法人 日本CTO協会（以下、日本CTO協会）は「Webフロントエンド版 DX Criteria」を策定した。本ガイドラインは、日本CTO協会が監修・編纂する「DX Criteria」のWebフロントエンド領域特化版だ。近年、Webフロントエンドの技術環境は日々変化しており、組織としての変革やエンジニア個人の技術のキャッチアップなどの対応が困難になりつつあるのが現状だ。そのような中、フロントエンド領域では組織としてどのように課題を棚卸し、組織ひいては企業としてのケイパビリティを高めていくべきだろうか。本ガイドラインを策定した同協会DX Criteria策定ワーキンググループの佐藤歩氏と古川陽介氏に聞いた。 佐藤歩氏（画像左） KINTO テクノロジーズ株式会社 IT/IS部 古川陽介氏（画像右） 株式会社ニジボックス デベロップメント室室長 「フロントエンド領域
型情報の効果的な活用：API を介してバックエンドとフロントエンドを繋ぐ - Insight Edge Tech Blog
こんにちは！Insight Edgeの小林まさみつです。 Insight Edgeでは、単一のプロジェクトでバックエンドとフロントエンド両方の開発を担当することがあります。 開発時にはバックエンドとフロントエンドをうまく連携することが求められます。 その際、それぞれで型情報を定義すると多重管理することになり、管理の手間がかかることに加えて整合性が保ちづらくなります。 本記事では、型情報を含むAPIをスムーズに連携することでこれらの問題を解決し、開発プロセス全体の効率化を実現する方法を紹介します。 目次 1. 概要 2. 使用する主要な技術 3. 本記事で扱うデータモデル 4. バックエンドの型情報と FastAPI の役割 5. フロントエンド開発の効率化 6. バックエンドとフロントエンド間の型同期 7. 注意点 8. まとめと今後の展望 1. 概要 型付けの重要性 型情報を明示すること
Railsフロントエンド: ViewComponent+Tailwind CSS+Hotwireの便利技8つ（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Quicktips for ViewComponent with Tailwind CSS/Hotwire | Rails Designer 原文公開日: 2024/01/22 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています 日本語タイトルは内容に即したものにしました。 フロントエンドのコードは、歴史的に少々軽く見られていました。「HTMLは本物の言語じゃない！」「CSSはサイテー！」「JavaScriptもそうだ！」。嘆かわしい話です。Railsは1個人だけの開発チームに、すべてが完全に揃った製品を構築できる本物のスーパーパワーを与えてくれるのですから。 Railsアプリ作成がさらに楽し
フロントエンドとJavaScriptの歴史を雑に話す会
フロントエンド歴10年のmizchiと初心者のateaが雑に話します。フロントエンド、プログラミング、AI、ゲーム、FF14、スト6。 52分〜1時間50分あたりは初心者プログラミングの話で、フロントの歴史だけ聞きたい人は飛ばしてください。 2時間43分のトラブルから音声スレッショルドが効きすぎて聞きづらいです。申し訳ない。 0:00 音声トラブル 4:50 雑談 7:30 自己紹介 16:30 配信の動機 18:50 初めてのインターネット 22:20 FlashとCGI 30:00 JavaScript 35:40 GMail/GoogleMap 43:10 サン牧とPerlと 52:00 ネトゲとの付き合い方 1:03:50 ブラックボックス 1:15:37 初心者vsAI 1:32:54 期待値は低いとアド 1:45:00 スト6のモダン 1:50:50 フロントエンド 2:0
[Astro×Hono×Fresh対談] Next.jsじゃないFWが見据えるフロントエンドの未来 (2024/07/25 19:00〜)
注意 現在X(旧Twitter)でのソーシャルログインができない事象を確認しています。事前にX(旧Twitter)側で再ログインした上でconnpassのソーシャルログインを行うか、 「ユーザー名(またはメールアドレス)」と「パスワード」の組み合わせでのログインをお試しください。合わせてFAQもご確認ください。 お知らせ 2024年9月1日よりconnpassサービスサイトへのスクレイピングを禁止とし、利用規約に禁止事項として明記します。 9月1日以降のconnpassの情報取得につきましては イベントサーチAPI の利用をご検討ください。 お知らせ connpassではさらなる価値のあるデータを提供するため、イベントサーチAPIの提供方法の見直しを決定しました。2024年5月23日(木)より 「企業・法人」「コミュニティ及び個人」向けの2プランを提供開始いたします。ご利用にあたっては利用
![[Astro×Hono×Fresh対談] Next.jsじゃないFWが見据えるフロントエンドの未来 (2024/07/25 19:00〜)](https://cdn-ak-scissors.b.st-hatena.com/image/square/21722920f388abe16cfa114fe6c2cfcfdbd0c636/height=288;version=1;width=512/https%3A%2F%2Fmedia.connpass.com%2Fthumbs%2F79%2Fc6%2F79c60c00b00c348c443ba880d8ecff2d.png)
Pythonだけでフロントエンド経験ゼロから爆速でGUIアプリケーションを構築する【Flet】 - アダコテック技術ブログ
こんにちは！AIエンジニア兼バックエンドエンジニア兼プロダクトオーナーを担当している植草です！ 突然ですが、皆さんPython使っていますか？画像処理や機械学習を実装する場合、ライブラリが充実しているPythonはサクッと実装できて便利ですよね。Pythonだけで良い感じのGUIを構築できる Flet を紹介します！ 3行で FletはPythonでイケてるGUIを手軽に作成できるライブラリだよ Pythonなので、潤沢な機械学習や画像処理のライブラリの恩恵をフルに得られるよ FletとRembgというライブラリを使ってAI（学習済みモデル）を用いた簡単なGUIアプリを作る例を紹介するよ はじめに: Fletとは？ flet.dev FletはPythonでGUIを構築できるライブラリです。私が触ったことのあるライブラリは PySimpleGUI Streamlit Flet の3種ですが
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【T3 Stack】フロントエンド・バックエンドTypescript開発入門
「第4のブラウザ言語」WebAssemblyが変えるフロントエンド開発 - レバテックラボ（レバテックLAB）
【調査結果】フロントエンドエンジニアの平均年収！最も稼げるのは40代？
Google I/O 2024 注目のフロントエンド技術
Findyのフロントエンドにおけるメッセージ画面のパフォーマンス改善 - Findy Tech Blog
［入門］Webフロントエンド E2E テスト を出版しました | フューチャー技術ブログ