Dream Come True

今一つの夢がかなった生活をさせてもらっています。

漠然とでしたが子供が生まれた時に

**子供を送り迎えしたい**

と夢とは言えないような、でも日本の働くお父さんにとっては夢のような希望をもったものです。

今年の4月から毎日娘が保育園に通うようになり送り迎えしていて、ふと「夢みたいだな」と頭に浮かびました。

夢をかなえるために何か努力をしたのか、と問われると実は何もしてなくてただ単に私しか送り迎えをしてあげれない現状に向き合っただけです。

送り迎えできるような働き方を上司・同僚が認めてくれたから、というのが一番大きな要因です。なので、私の夢をかなえたのは私ではなくて会社だと言ってもいいかもしれません。

こんな夢ですが、夢の世界はきれいなお花畑でキラキラしているだけではすまないことは依然[ブログ](http://blog.22labs.net/deeplysorryaboutthat/)に書きました。

ただ、自分が好きなことをしている上で乗り越えないといけない障壁だったり、苦労は努力して何とかしよう、と思うものです。

## 娘の夢
以前[ブログ](http://blog.22labs.net/happy4thbirthday/)で「娘に何になりたいかを問わないし何になってほしいかを望むことはない」ときれいごとを書いたんですが、さっそくその質問を投げかけないといけない状況に直面しました。

保育園の誕生日会のプレゼントの中で「将来何になりたいかを聞いてそれを絵本の中に書いてきてください」と。

困りました(^ ^;)

これまで聞いたことのない質問なので普通に聞いてもきっと職業観なんてものもないだろうし。でも何も書かないわけにはいきません。考えに考えて質問しました。

*「パパ位に大きくなったら何をしたい?」「(姪の)〇〇ちゃんくらい大きくなったらでもいいよ」*

しばらく考えて、、、

**「パパとお料理したい。毎日」**

毎日かぁ。。

朝はもちろんだけど夜も余裕がなくて一人でさっさと作ってしまうことが増えている最近。反省させられました。m(_ _) m

## やりたいことの源泉を掘り当てる
「パパとお料理したい」だから「あぁ、この子は料理人を目指すようになるのかな」なんてことを思う人はいないと思います。

料理が好きなのか?そうかもしれません。
料理中は相手にしてくれない父親との時間を取り戻したいのかもしれません。
どうしてこう答えたのか私なりに考えています。

なぜそれをやりたいのか?

必ず理由があるはずです。だから娘には「何になりたいか」じゃなくて「何をしたいのか」の方を思い浮かべるようになって欲しいわけです。

「警察官になりたい!」立派な夢だと思います。

でも、どうして?

制服がかっこいいから?他のかっこいい服じゃダメなのかな?

人助けがしたいから?人助けなら他にいくらでも職業があるはずじゃ?

「これになりたい!」は選択肢を狭めることだと勝手な思い込みを持っています。

うまく言えませんが、「これがしたい」をやった結果たまたまある職種についていた、の方が自分のやりたいことを生かしてより自分が満足でき、人の役にたてる何かをする職種に移るための足かせがないような気がしています。

## 自分自身の夢
実は「これ!」というのが40が近づく今になっても見つかりません。

思い返せば、「ギターを弾いていたい」からバンドでデビューするしか道がない、と思い込んで、気が付いたら作曲することが好きだと自覚した時にも、でもギタリスト像から外れる自分を認めれなくて作曲の楽しさを自分で閉ざしたことがあります

プログラマになりたい、と思った時も「何を作りたい」からじゃなくて、クリエイティブっぽい漠然としたイメージだけで目指してしまったものだから大成しませんでした。

今もそれを引きづってるところがあって、ワークスタイルやライフスタイルを提案提供して人がワクワクすることを作りたい、という想いがあります。

芸人さんのネタ帳のような頭の引き出しにある小さなアイデア達はほとんどITが関与しない物もあります。

なんですが、どこかでプログラマとして自分で何が作れるか?に考えが偏って本来の目的を忘れ色々な可能性を閉ざす自分から未だに抜け出せないでいます。

##夢の途中
思い返すと、小学生の時は小説や詩を書き、中学から20代半ばは音楽一筋、社会人になってからはIT関係と、多分何かを作ることが好きなんだろう、とは思います。

上手い下手はともかくとしてブログをやめないのもそういうところからきているのかもしれません。

30半ばを過ぎて未だに確固たる志を立てれない未熟者ですが、人がワクワクする何かを生み出せる人になれたらいいな、と思います。

## 追記
「これになりたい」という人を否定するつもりは全くありません。それを目指す過程で得るものがあるし、「プロ野球選手になりたい」と思って必死に努力しなければプロ野球選手にはなれないようなケースもたくさんあると思います。

あくまでも、「これがしたい」志向は個人的な思い込みによるものです。

ステップバイステップReact.jsで作るTodoアプリ

復習のためReact.jsでTodoアプリのViewを書いてみました。

このTodoアプリを通して次のことを勉強出来ました。

– stateとpropsの使い方
– bindを使ってコールバック関数内のオブジェクト指定

まだわかっていないのがコンポーネント分割の単位なので、見通しが立ったらまたブログ書きます。

では、書いていきます。

## ファイル構造

“`
MyApp
├── index.html
└── react-0.13.3
├── README.md
├── build
│   ├── JSXTransformer.js
│   ├── react-with-addons.js
│   ├── react-with-addons.min.js
│   ├── react.js
│   └── react.min.js
“`

## HTML雛形作成
React.jsでReactコンポーネントを作る前にHTMLの雛形を作ります。

“`html:index.html








“`と“`“`の間に書く。

##必要なコンポーネント
コードを書き始める前に必要なコンポーネントを考えます。

今回は3つのReactコンポーネントを作ります。

– TodoApp ・・・アプリ全体
– TodoCreator ・・・Todoを新規で追加するため
– TodoList ・・・ Todoリストを描画するため

##TodoAppコンポーネントを描画

“タグの間の一番最後でrenderメソッドで描画するコンポーネントとロードするdivのidを指定します。

“`jsx
React.render(
,
document.getElementById(‘myApp’)
);
“`

##TodoAppコンポーネント

###renderメソッドを定義

“`jsx
var TodoApp = React.createClass({
render: function(){
return (


);
}
});
“`

TodoCreatorコンポーネントとTodoListコンポーネントを返すTodoAppコンポーネントを定義しています。

###Todoリストの初期値の定義

Todoリストの初期値をTodoAppクラス内で定義します。
テストの為に、sampleというキーと0(未完了/false)の値をセットしています。(後でこの中身を消して空のJSONオブジェクトとして定義します。)

“`jsx
getInitialState: function() {
return {
todos = [{item:”sample”, status:0}
}
},
“`

###TodoListコンポーネントの定義
Todoリストを表示するためのTodoListコンポーネントを定義します。

“`jsx
var TodoList = React.createClass({
render: function() {
return (

    {
    this.props.todos.map(function(todo, i){
    if (todo.status == 0) {return

  • {todo.item}
  • }
    else {return

  • {todo.item}
  • }
    })
    }

);
}
});
“`

次にTodoAppコンポーネントからgetInitialStateで定義したtodosのステートを渡すために““を次のように書き換えます。

“`
// // 変更前

“`

これでtodosの状態をTodoListコンポーネントに渡し、TodoList側でpropsを通じてtodosの中身を参照することになります。

###TodoCreatorコンポーネントの定義
Todoの内容を入力し、Addボタンを押してtodosリストに追加するためのコンポーネントを作ります。

“`jsx
var TodoCreator = React.createClass({

_onAdd: function(){
var newTodo = this.refs.inputText.getDOMNode().value;
this.props.onAdd(newTodo);
},

render: function(){
return (


);
}

});

“`

Addボタンが押されたら_onAddメソッドを呼び出します。次に_onAddメソッド内ではgetDOMNodeを使ってtextボックス内の値を取得して、newTodo変数に格納し、propsを通じてnewTodoを引数に親であるTodoAppコンポーネントのonAddメソッドを実行します。

####TodoAppのonAddメソッド
TodoAppコンポーネントにonAddメソッドを追加します。

“`jsx
onAdd: function(newTodo){
this.setState({
todos : this.state.todos.concat({item:newTodo, status:0})
});
},
“`

onAddメソッドの内部でsetStateを実行todosの状態を更新します。

こうすることで、todosのステートが更新され、TodoListの表示が更新されます。

##TodoCreatorコンポーネントの修正
Addボタンを押したときに、入力した内容がちゃんと消えるようにするために加筆します。

“`jsx
var TodoCreator = React.createClass({

getInitialState: function(){
return {
value: “”
}
},

_onAdd: function(){
var newTodo = this.refs.inputText.getDOMNode().value;
this.props.onAdd(newTodo);
this.setState({value: “”});
},

_onChange: function(e){
this.setState({
value: e.target.value
});
},

render: function(){
return (


);
}
});
“`

valueという変数をgetInitialStateで定義しておき、inputボックスの中身が変化したら_onChangeメソッドでvalue変数を更新します。Addボタンが押されたら、親コンポーネントのtodosに更新作業を行った後に、value変数の中身をNullに戻しています。

##完了Todoの更新
Todoの完了を示すチェックボックを表示し、完了したものは取り消し線で表示するようにTodoListコンポーネントを修正します。

###Todoの表示部分の変更
“`jsx
render: function() {
return (

    {
    this.props.todos.map(function(todo,i){
    if (todo.status == 0) {
    return (


  • {todo.item}
  • )
    } else {
    return

  • {todo.item}
  • }
    },this)
    }

);
}
“`

###Todoステータスの更新
チェックボックスがクリックされると、まずTodoListコンポーネントの_onDeleteが呼ばれ_onDelete内の“`this.props.onDelete“`で親であるTodoAppコンポーネントのonDeleteメソッドが実行されています

まず、TodoListコンポーネントの_onDeleteの定義から

“`jsx
_onDelete: function(i){
this.props.onDelete(i);
}
“`

次にTodoAppコンポーネントのonDeleteメソッドを定義します。

“`jsx
onDelete: function(i){
var targetTodo = this.state.todos[i];
targetTodo.status = 1;
this.setState({
todos: this.state.todos
});
},
“`

また、propsで渡すためにTodoAppコンポーネントからTodoListへonDeleteを渡すためにTodoListのロード部分を変更します。

“`jsx

“`

これでindex.htmlファイルをブラウザで表示すると下図のTodo画面が出来上がります。

## 全体コード

“`html








“`

4歳になる君へ

4歳になる君へ。

これまで何をしてあげれたかな?

十分に君と向かい合うことができたかな?

三つ子の魂百まで。

諺を頼りに注げるだけの愛情と時間を注いできていよいよ4歳になるね。

4歳になる君に向けたメッセージを君自身が読む日は訪れないかもしれない。

それでもこれからの未来を願って綴ろうと思う。

今日まで何になってほしいと願ったことはないし、これからも願うことはない。

問いかけることもないと思う。

代わりに、自分の可能性を信じて好きなことに打ち込める人であってほしい。

父親がそうであったように、損得じゃなく、自分のやりたいことに胸を張っていれる人であってほしい。

もしかしたら父親に似て飽きっぽいかもしれない。

それでも「やりたい」と思えることがあればその世界に飛び込んで自由に泳いでほしい。

自分に自信が持てなくなったら父親からの初めてのバースデープレゼントである君の名前を見つめ思い出してほしい。

「万結」

君には万物を結び無限の可能性を繋ぎあわせる力があることを。

4歳になり、自分自身のまゆの殻を破って羽ばたきたくさんのことを見て、触れて、感じてほしい。

一人で立ち向かえない逆風が吹くこともある。

その時は望む限りいつでも手を差し伸べ背中を押してあげよう。

三つ子の魂のためにまだまだしてあげれたことがあったと思う。

4歳まであっという間だったけど、君の隣で生きていられることに、無事に4歳まで育ってくれたことに心から「ありがとう」。

これからも益々楽しみだ!

4歳もたくさん話し、笑い、歌い、踊り、歩き、思い出をつくろう。

最後に、抱っこして歌っていたこの子守唄と一緒に、いつも投げかけてくれる君の言葉をそのまま返して結びにしよう。

**「大好き」**

ごめんね

昨日の娘の保育園通園中の出来事。

「カーディガン忘れたぁ」

*「今日は暑いけんいらんやろ?」*

「寒いけんいる」

*「汗かきよるやん!」*

「保育園寒いと」

*「じゃあとで祖母ちゃんにもっていってもらうけん」 ※そんな気なし*

「いや、今がいい」

*「パパ会社に間に合わんくなるやん」*

「いや、いる!いま!!!」 × 複数回

ここで**ぷちん**と怒りのバロメータがONになってしまいました。

*「取りに帰ればいいんやろ!毎朝毎朝我がまましか言わんやん!もういや!もう明日からパパ保育園いかんけ祖母ちゃんと行き!」*

「いや、パパがいい」

*「もういい!」*

そのあとはほとんど会話もなく、子供にとっては駆け足レベルで早歩きで家まで戻ってカーディガンをとって車に乗り換えて保育園へ送って、保育園で先生に預けて

「ばいばい」

の一言だけで急いで車に乗り込み会社に向かいました。

ひどい父親ですね。m(_ _)m

会社に向かう車の中、罪悪感でいっぱいでした。

多分娘も怒っている父親の横で何も言えず、いつもと違うお見送りに嫌な気持ちになっただろうことは想像に難くありません。

カッとなった気持ちがおさまりはじめて冷静に考えると、色んな反省が出てきました。

毎朝カーディガンを選ぶのを楽しみにしているのにカーディガンを持って出ないことを教えてあげればよかった。

女の子だからお気に入りのカーディガンでみんなに見せたい気持ちがあったのかも。

保育園で昼間寒くて本当に必要だったんじゃないか?

そもそも、取りに戻って車に乗り換えて行けばすむ話だったのに。

会社には申し訳無いけど、「カクカクシカジカで遅刻します」と連絡すればいいことだったのに。

もしかしたら何かの不安をごまかすためにたまたまわがままを聞いて欲しかっただけなのかも。

迎えに行った時も気まずそうで、すぐに

*「朝はたくさん怒ってごめんね。明日も一緒に保育園行ってもいい?」*

と謝るとしくしく泣きだした娘に本当に嫌な思いをさせたんだと申し訳ない気持ちでいっぱいになり、謝れば済む話ではないよな、とつくづく想いました。

「明日も一緒に保育園行く」

と言ってくれたとはいえ、今日からの接し方を変えなければ意味が無いのでもういやな想いをさせないように、心と時間に余裕をもって朝の通園もプランB、プランCと引き出しを事前に予定しておこうと思います。

穏やかに、明るく、娘の自己主張を受け止めてあげれる父親にならないと、と悲しい気持ちの中誓いました。

本当に「**ごめんね**」です。