20191129のReactに関する記事は4件です。

投稿日：2019-11-29T22:59:45+09:00

アプリ開発を5分で爆速整備する

趣旨

アプリ開発をしたいときありますよね。（あるあるだね。）
でも忙しすぎて時間がない。時は金なり。お金は大事。
そんな人のために、アプリ開発最初の整備を5分で行います。

あ、でも本当に最初の人は色々インストールしなくちゃだから15分ください。
次からは5分でできるので最初ぐらい我慢してください。開発は忍耐だ。
(なんでこんな記事書いたかというと、ソフトとかのインストールをしてもgitへの登録とか結構最初はわかりづらいと思うので、自分のメモも兼ねて。慣れたらどってことはないんですけどね。)

前提とか

とりあえずreact使います。フロントサイドの神。

開発環境はここではMacですが、Windowsでもほぼ同じです。

ソース管理はgithubです。手軽にオープンリポジトリ。

エディタはVSCodeです。思ったより使いやすかった。何よりVimが使えるから神。

というように一般的な構成にしますので、是非これ通りにやってください。 (一般的すぎると私の中で話題に)
今回は開発が開始できればいいのでDB周りは作りません。あしからず。

流れ

冒頭に話しましたが”開発始めて！とりあえずよろしくね！！”って人は以下の"前提準備"からやってください。
初めてじゃない、とりあえず色々インストールは終わってる、って人は"開発開始"からやってね。
最初に謝っておきます、実際の手順は他の人がまとめてくれてるのでほとんどリンク飛ばさせていただきます。先人の人に感謝。感激。雨霰。

前提整備

Nodejsインストール

VSCodeインストール

Gitインストール

開発開始

githubリポジトリ作成

create-react-app

Let's Coding!

前提整備

では前提整備から始めましょう。
基本的に他の人の記事乗っけてます。
わかりづらければ自分で調べてください。（結構バージョンの進化が早いので、画面若干違うかも。）
mac使っててnodejs使いたいなら、[nodejs mac]とかで調べればいっぱい出てくる。

Nodejsインストール

What's this

Reactを利用するためのパッケージマネージャであるnpmを利用する~~ためだけの~~もの。
javascriptの実行環境です。

Macの人は以下。

https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09

windowsの人は以下。

https://qiita.com/maecho/items/ae71da38c88418b806ff

VSCodeインストール

What's this

Microsoftが開発しているエディターです。
エディターは大事ですね。みやすいというのはとても大切です。
他にもAtomとかもありますが、好きなの使うといいです。でも結構VSCode優秀。
~~ちょっとバカにしてた。マイクロソフトさんごめんなさい。~~

Macの人は以下。

https://qiita.com/watamura/items/51c70fbb848e5f956fd6
Macはインストール楽でいいよね。

windowsの人は以下。

https://qiita.com/psychoroid/items/7d85ae6bade4a67aedb1
面倒なので僕は英語のまま使ってます。

Gitインストール

What's this

今や世界一有名なソースコード管理の仕組みですね。
もはやこれは必須。

Macの人は以下。

https://aprico-media.com/posts/1637
さっきhomebrewインストールした人はコマンド一発ですね。
そうでなくてもパッケージで入れるだけです。
なんとなく、Xcode入れてる人は入ってるかも。git --versionとか打てばわかる。

windowsの人は以下。

https://prog-8.com/docs/git-env-win
macより面倒かも。がんばるんば。

一呼吸

