Web系初心者必見!!!! 戦力になるために学ぶべきこと5つ

こんにちは！あさもっちゃんです！！

業界未経験で入ってきた時って、知らないことが多過ぎて辛いですよね。 僕も最初は知らないことだらけで、毎日が勉強の連続でした。 でも、結構無駄なことまで色々と学んでいました。

今回は、自分の経験を踏まえて、Web系のエンジニアとして戦力となるために知っておいて欲しいことをまとめてみたいと思います。 覚えるべき優先順に並べましたので、ご一読ください。

プログラミング言語(及びフレームワーク)

まずはじめは、仕事をする上でもっとも重要な「プログラミング言語」を覚えましょう。 プログラミング言語は、色々な処理を書いて大きなアプリケーションをつくり上げるために必要です。

Web系のエンジニアとして覚えなければいけない言語は多いです。 まず、必ず触ることになるのが、我々がWebページを見るときに使用される言語は「HTML/CSS/JavaScript」です。 これら3つは必ずセットで覚えましょう。 「HTML」は画面に表示する内容の形式を定義する言語、「CSS」はHTMLで表示される内容を装飾する言語、 「JavaScript」はブラウザ上で動かすことができるプログラミング言語です。 これらはWebブラウザ上の表示を司っているため「フロントエンド」「クライアントサイド」等と呼ばれています、

逆に、「バックエンド」「サーバーサイド」などと呼ばれるものもあります。 役割としては「画面表示に使用するためのデータの処理」や「外部システムとの連携」を司っています。 これらを実現する言語は様々あり、「Ruby」「PHP」「Java」「Scala」「Go」などがよく使われます。 初心者にオススメするのは「Ruby」もしくは「PHP」です。

「Ruby」は「構文わかりやすく読みやすい」「制約が少なく書きやすい」という特徴があり、初心者が学ぶのに適した言語です。 また、「Ruby on Rails」「Sinatra」など、Webアプリケーションを構築するためのフレームワーク（ツールのようなもの）があります。 特に「Ruby on Rails」は高速に開発ができるため、スタートアップの会社でよく使われます。

「PHP」は古くからWebの技術として親しまれてきた言語で、Webページを作るのに特化した言語です。 「Zend」「CakePHP」「FuelPHP」「Laravel」などのフレームワークがあります。 古くから使用されていたというのもあり、案件がたくさんあるので就職に強いという特徴があります。

まとめとしては

  • フロントエンドは「HTML」「CSS」「JavaScript」の3つ
  • バックエンドは「Ruby」もしくは「PHP」のどちらか

を覚えましょう!!!!

DB及びSQL

サーバー側のアプリケーション内で溜め込んだデータは、アプリケーションが止まるとなくなってしまいます。 サーバーが止まってもデータを生き残らせるには、どこかに保存する必要があります。 Webアプリケーションとしてデータを保存する際に使用するのは、ほとんどの場合「DB（データベース）」というシステムを利用します。 初学者の方なら、「MySQL」「PostgeSQL」「SQLite」「DB2」「Oracle」は聞いたことがあるのではないでしょうか。

上記5つのDBは、「RDB（Relational DataBase）」と呼ばれる方式のDBとなっています。 そして、RDBを外部から操作するために使用される言語が「SQL（Structured Query Language）」です。 SQLを利用することによって、DBにデータを登録したり取り出したり消したりすることができます。

WebアプリケーションからDBを利用する際、 多くの場合は「O/Rマッパー（Object / Relational Mapper）」を使用するため、 ほとんどの場合はそこまでSQLの知識がいらなかったりします。 しかし、O/RマッパーはDBを簡単に扱えるようにしただけで、複雑なことをさせるにはSQLの知識が必要になってきます。

また、開発作業中、目的のデータがDBに入ったかどうか等、DBの中身の確認するためにもSQLが必要になってきたりします。

これを知っておかないと、サーバーサイドで複雑なことをやろうとした時につまづきます。 できるだけ早めに学んでおきましょう。

Linuxコマンド

コンピュータ(Computer)というものは、ほとんどの場合は「OS（Operating System）」というものを動かしています。 個人がもつ「PC（Personal Computer）」としては「Windows」「Mac OSX」が有名です。 Webアプリケーションを設置するコンピュータのことを「サーバー（Server）」と呼び、その上で動かすOSは「Linux」が有名です。

