2019-09-08

Nuxt.js2.9 + TypeScript + Vuexの開発環境構築まとめ

プログラミングフロントエンド Vue Nuxt TypeScript 勉強ハンズオン

お久しぶりです！

最近流行りのSSR フレームワークのNuxt.jsの勉強を始めるにあたり、Nuxt.jsとTypeScriptを使った開発環境を構築しようと思ったんですが、

予想以上にハマったので、備忘録として記録しておこうと思います

同じくハマったことがある人の助けになれば、幸いです！

前提
Nuxtについて
Nuxtの導入
TypeScriptの導入
おまけ
まとめ

Nuxt.js2.9 + TypeScript + Vuexの開発環境構築まとめ

前提

Nuxt.js 2.9
TypeScript

技術スタックとしては、上記の2つを使った開発環境で構築していきます

そして、外部パッケージとして、以下のパッケージを使用していきます(外部パッケージについては、おまけ程度に書いておくので、使いたい人のみ参考にしてください)

nuxt-property-decorator
vuex-typesafe-helper
axios

※ ESLintやPrettierに関しての導入方法は、今回除外していますので、ご了承ください orz

Nuxtについて

まず、Nuxtとは、Vue.jsを使ったサーバーサイドレンダリングを行うことができるフレームワークで、modeを切り替えることで、従来通りのSPA(シングルページアプリケーション)の開発も行うことができます

Nuxtの公式にも書いてある通り、Nuxtの開発を素早く始めるために、 create-nuxt-app が提供されています

しかし、現時点(2019年9月8日)では、Nuxt.js2.9系への対応がされておらず、TypeScriptの導入をするにもかなり至難の技なので、一つずつ設定ファイルを作っていく方が良いです!!

また、Nuxtの日本語ページの更新も、Nuxt2.9への対応がされていないため、英語版を参考にする方が良いでしょう

ja.nuxtjs.org

Nuxtの導入

まずは、Nuxtの新規プロジェクト用のディレクトリを作成して、移動します

$ mkdir <project-name>
$ cd <project-name>

そして、nuxt の起動方法を指定する package.json ファイルを作成します

touch package.json

以下が、package.jsonの中身です

{
  "name": "<project-name>",
  "scripts": {
    "dev": "nuxt"
  }
}

次に、npmを使って、nuxtをプロジェクトに追加していきます (yarnでも問題ありません)

npm install --save nuxt
# or
yarn add nuxt

Nuxtでは、pagesディレクトリ配下に、各ページを作成していくので、pagesディレクトリを作成します

mkdir pages

サンプルのページを追加しましょう！ pagesディレクトリ配下に、 index.vue を作成し、以下の内容を追加してください

<template>
  <h1>Hello world!</h1>
</template>

これで、Nuxtの導入が完了したので、正常に動くか確認しましょう！プロジェクト配下で、以下のコマンドを実行して、 localhost:3000 にアクセスして、 Hello world! が表示されれば成功です！

$ npm run dev

TypeScriptの導入

ここまでで、Nuxt.js 単体の実行環境は用意できました！

最近では、NuxtにType safeな作りをしたいということから、TypeScriptを導入するケースが増えてきたので、TypeScriptも導入していきましょう！

TypeScriptの導入には、こちらの英語版公式を参考にするのが良いでしょう！

typescript.nuxtjs.org

Nuxt2.9では、それまでのNuxtのバージョンで導入されていた @nuxt/typescript は、以下の3つのパッケージに分解されました

@ nuxt / typescript-build
@ nuxt / typescript-runtime
@ nuxt / types

しかし、それは日本語の公式へは、まだ対応されていないのが、英語版を参考しましょう！という理由です

では、以下の手順で、導入を進めていきましょう！

まず、@nuxt/typescript-buildパッケージをインストールしましょう！ NuxtのTypeScriptサポートは、主にNuxtモジュール@ nuxt / typescript-buildを通じて提供されています

yarn add --dev @nuxt/typescript-build
# or
npm install --save-dev @nuxt/typescript-build

インストールしたら、設定ファイルを追加していきましょう nuxt.config.js ファイルを作成して、以下の内容を追加してください

export default {
  buildModules: ['@nuxt/typescript-build']
}

