Go to Qiita Advent Calendar 2024 Top
LoginSignup
9
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@NaokiEgawa(Naoki Egawa)

Reactの開発準備をして、styled-componentsでスタイルをあてていく

Posted at

概要

今回はReactの開発環境を作成し、それに対してstyled-componentsでスタイルをあてていきます
開発環境はMacのlocal環境, 利用しているIDEはAtomです

今回のゴールは下記の2点です

  • Reactの開発準備 (react-create-appなどのボイラープレートは利用しない)
  • styled-componentでスタイルをあてる (静的なものと、動的に変化するもの)

開発準備

プロジェクトを作成する

$ mkdir -p ~/src/styled-components-test
$ cd ~/src/styled-components-test
$ npm init -y

webpack, babelのinstall

webpackとは? babelとは? ということについては下記の記事を参照してください

$ npm install --save-dev webpack webpack-cli babel-core babel-loader babel-preset-react babel-preset-env

webpackの設定ファイルを作成

webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        // 拡張子が.js, .jsxのものをビルド対象とする
        test: /\.(js|jsx)$/,
        // babel-loaderを利用してビルドする
        use: {
          loader: 'babel-loader',
        },
        // /node_modules/配下のファイルは除外する
        exclude: /node_modules/,
      },
      {
        // 拡張子が.gif, .png, .jpeg, .jpg, .svgのものをビルド対象とする
        test: /\.(gif|png|jpe?g|svg)$/,
        // url-loaderを利用してビルドする
        loader: 'url-loader',
      }
    ]
  },
  // importで含めたいファイルの拡張子を指定
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  // ビルドしたファイルを出力する場所を指定
  output: {
    path: __dirname +'/dist',
    filename: 'main.js'
  },
};

./package.jsonの"scripts"に"devel": ~を追加

./package.json
"scripts": {
    "devel": "webpack --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

babelの設定ファイルを作成

.babelrc
{
  "presets": [
    "env",
    "react"
  ]
}

reactのインストール

React.jsをインストールする

$ npm install --save react react-dom

hello worldの表示

上記手順で開発準備ができたので、ここから実際にサンプルコードを書いていきます

必要ファイルの作成

下記の3ファイルを作成していく

$ mkdir dist
$ touch ./dist/index.html
$ touch ./src/index.js
$ touch ./src/App.jsx
./dist/index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>

<body>
  <div id="app"></div>
  <script src="./main.js"></script>
</body>

</html>
./src/index.js
import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('app')
);
./src/App.jsx
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        hello world!
      </div>
    );
  }
}

export default App;

ビルドしてhello worldを表示する

$ npm run devel
$ open ./dist/index.html

これでブラウザ上でhello worldの文字が表示されました

styled-componentsを利用してスタイルをあてていく

次に上記に対してstyled-componentsを利用してCSSをあてていきます

styled-componentsのinstall

$ npm install --save styled-components

スタイルをあてて文字を赤くする

App.jsxを以下のように変更

./src/App.jsx
import React, { Component } from 'react';
import styled from 'styled-components';

class App extends Component {
  render() {
    return (
      <HelloWorld>
        hello world!
      </HelloWorld>
    );
  }
}

const HelloWorld = styled.div`
  color: red;
`;

export default App;

これでindex.htmlを開くと、"hello world!"の文字が赤くなっています

動的にCSSの値を変更する

次に、ブラウザサイズに応じて文字の色を変えるようにしてみます

./src/App.jsx
import React, { Component } from 'react';
import styled from 'styled-components';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { windowWidth: window.innerWidth };
    this.updateWindowWidth = this.updateWindowWidth.bind(this);
  }

  componentWillMount() {
    window.addEventListener('resize', this.updateWindowWidth);
  }

  updateWindowWidth() {
    const windowWidth = window.innerWidth;
    this.setState({ windowWidth });
  }

  render() {
    return (
      <HelloWorld width={this.state.windowWidth}>
        hello world!
      </HelloWorld>
    );
  }
}

const getColor = (width) => width >= 500 ? 'red' : 'blue';

const HelloWorld = styled.div`
  color: ${({ width }) => getColor(width)};
`;

export default App;

これでブラウザの幅が500以上の時には文字色が赤、500未満の時には青色になりました

以上で今回やりたい以下の2点ができました:clap::clap:

  • Reactの開発準備 (react-create-appなどのボイラープレートは利用しない)
  • styled-componentでスタイルをあてる (静的なものと、動的に変化するもの)

Appendix その1: webpack-dev-serverで実行する

今のままだと、変更を加えて手動でビルドコマンドを実行して...と手間がかかります
なので自動で変更を取り込んでくれるよう、webpack-dev-serverで実行するようにします

$ npm install --save-dev webpack-dev-server

webpacp.config.jsのファイルに以下のようにdevServerという設定を追加します

webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: {
          loader: 'babel-loader',
        },
        exclude: /node_modules/,
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/,
        loader: 'url-loader',
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  output: {
    path: __dirname +'/dist',
    filename: 'main.js'
  },
  devServer: {
    contentBase: 'dist',
    port: 3000,
  },
};

package.jsonのscriptsに以下のようにstartを追加します