映画でハッカーが黒い画面に白い文字が羅列したものを操作しているところを見たことがありますよね。 あの黒い画面を「ターミナル」と呼びます。そして、文字を入力することによって、OSを操作しているのです。

Web系のエンジニアが作ったアプリケーションはサーバーと呼ばれるコンピュータの中に設置します。 そして、このサーバーを操作する時に、黒い画面のターミナルを使用します。

ターミナルの操作を行う時に使用するのがコマンドです。

コマンドは色々な種類がありますが、Webエンジニアとして使用するコマンドはそれほど多くないです。 木構造のディレクトリ構成とその操作(cd, ls, cp, mv, rm, pwd等)、 使用したいコマンドの追加(RHEL系ならyum, Debian系ならapt等)、 ターミナル上でのエディタの使用方法(主にvim)などがわかれば大丈夫です。

テスト

自分たちで作り上げたアプリケーションが正しく動いているかどうかを確認するためにテストを行います。 テストって、研究分野になるほど奥が深くて難しいものです。 また、多くの人が退屈と感じる、非常に大変な作業でもあります。

しかし、このテストというものを意識できるようになると、

という利点があります。

Web系初心者が覚えるべき内容は「テストの種類」「正常系/異常系」「テストのコード化」の3つです。 これについても、後日改めてまとめ記事を投稿したいと思います。

Webの基礎技術(≒HTTP通信)

Webアプリを作るのだから当然っちゃ当然のことのように思えますが、案外わかってない人もいたりします。 ぶっちゃけ、プログラミングしていくだけなら知識はいらないです。 この辺りについては、フレームワークやWebブラウザがよしなにやってくれるからです。

しかし、時にはWebの基礎的な技術、特にHTTP通信を理解してないと解決できない問題に直面することがあります。 これらを知っておくことによって、さらに上のエンジニアになれることは間違い無いでしょう。

この勉強をする時、初心者の場合は本を何周か読んでおくだけで良いかと思います。 後日改めて、この部分のまとめ記事を投稿したいと思います。

まとめ

というわけで、web系初心者が即戦力になるために覚えるべき内容5つでした。 5つって、数にしたら少なそうですが、実際には結構大変です。

自分の話をしてしまいますが、この記事を書いた自分自身でさえまだまだ至らないところも多いなと感じ、 エンジニア3年目も勉強ばかりやってます。 しかしこの2年間、空いた時間の7割を勉強に費やしたおかげで、 会社の年上のエンジニアに「10年選手かと思ったわw」と言わせるくらいには成長できました。

ちゃんと勉強すればみんな成長出来ます。これは本当です。 そして、案外みんな勉強してない&身についてないです。 だからこそ、多少勉強するだけでも十分に差別化出来ます。

僕もまだまだです。是非とも一緒に勉強していきましょう!!!!

【Java】CSVの煩わしさを軽減!?!?CSVマッピングライブラリの紹介

Java エンジニア クラス ソースコード リーダブルコード CSV マッピング パーサー アノテーション

こんにちは！あさもっちゃんです！！！！

大量な情報のやり取りを行う時、WebAPIを用いたシステムではJSONがよく使われます。 JSONの特徴は、「key : value」構造かつ入れ子構造であり、複雑なオブジェクトの内部値を表現するのに適しています。 しかし、カッコが多かったりして、人が読み書きするには少し不便だったりします。

Web系ではない普通のエンジニアがデータをやり取りする際によく使われるのはCSVだったりします。 CSVは１〜２次元構造までしか表現出来ないなどの制約がありますが、 一行が一つの塊として扱えるため、大量のデータを取り扱う際に非常に見やすかったりします。 また、Excelなどの二次元構造を取り扱うアプリケーションも多く、馴染みが深い構造でもあります。

今回は、そんなCSVを簡単に扱えるライブラリをご紹介したいと思います!!!!

時代の潮流に追いついた!?Annotationを使ったCSVマッパー!!!!

CSVライブラリにも色々あります。 ヘッダの文字を与えてやるとPOJOにマッピングするものとか、行番号でPOJOにマッピングするとか。 はたまた、マッピングせずに文字配列だけ取り出すものとか。 しかし、システムとして取り扱う場合はマッピングされていた方が取り回しも良いです。

今回は、設定ファイルも必要ない、ヘッダー名を合わせる必要もない、 「Annotation」を利用してCSVマッピングするライブラリをご紹介します!!!!

Super CSV Annotation

