What's New Qiita

20200401のReactに関する記事は8件です。

  • 投稿日：2020-04-01T23:30:12+09:00

【25日目】React(フォーム)

はじめに

こんばんは。
昨日は体調不良でした。
1日ぶりにアウトプットしていきます。

今日の学び

progate React 4

フォーム

import React from 'react';

class ContactForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isSubmitted: false,　 {/*真偽値型のstate*/}
    };
  }

  handleSubmit(){　 {/*stateの値の更新*/}
    this.setState({isSubmitted:true});
  }

  render() {
    let contactForm;
    if (this.state.isSubmitted) {
      contactForm = (　 {/*送信できた場合*/}
        <div className='contact-submit-message'>
          送信完了
        </div>
      );
    } else {
      contactForm = (　 {/*まだ送信していない*/}
        <form  onSubmit={()=>{this.handleSubmit()}}> 
　　　　　{/*formタグで囲う*/} {/*フォーム送信時にメソッドの呼び出し 送信時に処理*/}
          <p>メールアドレス（必須）</p>
          <input />
          <p>お問い合わせ内容（必須）</p>
          <textarea />
          <input
            type='submit' {/*送信ボタン*/}
            value='送信' {/*ボタンの表示*/}
          />　 {/*/を忘れないように*/}
        </form>
      );
    }

    return (
      <div className='contact-form'>
        {contactForm}
      </div>
    );
  }
}

export default ContactForm;

入力内容の管理

import React from 'react';

class ContactForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isSubmitted: false,
      email: '',  {/*入力値を管理するstate*/}
    };
  }

  handleEmailChange(event){
    const inputValue = event.target.value; {/*入力値を受け取る*/}
    this.setState({email:inputValue}); {/*入力値でstateを更新*/}
  }

  handleSubmit() {
    this.setState({isSubmitted: true});
  }

  render() {
    let contactForm;
    if (this.state.isSubmitted) {
      contactForm = (
        <div className='contact-submit-message'>
          送信完了
        </div>
      );
    } else {
      contactForm = (
        <form onSubmit={() => {this.handleSubmit()}}>
          <p>メールアドレス（必須）</p>
          <input
            value={this.state.email}  {/*value属性を値emailとする*/}
            onChange={(event) => {this.handleEmailChange(event)}}
          />
　　　　　　 {/*入力されるとeventが始まる eventを引数にしてメソッドの呼び出し*/}
          <p>お問い合わせ内容（必須）</p>
          <textarea />
          <input
            type='submit'
            value='送信'
          />
        </form>
      );
    }

    return (
      <div className='contact-form'>
        {contactForm}
      </div>
    );
  }
}

export default ContactForm;

入力値のチェック

import React from 'react';

class ContactForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isSubmitted: false,
      email: '',
      hasEmailError: false, {/*入力値が空かどうか判断*/}
    };
  }

  handleEmailChange(event) {
    const inputValue = event.target.value;
    const isEmpty = inputValue === ''{/*空の文字列と比較しisEmptyに代入*/}

    this.setState({
      email: inputValue,
      hasEmailError:isEmpty 
    });

  }

  handleSubmit() {
    this.setState({isSubmitted: true});
  }

  render() {
    let emailErrorText;
    if (this.state.hasEmailError) {
      emailErrorText = (
        <p className='contact-message-error'>
          メールアドレスを入力してください
        </p>
      );
    }

    let contactForm;
    if (this.state.isSubmitted) {
      contactForm = (
        <div className='contact-submit-message'>
          送信完了
        </div>
      );
    } else {
      contactForm = (
        <form onSubmit={() => {this.handleSubmit()}}>
          <p>メールアドレス（必須）</p>
          <input
            value={this.state.email}
            onChange={(event) => {this.handleEmailChange(event)}}
          />
          {emailErrorText}
          <p>お問い合わせ内容（必須）</p>
          <textarea />
          <input
            type='submit'
            value='送信'
          />
        </form>
      );
    }

    return (
      <div className='contact-form'>
        {contactForm}
      </div>
    );
  }
}

export default ContactForm;

所感

progateは終了してしまいました。
なんとなく形は分かった気がします。
これではまだまだ知識不足だと思うので、
Udemyで勉強していきたいと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-01T23:30:12+09:00

【25日目】React

