コードのインデントや改行、セミコロンの有無などのフォーマットをファイル保存時に自動で行います。問題があるコードではエラー表示をしてくれます。
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()の実行結果を確認する方法を紹介します。
続きを読むPhotoshopで書き出したSVGファイルがChromeで表示されない場合の対策方法を紹介します。
SVGファイルをテキストエディタで開き、img/pngとなっている部分をimage/pngに修正します。
シンタックスハイライターの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を使用した動作サンプルはこちらです。
gatsbyのページ遷移アニメーションをつけるプラグインgatsby-plugin-page-transitionsは廃止されたAPIを使用しているのでgatsby buildコマンドでのビルドが通りません。(gatsby developは通ります。)
Netlifyにもデプロイできないので使うのをやめました。ちなみにエラーメッセージは以下の通りです。
error
Your plugins must export known APIs from their gatsby-browser.js.
The following exports aren't APIs. Perhaps you made a typo or your plugin is outdated?
See https://www.gatsbyjs.org/docs/browser-apis/ for the list of Gatsby Browser APIs
- The plugin "gatsby-plugin-page-transitions@1.0.7" is exporting a variable named "replaceHistory" which isn't an API.
npm install --save node-sass gatsby-plugin-sass
続きを読む
Gatsby.jsでサイトマップを作成するプラグインgatsby-plugin-sitemapの設定方法です。
続きを読む