gakkie プログラミング 備忘録

tech::expert(現tech camp) 45期

react、reduxでアプリを作る2

React

前回

gakkie.hatenadiary.com

学習内容

参考にしたqiita記事

qiita.com

1. プロジェクトを作成する

$ create-react-app memo
$ cd memo 
$yarn start

2. 必要なパッケージをインストールする

$ yarn add lodash react-redux react-router-dom redux redux-form

3. 今回作成するメモアプリのフォルダー構成

 ├──  node_modules
 ├──  public
 ├──  src
      ├── actions
          └── index.js
      ├── components
          └── memoIndex.js
          └── memoNew.js
          └── memoShow.js
      ├── reducers
          ├── index.js
          └── memo.js  
 ├── index.js
 ├── serviceWorker.js 
 ├── yarn.lock
 ├── package.json
 └── README.md

react、reduxでアプリを作る

React

【前回】

gakkie.hatenadiary.com

学習内容

今回参考にしたqiita

qiita.com

1. プロジェクトを作成する

$ create-react-app countapp_redux
$ cd countapp_redux
$ yarn start

 #成功

いつもの画面が表示される f:id:shuzou555:20200315015019p:plain

2. 必要なパッケージをインストールする

mba-2:countapp_redux #{myname}$ yarn add redux, react-redux
yarn add v1.22.4
[1/4] 🔍  Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/redux,: Not found".
info If you think this is a bug, please open a bug report with the information provided in "/Users/#{myname}/projects/countapp_redux/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

#error

記事通りにコマンドを打ったがエラー発生 下記記事を参考にしてエラー解決を計る。

qiita.com

$ yarn add redux
yarn add v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".
warning "react-scripts > eslint-config-react-app@5.2.0" has incorrect peer dependency "eslint-plugin-flowtype@3.x".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ redux@4.0.5
info All dependencies
├─ redux@4.0.5
└─ symbol-observable@1.2.0
✨  Done in 6.17s.
$ yarn add react-redux
yarn add v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".
warning "react-scripts > eslint-config-react-app@5.2.0" has incorrect peer dependency "eslint-plugin-flowtype@3.x".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ react-redux@7.2.0
info All dependencies
├─ hoist-non-react-statics@3.3.2
└─ react-redux@7.2.0
✨  Done in 7.75s.

3. Reduxによるカウントアプリを実装する

mba-2:countapp_redux $ cd src
$ mkdir actions
$ cd actions/
$ touch index.js

#reducers/count.js

//Action定義
export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";

//Action Creater(Action Createrを呼び出すことで、stateの更新が行われる)
export const increment = () =>({
    type : INCREMENT
});

export const decrement = () =>({
    type : DECREMENT
});

4. アプリを動かす

$ cd projects/countapp_redux/
$ yarn start

f:id:shuzou555:20200315024338p:plain
完成画面

完成時のフォルダー構成

.
 ├──  node_modules
 ├──  public
 ├──  src
      ├── actions
          └── index.js
      ├── components
          └── Counter.js
      ├── reducers
          ├──count.js
          └── index.js  
      ├── index.js        
      └──  serviceWorker.js 
      ├── index.css
      └── index.js
 ├── yarn.lock
 ├── package.json
 └── README.md

react環境構築

React

環境構築方法

  • 今回は以下のqiita記事を参考にした。

qiita.com

  • 習うより慣れろでやっていきます。備忘録としても残したいので今回はここまで

200315 01:04:47 続き

前回はここまで

f:id:shuzou555:20200315010536p:plain
前回の環境構築からhelloworldの表示まで

  • 今回の学習内容

qiita.com

  • エラー発生
mba-2:~ masashimiyagaki$ create-react-app countApp
Cannot create a project named "countApp" because of npm naming restrictions:

  * name can no longer contain capital letters

Please choose a different project name.
mba-2:~ masashimiyagaki$ create-react-app countapp

#成功

＜記事内より引用＞

Reactでは、Stateというものが存在します。
Stateは、コンポーネント内で使用できる値です。コンポーネント内である状態を保持したい時に活用すると便利です。
Stateの値が変更されるとrenderが走るようになっています。

Stateの値を更新する場合、Reactではルールがあり、
this.setState()で更新しなければなりません。

今回のカウントアプリでは、カウントの値をStateで管理し、インクリメント、デクリメントする場合に、setStateで更新するようにしています。

f:id:shuzou555:20200315013826p:plain
完成画面

Spring Boot　アプリ作成

Spring Boot Java

Spring Bootで簡単なアプリを作成

[2.1.1]

/hajiboot-di/src/main/java/com/example/hajibootdi/Calculator.java

package com.example.hajibootdi;

public interface Calculator {
    int calc(int a, int b);
}

/hajiboot-di/src/main/java/com/example/hajibootdi/AppConfig.java

package com.example.hajibootdi;
import com.example.hajibootdi.AddCalculator;
import com.example.hajibootdi.Calculator;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;


@Configuration
public class AppConfig {
    @Bean
    Calculator calculator() {
        return new AddCalculator();
    }
}

/hajiboot-di/src/main/java/com/example/hajibootdi/AddCalculator.java

package com.example.hajibootdi;

//import com.example.hajibootdi.HajibootDiApplication.Calculator;


