CSS-in-JSのライブラリEmotionでエラーが出る場合に確認すべき点をメモしておきます
/** @jsx jsx */
を忘れていませんか?
creat-react-appでEmotionとTypeScriptを後から導入した場合にエラー( jsx is not defined )が出る場合があります。
jsx;
を各種importの下に追加して明示的に配置することで解決する場合があります。
詳細はこちらの記事にも書いています。
create-react-appで作ったReactのプロジェクトにCSS-in-JSのライブラリEmotionとTypeScriptを導入した際にエラーが出る場合の対策方法です。
Reactで画像を表示する方法をメモしておきます。
create-react-appでプロジェクトを作成している場合、使いたい画像の画像のパスを指定してimportして {モジュール名}を使ってimportした名前で呼び出します。
具体的には以下のような形です。
import Icon from './images/icon.svg'
const IconComponent = () =>{
return <img src={Icon} alt="アイコン" />
}
export default IconComponent
SVGがうまく表示されない場合、SVGファイルをテキストエディタで開いてimg/pngになっている部分をimage/pngにすると表示されます。
create-react-appを使用せずwebpackでトランスパイルする場合はまずfile-loaderを追加します。
yarn add file-loader
webpack.config.jsのmoduleのrulesに以下の設定を追加します。
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',//
},
},
],
}
コンポーネントへのimportの方法については先に掲載したcreate-react-appの時と同様です。
コードのインデントや改行、セミコロンの有無などのフォーマットをファイル保存時に自動で行います。問題があるコードではエラー表示をしてくれます。
続きを読むCOSMIC JSはCMSサービスを提供しています。
管理画面よりコンテンツを追加でき、APIリクエストで得たJSONを元に自分の好みのフレームワーク(React,Vue,Gatsbyなど…)でその内容を表示できます。またホスティングサービスも提供しています。デプロイ機能を使ってGitHubのリポジトリから開発したウェブサイト・アプリケーションをCOSMIC JSやNetlifyなどのホスティングサービスへ向けデプロイ可能です。
この記事ではCOSMIC JSの導入について説明していきます。
続きを読むシンタックスハイライターのPrismを使っているのですが、Reactのコードを掲載するときにコンポーネント内のHTMLタグが残っていると消えてしまいます。
<と>でタグの<と>を置換すると正しく表示されます。
CodePenでご覧ください。
Font AwesomeというアイコンのフォントセットをReactで使うための方法を紹介します。
react-fontawesomeというnpmパッケージを使用します。
yarn add @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
まずApp.jsの中で必要なライブラリをimportします。
free-brands-svg-iconsは有名な会社のアイコンのセットで”apple”や “microsoft”や “google”などと表示することでそのアイコンを表示できます。
free-solid-svg-iconsにはUIに使うアイコン一式が入っています。
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons
library.add(fab, faCheckSquare, faCoffee)//あらかじめ使用するアイコンを追加しておく
そして、実際にアイコンを表示するコンポーネントでは以下のようにアイコンを呼び出します。
import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const Icons = () => (
<div>
チェック:<FontAwesomeIcon icon="check-square" />
コーヒー:<FontAwesomeIcon icon="coffee" />
Apple:<FontAwesomeIcon icon={['fab', 'apple']} />
Microsoft:<FontAwesomeIcon icon={['fab', 'microsoft']} />
Google:<FontAwesomeIcon icon={['fab', 'google']} />
</div>
)
export default Icons
実行すると以下のようになります。(上記ソースのままだと横並びになります。)
CodeSandBoxを使用した動作サンプルはこちらです。
サイトをGoogle Search Console(サーチコンソール)に登録する場合、適切なGoogle Analyticsタグが入っていればすぐに登録できます。しかし、Gatsbyで制作したサイトにgatsby-plugin-google-analyticsでGoogle Analyticsのタグを入れている場合うまく登録できませんでした。
今回はGoogle Analyticsのタグを使わずにSearch Consoleに登録する方法を試してみました。
続きを読むGatsby.jsでサイトマップを作成するプラグインgatsby-plugin-sitemapの設定方法です。
続きを読む