はじめに

こんばんは。
昨日は体調不良でした。
1日ぶりにアウトプットしていきます。

今日の学び

progate React 4

フォーム

import React from 'react';

class ContactForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isSubmitted: false,　 {/*真偽値型のstate*/}
    };
  }

  handleSubmit(){　 {/*stateの値の更新*/}
    this.setState({isSubmitted:true});
  }

  render() {
    let contactForm;
    if (this.state.isSubmitted) {
      contactForm = (　 {/*送信できた場合*/}
        <div className='contact-submit-message'>
          送信完了
        </div>
      );
    } else {
      contactForm = (　 {/*まだ送信していない*/}
        <form  onSubmit={()=>{this.handleSubmit()}}> 
　　　　　{/*formタグで囲う*/} {/*フォーム送信時にメソッドの呼び出し 送信時に処理*/}
          <p>メールアドレス（必須）</p>
          <input />
          <p>お問い合わせ内容（必須）</p>
          <textarea />
          <input
            type='submit' {/*送信ボタン*/}
            value='送信' {/*ボタンの表示*/}
          />　 {/*/を忘れないように*/}
        </form>
      );
    }

    return (
      <div className='contact-form'>
        {contactForm}
      </div>
    );
  }
}

export default ContactForm;

入力内容の管理

import React from 'react';

class ContactForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isSubmitted: false,
      email: '',  {/*入力値を管理するstate*/}
    };
  }

  handleEmailChange(event){
    const inputValue = event.target.value; {/*入力値を受け取る*/}
    this.setState({email:inputValue}); {/*入力値でstateを更新*/}
  }

  handleSubmit() {
    this.setState({isSubmitted: true});
  }

  render() {
    let contactForm;
    if (this.state.isSubmitted) {
      contactForm = (
        <div className='contact-submit-message'>
          送信完了
        </div>
      );
    } else {
      contactForm = (
        <form onSubmit={() => {this.handleSubmit()}}>
          <p>メールアドレス（必須）</p>
          <input
            value={this.state.email}  {/*value属性を値emailとする*/}
            onChange={(event) => {this.handleEmailChange(event)}}
          />
　　　　　　 {/*入力されるとeventが始まる eventを引数にしてメソッドの呼び出し*/}
          <p>お問い合わせ内容（必須）</p>
          <textarea />
          <input
            type='submit'
            value='送信'
          />
        </form>
      );
    }

    return (
      <div className='contact-form'>
        {contactForm}
      </div>
    );
  }
}

export default ContactForm;

入力値のチェック

import React from 'react';

class ContactForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isSubmitted: false,
      email: '',
      hasEmailError: false, {/*入力値が空かどうか判断*/}
    };
  }

  handleEmailChange(event) {
    const inputValue = event.target.value;
    const isEmpty = inputValue === ''{/*空の文字列と比較しisEmptyに代入*/}

    this.setState({
      email: inputValue,
      hasEmailError:isEmpty 
    });

  }

  handleSubmit() {
    this.setState({isSubmitted: true});
  }

  render() {
    let emailErrorText;
    if (this.state.hasEmailError) {
      emailErrorText = (
        <p className='contact-message-error'>
          メールアドレスを入力してください
        </p>
      );
    }

    let contactForm;
    if (this.state.isSubmitted) {
      contactForm = (
        <div className='contact-submit-message'>
          送信完了
        </div>
      );
    } else {
      contactForm = (
        <form onSubmit={() => {this.handleSubmit()}}>
          <p>メールアドレス（必須）</p>
          <input
            value={this.state.email}
            onChange={(event) => {this.handleEmailChange(event)}}
          />
          {emailErrorText}
          <p>お問い合わせ内容（必須）</p>
          <textarea />
          <input
            type='submit'
            value='送信'
          />
        </form>
      );
    }

    return (
      <div className='contact-form'>
        {contactForm}
      </div>
    );
  }
}

export default ContactForm;

所感

progateは終了してしまいました。
なんとなく形は分かった気がします。
これではまだまだ知識不足だと思うので、
Udemyで勉強していきたいと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-01T20:14:17+09:00

MERNスタックをDockerでやっていく

はじめに

