react環境構築

環境構築方法

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

qiita.com

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

200315 01:04:47 続き

前回はここまで

前回の環境構築から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で更新するようにしています。

完成画面

Spring Boot アプリ作成

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入門 第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で水平スクロールを実装する

• 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について

• 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]

form練習

form練習

その1

ユーザー名：

パスワード：

好きな果物：りんごぶどう

性別：malefemale
コメント：
見えない入力欄：

ユーザー名：<input type="text" name="username" placeholder = "username"><br><br>
パスワード：<input type="password" name="password" placeholder = "password"><br><br>
好きな果物：<input type="checkbox" name="fruits[]" checked>りんご<input type="checkbox" name="fruits[]" >ぶどう<br><br>
性別：<input type="radio" name="sex" checked>male<input type="radio" name="sex">female<br>
コメント：<textarea name="comments", placeholder = "sample"></textarea><br>
見えない入力欄：<input type="hidden" name="token"><br>
<input type="submit" value="送信">

その2

メール（type="email"）:

URL（type="url"）:

検索（type="search"）:

電話（type="telephone"）:

数値（type="number"）:

日付（type="date"）:

日時（type="datetime"）:

ローカル日時（type="datetime-local"）:

月（type="month"）:

週（type="week"）:

時間（type="time"）:

レンジ（type="range"）:

色（type="color"）:

<form method="post"><label>メール（type="email"）:<input type="email" name="email"></label><input type="submit" value="送信"></form>
<form method="post"><label>URL（type="url"）:<input type="url" name="url"></label><input type="submit" value="送信"></form>
<form method="post"><label>検索（type="search"）:<input type="search" name="search"></label><input type="submit" value="送信"></form>
<form method="post"><label>電話（type="telephone"）:<input type="tel" name="tel"></label><input type="submit" value="送信"></form>
<form method="post"><label>数値（type="number"）:<input type="number" name="number"></label><input type="submit" value="送信"></form>
<form method="post"><label>日付（type="date"）:<input type="date" name="date"></label><input type="submit" value="送信"></form>
<form method="post"><label>日時（type="datetime"）:<input type="datetime" name="datetime"></label><input type="submit" value="送信"></form>
<form method="post"><label>ローカル日時（type="datetime-local"）:<input type="datetime-local" name="datetime-local"></label><input type="submit" value="送信"></form>
<form method="post"><label>月（type="month"）:<input type="month" name="month"></label><input type="submit" value="送信"></form>
<form method="post"><label>週（type="week"）:<input type="week" name="week"></label><input type="submit" value="送信"></form>
<form method="post"><label>時間（type="time"）:<input type="time" name="time"></label><input type="submit" value="送信"></form>
<form method="post"><label>レンジ（type="range"）:<input type="range" name="range"></label><input type="submit" value="送信"></form>
<form method="post"><label>色（type="color"）:<input type="color" name="color"></label><input type="submit" value="送信"></form>

エラー "You must use Bundler 2 or greater with this lockfile. (Bundler::LockfileError)"

190419 18:24:22 udemyのカリキュラムを学習中 詰まったところ、解決方法をかく

• 開発環境cloud9
• rubyのversion2.6.0

ruby のversion 違いでエラー

$ ruby -v

$ rvm install 2.4.0
$ rvm --default use 2.4.0

これで再起動した時もversion が変化しない。

irb をしようとした時に

エラー　You must use Bundler 2 or greater with this lockfile. (Bundler::LockfileError)

どうやら bundlerのversionエラーのようだ

解決方法 gemfile.lock内の

BUNDLE WITH
2.0.1→1.17.3

に変えたらエラーが解決した。

追記：191003 23:27:22

$ bundle exec　をつけたところ無事解決した。

stackoverflow.com