おめでとうございます。ここまでで実行できるソフトが整いました。
こういうのはたいがいこういう前提を揃える所で挫折しがちなんですよね。
(Javaとかちょっと前まではこの整備の部分で初心者を選定しているんじゃないかとか思ってた。Pathとか見慣れてない人は全然よくわからないからね・・・）
さっきも書いたけど、アップデートが早すぎて結構インストール画面とか違ってたりするので、根気よく頑張りましょう。

開発開始

ストップウォッチは用意したか
これから開発開始RTAを始める。
はい、よーい、スタート。

githubレポジトリ作成(1.5分)

初回だけ

今回はオープンで行くので、以下でアカウントとっておいてください。
https://github.com/

また、アップロードもするので鍵の登録もしておいてください。以下参考。
(Mac)
https://qiita.com/unsoluble_sugar/items/14bea376d8e6fce82eb3

(Win)
https://qiita.com/coffee_g9/items/e1b9ab28cfa54f854308

二回目以降はここから

以下URLからリポジトリを新規作成。
https://github.com/new

Repository name：適当に
Public：今回はPublicで
あとはそのままCreateRepositoryで。
(.gitignoreとかlicenseとかinitialize READMEとかどちらでもいいです。)

create-react-app(1.5分)

Facebook謹製のreact初期設定コマンドを利用しましょう。

初回だけ

Macならターミナルを起動して、WindowsならPowershellを起動して、以下を実行です。
npm install -g create-react-app
これはcreate-react-appというコマンドをどこからでも実行できるような形でインストールしています。

二回目以降はここから

cd Documents
create-react-app testapp
testappはアプリ名です。さっき作ったリポジトリ名と同じだとわかりやすいと思う。

Let's Coding!(2分)

ここまでで、reactの開発準備は完了しているので、適当に起動確認とgitへのアップロードをします。

react実行

VSCodeで開いてみましょうか。
cd testapp
code .

先ほどのcreate-react-appで、アプリ名としたディレクトリができているので、そこに移動し、
そのあと、codeコマンドでVSCodeを起動しています。(ピリオドつけているのは"このディレクトリで"起動するという意味です。)
macの人はデフォルトではcodeコマンドで起動できないので以下の記事を参考にしてください。
https://qiita.com/naru0504/items/c2ed8869ffbf7682cf5c

これでできなければ普通にVSCode起動してさっき作ったディレクトリを指定してください。

ではサーバを起動してみましょう。

npm start

はい、これで起動しました。簡単ですね。Facebookさんありがとう。

gitへプッシュ

とりあえず開発の雛形ができたので、このソースコードをソースコードを管理するgithubへアップロードしようと思います。
gitを使ってアップロードすることをプッシュするって言います。かっこいいですね。プッシュ。声に出してよみたい日本語。「プッシュね。うんうんわかるわかる。昨日食べたよ」

初回だけ

先ほどgithubでリポジトリを作ったので、それを登録しておきます。
githubの画面に戻って、git@から始まる文字をコピーします。枠の右側のクリップボードへコピーボタンをクリックしても大丈夫です。

vscodeに戻って、コンソールを開いて、以下を実行しましょう。
git remote add origin [先ほどコピーした文字列]

これにて、アップロード先の情報が登録されました。

二回目以降はここから

では、実際にgithubへpushしてみましょう。

vscodeで開いたコンソールで以下を実行してみましょう。
git add . 
git commit -m "First Commit."
git push origin master
何をしているかというと、

git add .

アップロードするファイルを登録。(.としていることによって、全てのファイルが対象となっている。ただし、二回目以降は変更のあったファイルのみが対象となる。)

git commit -m "First Commit."

この状態で一区切りをつける。タグとして"First Commit."というメッセージもつける。

git push origin master

githubサーバへ、変更を反映させる。

こんな感じです。

・gitめちゃくちゃわかりやすいやつ
https://qiita.com/jesus_isao/items/63557eba36819faa4ad9

・git push origin masterについて
http://dqn.sakusakutto.jp/2011/10/git_push_origin_master.html

おわり

とりあえず周囲に開発を始めたいという奇特な人がいたらこれをぶん投げればいいと思います。
なんかあったらコメントください。ベストエフォートで対応します。(対応するとはいってない)

　 Tweet
Qiitaで続きを読む

投稿日：2019-11-29T08:57:12+09:00

React + Redux + Typescriptで"JavaScript heap out of memory"

先日、React + Redux + Typescriptで開発しているプロジェクトで"JavaScript heap out of memory"に遭遇し、解決に１日掛かりました。

最終的に設計した自分のせいだったのですが、戒めの意味でもここで共有しておきます。

ReduxにDOMの参照を持たせたのが原因

はい、もう恥ずかしいぐらいにいろいろやらかしています。そもそもReduxはデータをimmutableに扱うのが原則です。そこにmutableでしかありえないものをホイっと渡していました。

発生するheapエラーの厄介な点は、コードのどこが原因なのかをエラーメッセージが教えてくれないことです。"JavaScript heap out of memory"で調べると、「ビルドする際に使用するメモリーを増やすオプション（--max-old-space-size=xxxx）を追加すると解決する」という情報しか出てきません。

さらにTypescriptを使っていたのでReduxのモジュールとしてstateに以下のようなコードを書いた時点で、そのモジュールのアクションを経由して実際に値を入れたりしなくても、このエラーは発生してしまいます。
import { createSlice, PayloadAction } from 'redux-starter-kit';

type DangerousRefState = {
  div: HTMLDivElement | null;
}

const initialState: DangerousRefState = {
  div: null
};

const dangerousRefModule = createSlice({
    name: "dangerous-ref",
    initialState,
    reducers: {
        // 実際にこのアクションを呼ぶコードを書かなくても、
        // ビルドすると"JavaScript heap out of memory"
        setRef: (state, action: PayloadAction<HTMLDivElement>) => ({
            div: action.payload
        })
    }
});
以上です。

ちなみになぜ、DOMの参照を持たせようと思ったのか...については恥ずかし過ぎて言えません。。

　 Tweet
Qiitaで続きを読む

投稿日：2019-11-29T08:37:51+09:00

【React入門】コンポーネントの条件付きRender (Conditional Rendering)

はじめに

Reactの公式ドキュメントの条件付きレンダー(Conditional Rendering)にトライ。

条件付きレンダー-React
https://ja.reactjs.org/docs/conditional-rendering.html

開発環境

Ubuntu18.04
yarn 1.17.3
create-react-app 3.1.2

create-react-appで準備

$ create-react-app try-conditional-rendering
$ cd try-conditional-rendering

で、./public/index.htmlと./src/App.jsを編集。

./public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>Try Conditional Rendering</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

./src/App.js

import React from 'react';
import './App.css';

const App = () => {

}

export default App;

早速条件付きレンダーをやってみる。

まずは丸パクリにならないよう公式ドキュメントのマネをしてGreetInTheMorningとGreetInTheAfternoon、そしてGreetInTheEveningというコンポーネントを作る。

./src/App.js

const GreetInTheMorning = () => {
  return <h1>おはようございます。</h1>
}

const GreetInTheAfternoon = () => {
  return <h1>こんにちは。</h1>
}

const GreetInTheEvening = () => {
  return <h1>こんばんは。</h1>
}

現在時刻によって上3つのコンポーネントのいずれかを表示したいとする。
本来ならちゃんとDateオブジェクトを使って...ってやるんだけど、今回は公式に沿ってGreetingコンポーネントを作ってAppコンポーネントからGreetingコンポーネントにnowHourという引数を渡してズルをする。

./src/App.js

const Greeting = (props) => {
  // 5時 ~ 12時までは"おはようございます。"を表示する
  if(5 <= props.nowHour && props.nowHour < 12) {
    return <GreetInTheMorning />
  }
  // 12時 ~ 18時までは"こんにちは。"を表示する
  else if(12 <= props.nowHour && props.nowHour < 18) {
    return <GreetInTheAfternoon />
  }
  // 18時 ~ 5時までは"こんばんは。"を表示する
  else if((18 <= props.nowHour && props.nowHour < 24)  || (0 <= props.nowHour && props.nowHour < 5) ) {
    return <GreetInTheEvening />
  }
  else {
    return <h1>Error.</h1>
  }
}

./src/App.jsの完成形が下のコード。

./public/App.js

import React from 'react';
import './App.css';

const GreetInTheMorning = () => {
  return <h1>おはようございます。</h1>
}

const GreetInTheAfternoon = () => {
  return <h1>こんにちは。</h1>
}

const GreetInTheEvening = () => {
  return <h1>こんばんは。</h1>
}

const Greeting = (props) => {
  // 5時 ~ 12時までは"おはようございます。"を表示する
  if(5 <= props.nowHour && props.nowHour < 12) {
    return <GreetInTheMorning />
  }
  // 12時 ~ 18時までは"こんにちは。"を表示する
  else if(12 <= props.nowHour && props.nowHour < 18) {
    return <GreetInTheAfternoon />
  }
  // 18時 ~ 5時までは"こんばんは。"を表示する
  else if((18 <= props.nowHour && props.nowHour < 24)  || (0 <= props.nowHour && props.nowHour < 5) ) {
    return <GreetInTheEvening />
  }
  else {
    return <h1>Error.</h1>
  }
} 

// nowHour={}の中の数字を変えれば画面に表示される挨拶が変わる。
const App = () => {
  return <Greeting nowHour={13} />;
}

export default App;

おわりに

続きはまた書きます。

　 Tweet
Qiitaで続きを読む

投稿日：2019-11-29T02:11:33+09:00

WEBアプリケーション開発における旬の技術調査

はじめに

私は、約3年勤めたSIerを退職し、タイへ２ヶ月、オーストラリアへ1年の語学留学へ行ってました。
日本に戻ってきて、カンファレンスに参加したり、元職場の先輩と飲みに行って現状を探ったりしたところ、本当に1年ちょっとしか経ってないの！！？ってぐらい進化していたので、自分用にまとめようと思います。

間違いもたくさんあるので、その都度直していこうと思います。

以下、今回まとめようと思っているもの

Docker

TypeScript

spring-boot

React

Angular

AWS

Docker

本当に衝撃的だった。
過去にアーキテクチャ設計メンバーとして働いていた自分にとって、こんな画期的なもの、がなぜ3年前には存在しなかったのか呪ったほどである。

想像してみてほしい。
開発メンバー５０人以上の大規模PJ、フロントエンドとバックエンドで異なるIDEによる開発環境と実行環境、協力会社と社員でセキュリティレベルが異なりダウンロードできないファイル。
地獄である。手間である。平気で1日の工数として割り当てられる。無駄。

それがすべてDockerで解決される。
DockerFile、docker-composeファイルを作成して配布・起動すれば、一発で全く同じ仮想環境が作られる。

TypeScript

ざっくりいうと、静的型付け言語のJavaScriptって感じ？
バックエンドメインで開発してきた自分としては、動的型付け言語の型推測とかは慣れないので助かるし、デバック前に型の不一致によるエラーが検出できるのはメリットだと思う。（行数は増えるけど）
また、babelでEcmaScriptのVersion？を気にしなくていいっていうのも大きいメリットだなって思う。
最終的に実装対象に合わせたJavaScriptに変換されるのも、すっごいJavaっぽい。

spring-boot

Springの設定ファイル不要版？っていう風に聞いた。by元先輩社員
Springで最も理解できないxmlファイルを書かなくていいっていうだけで神に聞こえる。ただ、アノテーションなどの基本的なSpringの機能は同じみたい。まだ、あまり調べていないがすっごくきになるし、早く使ってみたい。

React

Facebookが作ったJavaSpringフレームワークらしい。
対抗馬にAngularがあるが、最近はReactのほうが勢いがあるらしい。by元先輩社員
ただ、先日参加したJJUGではAngularとSpring-bootの開発デモが行われていたし、Angularの方がネットでもよく見るので、少し混乱気味。
実際触ってみて感触を確かめたいので、両方で試作アプリを作ってみる予定。

ざっくり見た感じ、JavaScriptフレームワークでHTMLとJavaScript部分がJavaのインターフェースと実装みたいな関係になったのかなって印象。（器だけ作って中身は別ファイルでって意味）
個人的には大歓迎。
HTML内のidとか要素をわざわざ気にして、JavaScriptで取り出してーってしているの、、、馬鹿らしいなーって思ってたので。

AWS

いたるところで見る。
これも抑えておきたい（抑えておかなければならない）技術の一つなのは間違いない。
ちょっと個人で触ってみるのと、企業で採用するのでは使用する機能や規模が大きく異なる気はするが、とりあえず個人で、無料で使用できる範囲で試してみたいと思う。

まとめ

たった1年ちょっとで旬の変わるIT業界の恐ろしさを肌で感じた。
前職では、目の前にあるタスクをやっていくので精一杯で、カンファレンスに参加したり、技術について勉強したりする余裕がなかったんだけど、この機会にしっかり学んで、一人でもサーバーからフロントエンドまで開発できるようにしとこうと思う。

　 Tweet
Qiitaで続きを読む

20191129のReactに関する記事は4件です。

アプリ開発を5分で爆速整備する

趣旨

前提とか

流れ

前提整備

開発開始

前提整備

Nodejsインストール

What's this

Macの人は以下。

windowsの人は以下。

VSCodeインストール

What's this

Macの人は以下。

windowsの人は以下。

Gitインストール

What's this

Macの人は以下。

windowsの人は以下。

一呼吸

開発開始

githubレポジトリ作成(1.5分)

初回だけ

二回目以降はここから

create-react-app(1.5分)

初回だけ

二回目以降はここから

Let's Coding!(2分)

react実行

gitへプッシュ

初回だけ

二回目以降はここから

おわり

React + Redux + Typescriptで"JavaScript heap out of memory"

ReduxにDOMの参照を持たせたのが原因

【React入門】コンポーネントの条件付きRender (Conditional Rendering)

はじめに

開発環境

create-react-appで準備

早速条件付きレンダーをやってみる。

おわりに

WEBアプリケーション開発における旬の技術調査

はじめに

Docker

TypeScript

spring-boot

React

AWS

まとめ

日付別

タグ一覧