create-react-appで作ったReactのプロジェクトにCSS-in-JSのライブラリEmotionとTypeScriptを導入した際にエラーが出る場合の対策方法です。
docker-compose up -d
でコンテナを起動
/wp-json/wp/v2/postsにアクセスするとエラーが出てREST APIが使えない場合はWordPressのパーマリンクの設定を
http://localhost:3000/sample-post/
となるようにする。
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の時と同様です。
MacOSをMojaveにアップデートした後ターミナル上でGitが動かなくなりました。具体的には以下のようなエラーが出ました。
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
続きを読む
コードのインデントや改行、セミコロンの有無などのフォーマットをファイル保存時に自動で行います。問題があるコードではエラー表示をしてくれます。
続きを読むJavaScript (ECMAScript 6) ES6のアローファンクションの書き方をメモしておきます。
const func = x => {
return x*2
}
console.log(func(4))
実行結果:8
引数 => { ファンクションの中身 } という書き方です。
const func2 = (x,n) => {
return x * n + 1
}
console.log(func2(2,4))
実行結果:9
引数が複数ある場合はカッコで括ります。
codepenでconsoleを表示すると実行結果を確認できます。
COSMIC JSはCMSサービスを提供しています。
管理画面よりコンテンツを追加でき、APIリクエストで得たJSONを元に自分の好みのフレームワーク(React,Vue,Gatsbyなど…)でその内容を表示できます。またホスティングサービスも提供しています。デプロイ機能を使ってGitHubのリポジトリから開発したウェブサイト・アプリケーションをCOSMIC JSやNetlifyなどのホスティングサービスへ向けデプロイ可能です。
この記事ではCOSMIC JSの導入について説明していきます。
続きを読むSheetsなどで作ったGoogle Action ScriptのdoPost()の実行結果を確認する方法を紹介します。
続きを読むXserver上にGitをインストールしてベアリポジトリを作成した際にローカルへクローンする方法をメモしておきます。
続きを読むFirebaseの管理画面で追加したプロジェクト名がfirebase initしても表示されない場合、以下のコマンドで明示的に初期化します。
firebase init --project プロジェクトID