次に、tsconfig.jsonファイルを作成して、以下を追加します

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

そして次に、Runtimeオプションもセットアップしていきましょう！以下をインストールしましょう！

yarn add @nuxt/typescript-runtime
# or
npm install @nuxt/typescript-runtime

インストールが完了したら、package.jsonを以下のように nuxt コマンドから nuxt-ts コマンドへ置き換えてください

"scripts": {
  "dev": "nuxt"  ->  "nuxt-ts",
  "build": "nuxt build"  ->  "nuxt-ts build",
  "generate": "nuxt generate"  ->  "nuxt-ts generate",
  "start": "nuxt start"  ->  "nuxt-ts start"
},

お疲れ様でした！これで、最低限のNuxt.js2.9 + Typescriptの環境構築は完了です！

まだまだ、Nuxtを開発していく中で、足りないディレクトリがあるので、それは適宜追加していってください！

おまけ

NuxtとTypeScriptで開発を行っていく中で、class-componentの作りで開発をしたくなったり、VuexでもTypescriptを導入して、 Type Safeにしたいという要望が出てくるので、以下のパッケージを使用すると実現することができます

nuxt-property-decorator

nuxt-property-decoratorのソースコードは、以下になります

github.com

導入方法は、以下になります

npm i -S nuxt-property-decorator
# or
yarn add nuxt-property-decorator

インストールしたら、nuxt.config.ts のbuildブロックの中に、以下を追加してください！

  build: {
    babel: {
      plugins: [
        ["@babel/plugin-proposal-decorators", { legacy: true }],
        ["@babel/plugin-proposal-class-properties", { loose: true }]
      ]
    }
  }

また、tsconfig.jsの compilerOptions ブロックに、以下のオプションが追加されていなかったら追加してください

experimentalDecorators: true

以上で、nuxt-property-decorator の導入が完了です！

導入が完了すると、以下のように、Nuxtの構文がかけるようになります

import { Component, Inject, Model, Prop, Provide, Vue, Watch } from 'nuxt-property-decorator'

const s = Symbol('baz')

@Component({
  components: { comp }
})
export class MyComponent extends Vue {

  @Inject() foo!: string
  @Inject('bar') bar!: string
  @Inject(s) baz!: string

vuex-typesafe-helper

Vuexに対しての、型安全性の確保は、こちらのパッケージを使用していきます以下が、ソースコードです

github.com

インストール方法は、簡単です以下のどちらかのコマンドを実行するだけで、完了です！

npm install vuex-type-helper
# or
yarn add vuex-type-helper

導入サンプルは、githubに記載されているので、そちらを参考にするか、以下の記事が丁寧に書かれていたので、参考にしてみると良いと思います

qiita.com

axios

Nuxtで開発をしていく中で、必須と言われるパッケージ axios の導入方法も記載しておきます！

以下が、公式になります

axios.nuxtjs.org

以下のコマンドで、axiosをインストールしていきます

yarn add @nuxtjs/axios
# or
npm install @nuxtjs/axios

インストールが完了すると、nuxt.config.ts に以下を追加していきます

modulesブロックの中は、既に作成されているはずなので、 '@nuxtjs/axios', を追加するだけで、大丈夫です！そして、 axios ブロックは、まだないので、こちらは、新規に追加していきましょう！

module.exports = {
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
  }
}

以上で、axiosの導入が完了しました！

これで、APIの呼び出しなどもできるようになりました

まとめ

どうでしょうか？

以上の手順で、Nuxt2.9とTypeScriptでの開発環境構築が完了しました！

Nuxtの開発方針は、まだまだ定まっていないので、どの方法がベストなのかは、今後の動向に注目していきたいですね！

いずれ、create-nuxt-app も vue-cli のように、選択するだけで、TypeScriptも簡単インストールできるようになるはずなので、その未来も気長に待ちましょう

スターやコメントいただければ、嬉しいです！

では、良いNuxtライフを

2019-08-20

GatlingをIntelliJで開発するためのセットアップ方法

効率化プログラミング勉強ハンズオン

こんばんは、さばみそです

負荷テスト....それはサーバーサイドエンジニアが必ず通る道であり、SLAを満たせるかなどの性能保証されているかの確認をするためのテストですね

