【JavaScript】default export と default import について
モジュールの読み込み時によく見かける {} と
そうでないものの違いがわからなかったのでまとめてみました。
今回は default export と default import について。
import React from "react";
import { BookDescription } from "./BookDescription";
default export (名前なしexport)
- 他のファイルで利用するために export を宣言する
- アロー関数だとファイルの最後に
export default (関数名)を追記 - 名前付き関数だと関数宣言時に
export defaultを追記
//アロー関数
const Title = (props) => {
return <h2>{props.title}</h2>
}
export default Title;
//名前付き関数
export default function Title(props) {
return <h2>{props.title}</h2>
}
default import (名前なしimport)
- default export で指定した名前を import 時につける
- default export でファイルごと読み込む時は ファイル名も同じ名前であることが多い
// Title.jsx ~~~ export default Title;
// App.jsx import Title from ".Title";
おわり
この辺り意外とこんがらがっているので改めて整理できてよかったです。
明日は名前付きのexport import についての記事を書こうとおもいます。
おしまい
【typescript】interfaceは拡張ができる、typeは拡張ができない
今回は type と interface の違いについて。
# オブジェクトに型を定義する
アノテーションの部分をオブジェクト{}にすることで可能。
※型アノテーション = stringやbooleanのような注釈をつけて型を定義すること
//通常の型アノテーション
let name: string = "tamakipedia";
//オブジェクトの場合
let obj: {name: string, age: number, isHandsome: boolean} =
{
name: "tamakipedia",
age: 20,
isHandsome: true
}
interface
オブジェクトの型アノテーションは長すぎると読みづらいので
名前をつけることが可能。
// オブジェクトの型を定義
interface Human {
name: string,
age: number,
isHandsome: boolean
}
//型をHumanにする
let obj: Human =
{
name: "tamakipedia",
age: 20,
isHandsome: true
}
let obj.name = 20 //Type 'number' is not assignable to type 'string'
type
interfaceもtype同様、型に名前をつけて参照できるようにします。
こちらはタイプエイリアスと呼ばれるそうです。
// 代入してる
type Human = {
name: string,
age: number,
isHandsome: boolean
}
type と interface の違い
interfaceは拡張ができる
interface Human {
name: string,
age: number,
isHandsome: boolean
}
//新しいプロパティを追加
interface Human {
isAdorable: boolean
}
//型をHumanにする
let obj: Human =
{
name: "tamakipedia",
age: 20,
isHandsome: true,
isAdorable: true
}
おしまい
今読んでいる参考書にはinterfaceを使っていることが多く、
別の記事にtypeを使ったチュートリアルがあったので調べてみました。
拡張できると可読性が低くなるので使用注意ですね！！
HeadlessCMS と 従来のCMS との違い
Contentfulの設定方法
こんにちはkoです。
来年に向けてブログのリニューアル行っています。
Contentfull × Vercel × Next.js でブログを作成しようと思っています。
今日はそのうち、Contentfulに関する設定方法を記述していきます。
目次
Contentfulとは
Contentfulとは、「Headless CMS」 と呼ばれるAPIベースのCMSです。
Contentful以外にも、GraphCMS、Micro CMS などがあります。
Headless CMS ツール比較参考記事
https://wk-partners.co.jp/homepage/blog/hpseisaku/htmlcss/headless-cms/
初回登録
下記リンクから初期登録します。
https://www.contentful.com/sign-up/
githubを連携したら自動的にサインアップできます。
完了したらログインし、
Space、ContentModel、Field、Contentの作成を行います。
Space
Spaceはブログごとの単位のことを指します。
(GitHubでいうリポジトリのようなものだと捉えています。)
設定方法：
「左上のハンバーガーメニュー」＞「Create Space」
ContentModel
In short, a content model gives structure and organization to your content. Within your overall content model
ContentModelはコンテンツの構造のことです。
例えばブログを書くのであれば「タイトル」「画像」「内容」などの項目が設定されると思います。
その項目に関する仕様のことです。
ここでは content type(=モデル名) を設定します。
設定方法： 「左上にあるAdd content type」>「モーダルの項目を記述」
モデリンクに関するリファレンス
https://www.contentful.com/help/content-modelling-basics/
Field
Fieldは「タイトル」「サムネ」「記事本文」などといった
コンテンツ内の項目のことです。
設定方法：
「add field」>「モーダルに表示される9つの型を選択」>「ラベル名や詳細の設定」
Content
Contentでは、実際にモデルで設定した仕様に従ってコンテンツを作成することができます。
おしまい
以上がContentfulの設定になります。
最初調べた時は2~3時間くらいかかったのですが
まとめてみると意外と手順が少なくてびっくりしました。
そういった手軽さも従来のCMSと比べて良いですね！
次は少し気になったHeadless CMS と 従来のCMS の具体的な違いについて
自分なりにまとめてみようと思います。
おしまい
【React】関数コンポーネントとクラスコンポーネントの違いについて
コンポーネント
クラスコンポーネント
① React.Component を拡張して作られるJavaScriptクラスである。
import React, { Component } from "react"; //拡張する Component をインポート
class ClassComponent extends Component { // extends で拡張したクラスを生成
render() { // レンダリングする要素は render() メソッド内で返される
return <button>push here</button>;
}
}
② propsの受け渡しは this.props を使う (プロパティー)
class ClassComponent extends React.Component {
render() {
const { who } = this.props;
return <button>push { who }</button>;
}
}
③ state処理はconstructor内に記述する
class ClassComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>count: {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click
</button>
</div>
);
}
関数コンポーネント
① React.Component を拡張して作られるJavaScriptクラス。
import React from "react";
const FunctionalComponent = () => {
return <button>push here</button>;
};
② props の受け渡しは引数にて行う。
const FunctionalComponent = ({ who }) => {
return <button>push { who }</button>;
};
// <FunctionalComponent who="me" />
③ state処理はuseState()を使う。
const FunctionalComponent = () => {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>{count} time(s) pushed </button>
</div>
);
};
【Typescript】モジュール 'styles/***.css' またはそれに対応する型宣言が見つかりません。
typescriptに scss を import しようとするとエラーになってしまう。
解決
next-env.d.tsファイルに以下を追記
//make it possible to import scss file declare module '*.css'; // or scss declare module '*.scss';
これで import が可能になります。
参考：How to fix TypeScript cannot find module CSS/SCSS in Next.js
PHPで「Parse error: syntax error, unexpected '['が出た時の解消法
はじめに
wordpressサイトの目次に関する不具合の改修を行なっている際に起こったエラーのメモです。
次のような配列を作成しようとすると
「Parse error: syntax error, unexpected '[' in ～」というエラーになりました。
<?php $a = [ 'foo' => 'hoge', 'bar' => 'hoge' ]; ?> var_dump($a);
原因
PHP5.4以降から配列の短縮構文が追加され、array関数の代わりに短縮構文[]が使えるようになりました。
//①
<?php
$array = array(
"a" => "b",
"c" => "d",
);
//②
$array = [
"a" => "b",
"c" => "d",
];
?>
PHP 5.4 以前は①、それ以降は①、②の両方が利用できます。
使っているPHPのバージョンが 5.4 以下だったために起こったエラーでした。
対処
array関数を使用して以下のような形を取りました。
$array = array();
参考： PHP: 配列 - Manual
エラーにぶつかった際に、バージョンによるものか？と疑う視点も必要なのだと勉強になりました。