このライブラリの特徴は、

  1. 行番号を指定してマッピングを行う
  2. それぞれの値の論理名(label)を設定できる
  3. それぞれの値の出力フォーマットを指定できる

という機能をAnnotationで実装しているところにあります。

パーサーライブラリとしてAnnotationを利用する利点は、

  1. マッピングルールを変数の属性値的に記述できる
  2. マッピングを行うロジックに論理名や物理名を記述する必要がなくなる

になります。

実際どのようなソースコードになるか見てみましょう。

// POJOクラス

package org.pickles.dataformat.csv;

import com.github.mygreen.supercsv.annotation.CsvBean;
import com.github.mygreen.supercsv.annotation.CsvColumn;
import com.github.mygreen.supercsv.annotation.format.CsvBooleanFormat;
import com.github.mygreen.supercsv.annotation.format.CsvDateTimeFormat;
import com.github.mygreen.supercsv.annotation.format.CsvNumberFormat;

import java.math.BigDecimal;
import java.math.RoundingMode;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

@CsvBean
public class Person {

    @CsvColumn(number=1, label="ID")
    private long id;

    @CsvColumn(number=2, label="名前")
    private String name;

    @CsvColumn(number=3, label="誕生日")
    @CsvDateTimeFormat(pattern="yyyy/MM/dd")
    private Date birthday;

    @CsvColumn(number=4, label="学生")
    @CsvBooleanFormat(
            readForTrue={"○", "true", "yes"},
            readForFalse={"×", "false", "no", ""},
            writeAsTrue="○",
            writeAsFalse="")
    private boolean student;

    @CsvColumn(number=5, label="身長")
    @CsvNumberFormat(precision=4, rounding= RoundingMode.HALF_UP)
    private BigDecimal height;

    @CsvColumn(number=6, label="体重")
    @CsvNumberFormat(precision=5, rounding= RoundingMode.HALF_UP)
    private BigDecimal weight;

  // getter, setterは省略
}

POJOクラスの変数にAnnotationがついているのがわかります。 @CsvColumnというAnnotationで、列番号と列名を定義しています。 また、それぞれの型に合わせた@Csv〇〇Formatというものでフォーマットの定義もしています。 どうですか？どの変数がCSVのどの情報に該当するか、非常にわかりやすいと思いませんか？

次に、実際にマッピングするクラスを見てみましょう。

// CSVマッピングクラス

package org.pickles.dataformat.csv;

import com.github.mygreen.supercsv.io.CsvAnnotationBeanReader;
import com.github.mygreen.supercsv.io.CsvAnnotationBeanWriter;
import org.supercsv.prefs.CsvPreference;

import java.io.*;
import java.util.ArrayList;
import java.util.List;

public class CSVTools {

    public static <T> String toCSVString(List<T> beans, Class<T> type){

        StringWriter writer = new StringWriter();

        try(CsvAnnotationBeanWriter<T> csvWriter = new CsvAnnotationBeanWriter<>(
                type, writer, CsvPreference.STANDARD_PREFERENCE)){

            csvWriter.writeHeader();

            beans.forEach(item -> {
                try {
                    csvWriter.write(item);
                } catch (IOException e) {
                    e.printStackTrace();
                }
            });

        } catch (IOException e) {
            e.printStackTrace();
        }

        return writer.toString();
    }

    public static <T> List<T> parseFromCSV(String csv, Class<T> type) {

        List<T> list = new ArrayList<>();

        try(CsvAnnotationBeanReader<T> csvReader = new CsvAnnotationBeanReader<>(
                type, new BufferedReader(new StringReader(csv)), CsvPreference.STANDARD_PREFERENCE)) {

            csvReader.getHeader(true);

            T record = null;
            while((record = csvReader.read()) != null) {
                list.add(record);
            }

        } catch (IOException e) {
            e.printStackTrace();
        }

        return list;
    }
}

なんと!!!!ライブラリ特有のステップが、文字列変換に2行、POJOマッピングに3行しか現れません!!!! しかも!!!!マッピングに必要な情報を記述するようなロジックが、Utilのメソッドに存在しないです!!!! これはめちゃめちゃ読みやすい。関心事がきちんと分割されてて、とてもいい感じのソースコードですね。

文字列変換では、専用クラスをnewして、writeメソッドを呼ぶだけ。 POJOマッピングでは、専用クラスをnewして、ヘッダ情報を読んで、body情報をマッピングする。 単純明快なロジックになってて素晴らしいですね!!!!