今回は、そんな負荷テストツールのGatling[ガトリング]のセットアップ方法をハンズオン形式で説明したいと思います

Gatlingとは

負荷テストツールで、一番有名なのは、JMeterだと思います

しかし、JMeterのデメリットとして動作が思いなどがあり、負荷テストサーバーのスペック上げないといけないみたいな場面に出会った人は少なくないと思います。

Gatlingでは、Scalaで書かれており、JMeterに比べて、実行が軽い、コードで書くからシナリオの見通しが良いというメリットがあります

Scalaか.....と苦手意識をもつ人もいるかと思いますが、安心してください

公式にも、以下が書かれており、ドキュメントが充実しているので、Scala初心者でも簡単に作成することができます

Gatling simulation scripts are written in Scala, but don’t panic! You can use all the basic functions of Gatling without knowing much about Scala. In most situations the DSL will cover most of your needs and you’ll be able to build your scenarios.

f:id:dankan-0101:20190820010909p:plain — Gatling

公式ドキュメント

https://gatling.io/docs/current/quickstart#quickstart

再現環境

Gatling 3.1.1
IntelliJ Ultimate 2019.2
Maven 3.5.4

TL;DR

IntelliJ　プロジェクト作成
Create from archetype にチェックを入れて、 Add Archetype を選択
GroupId: io.gatling.highcharts ArtifactId: gatling-highcharts-maven-archetype Version: 3.1.1 を入力して、OK(2019/06/10時点）
残りの手順は、通常通り進み、Finishを押す

セットアップ方法(図解)

まずIntelliJを起動して、新規プロジェクトを作成します

Create from archetype にチェックを入れて、 Add Archetype を選択

Gatlingは、Mavenで実行されるので、Maveプロジェクトを作成します

この時に、Add Archetypeを押して、依存ライブラリにGatlingを追加します

各項目に、以下の値を入力して、OKを押して、Nextを押します

GroupId : io.gatling.highcharts

ArtifactId : gatling-highcharts-maven-archetype

Version : 3.1.1

ここでは、作成したいプロジェクトの設定を入力します

Add Archetypeで追加した、Gatlingライブラリの確認画面が出るので、何も変更せずNext

最後に、プロジェクト名などを確認し、問題なければFinishを押し、プロジェクト作成が完了です

プロジェクト作成後に、すぐGatlingのbuildが走り、必要なディレクトリやファイルが作成されます

ディレクトリ構成

└── src
    └── test
        ├── resources  ->  ここの配下に、設定ファイルなどを追加していく
        │   ├── bodies
        │   ├── data
        │   ├── gatling.conf
        │   ├── logback.xml
        │   └── recorder.conf
        └── scala  -> ここの配下に、負荷テストシナリオを追加していく
            ├── Engine.scala
            ├── IDEPathHelper.scala
            └── Recorder.scala

buildが成功すると、上記のようなディレクトリ構成が作成されます

負荷テストシナリオを、scala配下に追加していけば、実装が可能です！

負荷テストの実行

以下のコマンドを実行するだけで、負荷テストが実行でき、レポートが作成されます！

mvn gatling:test -Dgatling.simulationClass=XXXXSimulation

ハマったこと

たまに、以下のようなエラーが出て、buildに失敗する場合があります

Downloading: 
http://repo.maven.apache.org/maven2/org/apache/maven/plugins/maven-archetype-plugin/maven-metadata.xml 
Downloaded: 
http://repo.maven.apache.org/maven2/org/apache/maven/plugins/maven-archetype-plugin/maven-metadata.xml 
(701 B at 2.7 KB/sec) 
[INFO] 
[INFO] 
------------------------------------------------------------------------ 
[INFO] Building Maven Stub Project (No POM) 1 
[INFO] 
------------------------------------------------------------------------ 
[INFO] 
[INFO] >>> maven-archetype-plugin:2.2:generate (default-cli) @ 
standalone-pom >>> 
[INFO] 
[INFO] <<< maven-archetype-plugin:2.2:generate (default-cli) @ 
standalone-pom <<< 
[INFO] 
[INFO] --- maven-archetype-plugin:2.2:generate (default-cli) @ 
standalone-pom --- 
[INFO] Generating project in Batch mode 
[INFO] Archetype defined by properties 
Downloading: 
http://repo.maven.apache.org/maven2/com/excilys/ebi/gatling/highcharts/gatling-highcharts-maven-hetype/1.3.0/gatling-highcharts-maven-archetype-1.3.0.jar 
[INFO] 
------------------------------------------------------------------------ 
[INFO] BUILD FAILURE 
[INFO] 
------------------------------------------------------------------------ 
[ERROR] Failed to execute goal 
org.apache.maven.plugins:maven-archetype-plugin:2.2:generate 
(default-cli) on project standalone-pom: The desired archetype does 
not exist 
(com.excilys.ebi.gatling.highcharts:gatling-highcharts-maven-archetype:1.3.0) 
-> [Help 1] 
[ERROR] 
[ERROR] To see the full stack trace of the errors, re-run Maven with 
the -e switch. 
[ERROR] Re-run Maven using the -X switch to enable full debug logging. 
[ERROR] 
[ERROR] For more information about the errors and possible solutions, 
please read the following articles: 
[ERROR] [Help 1] 
http://cwiki.apache.org/confluence/display/MAVEN/MojoFailureException

そんな場合は、以下のコマンドを実行すれば解決できました

mvn archetype:generate -DarchetypeCatalog=http://repository.excilys.com/content/groups/public/archetype-catalog.xml

参考文献

Gatling: Step by step guide to IntelliJ integration · GitHub

2019-08-19

git-secretsがあれば、機密情報も怖くない

プログラミングセキュリティライフハック効率化

お久しぶりです。さばみそです

今回は、 git-secrets について書いていきたいなと思います！

git-secretsとは？

Prevents you from committing passwords and other sensitive information to a git repository.

パスワードやその他の機密情報をgitリポジトリにコミットできないようにします。

公式をそのまま引用しますが、この一文に限ります

みなさんは、「AWSを使っていたら、いきなり高額請求がきた」みたいな話を聞いたり実体験をしたことはないですか??

これの原因は、知らずのうちにAWSの機密情報を流出していたからなんです！

そして、それは気をつけていてもヒューマンエラーで起きてしまいます！個人情報流出は社会的な問題としても大きく取り上げられる時代なので、かなりリスクがあります

それらを防ぐために、git-secretsがあります

セットアップ方法

MacでHomebrewを使っている人なら、以下でインストール完了です！

brew install git-secrets

Windowsユーザーは、以下で可能です！

git-clone git@github.com:awslabs/git-secrets.git
./install.ps1

あとは、適応したいリポジトリのルートディレクトリに移動して、以下を実行すれば完了です！

git secrets --install 
git secrets --register-aws

これで、あとはawsのアクセスキーとシークレットキーを書いてコミットしてみてください！しっかりとリジェクトされるようになるはずです！

超簡単です！

全体に適用

上記の設定だと、リポジトリ毎に実行が必要で、結構手間ですよね.....

そんな時は、以下を実行すれば、以降にgit cloneしてくるリポジトリには、全てgit-secretsが適用されています

git secrets --register-aws --global

注意点

git secrets --register-aws --global

を実行しても、それまでに存在するリポジトリには適用されないでの、注意が必要です.... なので、既存のリポジトリは、以下のコマンドをリポジトリ毎にする必要があります

git secrets --install 
git secrets --register-aws

以上が、 git-secretsのセットアップ方法と使い方でしたこれで、個人情報の流出を未然に防げるので、安全なエンジニアライフを送れますね！

ではでは

2018-09-01

【エンジニア初心者必見】<Java8>Collectionの相互変換まとめ

プログラミング

<Java8>Collectionの相互変換まとめ

さばみそ君、Javaの勉強をしてるんだけど、Collectionsクラスの変換がよくわからないんだ

なるほどね！マイケル君
じゃあ、Collectionsクラスの変換方法をまとめておくから、これを勉強しておくといいよ

こんにちは。どうもさばみそです！

今回は、プログラミングを独学で学ばれている方やプログラミング初心者で将来プログラマーになりたいという方のために、JavaのCollectionsクラスの変換方法をまとめたいと思います。

※自分のための備忘としても書いています。。。笑

Collectionとは

まずCollectionとは、公式ドキュメントによるとこう書かれています

コレクション階層のルート・インタフェースです。コレクションは、その要素であるオブジェクトのグループを表します。
コレクションによっては要素の重複を許可しますが、許可しないコレクションもあります。
また、順序付けられているコレクションとそうでないコレクションがあります。

ふむふむ。。なるほど。。なんのこっちゃって感じですよね

まあ、簡単に説明するとCollection(コレクション)は、ListやSet、Mapなどが継承している大元のインターフェースであるとことです。

そして、Collectionを継承しているのは、以下のものになります。

Set
List
Map
Arrays
HashSet

全てを列挙すると多くなってしまうので、今回は代表的なものだけをあげてます。詳しく知りたい人は、下記の公式リファレンスを見てみるとわかりやすいです

Java8 Collection

ちなみに、よく使われるHashMapは、Collectionを継承しているわけではなく、実は直接、Objectを継承しているのでパッケージが違います。

配列からリストへの変換

ではまず、配列からリストへの変換を行いたいと思います。

String[] stringArray = { "あ", "いい", "うぅ", "エー", "ｵｳﾌ" };

このような配列があった場合、変換に使うものは、ArraysクラスのasListメソッドです

asListとは、指定された配列に連動する固定サイズのリストを返します。

List<String> stringList = Arrays.asList(stringArray);

このようになります。

配列からリストへは、この1パターンしかありませんので、簡単ですね！

リストから配列への変換

では、逆にリストを配列に変換したい場合は、どうすれば良いでしょうか？

        List<String> strings = Arrays.asList("あ", "いい", "うぅ", "エー", "ｵｳﾌ");

それは、ListクラスのtoArrayメソッドです。

toArrayとは、このリスト内のすべての要素を適切な順序で(最初の要素から最後の要素へ)含んでいる配列を返します。返される配列の実行時の型は、指定された配列の型になります。

では、変換方法はこのようになります

String[] stringArray = strings.toArray(new String[0]);

リストからセットへの変換

どんどん行きましょう！次は、リストからセットへの変換です

        List<String> strings = Arrays.asList("あ", "いい", "うぅ", "エー", "ｵｳﾌ");

今回は、今までとは変換の方法が異なります！ セットへの変換は、HashSetクラスを使います！

HashSetクラスとは、このクラスは、ハッシュ表(実際にはHashMapのインスタンス)に連動し、Setインタフェースを実装します。このクラスでは、セットの反復順序について保証しません。特に、その順序を一定に保つことを保証しません。このクラスは、null要素を許容します。

簡単にいうと、HashSetクラスとは、Setを生成するためにあるクラスだということです

そのHashSetクラスのコンストラクタにHashSet(Collection<? extends E> c)というものが用意されており、引数にCollectionの要素を渡すとそれを使って、Setを生成してくれるのです！

        HashSet<String> stringSet = new HashSet<>(strings);

セットからリストへの変換

次は、反対にセットからリストへ変換を行って見ましょう

まずは、このようなセットを用意しておきます

        Set<String> strings = new HashSet<String>() {{
            add("あ");
            add("いい");
            add("うぅ");
            add("エー");
            add("ｵｳﾌ");
        }};

これをリストへ変換する際に使うのは、ArrayListクラスのコンストラクタです

リストからセットへ変換したのと同じく、ArrayListクラスのコンストラクタには、ArrayList(Collection<? extends E> c)というのが用意されており、それを使いリストを生成することで、SetクラスをListクラスへ変換することができます

ArrayList(Collection<? extends E> c)とは、指定されたコレクションの要素が含まれているリストを、要素がコレクションのイテレータによって返される順序で作成します

ということで、変換方法は、このようになります

        List<String> stringList = new ArrayList<>(strings);

リストからマップへの変換

最後に、少し難しいリストからマップへの変換方法を教えたいと思います。

特に、Java8のStream APIを活用した方法となるので、Java8以前の使われている方とは方法が異なるので注意してください。

では、まずList要素を準備します

        class Dto {
            final long id;
            final String val;
            Dto(long id, String val) {
                this.id = id;
                this.val = val;
            }

            @Override
            public String toString() {
                return String.format("Dto(%d, %s)", id, val);
            }
        }
        List<Dto> dtos = IntStream.rangeClosed(1, 10).mapToObj(id -> new Dto(id, 
UUID.randomUUID().toString())).collect(Collectors.toList());

今までと違い少し特殊な物を用意しているので、要素を解説を挟みますね

このList要素は、1から10の要素番号に、ランダムな値を格納するといった内容になります。

Dto[1] = 34551912-f2be-4896-9a8e-999367c01e93
Dto[2] = d68017ba-a7e3-41d1-9e35-876b72748282)
…

