React.js+Redux+Bootstrapで簡単にboilerplateを作ってみた[React][Redux][Bootstrap][ES6]
お勉強の意味合い強めで、React+Redux+Bootstrapを合わせて一つ簡単な雛形のようなアプリケーションを作った。
JSはこれまでだいぶ疎くて、最近やっと勉強を始めた感じだけど、ES6だと割とすっと入ってくる感じがあってよいですね。
ちょっとずつ書けるようになってきていて楽しい！✌( ◔౪◔)✌
ここまで、ちょっと前にWebpackだったり、Babel、一人React.jsと、少しJS周りを中心に勉強をしてきて、勉強の復習だったりアウトプットの意味合いで一つサンプルアプリケーションを作ってみました。
内容としては簡単なCounterアプリで、基本的にはRedux本家リポジトリ内においてあったexampleを改造して作った感じ。
機能としては、
- increment
- decrement
- 奇数の時のみincrement
- 非同期処理で少し遅らせてからincrement
を行えるボタンをReact+Reduxで実装しました。
んで味気ないボタン群をちょっとでも美味しそうにすべく安定のBootstrapを使いました。
また、以下のリポジトリ等を参考にしつつ、簡単だけれど少しexampleのCounterアプリよりもディレクトリ構造を細かく切るようにしてみました。
. ├── actions ├── components ├── constants ├── containers ├── index.html ├── index.js ├── node_modules ├── package.json ├── reducers ├── server.js ├── store ├── test └── webpack.config.js
とりあえず今回作ったアプリケーションをひな形として使い始めれば、環境に関してはnpm installで整うし、npm startでサーバー立ち上がってブラウザで動作確認すぐできるし、一旦ディレクトリ構造で悩んだりはせずコードを書いて動くものを作っていくことに専念はできそうなので、とりあえず諸々は気にせずこれを使ってものづくりをしていけそう。
今後破綻する、とか全然ありそうだけどまずは現状初心者なのでコードを書く、という方向に意識を向けられるように下準備をまずやったイメージ。
また、環境周り正直理解しきれていないところもあるので、(server.jsとか自分で書いてないし)引き続き仲良く過ごしながらちょっとずつJSに慣れていって理解を深めていきたい。
とりあえずはReact+Reduxで作っていくときの処理の流れは下の図で見ていたイメージと実装のイメージが今回のサンプルを作ったことでだいぶ一致してきたので、とても大きな収穫だったかなと思います！
最初はfluxの基本的な図を見つつ、reduxの方の図も見始め、みたいな感じで理解を進めた記憶。
もし僕のようにこの辺り学んでみたいな〜とか思っている人は雛形のアプリケーションを作ってみるの結構おすすめかも知れないです。
当たり前のようにもうES6が使われているので、そのあたりもまるっと覚えられますw
Redux DevToolsについて
処理中の状態の変化などがわかる、便利そうなツールがあるようです。
めっちゃ良さそうだなぁ〜良いな〜とか思って入れようかと思っていたのですが、なんと今回試していたバージョンのReact0.14系 のサポートができていないようで、動作しませんでしたｗ
React 0.14 Support
React 0.14 support is coming in the next branch. Helps us test it to get it sooner
next branchで対応中だから待ってろ、みたいな感じでしたw
他の人からもいろいろとPRが来ているようでした。(nextブランチで対応しているから却下されていましたが)
ということもあり、一旦今回作った雛形には入れないことにしました。
先で紹介したreact-redux-starter-kitではパッチを当てるような形で使えるようにしていましたが、入れるかどうかは開発をし始めてみてから考えようかなと。
今後引き続きこのboilerplateを使って行って、自分でちまちまとアップデートしていきたいな。
今とかテストは一旦全然考えられてないし。
あとはJS界隈どういった構成にしたらいいかとかが本当にデファクトスタンダードのようなものがあるのかないのかよくわからない状態でとても初心者には辛い(ハードルが高い)ので、「今はこうしたらとりあえず良い」みたいなのがまとまってわかるとすごく嬉しい...
今のところコード書くとかよりもそういった「常識」とか「セオリー」みたいなのが全然見えないのが苦戦ポイントかもしれない。
とりあえずまだ立ち回りが鈍いので積極的に使っていって手に馴染ませていくぞ！！！１１とりあえずは良い一歩！！！
iMacを購入したのでAnsibleを用いてMacの環境構築を自動化した[Mac][Ansible][環境構築]
先日、割と最近発表があったばかりの新型iMacを購入しました。
物理的に画面がでかい！！！
文字サイズをぐんぐん小さくしていっても全然くっきり見えるので更に画面がでかく見える！！！
作業効率上がる！！捗る！！！
ディスプレイとOSが一体なので異常に省スペースでデスクまわりがすっきり！！！
いや〜さすがに流石にお値段貼りましたが良い買い物ができたかなと思います。
ちなみにAppleローンを活用して買いました。
12回分割まで金利無しなので便利なので「ほしいけど持ち合わせが...」みたいな方はぜひご検討を。
Appleローン分割金利0％キャンペーン - Apple (日本)
はい、宣伝タイムは終了ですｗ
さて、iMacを買いましたので、汚れの知らないまっさらなMacが手に入りました。
なので以前エントリを書いた、Ansibleを使ってMacの環境構築 をしてみました！
基本的な導入の流れは以前@t_wadaさんが書かれていた記事のとおりです。
あれをベースに自分が入れたいアプリをbrew searchやbrew casc searchで調べつつ入れたり、みたいな感じですね。
正直本当に記事の通りに進むし特につまる所もなくさくさく環境構築できたので超絶楽ちんでした！
これは使わない手はないのでは！？といった感じ。
やはり良いなぁと感じたところは、
- ファイルにまとまるので管理しやすい
- パスワードを求められたりはするものの基本ほぼ自動的にインストールが進むので楽
- 実際にインストール作業を走らせながら温泉に行ってきましたｗ
- プロビジョニングツールらしくrerunもいい感じにできる
- Ansible自体が普通に
HomebrewにもHomebrew Caskにも対応できているので特段めんどくさい準備がない
あたりでしょうか。僕は以前このMacの環境構築をAnsibleで試してみるのを通じてAnsibleに入門してみたのでいろいろ構成やら構文やらについて学びましたが、ぶっちゃけ「とりあえずMacの環境構築が楽にしたい！」という方ならぶっちゃけ学習コスト0で見よう見まねでできると思います。
homebrew_packagesにhomebrewで入れたいもの並べるhomebrew_cask_packagesにhomebrew-caskで入れたいもの並べる
だけなので本当w
また、今回iMacを購入したので長らく使っていたMacBook Air (11-inch, Mid 2012)も一回クリーンインストールしなおしました。
それによってまたもう1つまっさらなMacが手に入ったので、そちらにも今回作ったプロビジョニング用のファイルを適用して全く同じ環境が超簡単に整いました:)
使用感とても良いので、AnsibleもiMacも(←)、ぜひ試してみてはと思います！
今回作成したプロビジョニング用のファイル郡をGitHubにも置いておいたので、ここからダウンロードすればいつでも自分の環境が手に入ります。わーい。
バベルの塔に登ってみた[JavaScript][ES6][Babel]
JavaScript書けるようになりたいな〜欲が出てきていたがよくわからんしなぁ...という状態で早幾年過ぎてしまっていた。
ようやく腰を上げてお勉強してみようということで、今からならもうES5のことは放っておいて、ES6から入ろうかと。
本当に無知だったので勉強材料から探してみたら、とても良さそうな教材に辿りつけたのでそこから始めてみることに。
yosuke-furukawa.hatenablog.com
tower-of-babelコマンドが提供されて、コマンドベースでES6が学んでいける素晴らしいインターフェース！
進めるのもとても楽しくてサクサク進んで最高でした:)
進めていたリポジトリがこちら。
色々例題とかを解いた形跡がコミットされているけどあくまで個人用メモ程度なので、勉強したいな〜という方は本家の実際のコマンドを叩いて進めて、ワクワク感もセットで味わいつつ楽しんで学んでもらえたらと思いますmm
あとついでにtower-of-babel内で表示される演習の正解答の中に間違いっぽい？内容があったので、試しにPRを送ってみた。
とりあえず進めてみての感想は、
ES6になってだいぶ普通になってとっつきやすいな！！これならなんかいけそう！！
という感じでしたｗ
とっかかりの機会をくれて更に好スタートを切れたtower-of-babelにただただ感謝ですmm素晴らしいOSSをありがとうございます。
もちろんまだ見えないハマりどころとかは潜んでいるんだろうけど、他言語にある程度慣れている人だったらかなりすんなり入れるんじゃないだろうかというイメージでした。
この調子でここで学んだ内容を活かしてなんか作ろっと:)
「OSSについてあれこれ」に感銘を受けて毎日コミット活動はじめてみてます[GitHub]
以前@t_wadaさんが発表されていた、OSSについてあれこれ
OSS についてあれこれ from Takuto Wada
www.slideshare.net
この中で紹介されていた 自己鍛錬としてのOSS の項がめっちゃ良いな〜と思って、実際にはじめてみてます。現在17日継続中。
良いな〜と惹かれた一番のポイントは「プログラミングの習慣化」だったので、まずは「意味のあるコード」等と言っていると重たくて実現していけるか不安があったので、コミットがあればなんでもよいというルールにしている。
また、飲みなど、どうしてもコントロールしづらいところもあるので、「24時前に終わらせること」ルールも無視した、いわゆるオレオレルールにして実行してみている。
実際にはじめてみての感想を少し書いてみる。
プログラミングをする習慣が確かについてきた
今までどうしても色々な誘惑に負けて、やろうと思ってもなかなか手が伸びなかったプログラミングの時間がコンスタントに取れるようになってきた。
おかげでぼちぼちやりたいなーとかぼんやり思っていたES6のお勉強にも着手し始められているし、やっていなかったRails Tutorialにも手が伸び出している。
やはり人間ある程度の制約や罰則、のような縛りを設けないと怠けやすいので、「毎日コミット」みたいな簡単なものでも良いので指標があると全然違うなと感じた。
1日30分しかやらなかったとしても1年やれば182.5時間。まさにチリツモ事案。
しっかり続けていきたい。
メリハリがついてきた
当然だが平日もコミットしていかなければNGなので、定時を過ぎた瞬間や、お昼休み等の時間を上手く使ってコミットしていっている。
家に帰ってからやろうとすると寝落ちリスクが急上昇するので奥の手にしてるｗ
本当に時間に対する気持ちが変わってきた感触があってとても良い。
23時頃から作業〜気づいたら日付回ってた！は生活スタイル的にやはりある
これをやらかすと、日付が回ってしまい、GitHubの草生やし活動的には途切れてしまう。
やりたいのはあくまで「プログラミングの習慣化」であるので、毎日プログラミングの時間を作れていれば手段は問わない。
ただ、毎日やっているのにもかかわらず草生やし活動的には途切れてしまって、連続コミット日数がリセットされると、モチベーションはガタ落ちなので、そういう時はチートも許すようにしている。
ようするにチートとはコミット日時の改ざんで、心が闇に染まったらいくらでも嘘をつけてしまう(1週間サボってまとめて改ざんコミットをしてさも連続してコミットできているかのように見せかけることが可能になってしまう、等)が、そこは良識を持ってカバーしようという方針w
オリジナルルールを上手く取り入れて不要な負荷を軽減し敷居を下げる
ここまでちらほら書いているように、ちょくちょくルールはいじって続けやすい体制にしてみている。
ここまではなかなか上手く機能しているので引き続きこのルールで一旦は続けていきたい。
後輩と一緒に取り組んでいる
僕のチームには入社年度の一つ違う後輩くんがいて、その子とタッグを組んで(?)この毎日コミット活動を続けていっている。
やはり他の人と一緒にやってみると続くようになる可能性大幅アップなので、ぜひ興味がある人は周りの人とはじめてみるといいかも知れないです。
最後に
このようにはじめてみようと思うきっかけをくれた@t_wadaさん本当にありがとうございます！！
おかげでだいぶ習慣が変わってきました！
今は主にプログラミングといっても勉強の方向で時間を使っているので、この調子で続けて行けたらその後はステップアップとして、徐々にオリジナルのルールに近づけていってOSSの方向にアウトプットをしていきたいなー。
Gitで過去のコミットの名前やメールアドレス、コミット時刻を変更する[Git]
小ネタを一つ。
タイトルの通りで、これまでにしてきたコミットの名前などの情報を書き換えることができるので備忘録がてらご紹介です。
書き換えるには git filter-branch というコマンドを利用します。
git filter-branch とは
最強のオプション: filter-branch 歴史を書き換える方法がもうひとつあります。これは、大量のコミットの書き換えを機械的に行いたい場合 (メールアドレスを一括変更したりすべてのコミットからあるファイルを削除したりなど) に使うものです。そのためのコマンドが filter-branch です。これは歴史を大規模にばさっと書き換えることができるものなので、プロジェクトを一般に公開した後や書き換え対象のコミットを元にしてだれかが作業を始めている場合はまず使うことはありません。しかし、これは非常に便利なものでもあります。
といったように、非常に強力な書き換えコマンドになってます。
単純に過去のコミット全てを書き換える
シンプルすべてのコミットを対象に書き換えるようにするには以下のようにします。
一人で進めているリポジトリだったり、勉強した形跡としてアップしているだけのリポジトリ等にはこれだけで全然良いと思います。
名前を変える
git filter-branch -f --env-filter 'export GIT_AUTHOR_NAME="<名前>"'
メールアドレスを変える
git filter-branch -f --env-filter 'export GIT_AUTHOR_EMAIL="<メールアドレス>"'
コミット時刻を変える
git filter-branch -f --env-filter 'export GIT_AUTHOR_DATE="<時刻>"'
指定のコミットだけ書き換える
書き換えるコミットをフィルタリングして、書き換えたいコミットだけ書き換えるようにもできます。
というのも、先ほど export ほげほげ と書いた点からわかるように、実は中でシェルを実行しているだけなので、好きなようにスクリプトを書くことができます。
なので例えば特定のコミットだけ書き換えたいのなら、次のようにコミットIDを指定して実行することができます。
git filter-branch --env-filter ' if [ $GIT_COMMIT = "<コミットID>" ] then export GIT_AUTHOR_NAME="<名前>" export GIT_AUTHOR_EMAIL="<メールアドレス>" export GIT_AUTHOR_DATE="<時刻>" fi'
こんな感じで、もしも書き換えたくなった時でも柔軟に対応できます！
git commit --amendで同じようなことをする
実はおなじみのgit commit --amendでも同じような事が可能です。(もちろん直近のコミットに限りますが)
コマンドは以下のとおりです。
git commit --amend --author "名前 <メールアドレス>" --date "時刻"
コミット直後にすぐ気づいたならこれで大丈夫そうですね！
おまけ
Gitには、実はAUTHORとCOMMITERという2人の情報が記憶されています。
こちらの記事などを参照すると良さそうです。
なので、今回の記事ではシンプルにするためにAUTHORの書き換えだけを紹介しているので、もしもCOMMITER側の情報も書き換えたい場合はAUTHORと書かれていたところをCOMMITERに変えてコマンドを実行してみてください。
#phpcon2015 で、「こわくないSymfony2 - 業務で使って気づいた7つの良いところ」という発表をしてきました[PHP]
前回のエントリの通り、10/03にPHPカンファレンス2015で発表を行ってきました！
発表した内容に関してはこちら。
Talk: こわくないSymfony2 - 業務で使って気づいた7つの良いところ - Joind.in
(追記: 発表当日はなぜか僕のスライドがSlideShareにあがってくれなかったのが自然解決してたのでとりあえずSlideShareにもアップロード。)
www.slideshare.net
動画も公開されていたので置いておきます。(23:50 ~ 56:00)
正直こういった登壇は初めてで、スライドの準備から発表練習までなれないことだらけで苦労しまくりでしたが、なんとか無事に発表を終えられて本当に良かったです！
足を運んでくださった方々、本当にありがとうございました。
また今回の登壇までに力を貸してくれた方々も感謝感謝ですmm
PHPカンファレンスは3年前の大学学部3年の時に初めて参加したカンファレンスで、その思い出深いカンファレンスに今度はスピーカー側という形で参加することができて本当に嬉しかったです。またより一層思い出深くなりました。
発表準備は自分の知識をよりしっかりさせる必要が出てくるので本当にタメになりますねｗ身を持って味わいましたｗ
良い体験ができたので今後もやっていけたらなと思います！(確かに準備は大変だったけど見合うリターンがありました！)
最後の懇親会までしっかり楽しい時間でした！
最後に運営の方々、本当にお疲れ様でした。とても良いイベントでした！！ 関わらせてもらって本当にありがとうございました！:)
#phpcon2015 で、「こわくないSymfony2 - 業務で使って気づいた7つの良いところ」というタイトルでお話します[PHP]
先日、phpcon2015のページが更新されて、ついにタイムテーブルが公開されました！
運営の皆様、お疲れ様ですmm
今回、「こわくないSymfony2 - 業務で使って気づいた7つの良いところ」というタイトルで朝一発目の10:50~11:20の枠で話してきます！
とても巨大なフレームワークでとっつきづらいイメージのSymfony2にはありますが(少なくとも僕はあった)、実際に業務で使ってみてどうだったかというところを話せたらなぁと思ってます。
PHP初心者の方でも「おぉ、これは便利そう！」と思って少しでもSymfony2を触ってみてもらえる機会になればいいなーと思います。
今回のセッションでは他のフレームワークと比較して、というよりも、Symfony2を使ってみてどうだったか、というところを重点的に伝えていこうと思いますので、「◯◯フレームワークはこんなところが良かったよ！」みたいなやりとりをぜひぜひ懇親会等でできたら嬉しいなーとか思ってます:)