終わりに

完全にSuper CSV Annotationをべた褒めする記事になりましたwwwww ですが、このライブラリの凄さがわかって頂けたかと思います。

データ取り込みでよく使われるCSVですが、ここまで綺麗にかけるのならあまり手間も感じずに実装が完了しそうですね!!

是非とも現場で利用してみてください!!!!

参考サイト様

公式サイト

実装したソースコード

GitHub

# 使われ方色々!?メジャーなデータフォーマットを解説します！

CSV XML JSON YAML フォーマット パーサー シリアライズ 永続化 ダブルクォート 設定ファイル

こんにちは！あさもっちゃんです！

自分の住んでる環境とは違う場所から来た人の言葉、よくわからなかったりしませんか？ 日本国内でさえ、方言のせいで意思疎通がうまくできなかったりします。

システムも同じで、システム間のやり取りをする際に、 お互いがわかる情報の形式になっていないと正常に値のやり取りをする事ができないのです。 そのため、各システム共通で利用できるデータフォーマットが策定されています。

今回はそのデータフォーマットについて、メジャーなものを取り上げて説明したいと思います！！！

CSV (Character Separaterd Value)

データフォーマットとしてはもっともシンプル。それがCSVです。 中身はと言いますと、読んで字のごとく、「文字で分離された値」の構造となっています。

サンプルは下記になります。

ひろくん,28,男性,東京都千代田区千代田１−１,01-2345-6789
ゆきちゃん,31,女性,東京都千代田区千代田１−１,11-2358-1321
まーくん,3,男性,東京都千代田区千代田１−１,01-4916-2536

情報の記述の順序は名前,年齢,性別,住所,電話番号となっていますね。 このフォーマットの良い所はわかりやすい二次元構造となっている点です。 分割としてもよくあるコンマ区切りでわかりやすいし、一行が一つのまとまりとなっている点もわかりやすいですね。 また結果的に、他構造と比べてシンプルであるため、この形式に変換するとバイト数が非常に少なくなります。

逆に悪い点は、カラム構造をあらかじめ理解してないといけない事が挙げられます。 システムからしたら、コンマ区切りの何番目に住所があるのかがあらかじめ決まっている必要があるという事です。 また、フォーマットの特性上、2次元以上の構造を表現できないです。 例えば今回の図ならひろくんの友達リストというものをそのまま追加する事ができませんね。

使い所としては、

  1. 一つのまとまりが1次元で表現できる値を大量にやり取りする時
  2. Excel等、二次元で表現される情報をやり取りする時

となります。

ちなみに、コンマではなくタブ文字で区切る場合もあります。こちらもCSVと呼ばれます。 Excelで表を範囲指定してコピーすると、内部的にはタブ文字区切りなのは有名ですね。

また、1文節内でコンマを使いたい場合は、文節の最初と最後を「"」で囲む事で使用可能になります。

XML (eXtensible Markup Language)

よく使われるフォーマットとしては最もカッチリしたフォーマットです。 先ほどのCSVで作ったサンプルをXMLで表現してみます。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE persons SYSTEM "persons.dtd">
<persons>
  <person>
    <name>ひろくん</name>
    <age>28</age>
    <gender>男性</gender>
    <address>東京都千代田区千代田１−１</address>
    <phone>01-2345-6789</phone>
  </person>
  <person>
    <name>ゆきちゃん</name>
    <age>31</age>
    <gender>女性</gender>
    <address>東京都千代田区千代田１−１</address>
    <phone>11-2358-1321</phone>
  </person>
  <person>
    <name>まーくん</name>
    <age>3</age>
    <gender>男性</gender>
    <address>東京都千代田区千代田１−１</address>
    <phone>01-4916-2536</phone>
  </person>
</persons>

どの値が何の意味を持つのか、わかりやすくなりましたね。 書き方は非常にHTMLと似通っています。

このフォーマットの良いところは、妥当性チェックを行えるところです。 XMLでは、上記のような本文とは別に、フォーマットの具体的な形式を定義する 「DTD(Document Type Defnition)」というものを記述する事で、内容の妥当性チェックを行う事ができます。

また、入れ子構造になっているので、多次元の値にも対応しているところが素晴らしいですね。 これなら、CSVの場合には表現できなかった友達リストを入れこむ事ができます。

さらに、要素に属性値を持たせる事も出来るので、かなり自由度の高いデータフォーマットとなっています。