このように、生成される中身が10個あると思ってください。

では、それを1から10(要素番号)をKey(キー)とした、value(バリュー)に中身が格納されているMap形式へ変換したいと思います

ListからMapへ変換する際には、StreamAPIのラムダ式を書くことで、手軽に変換することができます。

説明するより、見てもらった方が早いと思いますので、こちらになります

        Map<Long, Dto> map = dtos.stream()
            .collect(Collectors.toMap(
                s -> s.id,
                s -> s
            ));

処理の流れとしては、

Listをstreamにし、
streamからListをCollectorに渡す
toMapメソッドを使いMapへ変換する
その際に、キーを要素番号として値をそれに紐づく値を指定

のように変換することができます。

まとめ

Collectionには、MapやList,Arrayなどがある
配列からリストへは、asListメソッドを使う
リストから配列には、toArrayメソッドを使う
リストからセットは、HashSetコンストラクタを使う
セットからリストは、ArrayListコンストラクタを使う
リストからマップは、toMapメソッドを使い、ラムダ式で書くとコードがスッキリする

どうだったでしょうか?

今回は、Java8を使ったCollectionの変換方法をまとめてみました

実務でもよく使われる書き方で書いているので、ご参考になればと思います。

また、変換方法はこれ以外にもあるので、公式ドキュメントを見るなりして、調べてみるといいと思います。

