<day1>Webアプリ完成するまで続ける開発日誌

15957 ワード
開発日誌 React Webアプリケーション Webアプリケーション テキストリンク

こんにちは！
とあるハッカソン的なイベントでITサービスを作っています。

対象レベル（自己紹介）

ProgateのHTML、CSS、Javascriptあたり2周とかしたことある
授業でC言語、自分でPythonなど

やったこと

Reactの勉強からはじめます。

この記事、とっても丁寧に書いてくださっています。
https://qiita.com/TsutomuNakamura/items/72d8cf9f07a5a30be048
これを勉強していてエラーの対策などを書いたのが僕の記事です

前準備

だいたいエラーで苦労するのって前準備の環境構築のところですね。
まずはエラーコードをそのままググってみる癖をつけようって誰かが言ってました。

ワークスペースを作りましょう。
Macの方はターミナル.appを起動し以下をひとつひとつ入力してください。

$ mkdir react-tutorial
$ cd react-tutorial
$ mkdir -p src/js

mkdirは「make directory」の命令で、これを実行するとreact-tutorialという名前のファイルが作成されます。Finderでみてみてもちゃんとファイルが作られているのが分かります。
cdは「change directory」の命令で、これを実行するとカレントディレクトリ（ファイル構造の中の自分の現在地）を移動することができます。
mkdirのあとについている-pは、階層構造を1度に複数まで作ることができるオプションです。

react-tutorial
$ npm init

このコマンドを実行するといろいろ初期設定みたいなのがはじまります。

......
package name: (react-tutorial) 
version: (1.0.0) 
description: 
entry point: (index.js) webpack.config.js   
test command: 
git repository: 
keywords: 
author: Your Name
license: (ISC) 
......

おそらくここまでは問題なく進む。

この次の工程で僕はエラー祭りでした。

webpackのパッケージをインストールしているようです
$ npm install --save-dev webpack webpack-cli webpack-dev-server
$ npm install -g webpack webpack-cli
$ npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
$ npm install --save-dev react react-dom

これの1つ目を実行したところでエラーが大量に出てきました。
まずはエラーコードを見てみると前半の方に
No Xcode or CLT version detected!
と書かれていましたのでこのままコピペしてググってみました。

→たどり着いたサイト：https://qiita.com/UTA6966/items/6f8b1fd21c2dc9591488

実行したコマンドを載せます。

CommandLineToolsの設定変更
$ nodebrew install 8
$ sudo xcode-select --switch /Applications/Xcode.app
$ npm insatall node-gyp

おそらく2つ目のやつが必要だったっぽいです。

Command Line Toolsとは...
Macのコマンドを実行するためのコマンドツール群らしく、homebrew等のプログラムのインストールにも使うそうです。

んでここの

$ sudo xcode-select --switch /Applications/Xcode.app

でCommand Line ToolsをXcode同梱版に設定した、ということのようです。これによって無事エラーなく実行することができました。
あと、

無視していいエラーコード
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

こんなエラーコードが出るかと思いますがこれは無視して大丈夫だそうです。

では気を取り直して次！

webpack.config.jsファイルを作る
$ touch webpack.config.js

touchコマンドはファイルを作ることができるコマンド。

webpack.confing.jsのファイルに「バンドリングルール」を書いていくそうです。
バンドリングルールとは、おそらくweb読み込むときに「ここにこれがあるよ！」とかを教えてあげるためのモノな気がします()

バンドリングルール書いていきましょう

webpack.config.js
var debug   = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path    = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  entry: "./js/client.js",
  module: {
    rules: [{
      test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env']
          }
        }]
      }]
    },
    output: {
      path: __dirname + "/src/",
      filename: "client.min.js"
    },
    plugins: debug ? [] : [
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    ]
};

これの書き方などは別途後で調べます。
メモ：https://original-game.com/how-to-use-webpack-config-js/

続いて、src/index.htmlを作成

$ touch ./src/index.html

そしてhtmlファイルに次のように書き込みましょう。

src/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Tutorials</title>
    <!-- change this up! http://www.bootstrapcdn.com/bootswatch/ -->
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cosmo/bootstrap.min.css" type="text/css" rel="stylesheet"/>
  </head>

  <body>
    <div id="app"></div>
    <script src="client.min.js"></script>
  </body>
</html>

htmlファイルの中でclient.min.jsを読み込むように指定しています。webpackによって生成される、必要最低限のコードになったclient.jsファイルのようです。

client.jsを書いてあげればそれをhtmlが読みこんで表示してくれるのですね。
では早速client.jsを書いていきましょう。

やっとReact初登場

src/js/client.js
import React from "react";
import ReactDOM from "react-dom";

class Layout extends React.Component {
  render() {
    return (
      <h1>Welcome!</h1>
    );
  }
}

const app = document.getElementById('app');
ReactDOM.render(<Layout/>, app);

このファイル含めReactの理解は後でするとして、ここまででとりあえず準備完了のため
webpackコマンドからclient.min.jsファイルを作成したあとにindex.htmlファイルを開きましょう。

$ webpack --mode development

これでclient.jsなどをコンパイルしました。

じゃあ早速chromeに表示しよう！
開発用webサーバを起動していきます

$ ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --content-base src --mode development

これを実行すると開発用webサーバが起動し、htmlファイルなどに変更を加えるたびに画面が更新されます

chromeなどで
http://localhost:8080
とURLにうってみてください！

It works!

と表示されていたら成功です！

また
./src/js/index.jsに変更を加えてみましょう

src/js/index.js
 import React from "react";
 import ReactDOM from "react-dom";

 class Layout extends React.Component {
   render() {
     return (
       <h1>Welcome!</h1>  
     );
   }
 }

 const app = document.getElementById('app');
 ReactDOM.render(<Layout/>, app);

It works!をWelcome!にしました

こうして保存すると

Welcome！

と変更されました！

前準備終了！

やっとReactの文法などについて始まります。

　　
　　
(2019/12/18作成。)

以降の日誌

【day2】同日更新
https://qiita.com/se_n_pu_u_ki/items/50a64ffc3f643e9fd15f

最大値、最大公約数、最小公倍数
Golangオブジェクト向け全解