３０代正社員経験のないクズ人間だけどSHUSHOKUできました！やったー！
うれC！！！！！！！！うれC！！！
MERNスタック使って、ポートフォリオ用にWebアプリ作ってみたけど、大変だった気がします。正直全部大変だし難しいし自分が何やってるかよくわからない感じになります。頭が悪いので整理ができない……(´・ω・｀)
DockerでMERNスタック環境構築したらDocker使っちゃう気持ちもｱｹﾞｱｹﾞでいけるのでは？などと考え、あとからECRやら楽なんじゃね？とか思っていた時期が自分にもありました。

MERNスタックでなんかDockerもつかって気軽に色々できればいいなあというわけで、今後忘れないように書いておこうと思います。

Dockerについては、「何故Dockerなのか」とか、なんか公式読めば良いとかいう風潮がある気がします。
公式は字が多すぎて読む気がおきないみたいなやつはあります。でも、読め！とインターネッツの中の人たちが言ってくるので読みました。読んでもよくわからないので、脳がやばい。
脳みそやわやわな状態でやっているので、やっていける気がしない。

チラシの裏にでも書いてろ！という記事です。でもQiitaに書いたろと思いました。承認欲求モンスターなので。謝罪しておきます。申し訳ございません。

フォルダ構成

とりあえず、こんなん

.
├── README.md
├── backend
│   ├── Dockerfile-dev
│   ├── app.js
│   ├── config.env
│   ├── controllers
│   ├── middleware
│   ├── models
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   ├── routes
│   ├── uploads
│   └── utils
├── frontend
│   ├── Dockerfile-dev
│   ├── build
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   └── src
├── dev-docker-compose.yml
├── node_modules
├── package-lock.json
└── package.json

メインにフロントエンドとバックエンドそれぞれフォルダを作りその中にdev環境Dockerfileをそれぞれ置いておく。
メインフォルダにはdev環境Docker-compose.ymlをつくる。
とりあえずsudo apt install docker-composeやら色々はやってる状態。
他のフォルダなんかは、皆自由にやっていっていると思います。

基本的に↓

nanka_app_nandemo_yoi_example/
├── node-backend/
│   └── Dockerfile
├── react-frontend/
│   └── Dockerfile
└── docker-compose.yml

こういう構成で作っていきたい気持ち。

バックエンド（MERNのN担当Node.js）

とりあえず動かしたいので、こんな感じに。

Dockerfile-dev
FROM node:10.18.0-alpine3.9

EXPOSE 3000

RUN apk add --update curl
WORKDIR /usr/src/app

COPY package.json package-lock.json* ./

RUN npm cache clean --force && npm install && npm install -g nodemon
COPY . .

CMD ["npm", "run", "dev"]

自分にはdev環境とproduction環境をしっかり構成したいという夢がありました
というわけで、devになっていますが、別にDockerfileとしていれば良い。

フロントエンド（MERNのR担当React.js）

担当とか書くと、なんかMERNの中で誰推し？みたいな雰囲気になっていいですね。
皆JS界からきてるわけですし、でかいアイドルグループみたいなもんやろ。しらんけど。
自分は誰推しでもないです、皆むずかしい。もう誰も信じない。

とりあえずこんな感じ

Dockerfile-dev
FROM node:10.18.0-alpine3.9

EXPOSE 3000

RUN apk add --update curl
WORKDIR /usr/src/app

COPY package.json package-lock.json* ./

COPY . .

CMD [ "npm", "start" ]

ほぼバックエンド側と変わらない感じのやつ。少しでも、行数を減らしたい。行が増えると絶望感が増す。

COMPOSEファイル（MERNのM担当Mongoあたりも登場）

コンポーズファイル作ります。
こいつがないと私にはなにもできない。

dev-docker-compose.yml
version: "2.2"

services:
  mongodb:
    image: "mongo"
    ports:
      - "27017:27017"
  backend:
    build:
      context: ./backend/
      dockerfile: Dockerfile-dev
    ports:
      - "6200:6200"
    volumes:
      - ./backend:/usr/src/app
    depends_on:
      - mongodb
  frontend:
    build:
      context: ./frontend/
      dockerfile: Dockerfile-dev
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/usr/src/app
    depends_on:
      - backend

ビルドしたい

docker-compose -f dev-docker-compose.yml buildこれでビルドできる。
あとは毎回docker-compose -f dev-docker-compose.yml upとかすれば良い。

