shimotsu

Frontend Engineer / Podcaster / Bloger / Bass Fishing / https://shimotsu.me http://shimoqui.com/ http://shimotsumagari.net/

Reactのstyled-componentsでスタイルを書く場合について

Reactでスタイルを記述するとき、大きく(1)外部ファイルでsassなどで記述する方法、(2)`styled-components`を使ってコンポーネント内に記述する方法(いわゆるCSS in JS)がある。

今携わってるReactのプロジェクトではどちらもある。ただ、新しくプロジェクトに参加したメンバーとして、スタイル面の保守性という軸で考えると、(2)の方が優れているのではないかと思う。

もっとみる

ES6においてアロー関数をexportするときの書き方

別のファイルからアロー関数で書かれた関数をexportするとき方法にちょっと迷ったのでメモ。

// NGexport default functionName = () => { ... }export functionName = () => { ... }// OKexport const functionName = () => { ... }

結論を言えば、`export const

もっとみる
ありがとうございます。ここには35文字しか書けないのですが、本当はまだ
1

WordPressで第二回層目の固定ページのテンプレートを作る

WordPressでサイトを作っていて、例えば以下のように2階層目まで固定ページを作りたいとする。例はとある会社の事業について。

① http://sample.com/service (事業トップ)
② http://sample.com/service/hoge (hoge事業)③ http://sample.com/service/fuga (fuga事業)

このとき、①の固定ページ専用

もっとみる

SourceTree上でHunkが破棄できないときの対処法

普段、Gitの管理はSourceTreeを使うようにしているのだけど、変更範囲を破棄したいとき(Hunkを破棄)にたまにエラーが出ることがある。

今回のエラーは`'git apply' failed with code 1:'error: patch failed:`というコードで、結局「空白文字を無視」という設定にすれば直るものだった。
ただ、それ以外にもSourceTreeでうまくHunkを

もっとみる

【React】Functional ComponentとClass Componentの違い

Reactコンポーネントには大きく分けて2つのコンポーネントがある。それFunctional ComponentとClass Component。

Functional Component

const Hello = (props) => { return <div>こんにちは、{props.name}さん</div>}

Class Component

class Hello extend

もっとみる

Facebookのシェアボタンの文言を外国語に変える方法

Webサイトの外国語対応などで、あわせてFacebookのシェアボタンの文言を変えたいケースがある。

方法は簡単で、<body>直下に埋め込むスクリプトタグを書き換えればいい。

// <body>タグ直下に埋め込むスクリプト<div id="fb-root"></div><script> (function(d, s, id) { var js, fjs = d.getElem

もっとみる