皆さんの気になる話題や、書いて欲しい話題などをコメントに書いていただくと記事作成の大きな手助けとなります。

皆さんのコメントお待ちしております

2018-08-18

Spring initilazrが初心者にめちゃくちゃ厳しかった

体験記プログラミング

Spring initilazrが初心者にめちゃくちゃ厳しかった

お久しぶりです。

さばみそです。

最近、転職しました。(転職については、また別記事で書きたいと思います)

そこで初めて、Spring bootを触ったのですが、非常に初心者に厳しい設定だったことに気づいたので、この記事を見て少しでも、手助けになればと思い綴ります。

まず開発環境ですが、

Mac

intelliJ CEを使ってました。

Spring initilazrを使う際、 intelliJ ultimateならそのまま initilazeできるのですが、無料版のCEなら、WebのSpring initilazrから直接生成して、importでprojectを作ることになります

初めての私は、ふむふむなるほどねと、得意げに initilazeし、importして、当たり前のようにHello worldを出そうとしました。

だがしかし、、、、できない

エラーが出る。。。。何故だ、何もしていないはず、、、

そこでいろいろ調べてみると、depencyseにstarter-webが入っていない。。。。。

そんなことがあるのか。。。

initilazrだぞ、、、、と思いながら、pom.mvnを見る。。。。

