Prismaの導入とメリットを考える - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Node.js + TypeScriptによるサーバーサイドの開発は、クライアントサイドとスクリプトを同じ言語で管理できるなどのメリットがあります。 その際に使用するのが、Node.jsウェブフレームワークであり、データベース連携は必要不可欠です。 ですが、普段データベースに触れる機会が少ないデータベース初心者にとって、SQL文を書くのはハードルが高く感じます。 そういった状況で役に立つのが、「Object-Relational Mapping / オープンソースのオブジェクト関係マッピング」(以降ORM)です。 「Prism
CSS-in-JSのパラダイムシフト
2023年現在、Reactでは多種多様なスタイリング手法が用意されています。 代表どころで言うとCSS ModulesやTailwind、CSS-in-JSなどが有名です。筆者の個人的な好みでは、これらの選択肢の中でもCSS-in-JSを用いたスタイルが特に好きですが、CSS-in-JSライブラリ群の中にはランタイムでスタイリング処理がなされる為にパフォーマンス上の問題を抱えているとの指摘を受けているものもあり、最近は人気が下火になっているように感じています。 そこで本記事では、CSS-in-JSが生まれた背景から遡り、各ライブラリの内部実装を確認しながらそれぞれのライブラリの仕組み・メリット・問題点を明らかにし、CSS-in-JSのパラダイムシフトを追ってみたいと思います。 CSS-in-JSの登場 CSS-in-JSという言葉が最初に公の場で登場したのは、2014年にFacebookの
styled-components: API Reference
CSS for the <Component> AgeStyling your way with speed, strong typing, and flexibility. const Button = styled.a<{ $primary?: boolean; }>` --accent-color: white; /* This renders the buttons above... Edit me! */ background: transparent; border-radius: 3px; border: 1px solid var(--accent-color); color: var(--accent-color); display: inline-block; margin: 0.5rem 1rem; padding: 0.5rem 0; transition: all
【React+TypeScript】Netflixのクローンを作るチュートリアル
このチュートリアルではNetflixクローンを作る過程で、React・TypeScriptの基礎やAPIを利用したWebサービス開発について学んでいきます。 【学べる事】 - Reactの関数コンポーネントとTypeScriptの基礎理解 - React Hooksによるstate管理 - Reactでの外部APIとの連携方法 - Postmanを使ったAPIテストの方法 - コンポーネント分割の考え方 - Tailwind CSSの基礎理解 - Vercelを使ったデプロイ方法 【余談】 また直接、プロダクトコードには関連しないですが、余談として以下の解説も行なっています。 - APIとは？ - HTTPステータスコードのついて - ReactフレームワークとReact環境の選択肢 - .envについて - 非同期処理について - スプレッド構文とは？ - 三項演算子 VS 条件式(if
今からでも遅くない！誰も教えてくれなかった React とアクセシビリティーの世界
この記事は Front-End Study #3 で発表されたライブコーディングの内容を記事にしたものです。記事中のソースコードは GitHub でご覧いただけます。 この記事は、これまで一般的なフロントエンドエンジニアだった私が一年ほどアクセシビリティーについて勉強する上で 「最初に教えてくれればよかったのに〜！」と思った内容 を React と Next.js を用いて紹介するものとなっています。 読み終わった後に次にコードを書く際にふと意識できるようなアクセシビリティーの普遍的な事実を紹介し、最後に今後の React の動きについて軽く触れるものになっています。目次は次のとおりです： 基本事項 SPA のルーティングによる問題 リッチなコンポーネントでの例 Jest + React Testing Library でのテスト Reactとアクセシビリティーの今後の動き 役に立つweb
Reactシングルページアプリケーションをサーバサイドレンダリングする - オフトゥン大好き。
どうも、 @nukosuke です。 こちらはQiita Advent Calendar '17 React #1、3日目の記事です。 概要 この記事ではReactで構築したシングルページアプリケーション(SPA)をサーバサイドレンダリング(SSR)する過程をまとめました。 つかったもの Node.js TypeScript React ReactRouter Koa Webpack 成果物 まずは出来上がったものから。こちらのリポジトリをcloneして以下のように起動できます。 $ npm run build:server # サーバjsをビルドします $ npm run build:client # クライアントjsをビルドします $ npm start # localhost:3000で起動します 手順 ざっくりとした手順ですが、今回やったことを要約すると以下のようになります。 Ko
React – ユーザインターフェース構築のための JavaScript ライブラリ
React は、インタラクティブなユーザインターフェイスの作成にともなう苦痛を取り除きます。アプリケーションの各状態に対応するシンプルな View を設計するだけで、React はデータの変更を検知し、関連するコンポーネントだけを効率的に更新、描画します。 宣言的な View を用いてアプリケーションを構築することで、コードはより見通しが立ちやすく、デバッグのしやすいものになります。 自分自身の状態を管理するカプセル化されたコンポーネントをまず作成し、これらを組み合わせることで複雑なユーザインターフェイスを構築します。 コンポーネントのロジックは、Template ではなく JavaScript そのもので書くことができるので、様々なデータをアプリケーション内で簡単に取り回すことができ、かつ DOM に状態を持たせないようにすることができます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactを学ぶ上で知っておくべきJavaScriptの基本概念 - Qiita
Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガク
export defaultってなんだろう - Qiita
if文はJSXの中で書け - Qiita
【基礎】ReactでServer Side Rendering - Qiita
react-helmetでheadにインラインJavascriptを記述したい時のメモ - Qiita
JSXの中にインラインスクリプトを埋め込む - React | nju33
React製のSPAのパフォーマンスチューニング実例