Material-UIでヘッダーを作る【React】
Material-UIを使って、ReactのHeaderコンポーネントを作成する。
準備
以下のコマンドでMaterial-UIをインストールする。
npm install --save @material-ui/core npm install --save @material-ui/icons
コード
import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; import Button from '@material-ui/core/Button'; import IconButton from '@material-ui/core/IconButton'; import MenuIcon from '@material-ui/icons/Menu'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemText from '@material-ui/core/ListItemText'; import Drawer from '@material-ui/core/Drawer'; import { Link } from 'gatsby'; const styles = { list: { width: 250, }, root: { flexGrow: 1, }, menuButton: { marginLeft: -12, marginRight: 20, }, }; class Header extends Component { state = { left: false, }; toggleDrawer = (side, open) => () => { this.setState({ [side]: open, }); }; render () { const { classes } = this.props; const sideList = ( <div className={classes.list}> <List> <Link to="/"> <ListItem button> <ListItemText primary="Home" /> </ListItem> </Link> <Link to="/about"> <ListItem button> <ListItemText primary="About" /> </ListItem> </Link> </List> </div> ); return ( <div className={classes.root}> <AppBar position="relative" color="inherit"> <Toolbar> <IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={this.toggleDrawer('left', true)}> <MenuIcon /> </IconButton> <Drawer open={this.state.left} onClose={this.toggleDrawer('left', false)}> <div tabIndex={0} role="button" onClick={this.toggleDrawer('left', false)} onKeyDown={this.toggleDrawer('left', false)} > {sideList} </div> </Drawer> <strong> <Link to="/" style={{ boxShadow: 'none', textDecoration: 'none', color: 'inherit', fontFamily: 'Montserrat, sans-serif', }}>Post Bank Extra</Link> </strong> </Toolbar> </AppBar> </div> ); } } Header.propTypes = { classes: PropTypes.object.isRequired, }; export default withStyles(styles)(Header);
ほぼMaterial-UIのデモコードのコピペ。
stylesは、それぞれのコンポーネントに指定するCSSスタイルを記述している。
sideListで、メニューを開いたときのリンクのリストを作成する。今回はgatsbyのLinkコンポーネントを使用しているが、react-router-domとかのLinkでもOK。
メニューを開くかどうかは、stateで管理している。
withStylesは、Material UIのCSS in JSのAPIで、CSSを記述したstylesを引数にとって、classesプロパティを持ったコンポーネントを返す。className={classes.root}などと指定すると、stylesで指定したCSSスタイルを適用することが出来る。
見た目
メニューアイコンをクリックすると、左からメニューが出てくる。
まとめ
ReactのCSS適用って色々方法あってどれが最適なのかよくわからない。
上の例みたいにwithStyles使ったり、styleで直接適用するのを混ぜるのは多分間違ってる。
Gatsby.jsで爆速で爆速のブログを作った
Gatsbyは、React用の静的サイトジェネレーターです。
Gatsby + Github pagesでブログを作ってみました。まだまだGatsbyについては理解が整理できてないので、解説は後ほど。
とりあえず、Post Bank Extraもよろしくお願いします。
まだコンテンツが全然ないからか、Gatsbyの実力か、阿部寛のホームページ並みに爆速です。
Post Bank Extra 
追記 2018.12.7
すみません。こちらのブログ一旦メンテナンス中です。
Githubのアカウント切り替えに苦労した話
はじめに
仕事用にGithubのアカウントは持っていたが、プライベート用にもう一個アカウントを作って自由に切り替えられるようにしたかった。今までのアカウントは全部HTTPSでcloneとかpushしてたので、最初プライベートアカウントもHTTPSでやろうとしたけど、Permission Errorが出て解決できなかったので、プライベートはSSHでやることにした。
Permission Errorの原因は、ここに書いてあることっぽい。要は、Githubのcredential helperという認証情報を記憶する仕組みによって、仕事用のアカウントでプライベートアカウントにアクセスしようとしたのが原因。
以下には、SSHを設定する方法を記載する。
手順
いろんな方が既に記事にしてる通り、
1. ローカルでSSHキーペアを生成する
2. 生成したSSHキーの公開鍵をGithubに登録する
3. ~/.sshのconfigを編集する
4. リポジトリのconfigにユーザー名、メールアドレスを設定する
1. ローカルでSSHキーペアを生成する
以下のコマンドでSSHのキーペアを生成する。
cd ~/.ssh ssh-keygen -t rsa -C [メールアドレス] -f [キーのファイル名]
2. 生成したSSHキーの公開鍵をGithubに登録する
サブアカウントでGithubにログインして、以下のページのNew SSH keyから生成したSSHキーの公開鍵を登録する。
github.com
Titleの欄には、自分で後から見て判断しやすい名前を入力。
このコマンドで公開鍵の中身をクリップボードにコピー出来るので、Keyの欄にペースト。
cat ~/.ssh/[ファイル名].pub | pbcopy
3. ~/.sshのconfigを編集する
~/.ssh/configに以下を追記する。（なければ新規作成する。）
Host github.com HostName github.com User git Port 22 IdentityFile ~/.ssh/[1.で生成したSSHキーのファイル名（拡張子なし）] TCPKeepAlive yes IdentitiesOnly yes
ここの設定で最初1行目をHost github.com.privateと書いていたが、これだとSSHで通信できなかった。ここの記事にあるように、リモートリポジトリを設定するときにHost名を変えなきゃいけないらしい。今回はプライベートアカウントだけSSHキー登録したので、デフォルトのHost github.comにした。
4. リポジトリのconfigにユーザー名、メールアドレスを設定する
これでPermission errorで弾かれることはなくなったが、pushしてみると、仕事用のアカウント名でpushされるので、以下のコマンドでユーザー名とメールアドレスを登録する。このコマンドは、リポジトリ毎に打たないといけない。
git config user.name [プライベートアカウントのユーザー名] git config user.email [プライベートアカウントのメールアドレス]
これでプライベートアカウントの設定は完了。
まとめ
SSH接続自体は今回初めてではなかったが、Githubに設定したのは初めてだった。少し勉強になった。
参考
人のブログばっかり読んでないで手を動かせ
ジャバザハットリ氏のブログが面白くてずっと読んでしまう。
内容は海外移住の話、技術的な話、英語学習の話、出会う人の話、公開したサービスの話などなど。どれもこれもハットリ氏が自分自身の目で見て、肌感じた経験を基に丁寧に書かれている。その一つ一つの経験が日本でのうのうと暮らしている私には、体験したことのないものばかりでキラキラして見える。このブログを読んでいると改めて感じる。やっぱり経験は宝だな、と。
お前もハットリ氏と同じエンジニアならブログばっかり読んでないで手を動かせ！（自分に向けて）
ベルリンのITスタートアップで働くジャバ・ザ・ハットリの日記
追記（2018.11.8）
憧れのジャバザハットリ氏が私の記事をツイートしてくれました！
こんな言及ありがとうございます。私も手を動かすようにしよっと / “人のブログばっかり読んでないで手を動かせ - Post Bank” https://t.co/5aTpToObWd
— Jabba_the_Huttri (@nodenodenode1) 2018年11月7日
