掲示板(仮)アプリを作ってみよう!Part1

React
とんぺい
とんぺい

最近Reactの勉強が楽しいブゥ!

今日は何を学べるのかなぁ…

師匠こんにちは!

師匠
師匠
 

やぁ、とんぺいくん。

いらっしゃい。

今日は、Reactを用いて簡単な掲示板を作ってみよう。

とんぺい
とんぺい

おぉ!

なんだか楽しそうなテーマだブゥ!

よろしくお願いします!

師匠
師匠

それでは恒例の

create-react-appコマンド

を使って、アプリケーションを作成する準備をしていこう。

まずはアプリケーションを作成する準備!

とんぺい
とんぺい

create-react-app board

っと!

うん!できたブゥ!

師匠
師匠

流石だね。

じゃあこちらも恒例だけど、デフォルトのファイルを全て削除して、index.jsApp.jsを作成しよう。ここまでが、アプリ作成の準備段階だったね。

とんぺい
とんぺい

デフォルトのファイルを削除して、index.jsApp.jsを作成っと!

だんだん準備もスピーディーにできるようになってきたブゥ!

Semantic UIの導入

師匠
師匠

では、ここからが今日の本題に入るよ。

今回は冒頭で見せたアプリケーションのデザインをSemantic UIを使うことで実現するよ。

とんぺい
とんぺい

Semantic UI

初めて聞いたブゥ…

Semantic UIってなんのことだブゥ?

師匠
師匠

Semantic UIと言うのはcssフレームワークの1種で、これを使うことで自分で1からCSSを描かなくても簡単に綺麗なデザインでWebサービスを作ることができるんだ。

とんぺい
とんぺい

へぇ〜、なるほどぉ!

どうやって導入するんだブゥ?

師匠
師匠

まずは『Semantic UI cdn』にアクセスしよう。

たくさんのリンクが貼られていることは確認できたかな?

この中から、『https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css』をコピーしよう。

とんぺい
とんぺい

うわ〜、URLが多すぎてどれがどれだかわからないブゥ〜!!

おっ!あった!

下の方から探したほうが早いブゥね。

師匠
師匠

無事にURLがコピーできたなら、それをpublicディレクトリーのindex.htmlファイルのheadタグの中に書き込もう。

とんぺい
とんぺい

うん!

おそらくできたブゥ!

師匠
師匠

それでは、Google Chromeのデベロッパーツールを開いてNetworkの項目を確認しよう。下の写真のようにsemantic.min.cssが表示されていればOKだよ。

コメント部分を作成する

とんぺい
とんぺい

うまく表示されたブゥ!

師匠
師匠

よし、じゃあ次はApp.jsの中身を以下のように変更してコメント部分を作成していこう。

ここではSemantic UIのCommentを使ってコメント部分を作成していくよ。

とんぺい
とんぺい

あれ?

アバターがうまく表示されていないなぁ…

師匠、これはどうすればいいブゥ?

師匠
師匠

手持ちにアバター画像などのサンプルデータがない…

そんな時はfaker.jsライブラリーを使ってアバター画像を入手しよう。

faker.jsの導入

とんぺい
とんぺい

faker.jsとはなんだブゥ?

師匠
師匠

faker.jsとはオープンソースのライブラリーでこれをアプリケーションに組み込むことで、アバター画像など大量の仮データを生成してくれるんだよ。

とんぺい
とんぺい

ほうほう。

これはどうやって使うブゥ?

師匠
師匠

外部パッケージをアプリケーションに取り込む際にはyarnコマンドを使うよ。

一旦ターミナル上で『control + c』を入力してlocalのサーバーを停止し、yarn add fakerと入力しよう。

とんぺい
とんぺい

yarn add faker

成功したブゥ!

師匠
師匠

それでは、もう一度yarn startを入力してlocalサーバーを立ち上げよう。

そして、App.jsのアバター部分のソースコードを以下のように変更しよう。

とんぺい
とんぺい

おぉ!

アバター画像に知らない女の人が表示されたブゥ!

師匠
師匠

うまくいったようだね。

それでは、ここで一旦休憩を挟んで、リフレッシュしてから続きを進めていこう。

次回はpropsの復習も兼ねてCommentDetailコンポーネントを作成し、複数の投稿を表示し、評価の項目も付け加えていくよ。

コメント

タイトルとURLをコピーしました