これで、なんか構築はされる感じになっている。
あとはCircleCIがどうとか、Node.js側でAPIがどうのとかReact側でSPAがどうとか、MongoDBでAtlasで某とか、そういうあれでなんかやっていきます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-01T17:49:55+09:00

[超簡単]Gatsby.jsでカッコいいポートフォリオを作成する方法

はじめに

今回は、Gatsby.jsを使って簡単にカッコいいポートフォリオを作る方法を共有したいと思います。

こちらが、完成形の例になります。

そもそもGatsbyとは？

Gatsbyは、Reactに基づく無料のオープンソースフレームワークであり、開発者が非常に高速なWebサイトやアプリを構築するのに役立ちます

*公式ドキュメント（英語）より

手順

1 . まずは、Gatsbyでの開発に必要な以下のツールを揃えましょう。

  • Git
  • Node.js（npmを使えているなら入っているはず）
  • Gatsby CLI

もしもインストール方法がわからない場合は、こちらの記事を参考にしてください。

2 . こちらのGatsby公式サイトで、お好きなテンプレートを見つけましょう。

今回は、この
gatsby-starter-portfolio-caraというテンプレートを使用していきます。

Screen Shot 2020-04-01 at 17.21.06.png

3 . 作業用のディレクトリにcd 開発をするディレクトリ名で移動し、gatsby newする

先ほどのテンプレート詳細ページに下にスクロールしてもらうと、使い方が英語で載っています。

そこに、gatsby newのコマンドが載っているので、それを作業するディレクトリに移動して実行します。

cd ディレクトリ名
gatsby new gatsby-starter-portfolio-cara https://github.com/LekoArts/gatsby-starter-portfolio-cara

その後、gatsby newで生成したディレクトリにcdで移動し、次はgatsby developします。

cd gatsby-starter-portfolio-cara
gatsby develop

はい、一応完成です！！
gatsby developが成功したら、ブラウザでタブを開いてlocalhost:8000にアクセスしてみてください。

お洒落でカッコいいサイトができあがってますよね！！

Screen Shot 2020-04-01 at 17.34.58.png

使用するテンプレートによっても異なりますが、もちろん中身の編集も簡単にできます！

今回の
gatsby-starter-portfolio-caraというテンプレートの場合、作成されたフォルダの中のsrcの中にintro.mdxというファイルが入っており、ページのトップの部分はマークダウン式で中身を自由に編集できるようになっています。トップ以外の箇所も、projects.mdx、about.mdx、contact.mdxという風にそれぞれファイルをsrcの中に作成してマークダウン式で編集可能です。

最後に

今回は、Gatsby.jsを使用して簡単にカッコいいポートフォリオサイトを作成する方法をシェアしました！
とっても簡単なので、ぜひ皆さん試してみてくださいね！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-01T17:47:39+09:00

[第0章：環境構築編] Gatsby公式ドキュメントを翻訳してみた。

はじめに

このシリーズでは、英語ソースばかりで「Gatsby使ってみたいけど、よくわからない...」という方々のために、公式Docを翻訳（ところどころざっくり要約）していきます。

実際の公式ドキュメントはこちら

（この章では、Gatsby.jsを使って開発ができる環境の構築を済ませ、Hello world!と画面に表示させることがゴールです）

〜〜 以下、翻訳となります 〜〜

0. 開発に必要な環境を構築しよう

Gatsbyを使用したサイトを開発する前に、まずはあなたが次に挙げるようなウェブ開発における主要技術を使い慣れているか確認してください。

  • CLI(ターミナル)
    （ある程度プログラミングをしている方には必要ないと思うので、ターミナルの説明は割愛します）
  • Node.js
    Node.jsとは、JavaScirptのコードをブラウザの外でも実行できるようにするためのものです。GatsbyもNode.jsを使用して動いています。よって、Gatsbyを使って開発する際には、安定して動く最近のバージョンのNode.jsをインストールする必要があります。npmとNode.jsは基本的にセットでインストールされるので、もしnpmを使ったことがなければ、Node.jsもインストールされていない可能性が高いでしょう。

