Skip to content

Latest commit

 

History

History
198 lines (125 loc) · 6.91 KB

day0.md

File metadata and controls

198 lines (125 loc) · 6.91 KB
Raw

アジェンダ

  • セットアップ
  • とりあえずReactを書いて、動かす
  • Sketchからコードへ
  • 次回予告

注意

この講座ではフロントエンドを養成するためのレクチャーではありません。 あくまでデザイナーがデザイナーの１ツールとしてReactを使って、デザインできることを目的としています。

今回のことで、「もう俺、React完全理解したわ」と思ったら大間違いです。 フロントエンドは、フロントエンドのツールとしてReactを使って、Webフロントエンドを開発しています。 「デザイナーのためのReact」では、デザイナーがデザインを作るためのツールとしてReactを使えるようになるのが目標です。 その後フロントエンドに興味をもって、フロントに転身するのもアリです。

セットアップ

Node.jsのインストール

https://nodejs.org/ja/

Visual Studio Code(VSCode)sのインストール

https://code.visualstudio.com/

動作確認

VSCode上でターミナルを開きます。VSCodeを開いて、以下のショートカットを実行するとターミナルが開きます。

Control + `

注) 「`」はシングルクウォートじゃなくて、バックチック

ターミナルが開いたら、以下のコマンドを実行します。

node --version

nodeが正しくインストールされていれば、何かしらの数字が帰ってくるはずです。 さらに以下のコマンドを実行します。

npm --version

何かしらの数字が帰ってこればOKです。

ここで出てくる、nodeとnpmについては、今は名前だけ覚えておいて貰えば大丈夫です。

教材のダウンロード

githubに公開しているので、そこからダウンロードします。

https://github.com/st44100/react-for-designers

TextBook

githubに慣れている人は、git cloneしてもOK。 好きなところに、展開してください。

Tipsとして、自分のホームディレクトリからあまり深い位置に置かない方がいいです。 ターミナルになれてないうちは、ディレクトリの移動に時間がかかるのため、なるべくHomeからすぐ行けるところに置いておくとストレスがないと思います。

プロジェクトに必要なライブラリのダウンロード

ダウンロードした教材のディレクトリをVSCodeで開きましょう。

メニューから ファイル > 開く (⌘ + o) で表示された、ファイルダイアログで、先ほど展開したディレクトリを開きます。

VSCodeでディレクトリが開けたら、VSCodeのターミナルを開きます(Control + `)

ターミナルで、以下のコマンドを実行します。

npm install

すると何やら色々ダウンロードしだすので、完了するまで待ちましょう。

とりあえず動かしてみる

必要なライブラリがダウンロードできたら、準備完了です。 ReactやJavaScript何もしらなくていいので、とりあえず動かしてみましょう。

以下のコマンドを実行します。

npm start

👇 実行結果の例

$ npm start

> react-for-designers@1.0.0 start /Users/st44100/workspace/react-for-designer
> start-storybook -p 6006

info @storybook/react v3.4.10
info
info => Loading custom addons config.
info => Using default webpack setup based on "Create React App".
webpack built 782b81bfe416a1a3e1a6 in 5037ms
info Storybook started on => http://localhost:6006/
info

するとさっきみたいな何やら色々動いて、最終的に1つのURLが出てきます。 出てきたURLを⌘キーを押しながらクリックしてみましょう。ブラウザが立ち上がって、そのURLが表示されるはずです。

さっそくWelcomeページを書き換えましょう。JSなんて知らなくていいです。 とりあえず、見よう見まねでやりましょう。

VSCodeでWelcome.jsxを開きます。Welcom.jsxはsrcディレクトリ下のday0の中にあります。 こういう場合、エンジニアはよく./src/day0/Welcome.jsxと表記します。 ./は、今いる場所という意味。

Welcome.jsxを開いたら、適当にテキストを書き換えてみましょう。

書き換えて保存するとターミナルで何やらガチャガチャ動き出すと思います。 一旦無視して、ブライザに戻ってみましょう。 先ほどのWelcomeページがリロードしていないのに書き換わっているはずです。

ここまできたらもうとりあえずReactは書けて、自分の書いたコードが動いていることになります。

自分が知っているHTML/CSSの知識を総動員して、一度できる限りWelcomeページを改変していってみましょう。

==ここら辺で休憩==

デザインをつける

スタイリングについて

Reactのスタイリング手法はいくつかあります。 今回はstyled-componentsというものを使います。

大体以下のような形でCSSを記述して、スタイリングします。

👇 styled-componentsによるReactのスタイリングの例。

const FancyDiv = styled.div`
  margin: 8px;
  padding: 4px;
  boarder-radius: 4px;
  border: solid 1px #999;
`;

適当なスタイルをSketchからコピーすることで、SketchのデザインをReactへ反映できます。

Copy CSS from Sketch to React

👇 Sketchの「Copy CSS attributes」した結果の例。

/* My Fansy Heading: */
font-family: HiraginoSans-W7;
font-size: 18px;
color: #F5A623;
letter-spacing: 0;
text-align: center;

適当にスケッチ上で見出しのテキストスタイルを作って、コピーしてReactへ反映してみましょう。

SketchとReact そして、styled-componentsを使うとすごく簡単にデザインを実際に動くコードにできるのがわかったはず。

ただし今日作ったようなReactのコンポーネントのほとんどは、実際にプロダクションで使えません。 フロントエンドはもっと色々考えて本番環境でちゃんと動くフロントのコードを書いています。

最初にも言いましたが、デザイナーのためのReactが少しわかっただけなので注意しましょう。

ここからはエクストラ

時間が余ったら以下を座学的に紹介

  • nodeとnpm
  • JavaScriptとReact
  • Framer X ちらみせ

次回予告

次回予告 ReactでUIデザインできるようになってみよう!

その次、ボタン押したら、どうこうなるとかやりたくなるよね・・・