確かにない、不親切な initilazrだな、その時までは、これくらいの認識でした。

そこからが戦いでした

簡単なCRUD機能のテストを実装して、デバッグした時でした。。。

デバッグには成功して、webページへアクセスし、モデルの作成フォームへアクセスしたところ、404エラー。。。

何故だ。。。

Controllerが悪いのかと思ったが、マッピングもうまくいってる

そして、viewも存在する

それなのに404...

訳がわからない

先輩に聞いて、先輩と一緒に最初から作るも、同じくエラー。。。。意味がわからない

そこでわかったのが、viewで、thymeleafを使っているということ

Spring bootでは、テンプレートエンジンにJSPではなく、thymeleafを推奨しています！そう、推奨しているんです

だがしかし、depencyseにない。。。。

initilazrよ、仕事をしてくれ

initilazrという名前なのに、一式の機能が全く入ってない。。。

そんなもの初心者には気づく訳がない。。。。

皆さんも、SpringBootでspring initilazrを使う際、starter-webやjpa、thymleafなどが入っていることを確認して、イニシャライズしてください

以上、独り言のような記事でした

2018-07-12

定時は17時と19時どっちがいいの？

働き方就職転職体験記

定時は17時と19時どっちがいいの？

ねぇ、さばみそ君！定時って17時と19時どっちがいいの？