しかしながら、CSVと比べて非常に読みづらいですよね。見ててとても疲れてきます。 要素名が要素の最初と最後に書かれているような構造になっているため、どうしても冗長に感じてしまうのです。

また、属性のvalueを直接nullにする事ができないため、属性値でnullであることを記述する必要があります。

使い所としては、

  1. 妥当性チェックが必要な場面
  2. 複雑かつ柔軟なデータ構造を表現する場面

となります。

Javaを使って開発をする際は、

  1. mavenやMyBatis等の設定ファイル
  2. SOAP通信のbody

などに使用されています。

ちなみに、要素の中身以外での改行やスペース、タブ文字はフォーマットに影響がないので、好きな形にする事ができます。

JSON (JavaScript Object Notation)

Web系でよく使われる、今一番イケてるフォーマットです。 同じく、person情報をサンプルに記述して見ます。

{
  "persons": {
    "person": [
      {
        "name": "ひろくん",
        "age": 28,
        "gender": "男性",
        "address": "東京都千代田区千代田１−１",
        "phone": "01-2345-6789"
      },
      {
        "name": "ゆきちゃん",
        "age": 31,
        "gender": "女性",
        "address": "東京都千代田区千代田１−１",
        "phone": "11-2358-1321"
      },
      {
        "name": "まーくん",
        "age": 3,
        "gender": "男性",
        "address": "東京都千代田区千代田１−１",
        "phone": "01-4916-2536"
      }
    ]
  }
}

XMLと比べて、ぱっと見だいぶスッキリしましたよね。

JavaScript内でデータを記述するために生まれた形式で、JavaScript内でのサポートが強いです。

XMLと同じく、要素名と値というkey:valueの関係で表現され、入れ子構造にも対応しています。

値の型についても、ダブルクォート「"」で囲まれていれば文字列、そうでなければ各種型として扱われます。 よって、ある程度の型制約もかける事が可能となります。

しかし問題点としては、他のフォーマットと比べて括弧のオンパレードとなってしまいます。 そのため、タブや改行を使ってうまく記述しないと多少読みづらさを感じます。

使い道としては、

  1. JavaScriptのデータ記述
  2. HTTP通信のRequestBody
  3. JavaScirpt関係のシステムの設定ファイル(npmのpackage.jsonなど)

になります。

YAML (YAML Ain't a Markup Language)

データフォーマットの中で一番読みやすいと思われるのがこのYAMLです！ サンプルは下記になります。

persons: 
  person: 
    - name: "ひろくん"
      age: 28
      gender: "男性"
      address: "東京都千代田区千代田１−１"
      phone: "01-2345-6789"
    - name: "ゆきちゃん"
      age: 31
      gender: "女性"
      address: "東京都千代田区千代田１−１"
      phone: "11-2358-1321"
    - name: "まーくん"
      age: 3
      gender: "男性"
      address: "東京都千代田区千代田１−１"
      phone: "01-4916-2536"

この形式は、各種フレームワークやアプリケーションの設定ファイルとして使われる事が多いです。 記述方法は少々特殊なものになりますが、覚えたら一番シンプルかつわかりやすく書く事ができます。

また、記述ルールが多様なため、JSON形式の文字列をYAML形式として読み取ることも可能です。

使い道としては、

  1. 設定ファイル記述

となります。

かの有名な仮想コンテナのDockerのdocker-pomposeの設定、 Ruby on Railsの設定、Spring Bootの設定などに使用されています。

まとめ

というわけで、メジャーなデータフォーマットについて説明させて頂きましたが、いかがでしたでしょうか。

今回説明した内容の特徴をまとめると下記になります。

特徴 CSV XML JSON YAML
文字数が少ない ◯ × △ △
妥当性チェックができる × ◯ × ×
大量のデータを扱いやすい ◯ × ◯ △
多次元構造を表現できる × ◯ ◯ ◯
記述ルールが簡単 ◯ × ◯ △
人間が読みやすい × × △ ◯

それぞれ特化した特徴があり、使い所が分かれています。 それぞれの特徴を生かし、より良い選択ができると良いなと思います。

他にも、TOML, ini, HOCONなどの形式もあります。 全てを覚える必要はありませんが、使いこなせるとより良いと思います！！

今回はそれぞれの概要のみでしたが、値を取り扱うためのライブラリを用いて詳しく説明する記事を、別の機会に書きたいと思います。

ここまで読んで頂き、ありがとうございました！！！