public class AddCalculator implements Calculator {
    @Override
    public int calc(int a, int b) {
        return a + b;
    }
}

/hajiboot-di/src/main/java/com/example/hajibootdi/HajibootDiApplication.java

package com.example.hajibootdi;
import com.example.hajibootdi.Calculator;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.context.ApplicationContext;
import org.springframework.context.annotation.Import;

import java.util.Scanner;
@EnableAutoConfiguration
@Import(AppConfig.class)
public class HajibootDiApplication {
    public static void main (String[] args) {
        ApplicationContext context = SpringApplication.run(HajibootDiApplication.class, args);
        Scanner scanner = new Scanner(System.in);
        System.out.print("Enter 2 numbers like 'a b' : ");
        
        int a = scanner.nextInt();
        int b = scanner.nextInt();
        
        Calculator calculator = context.getBean(Calculator.class);
        int result = calculator.calc(a, b);
        
        System.out.println("result = " + result);
    }
}

実行

Enter numbers like 'a b';

#100 200
result = 300

Java練習：スッキリ分かる入門（第2版）

Java 例外処理

Java練習

Javaで開発をすることになり現在Javaを勉強中

スッキリわかるJava入門 第2版 スッキリわかるシリーズ

を使って勉強中。

2章2-3のアプリをアレンジしてみた。

2章2-3のアプリをアレンジ

ローカルで動くJavaを実行できるdokojavaを使用 
import java.util.Scanner;
import java.util.Random;



public class Main{
  public static void main(String[] args) {
    System.out.println("ようこそ占いの館へ\nあなたの名前を入力してください");
    String name = new Scanner(System.in).nextLine();
    System.out.println("あなたの年齢を入力してください。");
    String ageString = new Scanner(System.in).nextLine();
    if (isNumber(ageString)){
      int age = Integer.parseInt(ageString);
      int fortune = new Random().nextInt(4) + 1;
      System.out.println("占いの結果が出ました。");
      System.out.println( age + "歳の" + name + "さん、あなたの運勢は" + fortune + "です");
      System.out.println("1:大吉、２：中吉、３：吉、４：凶");
    } else {
      System.out.println("年齢が数字ではありません");
    }
  }
  static boolean isNumber(String num) {
    try {
      Integer.parseInt(num);
      return true;
    } catch (NumberFormatException e) {
      return false;
    }
  }
}

課題

  • 例外処理の実装
  • NumberFormatException の意味は？
  • voidの意味は？
  • isNumberとは？

CSSで水平スクロールを実装する

CSS
Horizontal Scroll
  • box1
  • box2
  • box3
  • box4
    ポイントは次のとおり。
  • - ulおよびliを使ってリスト構造を表現する
  • - ulに対してoverflow-x: auto;
  • white-space: nowrap;を指定
  • - liに対して、display: inline-block;を指定
  • - liに対してwidth: 90%;のような横幅を指定すると、コンテンツが見切れて見えるhorizontalになる
    横スクロールできることがuserに伝わりやすい

qiita.com

Array#each_cons(cnt) について

Ruby each_cons each_slice Array

Rubyのメソッドeach_consについて

  • Array#each_cons(cnt)はselfからcnt個ずつ要素を取り出す
  • ブロックに渡す。
  • ブロック引数には配列で渡される。
  • 取り出す要素は、[要素1, 要素2, 要素3], [要素2, 要素3, 要素4] ...と1つづ前に進みます。
  • 似たメソッドにArray#each_slice(cnt)がある。 
arr = (1..30).to_a
container = []

arr.each_cons(7) do |i|
  container << i
end

p container

# [[1, 2, 3, 4, 5, 6, 7], 
# [2, 3, 4, 5, 6, 7, 8], 
# [3, 4, 5, 6, 7, 8, 9], 
# [4, 5, 6, 7, 8, 9, 10], 
# [5, 6, 7, 8, 9, 10, 11], 
# [6, 7, 8, 9, 10, 11, 12], 
# [7, 8, 9, 10, 11, 12, 13], 
# [8, 9, 10, 11, 12, 13, 14], 
# [9, 10, 11, 12, 13, 14, 15], 
# [10, 11, 12, 13, 14, 15, 16], 
# [11, 12, 13, 14, 15, 16, 17], 
# [12, 13, 14, 15, 16, 17, 18], 
# [13, 14, 15, 16, 17, 18, 19], 
# [14, 15, 16, 17, 18, 19, 20], 
# [15, 16, 17, 18, 19, 20, 21], 
# [16, 17, 18, 19, 20, 21, 22], 
# [17, 18, 19, 20, 21, 22, 23], 
# [18, 19, 20, 21, 22, 23, 24], 
# [19, 20, 21, 22, 23, 24, 25], 
# [20, 21, 22, 23, 24, 25, 26], 
# [21, 22, 23, 24, 25, 26, 27], 
# [22, 23, 24, 25, 26, 27, 28], 
# [23, 24, 25, 26, 27, 28, 29], 
# [24, 25, 26, 27, 28, 29, 30]]

arr = (1..30).to_a
container = []

arr.each_cons(7) do |i|
  container << i
end

p container.length

#24

(1..10).each_slice(3) {|arr| p arr }

# <実行結果>
# [1, 2, 3]
# [4, 5, 6]
# [7, 8, 9]
# [10]