修正履歴 (2021.9.18)開発環境をつくる > React(Next.js)の場合 (2021.5.5)開発環境をつくる > Vue(Nuxt.js)の場合 > 4.(オプション)Sass(SCSS)が使えるようにする はじめに この記事はWordPressをCMSとして使用し、WordPress本体でのWebサイト構築、SSG(静的サイトジェネレータ)と呼ばれるVue(Nuxt.js)、React(Next.js)を使って構築してみて、構築方法や運用周りの違いのメリットやデメリットを書いてみます。 目的 開発者視点で、表示速度の早く快適なパフォーマンスを得られるwebサイトが構築できる技術選定ができるように。 閲覧者視点で、実際上記が体感ができるようにプロトを用意。 運営者視点で、新規ページ追加や、更新など柔軟にできるのかとか。 私の知識整理 私の知識整理 なぜWordPressか
1. はじめに React + Reduxで,ajaxでデータを取得してリストを表示しようとしたら,なかなかにハマったのでメモががてら共有したいと思います。(ひととおりドキュメントを読んでから実装したにも関わらず,ハマった。。。) 1-1. アウトライン 本記事のアウトラインは以下です。 はじめに 1-1. アウトライン 1-2. 作りたい機能概要 Middlewareの導入 Actionの実装 Reducerの実装 Componentsの実装 5-1. Container Component 5-2. Presentational Component まとめ 1-2. 作りたい機能概要 作るのは,ユーザの投稿(Post)の一覧を表示する機能です。サーバー側はGETリクエストすると { _id: 'aaaaaaaa', body: 'bbbbbbbb', created_at: 'cccc
TypeScriptでReduxのActionをどのように書くかは記事によってばらつきがあります。これからRedux+TypeScriptを書く人が迷わないようまとめたいと思います。 TL;DR String enumsを使おう。 TypeScript2.4からEnums にString enumsが導入されています。2.4+以降の環境であればString enumsを使うことでより型安全にReduxが書けるよって記事です。 Enumsを使わないパターン 少し古い記事だと次のようにActionのtypeが文字列定数で定義されているパターンをみます。 const INCREMENT_COUNTER = 'INCREMENT_COUNTER'; const DECREMENT_COUNTER = 'DECREMENT_COUNTER'; const INCREMENT_COUNTER: 'IN
redux-thunkをreactとtypescriptで使ってみたかったので、よくある簡単なカウンターを作ってみた。 ただ、typescriptに慣れてなかったりそもそもreduxに触ったばっかりって感じで、表示のガワ部分を作ったあとのactionやreducerあたりは全部presentationalなコンポーネントの中に書いている。 いきなりファイルを分けすぎるとかえって把握しづらかったため。 index.tsx import React from "react" import ReactDOM from "react-dom" import "./index.css" import * as serviceWorker from "./serviceWorker" import { Provider } from "react-redux" import thunk from "r
React useEffectとは useEffectは関数(Functional)コンポーネントのみで利用することができるHookです。useEffectのEffectは”Side Effect”(副作用)を意味しています。Side Effectにはfetch関数を利用して外部のリソースからデータを取得したり、DOMの更新、ロギング(console.logも含む)などの処理が含まれます。 useEffectを理解する上でclassコンポーネントに関する機能との比較は重要ではないかもしれませんが、useEffectはReact ClassコンポーネントのライフサイクルcomponentDidMount, componentDidUpdateとcomponentWillUnmountの3つと同様な処理を行うことができるHookです。 componetDidMountはコンポーネントのマウント
はじめに React 16.8から導入されたhooksにはuseEffectがあります。 詳細は公式サイトをまず参照しましょう。 useEffectを使うと、コンポーネントのレンダリングとは別に処理を書くことができます。useEffectでしばしば非同期処理を書くことがあります。例えば、サーバからのデータ取得の処理などがあります。 以下では、useEffectで非同期処理を書く場合の注意点を2つ紹介します。ケースによっては注意点はこの2つだけではない可能性が高いので、ご留意ください。 promiseを返さない useEffectに渡す関数の戻り値はcleanup関数です。 useEffect(() => { console.log('side effect!'); const cleanup = () => { console.log('cleanup!'); }; return clea
Node.jsでは環境変数はprocess.envというオブジェクトに格納される Next.jsでは以下で紹介する.env*で定義するとビルド時にprocess.envに設定してくれる .envファイルの種類 ファイル名 概要(何を定義するか) 読み込み 優先順位
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く