package.json
"scripts": {
    "start": "webpack-dev-server --mode development --open",
    "devel": "webpack --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

以上で準備は完了です
次のコマンドを実行するとビルドが実行され、上記hello worldがブラウザで開きます

$ npm run start

またApp.jsxへと変更を加えると、それが自動でブラウザへと反映されます
なので変更の度に手動でビルドをし直す必要がなくて非常に楽です

Appendix その2: eslintでコードを綺麗に

eslintはコードのスタイルをチェックしてくれます

これを入れると記述ミスがなくなり、コードが綺麗になってバグも減りますし、コードの可読性が上がります
また複数人で開発する時なども一定のルールが自動で適用されると楽ですよね、ということで入れていきましょう

Atomに対してeslintのプラグインをインストールする

以下を参考に設定を入れていきます

プロジェクトに対してeslintの設定をする

eslintをプロジェクトに対してインストール

$ npm install --save-dev eslint

対話形式で必要な設定を行っていく
今回はAirbnbのスタイルを利用していくので、以下のように設定

$ ./node_modules/eslint/bin/eslint.js --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Airbnb (https://github.com/airbnb/javascript)
? Do you use React? Yes
? What format do you want your config file to be in? JavaScript
Checking peerDependencies of eslint-config-airbnb@latest
The config that you've selected requires the following dependencies:

eslint-config-airbnb@latest eslint@^4.19.1 || ^5.3.0 eslint-plugin-import@^2.14.0 eslint-plugin-jsx-a11y@^6.1.1 eslint-plugin-react@^7.11.0
? Would you like to install them now with npm? Yes
Installing eslint-config-airbnb@latest, eslint@^4.19.1 || ^5.3.0, eslint-plugin-import@^2.14.0, eslint-plugin-jsx-a11y@^6.1.1, eslint-plugin-react@^7.11.0
+ eslint-plugin-import@2.14.0
+ eslint-config-airbnb@17.1.0
+ eslint-plugin-jsx-a11y@6.1.1
+ eslint-plugin-react@7.11.1
+ eslint@5.5.0
updated 5 packages in 5.295s
Successfully created .eslintrc.js file in /Users/naoki/src/styled-components-test

これでインストールは完了

これでAtom上でファイルを開いてみてると、色々とエラーが表示されています
試しにエラー文言に沿ってコードを修正してみてください:thumbsup:
(書き直すのが面倒いだけです。こういうことにならないように一番最初にeslint入れて、最初から正しいコード書いてください)

Appendix その3: giboを利用して.gitignoreのファイル内容を自動で生成

$ brew install gibo

以下コマンドが出力してくれる.gitignoreの内容一覧を取得できます

$ gibo list
=== Languages ===

Actionscript		CUDA			Go			Lithium			Processing		SugarCRM
Ada			D			Godot			Lua			PureScript		Swift
Agda			Dart			Gradle			Magento			Python			Symfony
Android			Delphi			Grails			Maven			Qooxdoo			SymphonyCMS
AppceleratorTitanium	DM			GWT			Mercury			Qt			Terraform
AppEngine		Drupal			Haskell			MetaProgrammingSystem	R			TeX
ArchLinuxPackages	Eagle			Idris			Nanoc			Rails			Textpattern
Autotools		Elisp			IGORPro			Nim			RhodesRhomobile		TurboGears2
C++			Elixir			Java			Node			ROS			Typo3
C			Elm			Jboss			Objective-C		Ruby			Umbraco
CakePHP			EPiServer		Jekyll			OCaml			Rust			Unity
CFWheels		Erlang			Joomla			Opa			Sass			UnrealEngine
ChefCookbook		ExpressionEngine	Julia			OpenCart		Scala			VisualStudio
Clojure			ExtJs			KiCad			OracleForms		Scheme			VVVV
CMake			Fancy			Kohana			Packer			SCons			Waf
CodeIgniter		Finale			Kotlin			Perl			Scrivener		WordPress
CommonLisp		ForceDotCom		LabVIEW			Perl6			Sdcc			Xojo
Composer		Fortran			Laravel			Phalcon			SeamGen			Yeoman
Concrete5		FuelPHP			Leiningen		PlayFramework		SketchUp		Yii
Coq			Gcov			LemonStand		Plone			Smalltalk		ZendFramework
CraftCMS		GitBook			Lilypond		Prestashop		Stella			Zephir

=== Global ===

Anjuta			Diff			JEnv			MicrosoftOffice		SBT			VirtualEnv
Ansible			Dreamweaver		JetBrains		ModelSim		SlickEdit		VisualStudioCode
Archives		Dropbox			Kate			Momentics		Stata			WebMethods
Backup			Eclipse			KDevelop4		MonoDevelop		SublimeText		Windows
Bazaar			EiffelStudio		Lazarus			NetBeans		SVN			Xcode
BricxCC			Emacs			LibreOffice		Ninja			SynopsysVCS		XilinxISE
Calabash		Ensime			Linux			NotepadPP		Tags
Cloud9			Espresso		LyX			Otto			TextMate
CodeKit			FlexBuilder		macOS			Patch			TortoiseGit
CVS			GPG			Matlab			Redcar			Vagrant
DartEditor		JDeveloper		Mercurial		Redis			Vim

今回は試しにNodeを選択してそれを.gitignoreへと出力していきます

$ gibo dump Node >> .gitignore

以上で.gitignoreへと内容が書き込まれました
中身を勝手に生成してくれるので楽ですね :)

今回の成果物

9
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?