ES6のimport/exportを理解する[javascript]

React Nativeをやってると暗黙の了解として、import/exportが使われてる。 requireで書いてたみたいだけど、その歴史を知らないのでrequireは気にしないでimport/exportを理解する。

下記のようにlib.jsとmain.jsがあった場合、importするファイルのlib.js内でfunctionをexportしておくと import {} fromでそれを個々に呼ぶことができる。

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}
const foo = Math.PI + Math.SQRT2;
export { foo };

//------ main.js ------
import { square, diag, foo } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

またアスタリスクを使用することで、オブジェクトを参照してexportした関数が呼べる。

//------ main.js ------
import * as lib from 'lib';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5

default

よくわからないのがexport default。 セミコロンなしで呼ぶことで関数・クラスをそのまま呼べる。 読む込むファイルごとに 1 つだけ呼ぶことができる。

//------ myFunc.js ------
export default function () { ··· } // no semicolon!

//------ main1.js ------
import myFunc from 'myFunc';
myFunc();
//------ MyClass.js ------
export default class { ··· } // no semicolon!

//------ main2.js ------
import MyClass from 'MyClass';
const inst = new MyClass();

defaultは一つだけというのがポイントですね。

WordPressを入れたらまず始めにインストールすべき3つのプラグイン

All in One SEO

https://ja.wordpress.org/plugins/all-in-one-seo-pack/

SEO対策は必須です。投稿する前に導入することでパーマリンクなどの基本的なSEOを設定します。後からだと色々めんどくさいので。

Simple Custom CSS

https://ja.wordpress.org/plugins/simple-custom-css/

テーマのスタイルシートをいじるのではなく、カスタムCSSで上書きするようにします。font-familyfont-sizeなどはテーマのデフォルトから変えるケースが多々あると思います。

WP Social Bookmarking Light

https://ja.wordpress.org/plugins/wp-social-bookmarking-light/

デフォルトではソーシャルボタンがないので拡散しません。日本のサイトで必要なHatenaブックマークが入っているのが大事。

おまけ

Markdown記法で書きたい人はJP Markdownを入れるといいと思います。

https://ja.wordpress.org/plugins/jetpack-markdown/