個人的難敵「props」とは？stateとの関連も含めてオレオレ解説
さて前回はReactの概要的なところから最終的にはstateを使ったカウントアッププログラムまでを説明しました。
前回のような単純なプログラムであればstateだけでも確かにいけるのですが、それではまだReactの恩恵に預かっているとは言えないよう。
今回ご紹介するのは主に「props」について！
私はこのpropsというものがよくわからなすぎて悶絶していたこともあり、Reactの中で一番の難敵？と思っています...
「stateとpropsとは？」という記事がよくありますが、前回も言ったように学び始める際にはこの二つは「分離して考えた方が良さそう」というのが個人的な見解です。
前回はstateを使ってカウントアッププログラムを作成してみましたので、今回もわかりやすいようにこのプログラムを踏襲してpropsについてご紹介したいと思います。
codepen.io
今回作成したものは前回作成したカウントアッププログラムと実行結果を同じもの。
そして前回作成したものはこちらです。↓
codepen.io
こちらではCountクラスのstate「count」をそのままCountクラスのrenderメソッドで描画しています。
しかし、今回作成したものでCountクラスのstate「count」を描画しているクラスはCountではなく「CountNumber」というクラス。
(余談ですがReactではクラスを定義する際に最初の文字が大文字でないと怒られるので注意です...パスカルケース？って言うようですよ...
そして今回作成したものと前回作成したもので違う点がクラス以外にもう一つ。
それが「Count」クラスの中にある「constructor」の「props」。
ここでようやくpropsが出てきましたね〜
propsはproperties（プロパティ）の意味のようで、そのクラスがもつプロパティと考えて良さそう。
しかしこれとstateの違いが最初はわからなかった...（今も曖昧ですが）
ですが先ほども言ったようにstateとpropsを一度分離してみるとわかりやすかったです！
前回作成したものはstateだけで動いてしますが、今回作成したものはpropsも使って動いています。
この二つでの違いはズバリ「新しいクラスに値を渡すかどうか」でしょう。
今回はCountクラスで定義したcountというstateをCountNumberというクラスに渡しています。
この時に重要なのがpropsでpropsを使うことで、自身のもつstateを子に渡すことができます。
そしてpropsを利用してstateを渡すお作法がこちら。
constructor(props) { super(props) this.state = { count: 0 }
前回のものをみるとわかりますが、constructor( )とprops( )の引数に(props)が与えられています。
これは正直わからないのでpropsを使って値を渡すために必要なお作法だと覚えておきましょう。
これを使うことで、子のクラスに自身のstateを渡すことができるのですが、渡し方と受け取り方にもあるお作法が。
渡し方のお作法
<CountNumber count = {this.state.count} />
受け取り方のお作法
<p> {this.props.count} </p>
こちらが渡し方と受け取り方のお作法になります。
私がこのようなクラス作ってプロパティ作ってクラスメソッドを...というような言語に慣れていなかったため困惑したのだと思いますが、よくよく考えるとstateとpropsの違いは上記のお作法で完結しているのではないでしょうか？
自身のクラスの状態を表すプロパティであるstateは「this.state」で参照することができるので自クラスのメソッドであるrenderで渡すには自身（this）のstateを参照し、適当な変数に入れて子クラス（他のコンポーネント）に値を渡すことができるわけですね。
少し混乱すると思いますが、このように複数のコンポーネントを管理する場合はまずメインのコンポーネントを作成した後に他のコンポーネントの骨組みを作ってしまった方がわかりやすい気がします。
今回の場合はただカウントアップしていく「数字」のみを表示するコンポーネント「CountNumber」を作って、その後にメインコンポーネントである「 Count」でCount自身のstateをCountNumberに渡すようにしています。
そして前回抜けていた関数を実行する場合にもあるお作法があります。
<button onClick={this.countUp.bind(this)}>push!</button>
Reactではこのように現在のHTMLではあまりよしとされていない「onclick」を使ってイベントを設定することができます。
ここで関数を設定するお作法は「{this.countUp.bind(this}」というもの。
CountクラスではクラスメソッドとしてCountUpというものを定義していますが、これをrenderメソッド内で参照するにはstateと同じようにthisが必須。
しかし、ここで重要なのは「bind」です。
動かしてみるとわかりますが、このbindがないとこのプログラムは動きません。
これもよくわかっていないのですが、bindとはそもそもbind(オブジェクト)のようにあるオブジェクトに関数を紐づけて新しい関数を作成するというもの。
thisについてはまだまだ勉強中ですので詳しいことはお話できませんが、ここで言えば自身のクラスにこのクラスメソッドを紐づけている、ということで良さそうです。
このbindを与えることで関数が実行できるようになるのでこれも覚えておきましょう。
そして関数を渡す場合のお作法もほぼstateを渡すような場合と同じです。
渡し方のお作法〜関数編〜
<CountNumber countUp = {this.countUp.bind(this)} />
受け取り方のお作法〜関数編〜
<button onClick={this.props.countUp} >push! </button>
こちらもpropsを通じて受け渡しをすることができるんですね。
この例でもわかるように、とにかくpropsはstateやメソッドなどクラスで定義されているものを受け渡しするためのもの、と考えていいです。
stateは自身の状態を定義するだけのものなのでここがpropsと違いますね。
さて、propsとstateの違い、また関数の実行の仕方についてオレオレ解説していきましたがいかがでしたでしょうか？
Reactを触っていく中でも感じましたがやはり「触ってみることが大事」ということをひしひしと感じましたね。
一通りReactの概要やお作法に関しては解説したつもりなので、次回はReactをnpmで環境構築をする場合、少し発展？してAPIからデータを取得して利用する、といったことについてお話していきたいと思います！
「初心者と学ぶReact.js！」入門チックなことを書いてみよう
今回は何かと話題のFacebook謹製jsライブラリ「React.js」について学習した記録を書き綴ろうと思います。
Angular、Vue、Reactの御三家みたいなところはありますが、なんとなく名前がかっこいいのとFacebook製というところに惹かれ一週間前からちびちび学習してみた、というのが学習のきっかけですね〜
ということで学習してみたはいいものの、これまた意外と難しい...
「チュートリアルが優しい！」ということでも有名なようですが、自分の理解力のなさが露呈してしまいましたねえ... (意外と同じようなかた多いのではないだろうか(希望)
さて、そんなことはさておきましてなんやかんやでReactで一通りの使い方や考え方を自分なりに掴んだつもりでおりますので今回書いてみようと思った始末でございます。
では早速、Reactとはどのような仕組みなのかをオレオレ解説でいってみよーと思います。
Reactの仕組みをオレオレ解説
Reactとは先ほどもいったように、Facebook謹製のjsライブラリです。
よく言われているのが「MVW」のV、つまりView部分を担っているのがReact。
そしてReactの考え方で重要なのは「Component（コンポーネント）」です。
このComponentは直訳で「構成要素・成分」などの意味がありますが、まさに役割としては意味の通りで「構成要素」と考えてもらっていいと思います。
まあjsを使用する中で「コンポーネント化」というのは聞き馴染みのある方も多いのではないでしょうか？
処理ごとにjsを分けて最終的に一つのjsにまとめて読み込む、というアレですね。
これはscssやphpのテンプレート化でも使われている考え方ですし、これからは「コンポーネント化することが主流となる」とも言われています。
少し脱線しましたが、要するにコンポーネントは構成要素で部品です。
このコンポーネントを最終的に組み合わせて一つのアプリケーションを作ることがReactの考え方で、それぞれをコンポーネントとして分けることでそれぞれの保守性を高めている、と考えて大丈夫そう。
少し文字が多くなってしまったので、ここで例をみてみたいと思います。
こちらは簡単なサンプルです。
こちらのサンプルはcodepenで作っていますが、ちょっと設定に戸惑ったのでメモ。
1.settingsからjsを「Babel」にする。
2.「Add External Scripts/Pens」からcdnのURLを読み込むか、「Quick-add」からReactを選ぶ
基本設定はこれで終わりますし、あとはコードを書くだけなので、よかったら試してみてください。
一番時間がかかったReactをnpmで使う場合も今度の機会に...
さて今回のサンプルですが、二つのクラス「Hello」と「World」を作り、それを「HelloWorld」というクラスでまとめて、最後にHelloWorldクラスをidがrootの場所に配置する、というもの。
Reactの記法はバージョンによってコロコロ変わっているようですが最新のドキュメントではこちらの記法が推奨されているよう。
クラスを作る方法は、「class クラス名前 extends React.Component」でいけます。
そしてこのクラスはほぼコンポーネントと考えて良さそう。
厳密に言うと違うようですがそんな感じの理解でいいでしょう（適当）
そしてクラスにはある重要なメソッドが含まれています。
それが「render」というメソッド。
このrenderについては正直あまり考えなくていいと思うのですが、どうやらHTML要素を生成するためのもののようです。
このrenderを使わないとどうにもなりませんし、renderで返すものが一つもないとえらーになります。
つまりコンポーネントを作成するにはrenderが必要で、renderで返すものがないとComponentは作成できない、ということですね。
さて、ここまではなんとなーく理解ができるような気がします。
しかし私を悩ませたよくわからないもの二つが↓から登場するのです...
こちらはボタンを押すとカウントが上がるというシンプルなアプリケーションです。
基礎を学ぶには一番いいのかな？と個人的に思いましたね。
そして私がよくわからなかったものは上記に出てくる「state」と「props」です。
正直、上記の例ではstateだけで動かせてしまうので最初のうちはpropsについて深く考えない方が得策な気がしましたね。
さて、まず攻略したいがのこのstateというもので、これは直訳すれば「状態」という意味を持ちます。
今回で言えばCountクラスの中の「state:状態」としてcountというプロパティを持っている、と言えます。
そしてReactの特徴なのが、このstateによって描画（render）されるものが変わっていくということ！
拙い例ではありますが、カウントがどんどん上がっていくのがいい例ですね。
ではこのstateをどのようにして更新していくのか？
それはsetStateというメソッドを使うことで実現することができます。
実はReactではstateを「this.state.count += 1」のように更新することはできません。
その代わりにsetStateというメソッドを使ってしっかりstateの値を変えることを明記する必要があるんですね。
setStateの使い方は上記の通りで「setState( { state名:変数や値 } )」とするのが作法です。
今回の例では最初に変数countを定義し、その変数を+1したのちにsetStateするという流れになっています。
この考え方は重要なので覚えておくといいですよ！きっと！！笑
そして今回定義している関数「countUp」なのですが普通のjsとは少し書き方が違いますよね。
これも作法なのでとりあえずは何も考えないでこのように書いてみてください。
さてここまでで、「class」「render」「state」について知ることができました。
次はいよいよpropsなのですが、propsはちょっと長くなるかもなのでとりあえず今日なこの辺で終わりにしようと思います...
初心者で拙い解説ではありますが、少しでもお役に立てればよいなあ...
診断コンテンツ作成するには？作るためのメソッドを紹介！
本日業務で診断コンテンツを作成することがありましたのでそれの備忘録をご紹介しようと思います。
本日作成したのは以下のような診断コンテンツです。
- 結果は最終的に4つのタイプに分かれる
- 二択の質問に回答して結果に導く
- 問題数は全部で5個
まあシンプルな診断コンテンツですよね。
ABCD４つのタイプがあったとして、各タイプに関する質問をしてその質問を二択のうちから回答を選んだら、回答ボタンに紐づいているタイプをカウントしていくような流れとなっています。
例を出すとするなら「A」タイプに紐づいている「a」の回答をしたら「A」をカウントしていくようなイメージです。
では前置きは置いといてサンプルを見てみましょう。
今回サンプルとして出しているのはご覧の通り、5個の質問で現れる選択肢を選ぶことでどのタイプか、というのを判定するもの。
今回はちょっとめんどくささもあったので紐づいているタイプを選択肢に書いちゃってます（笑）
なので手っ取り早く動作を確認するにはひたすら同じアルファベットの選択肢を選ぶことでちゃんとそのタイプのアルファベットが表示されるか、ということを見ていけば大丈夫なはず。
ちなみにずっと左側押していると、受け取る値は「R,R,S,A,I」となるので一番数の多いRタイプになりますね。
このコンテンツの仕組みは「配列」が重要です。
このコンテンツで使用している配列は全部で3つ。
①userAnswers…選択肢のボタンに紐づいている「クラス」を取得し、そのクラスの値をユーザーの回答として保持する配列。
②countType…各タイプが配列の中に何回出てくるかをまとめた配列。
③counts…各タイプの数「count」とタイプを識別するkey「type」の連想配列。
まあ、2と3はまとめられる感じもしますが勉強のため、ということで…
さて、この配列たちの役割はこんなところなのですが見てもらえれば分かる通りuserAnswersに入った値からそれぞれの値の中でどの値が一番多いのかを判定し、多い値のものをsort関数でインデックス0番に持っていき、そのtypeを返すという流れになっています。
仕組みに関しては以上のような形なので細かい処理は割愛して、今回「なるほど！」となった処理「Array.filter」について見ていきたいと思います。
Array.filter
Array.filterは配列の値をフィルタリングする関数です。
使い方はコードの中にもありますが下の通り。
配列.filter((変数)=>変数の処理)
この類の関数はforEachとかfor...inとかでも見かけますね。
引数の変数に配列の値が入り、その変数を使って値を一個ずつ処理できる、というものです。
phpでは配列の重複をカウントできるメソッドがあるようですがjsではそのようなメソッドがなかったので今回はfilterを使ってそれぞれの値の数を計算しています。
はじめて使いましたが配列を使う上ではかなり重宝しそうな予感…
さて今回は初めて診断コンテンツを作成しましたが、配列は初学者には取っつきにくさMAXですが、やはり便利！
ちなみに配列系で言えば、Array.reduceが最強らしいですよ。
canvas続編！「Three.js」を使ってみたらさらに楽しすぎたお話。
さて、この前はHTML5の新要素「canvas」についていかに楽しいか、ということについて熱弁（そうでもない）しました。
しかし私、まだ「canvas」の楽しさの真髄に気づいていなかったんです。
ということでそんな楽しさの真髄を教えてくれた「Three.js」について今回はお話しようと思います。
Three.jsってなんぞ？
さて、Three.jsというのはどのようなものなのでしょう。
.jsがついている時点で「ライブラリだろな」と思うかもしれませんが、まさにその通り。
Three.jsは「簡単に」今年大流行間違いなしの「3D」を作成できてしまうライブラリなんです。
どれくらい簡単かというと〜〜〜
このくらい簡単！
ちょっとコメントアウトが多いかもしれませんが一応コンストラクタなり、仕組みなりを書いてあるのでよかったら読んでみてください...
ではThree.jsの基本となる仕組みを見ていきたいと思います。
Three.jsで基本となる仕組みは次の5つ。
...canvasは名前の通りキャンバスで、描画する領域を取得するために必要なものです。
②scene
...sceneとは3D空間のこと。この3D空間に後述のMeshなどを入れ、3Dコンテンツを作ります。
③camera
...cameraは名前の通りカメラ。どの位置からsceneを見るか、ということを決めるためのものです。
④Mesh
...3Dコンテンツの中でもオブジェクトとなるのがこのMesh。先ほどのpenで言えば赤い丸はこのMeshで作られています。
Meshは「geometry（ジオメトリ:形状）」と「material（マテリアル:素材）」で構成され、それぞれプロパティをカスタマイズできる。
⑤renderer
...rendererもその名の通り、レンダリングをするもの。
レンダリングとは、
データ記述言語やデータ構造で記述された抽象的で高次の情報から、コンピュータのプログラムを用いて画像・映像・音声などを生成すること
と書いてありますね。
このレンダリングをすることによって3Dコンテンツが可視化されるわけです。要するに一番上位の存在というわけですね。
さて、基本となる仕組みはこの5つでそれぞれpen内に自分なりの解釈をコメントアウトにて載せております。
コメントアウトを除けばコード量はかなり少ないですし、仕組みを想像できればスッと理解できる代物です。（と言いつつ結構曖昧...）
イメージ的にはjsのDOM操作したりする感じと似てる？ような気がしますね。
さて、先ほどのpenでも3Dっぽさはありましたがさらに3D要素を加えたのがこちらになります。
ああ、まさに3D...
こちらもコメントアウト満載で申し訳ないのですが、一応解釈を記載しています。
このように、Meshをカスタマイズして自分なりの3Dオブジェクトを作成できますし3D感満載の奥行きがある動きも実装することができます。
また、Tweenなどのアニメーションライブラリと組み合わせることでかなり大胆な3Dコンテンツを作成できるようなのでチビチビ作っているサイトのファーストビューに使えたらなあ...と画策しております。
かなり取っつきやすいライブラリだと思いますし、公式ページにはどんなものかな〜と分かるようなサンプルもたくさんあります！
是非一度お試しあれ！
今更ながらcanvas使ってみたら楽しすぎて一日があっという間に過ぎた話
ふんばりフロントエンジニアの私ですが、やはりなぜフロントエンジニアが良かったかと言えば「目に見える！」からだと思っております。
実を言うと新卒で入った会社はゴリゴリのバックエンドで、研修の最中でも「見た目のことなんか二の次じゃ」感はあったんですよね。
しかし！「人は見た目が8割」とも言いますし、見た目はかなり重要な役割を担っていると思います。
そして今回はそんな「見た目」に重視した、コードを書けばすぐに反映されるとてもた楽しかった「canvas」について書いていきたいと思います。
canvasってなんぞ？
「canvasってなんぞ？」
という方はおそらく少ないとは思いますが、一応MDNからの引用を…
HTML5 で導入された
<canvas>HTML 要素は、JavaScript によるスクリプティングによって図形などを描画するために使用します。例えば、グラフを描く、写真を合成する、アニメーションを作成する、動画のリアルタイム加工やレンダリングに用いる事が出来ます。
うむ、わからない。
これだけ見て分かる人はきっと触ったことのある方でしょう。
ともあれ、「JavaScript」と一緒に使うHTML要素であることは分かりますよね。
では、簡単にcanvasの例をご紹介していきたいと思います。
はい、これが「ザ・シンプル」なcanvasの使い方です。
canvasとは、jsを見ても分かるようにまずcanvasの置いてあるDOM要素を取得し、そこからコンテクスト（描画範囲）を取得することがまず第一。
今回の例で言えば変数「ctx」がcanvasのキャンバス（描画範囲）となっているわけです。
あとはその描画範囲で、どのような図形を描画するのか、どのような色で塗るのか
、ということを決めてしまえばこのような図形を描くことができるようになります。
「え、こんな図形ならcssでやれよ…」
まあ私もそう思います…
しかし、canvasが楽しいのはここから！
canvasのコンテキストは自由にカスタマイズすることができます。
そのため、HTML上にカスタマイズできて自由に消したり書いたりできる画用紙を用意された気分になってしまいました…
ここで私、「なんとなく画面いっぱいに埋め尽くしたいなあ…」という謎の欲望が。
ということで作ってみたのがこんな感じのもの。
(練習用のものだったので余計なものも入っています、すみません…）
作ったものは上部のcreateボタンを押すと、ランダムで違う場所に違うサイズ、違う色の四角形を100個出す、というもの。
個人的にはcanvasというよりランダムにカラーコードを作る、という方法が「ああっ！」となりましたね。
意外と配色がいい感じにばらけてくれているので「今回の配色いいな…」とか「もう一回押すか迷うな…」というような感じで一人楽しんでおりました。
とまあ、こんな感じで自由に図形を書いたり文字を書いたりできるcanvasなのですが、ここで私「ずっと気になっていたjsライブラリ」があることを思い出したのです。
そのライブラリこそ…「Three.js」！
名前がシンプルでカッコいいですよねえ～
まあ皆さん知っていると思うのですが、業務で使うことは私の場合全くなかったので触れてこなかったんです…
せっかく暇だしcanvasやったし！ということで、今回はThree.jsにも挑戦してみたのですがそっちの方が長くなりそうなのでまた今度…
FireTVスティックを紛失…アプリでなんとか対応した話
今回はプログラミングとは関係なく、自宅で利用しているFireTVの話を備忘録として…
私はAmazonのプライム会員なので、休日などはFireTVを頻繁に利用しているのですがなんと最近FireTVの操作をするために「FireTVスティック」を紛失してしまったんです…
結局血眼になって家族総出で捜索したのですが見つからず。
個人的には猫二匹のうちどちらかが遊んでてどっかやったのかな～と思っていますね（黒いほうが怪しい…）
とまあ、そんな犯人捜しをしてもしょうがないのでなんとなく聞いていた「FireTVスティック」のアプリを試してみよう！ということになったわけです。
AppStoreでもGooglePlayでも「Fire」と打てば簡単に見つかったので、「お、これは早速…」と思いインストールし使ってみることに。
本来であれば、インストールしたスマホとFireTVを同じローカルネットワークに接続することで簡単にペアリングができ、「○○のFireTV」という文言がアプリに表示されるのですが、いつまでたっても「○○のFireTV」が出てこねえ…
そしてアプリの画面を見ていると注意書きで「アカウントにサインインしてね～」というような文言が。
「お、こりゃ失礼した！」と意気揚々にサインインして、もう一度ペアリングをしてみることに。
………「出ねえ」。
この辺でなにか嫌な感じだったのですが、結局アプリ側の操作では解決できなさそうだなあ、と思ったので同じ症状をググることに。
しかし、みなさん「普通にサインインすればアプリに接続できるよ～」と言っておられる。
プログラミングしててもありますが、ここで私「疎外感」を実感しました。
いや、でもみんなできてるんだからできるはず！ということでめげずにFireTVのことを調べていたらあることが発覚。
それが「FireTVの電源を付けていないとリモコンアプリが利用できない」ということ。
しかしFireTVのHDMI端子を抜き差ししても電源を落としても電源がつかなかったのでもう無理かなあ…と思っていました。
そこで、解決するために試した方法が三つ！
①HDMI連動機能をOFFにする
②HDMIのポートを変える
③FireTV付属の延長ケーブルを使ってみる
①に関してはもともとOFFだったので関係ないかもしれませんが…
実際にこの三つの方法を順番に試してみたところ、変化が出たのは③から。
FireTVにはHDMIを延長するケーブルと基本のケーブルがついているとおもいますが、延長ケーブルは使わないほうがいいよ、的なことを聞いたので使っていなかったんですね。
しかし、この延長ケーブルを使って電源を落とし再度手順を試してみたところばっちりFireTVのホーム画面が！
どうやら今回の原因は「ケーブル自体に問題があったこと」「HDMIのポートの不具合」という二点の問題だったようです。
なので付属の延長ケーブルを使っていない方は、使ってみて、使っている方は一度使わないでHDMIに挿すといいかもしれませんね。
「こんなのいらんわ！」って思っていましたが取っておいてよかった…
簡単に使えてしまうものって使えなくなったときに意外と対処が難しかったりしますよ…
同じような症状に合っている方はぜひともお試しください！
余談ですが、はじめてAmazonに問い合わせてみたところ3秒ほどで電話かかってきてめっちゃびっくりしました(笑)
【css】git でコンフリクト起こした時に考えるべきこと
こんにちは、今回はバージョン管理ツール「git」についてのお話です。
gitって業界では知らない方、というか使っていない方がいないほど有名なツール。
ただgit初心者にとっては困ることも少し…
それが「コンフリクト」ですよね。
最初私がコンフリクトのメッセージを読んだ時なんか「え？犯罪犯したのかな？？？」くらい慌てましたが、コンフリクト自体は意外と起こります。
「え？起こんなくね？」と思うかたもいるかと思いますが、意外と起こります（怒）
私はフロントエンジニアですので、cssを使う機会が多々、というか毎日なのですがcss は「git管理するのにどうするべきか」が分かれる言語でもあります。
というのも、現在純粋なcssのみでコーディングする方はほぼおらず、scssなどのメタ言語を利用する方が多いため。
かくいう私も便利なのでscssでコーディングをするのですが、scssは最終的にcssにコンパイルしないとHTMLが読み込んでくれません。
なので各自コンパイルすることになるのですが、今回の肝はここ！
私はgulpでscssをuglifyしてコンパイルしているので、scssをコンパイルすると「1行のcss」で出力されてしまいます。
gitは行単位的な判別をするようなので、1行にコンパイルされてしまっては「どこが変わった？ああ、この1行が変わってんのか」と単純に解釈されてしまいます。
なのでこのコンパイル後のcssはコンフリクトが起きるのは仕方ない。
そしてこのcssをgit管理するべきかしないべきか、という議論が起こるんですね。
git管理をしなくても、元のscssがコンフリクトを起こしていなければもう一度コンパイルしなおせばいいですから。
ということで、コンパイル後のcssをgit管理の対象とするかどうかは議論が分かれますがよっぽどのことがない限り、対象から外してしまってもいいんじゃないかな？と感じますね。
