CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Next.js 14 の Server Actions の stable リリースに発表は大きな反響を呼びました。 特に <button> の formAction 属性内で直接 SQL クエリを実行するコードは多くの人に衝撃を与えていました。"use server;" の部分を PHP やバイナリに置き換えると行った多くのミームも生まれました。 function Bookmark({ slug }) { return ( <button formAction={async () => { "use server"; await sql`INSERT INTO Bookmarks (slug) VALUES (${slug})`; }} > <BookmarkIcon> </button> ) } X 上での反応を見ると、このクライントから直接 SQL クエリを実行するコードは見た目の印象
はじめに はじめまして。株式会社スタメンでエンジニアをしております、永井(@0906koki)です。 以前の記事では、筋トレを週5でしていると書いていましたが、今は週2に減らして体をメンテナンスしています。 今回の記事ではRailsとWebpack、そしてReactを使って、webpack_dev_serverによるHot Module Replacement(以下 HMR)を実装する方法について書きたいと思います。 軽くwebpack_dev_serverとHMRの説明をすると、webpack_dev_serverとはWebpackを利用した開発環境向けWebサーバーで、Webpack管理内の静的アセットを配信することができます。また、HMRとはWebpackの提供する仕組みで、ブラウザのリロードをせずにJavascriptの変更内容を画面に反映するツールです。 弊社のプロダクトであるT
本エントリはカケハシ Part 2 Advent Calendar 2023の13日目の記事です。 (Part 1もおもしろい記事がいっぱいあるので、ぜひご覧ください。) はじめに こんにちは。カケハシでソフトウェアエンジニアをしている平松です。 今年、新規プロダクト立ち上げの機会があり、その際に行ったフロントエンドの技術選定について紹介したいと思います。 フロントエンドの領域は選択肢が豊富で、変化のスピードも速いため、プロダクトの要件に適した技術を選ぶことはひとつの挑戦です。 実際、フロントエンド技術選定のヒント 【令和五年度版】のアドベントカレンダー記事を読んで、その難しさを改めて感じました。 今回の新規プロダクトは、ユーザがログインして利用するtoBの業務システムです。 私はカケハシでは2度目の新規プロダクト立ち上げですが、前回の経験を活かしつつ、新しいアプローチにも挑戦しています。
こんにちは。カミナシにて業務委託としてフロントエンドを担当している田村(@junkboy0315)です。皆さんはフロントエンドのテスト、どのように取り組んでいますか?フロントのテストはなかなか難しいですよね。 バックエンドのテストには、「入力、出力、永続化されたデータ」の3つを検証するという基本セオリーがあります。しかし、フロントエンドのテストは、その粒度や手法が多様で、とっつきにくいと感じる方も多いのではないでしょうか。 カミナシでもフロントエンドのテストは以前は十分とは言えない状態でしたが、これまで継続的に改善を重ねてきました。今回は、その変遷についてお話ししようと思います。 夜明け前 カミナシのコードベースでは、元々ユニットテストがある程度整備されていました。これらは主に複雑な計算処理を行い結果を返す関数などに対して実施されていました。 しかし、画面全体の機能を網羅する包括的なテスト
フロントエンドエンジニアの茶木です。 Next.js におけるレスポンシブ、PC/SPの出し分けについてSSRの観点も含めて考察します。 具体的には、以下の切り替えについて、どのように実現するかについての考察です。 スタイリングの切り替え要素自体の描画を行うかどうかはじめにサーバーサイドレンダリング(SSR)Next.js はサーバーサイドレンダリング(SSR)をサポートしています。 SSRは、サーバー側で HTML を生成し、クライアントに返し表示することで、初期表示の高速化を実現します。 Next.js では、SSRは、クライアントサイドレンダリング(CSR)と混在させられます。基本的には SSRでレンダリングするべきなのですが、サーバーサイドで行えない、クライアントに依存した動的な表示を行う場合が存在します。 PC/SPの出し分け踏まえて、PC/SP の出し分けの判定について考えます
こんにちは!フロントエンドエンジニアのつかじです。 今回は、私がReact開発で普段利用しているアクセシビリティのチェックツールについてご紹介したいと思います。 アクセシビリティとは アクセシビリティとは、情報へのアクセスを全ての人が平等に行うことができる状態を意味します。ウェブアクセシビリティは具体的には、視覚・聴覚などの障害を持つ人々や、高齢者などがウェブサイトやアプリケーションを利用する際に遭遇する可能性のある困難を解消することを目指します。 React開発においても、アクセシビリティの確保は重要な観点となります。この記事では、その実現をサポートする一部のツールを紹介します。 アクセシビリティのチェックツール eslint-plugin-jsx-a11y React開発においては、コーディングの初期段階からアクセシビリティの問題を特定することが重要です。その一助となるのがESLint
今回は「tremor」というUIライブラリについて紹介します。ReactでTailwindCSSを採用していれば、管理画面を楽に作ることができるのでは?というとても良い感触でした。その感動を爆速でブログにまとめてみました。一応ひな形も作ったのですぐお試しすることができます。一度、公式のリファレンスを覗いてみてください。使えるコンポーネントがあるかも! ご挨拶とガイド どもども!突然のゲリラ豪雨と雷によって、一時家が停電して大慌てな龍ちゃんです。ピカッと光って家が静かになってしまったのでビビり散らかしました。内心ビビっていても、意外と冷静なものでブログを書く手は止まりませんでしたねw。まぁネット必須の作業ではなかったので、特に問題もなかったが救いです。 今回は、友達のエンジニアから共有情報が飛んできたので勉強しました。「tremor」というUIライブラリになります。なんと!これは僕が大好きな
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います(@t_keshiさんありがとうございます!)。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
React開発におけるベストプラクティスである、bulletproof-reactを紹介します。 bulletproof-reactはReactアプリ開発のベストプラクティスとして作られたリポジトリです。 Reactには多くのライブラリがあり便利ですが、その反面多過ぎてどのライブラリを利用するのが良いのか選定に悩む場合があります。また、Reactはディレクトリ構造など自由に作ることができ柔軟性があります。しかし、ある程度決められた構成が無いと、コードに一貫性が無くなったり、複雑で読みにくくなる場合があります。bulletproof-reactでは、パフォーマンスや保守性、拡張性を踏まえてどのようなプロジェクト構成が良いかを提案しています。もちろんあくまで参考程度であり、実際に採用するかは個人の判断になります。 プロジェクト構成 bulletproof-reactで勧められている、React
StorybookはUIコンポーネントをアプリケーションから独立した状態で開発を行うためのツールです。propsを通してさまざまなバリエーションのデザインをブラウザ上に静的に表示させることがでできます。さらにブラウザ上からpropsの操作、外部リソースからのデータ取得、またテストライブラリーを利用して関数の実行、テストを行うことも可能です。またStorybookに登録したコンポーネントは自動でドキュメント化することができるのでドキュメントツールとして利用することもできます。 StorybookはReactに限らず、Vue.js, React Native, Svelte, Amber, AngularなどさまざまなJavaScriptフレームワークに対応しています。本文書ではVite上に構築したReact+TypeScript環境にStrorybookをインストールします。シンプルなコード
npm install --save-dev ってどういう意味 npm install と npm install --save-devの違いは、パッケージを本番環境で使うか、開発環境で使うかだけの違いです。 npm install でインストールしたパッケージは、本番環境で使うパッケージとして package.json の dependencies に追加されます。 対して npm install --save-dev は開発環境で使うパッケージとして devDependencies に追加されます。 調べてみると意外と単純でした。 "dependencies": { // npm install コマンドを使ってインストールしたパッケージ // 本番環境で使うパッケージ }, "devDependencies": { // npm install --save-dev コマンドを使って
こんにちは、フォルシアエンジニアの籏野です。 先日Next.js 13.4が発表され、App Router が Stable 版になりました。 App Router では最新の React の機能を利用することが可能になっており、その中でも特に注目したいのが React Server Components です。 これまでの Next.js では SSR 時にフェッチしたデータを利用する場合、getServerSidePropsやgetStaticPropsを利用していました。 これらの関数で取得したデータをコンポーネントに props として渡して SSR を行っていましたが、props のバケツリレーが長くなってわかりづらくなったり、非同期の処理に時間がかかって初期の描画が遅くなるといった問題がありました。 React Server Components(以後、RSC)の大きな特徴とし
React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう wakamsha Vite (ヴィート)とは Vue.js の作者である Evan You 氏が中心となって開発されているビルドツールです。 Vite - Next Generation Frontend Tooling ES Modules 形式のままブラウザからインポートする Dev サーバを搭載し、ソースコードをバンドルすることなく高速で動作させるのが特徴です。もちろん npm パッケージもブラウザから読み込み可能な ES Modules 形式に変換します。プロダクションビルド時は Rollup を使ってバンドルします。 Vue.js だけでなく React、Preact、Svelte のビルドもサポートしており、GitHub トレンドの上位にも頻繁に登場している
こんにちは、上條(mk-0A0)です。 早いものでこの web 業界に入って3年目に突入しました。新卒時にはすでに React が普及していたため、私はそれ以前の React を使わない開発の経験がありません。 ちょうど読んでいた『りあクト! TypeScriptで始めるつらくないReact開発 第4版【② React基礎編】』でフロントエンドの歴史について解説されていたので、React が誕生するまでの経緯を自分なりにまとめてみます。 React が生まれるまでのフロントエンドの歴史「8-1. React の登場に至る物語」 P.119 の内容をもとに年表を作成してみました。書籍では約8ページに渡って React が登場するまでの大きな出来事がまとめられています。私のように、すでに React が普及してから働きはじめた人にとっては過去のことが分かる内容なのでぜひ書籍を読んでみてください
こんにちは稲葉です。最近ソフトウェアテストの学習をしていた事もあり、ソフトウェア開発において、品質保証とバグの早期発見は非常に重要だと感じました。そのためには、効果的なユニットテストが欠かせません。 なので、今回はTypeScriptとVitestを使用した、ユニットテストの実施方法を解説します。 Vitestとは Viteネイティブの超高速ユニットテストフレームワーク。 参考資料:Vitest公式ドキュメント また、Jest互換でTypeScriptやJSXに対するサポートもあります。 ちなみにVite(ヴィート)は、モダンなWebプロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツールです。 詳細につきましては、公式ドキュメントを参照ください。 Vite公式ドキュメント 実行環境の準備 はじめにTypeScriptとViteをインストールします。 yarn
フロントエンドエンジニアの茶木です。 APIでデータの再取得を行うフックの実装方法を考察しています。 再取得機能のない getApi のフックの実装と使用例useGetApiまず、単純に APIでのデータ取得をコンポーネントで扱いやすくするフックの実装が以下です。 引数の getApi には async() => await axios.get("path") が入る想定です。 コンポーネントマウント時だけ、useEffect 内で geApi がコールされてデータの取得が行われます。 import { AxiosResponse } from "axios"; const useGetApi = <Res>( getApi: () => Promise<AxiosResponse<Res, undefined>> ): Res | undefined => { const [data,
はじめに 今回はフロント学習で重宝できる教材をまとめました。 軽く自己紹介として、自分は新卒でフロントエンジニアとして入社し2022年で2年目になります。 実際に実務を通す中で「この教材のおかげで実装がスムーズにできた」「この教材をやってたおかげで理解ができた」といったような場面が2年の間で多々ありました。 今回紹介する教材は自分自身が実際に使ってよかったものかつ、そのほとんどが無料で学べるor低価格の教材になっています。 「フロントエンドを網羅的に学べかつ実務の基礎作り」という目的で教材を紹介します。 この記事の主な対象者 フロントエンドの学習をこれからしていきたい人 何を学べばよいのかがわからない人 HTMLとCSSはある程度かける人 この記事の目標 フロント学習の指針が立てられる 実務現場でも活用できるスキルを学べる教材を知れる JavaScript ドットインストールのJavaSc
アプリをストアに公開後、半年に1回のペースでアップグレードを行ってきました。短いものだと1週間、長くて約2ヶ月かかってます。 0.46.2 -> 0.50.4 の思い出 初めてのアップグレードだったのでとにかく大変だった印象です。11月から着手して、クリスマスがすぎ、大晦日がすぎ、正月がすぎてもなかなかエラーが解消せず、先が見えない不安がありました。今でも覚えているのが、AIRMap(いまはreact-native-maps)とfbsdkです。AIRMapはAirbnbが開発していたライブラリでその名の通り地図表示なのですが、ネイティブ層のビルドエラーで苦しんだ記憶があります。かなりObjective-Cのソースコードを読みました。のちのAirbnbのReact Nativeやめる宣言により、ライブラリ開発がどうなるか心配だったのですが無事にReact Native Communityに移
突然ですがReactではReduxを利用することですべてのコンポーネントからアクセス可能なデータを一箇所で一元管理することができます。 アクセス可能なデータを一元管理??Reactの初心者の方であればデータを一元管理するということがどういうことを言っているのかも理解し難いかもしれません。Reactでは複数のコンポーネントを構成してアプリケーションを構築するためコンポーネント間でデータの受け渡しが必ず必要になります。コンポーネント間でデータを渡す場合は親コンポーネントから子コンポーネントへpropsを使って行います。しかしpropsでは親子関係のないコンポーネント間ではデータを渡すことができません。また親と子のみの関係であればpropsを一度渡すだけでいいのですが子コンポーネントにさらに子コンポーネントがあるとpropsをバケツリレーのように渡していなかければなりません。どのコンポーネントか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く