じゃあ、今日は定時が17時と19時のメリットとデメリットについてお話しするね！

ということで、定時は17時と19時のどっちがいいかを話していきたいと思います

就職活動や転職活動をしていると、どーしても仕事内容や給料、福利厚生を優先してしまい、勤務時間の優先度はどうしても下がってしまいますよね！そこで、定時が17時の会社と19時の会社で働いた経験からメリットとデメリットをご紹介したいと思います。

　定時17時のメリット

帰る時間が早いので、仕事が終わってから使える時間が多い
大学の友人や他の会社の人たちと遊びや飲み会の時間を合わせやすい
アフター5(ファイブ)という割引が存在するので、お得に遊べる
帰宅時間が早いので、得した気分になる

特に2番目の、早く帰れることで大学の友達との飲み会の時間を合わせやすく楽しめるのがメリットとして、大きかったです

定時17時のデメリット

まず、眠い
始業時間も早いので、早起きしなければいけない
朝の時間がなく、バタバタする
通勤時間での満員電車
前日の夜に、そこまで夜更かしできない

特に、定時17時の人は、満員電車や満員バスは避けては通れない。。。。東京なんかだと、東西線の人は、苦痛。。。。

定時19時のメリット

始業時間も遅いので、早起きしなくてよい
満員電車に乗らなくて済む
朝の時間をゆっくり使える
前日もある程度の夜更かしをしても大丈夫

やはり、定時19時のメリットは、朝も遅いので、ゆっくりでき、満員電車に乗らなくても済むことが大きかったですねまた、起きる時間も8時とかなので、睡眠時間が短くてもよく寝た気がしたの、精神的には楽でしたね

定時19時のデメリット

帰ってから使える時間が短い
大学の友達と遊ぶ時間が合わないので、遅れてから参加、もしくは嫌がられる
朝も遅いので、夜遅くまで起きてしまい夜行性が常態化してしまう

実際に、定時が19時の時に、友達から誘われても、時間が合わずに遊びづらいことが多かったです。。

特に、東京だと通勤に2時間かかる子もいるので、ものすごく嫌がられます。。。(そんなに嫌がらなくてもいいのに。。。)

どっちがいいの？

結局のところ、どっちがいいの？ということですが、

私的には、定時は17時の方がいいですね！

満員電車もいやなんですが、通うと慣れます！

それよりも、友達と会う時間を調整しやすい方が、楽しみが増えるのでうれしいですね！

しかし、仕事内容などにより、妥協は全然できます！

まとめ

定時は、できることなら17時がいい！

皆さんはどちらの方がいいでしょうか？

これから働く皆さんのご参考までに紹介しました！

また、定時が17時の皆さん、定時19時の人も考慮して、飲み会を組んでください。。。。

2018-07-12

【必見】初心者プログラマーのための学習サイトランキング

プログラミング勉強就職

f:id:dankan-0101:20180711182950j:plain

やあ、マイケル君！今日は何を勉強しているんだい？

こんにちは　さばみそ君！僕は今日からプログラマーを目指すんだ！けど、どうやって勉強すればいいかわからないよ

なるほど！じゃあ、初心者から即戦力になれるサイトを教えてあげるね！

こんにちは、さばみそです。

今日は、「エンジニアになりたいけど、どこから始めればいいかわからない」っていう人向けに、自分が活用してよかったと思うサイトを3つ紹介したいと思います。

第3位 Progate
- どんな人におすすめ？
- 何が勉強できるの？
- どうやって勉強するの？
- 料金は？
- 何が違うの？
第2位　ドットインストール
- どんな人におすすめ？
- 何が勉強できるの？
- どうやって勉強するの？
- 料金は？
- 何が違うの？
第１位 e-navigator
- どんな人におすすめ？
- 何が勉強できるの？
- どうやって勉強するの？
- 料金は？
- ポイント
まとめ