Monaca上でStyled-Componentsを使ってReactチュートリアルをやってみる

例えば新しい言語を触ってみるなど、プログラミング系の新しいことを始める時にまず見てみるのが、ドットインストールやProgateなどのプログラミング系学習サービスなのですが、Reactに関してはコンテンツの種類が豊富なドットインストールにもなく、どうやって勉強するのが一番効率的なのだろうと悩んでいました。

そこでたまたま見つけたのがReactの本家のチュートリアルでした。

普通(?)はなんでも本家のチュートリアルから入るものなのかもしれませんが、便利なサービスが普及した、恵まれた時代になってからプログラミングを初めたおかげで原点を見失っていた感じがします。

というわけで始めていきます。
こちらが本家のチュートリアルのサイトです。
勿論全部英語なのですが、以前から何度かお世話になっているブログに素晴らしい記事がありました。
Reactチュートリアル: Intro To React【日本語翻訳】 | maesblog

勉強がてら英文を読んでみるのもありですが、あまり時間がないので訳があるときは訳を見ましょう。

上のサイトを見ながらチュートリアルを進めていくのですが、あとあとMonaca上で書くことが確定しているので、CodePen上でやるよりはMonaca上でやったほうが若干学習スピードが上がるかなと思い、前回の記事のテンプレ上にここのサンプルのJSの部分を全部移植してから始めました。

また、移植することで生じた問題に「スタイルの適用方法がわからない」というのがありました。
このチュートリアルを試す数日前に外部のフロントエンド勉強会に参加した時にReactに詳しい人に話を聞ける機会があったので、その時に教えてもらったStyled-Componentsを使ってみることにしました。

まだちゃんと調べていないので上辺の上辺しか知らないですが、JSX上に直接スタイルを書くことができるので、これでHTMLとCSSを微塵も触らずにサイトやアプリを作れるようになります。

$ npm install --save-dev styled-componentsでインストールできます。

そしてファイル上に
import styled from 'styled-components';
でインポート。

書き方は公式ページを参考にしてみて下さい。

話を戻して、チュートリアルの回答例はココにあります。

また、チュートリアルの最後に練習問題が5つあったのでやってみました。僕の回答例を以下に掲載しますが、その前に問題3と問題4に関してはヒントになったサイトを載せておきます。

問題3. Rewrite Board to use two loops to make the squares instead of hardcoding them.
【参考】javascript – loop inside React JSX – Stack Overflow

問題4.Add a toggle button that lets you sort the moves in either ascending or descending order.
【参考】Array.prototype.reverse() – JavaScript | MDN

以下僕の回答例。間違っているところもあるかも。

 

Styled-Componentsの使い方や各場所は適切ではないかもしれませんが、現段階で工夫した点はStyled-ComponentsはあくまでのJavaScriptなので動的にDOMにidを付与してみたりしたところです。

動かしてみた感じです。

ボタンのデザインが若干浮いているのは適当にOnsenUIを使ってみたからです。
Material-UIやGrommetなど、Reactと相性の良いUIフレームワークを導入してみようと思って試してみたのですが、両方共上手く行きませんでした。

具体的に言うと
Material-UI→インストールし、ファイルの読み込みまではできたが、表示ができなかった。エラーが出続ける。
Grommet→インストールが完了し、ファイルの読み込み、表示も上手く行ったが、肝心のスタイルが適用されておらず使うメリットを享受できなかった。

これらに関しては単純に僕の知識不足が問題なのか、Monacaがそもそもそういう仕様なのかはわからないのでまた今度トライしてみたいと思います。
上2つのフレームワークはココから選びました。

コメントを残す