参考記事： HomebrewでNode.jsとnpmをインストールする方法

  • Git
    Gitとは無料でオープンソースのバージョン管理システムです。Gatsbyでは、「starter」というページ作成のためのテンプレートのようなものを活用してSPAのサイトを高速で作ることができるのですが、その「starter」をインストールする際にGitを使用することになるので、Gitはあらかじめインストールしておいてください。

参考記事： 最新のGitをインストールする方法

Gatsby CLIを使ってみよう

Gatsby CLIは、あなたが高速でGatsbyのサイトを開発するのをより簡単にしてくれるnpmパッケージです。

以下のコマンドを実行して、インストールしてみましょう。

npm install -g gatsby-cli

インストールが完了したら、以下のコマンドで実行可能なコマンドを確認できます。

gatsby --help

console-gatsby-help.png

Gatsbyでサイトを作ってみよう

ここまできたら、もうGatsby CLIを使ってGatsbyのサイトを作成する準備は完了です。このツールを使って、前述した「starter」をダウンロードできます。今回使用する「Hello world starter」はGatsbyサイトを作るのに必要最低限のものだけが入っているstarterです。

1 . 　ターミナルを開く
2 . 　starterを利用して、gatsby newでサイトを作成

gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

3 . 　作成したディレクトリに移動

cd hello-world

4 . 開発用サーバーを立ち上げる

gatsby develop

これだけで、今回の作業はおしまいです！！

ローカル環境でサイトを見てみよう

それでは以下のURLにアクセスして、作ったサイトを見てみましょう。

http://localhost:8000/

helloworld-home-page.png

おめでとうございます?

これで、あなたの最初のGatsbyサイトができました！
gatsby developで立ち上げた開発用サーバーが動いている限り、あなたはいつでもこのhttp://localhost:8000/にアクセスできます。
もしサーバーを止めたければCtrl + cで止められますし、また立ち上げたければもう一度gatsby developを実行してください。

参考文献：Gatsby公式ドキュメント

次の章のテーマは、
「今回gatsby newで作成したgatsbyサイトがどんな構成で成り立っているのか理解する」です。

お楽しみに！！

[第1章：Gatsbyサイトの理解 編] Gatsby公式ドキュメントを翻訳してみた。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-01T15:46:20+09:00

CDNでReactを使う方法

導入方法

reactとreact-domをCDNで読み込む

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

使用例

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React</title>
</head>
<body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script>
        let dom = document.querySelector('#root');
        let el = React.createElement(
          'p', {}, 'React'
        );
        ReactDOM.render(el, dom);
    </script>
</body>
</html>

JSXを使う場合

babelをCDNで読み込む

<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

scriptのtypeは「text/babel」にする

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React</title>
</head>
<body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    <script type="text/babel">
        let dom = document.querySelector('#root');
        let el = (
            <div>
                <p>React</p>
            </div>
        );
        ReactDOM.render(el, dom);
    </script>
</body>
</html>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-01T15:15:22+09:00

Next.jsでsvgを使用する

概要

  • TypeScript × Next.jsでsvgを使う

手順

Next.jsのリポジトリにsvgを使用する例があります。

これを参考にbabel-plugin-inline-react-svgを追加

yarn add -D babel-plugin-inline-react-svg

.babelrc に以下を追記

.babelrc
{
  "presets": [ "next/babel" ],
  "plugins": [ "inline-react-svg" ]
}

これでNext.js上で、svgをそのままインポートして利用できます。

しかし、Typescriptを使用している場合、次のようなエラーが出ます。

Cannot find module './logo.svg'.ts

これは解決するには以下の宣言を追加します。

index.d.ts
declare module '*.svg'

以上で問題なくsvgが使用できるはずです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-01T14:24:12+09:00

Create React AppでTypeScriptとScssを使う

Create React App は React を学習するのに快適な環境であり、React で新しいシングルページアプリケーションを作成するのに最も良い方法です。(-- 新しい React アプリを作る)

Create React App を用いて React で SPA ( single-page application ) を作成する際に、TypeScript と Scss を導入するためのメモです。

Create React App のプロジェクトをインストール

npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescript

--template typescriptをつけるだけ

node-sassをインストール

npm install node-sass --save
# or
yarn add node-sass

あとはsrc/App.cssをsrc/App.scssに書き換えて、src/App.jsでsrc/App.scssを読み込むように書き換えるだけ

以上でCreate React AppでTypeScriptとScssを書ける。

参考

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