TypeScript入門 その2

前回のTypeScript入門その1に続いて、第2回の今回は、主にデータ型などを説明しようと思います。

1. 主要なデータ型
基本的なデータ型は、次の3つです。
・boolean
取ることができる値はtrueかfalseのどちらかだけです。
・number 
数値を値に取ることができます。整数、小数の区別はありません。
・string
文字列を値に持つことができます。

変数を宣言する時は、下記のようにして型とともに宣言します。

let enabled:boolean;
let money:number;
let name:string;
enabled = true;
money = 100;
name = "Ichiro";

money = "ABC";   // これはダメ。コンパイル時にエラーになります。

このように型を宣言すると、その変数には型に当てはまる値以外は入れられなくなります。JavaScriptでは10 == “10”がtrueになったりということもありましたが、TypeScriptではそもそも比較自体ができなくなります。
とはいえ、何らかの理由で型を指定したくない場合も場合によってはあるかと思います。このような場合はlet value:anyという風にany型を使うことでどのような型でも代入できるようになります。JavaScriptで書かれたソースをTypeScriptに書き換える場合なんかでたまに使うこともあるかもです。

2. 変数宣言の指定子
先ほどの変数宣言の例ではletを使って宣言しましたが、varだと関数の中での宣言なら関数内で、それ以外ならグローバルで使えるようになりますが、letは宣言された構文内のみがスコープになります。
varよりはletを使った方が想定外のところで値が書き換わるようなことがなくなるので、varにしなければいけない理由がある場合以外はletを使った方がいいと思います。
ちなみに、letはJavaScriptではES6から使えるようになりました。
また、変数宣言ではvarとletですが、定数宣言ではconstを使います。constで宣言されると、それ以降値の変更が一切できなくなります。
最近letも使わずconstだけを使うべきだという記事も見ましたが、確かに値を変更することがありえない場合はconstを使うべきですが、letでないと実装しづらいケースも多々あると思うので、個人的には「そこまでこだわらなくてもいいのでは」派です。

3. 配列
TypeScriptにも、JavaScriptと同じように配列は存在します。配列の宣言は下記のように行います。

let data:number[];
data = [1, 1, 2];
data.push(3);
console.log(data);   // 1,1,2,3
data.push("xyz");    // だからダメだってば

このように、配列もどんな型を要素に入れられるかの宣言を行います。なので、配列の要素に指定した型でないものを入れようとするとエラーになります。

この他にも、列挙型(enum)やタプルについても説明したかったのですが、次回にします。

TypeScript入門その1

  1. AltJSとは
    Webプログラミングのサーバー側言語はPHP、Java、Python、Ruby、・・・とたくさんありますが、フロントエンド側の言語となると、ほぼJavaScript一択。しかしJavaScriptにも下記のような問題点があったりします。
    ・型付けが自由すぎてそれに由来する想定外の問題が起きやすい(例えば1==”1″がtrueになったり)
    ・オブジェクト指向が独特(プロトタイプベース)
    ・スコープを絞りにくいそこで、最近ではこう行った問題を解決するために、より実装しやすいプログラミング言語(AltJSと言います)で実装してJavaScriptに変換するというのが流行りになりつつあります。
    というわけで、これから何回かに渡って代表的な AltJSの1つであるTypeScriptについて紹介していこうと思います。
  2. TypeScriptの特徴
    TypeScriptは2012年にマイクロソフトによって開発された言語で、下記の特徴を持っています。
    ・JavaScriptのスーパーセットである(JavaScriptの機能はTypeScriptでも使える)
    ・静的型付けの言語である(数値型の変数に文字列を代入したりするとエラーになる)
    ・クラスやインターフェースなど一般的なオブジェクト指向の機能を持っている(クラスについてはJavaScriptでもES6から使えるようになりましたが)
  3. TypeScriptの環境構築
    まず前提として、npmが使える環境であるとします。とりあえず、Windowsならコマンドプロンプトで、MacならiTerm2で”npm -v”と打ってみて、バージョンが出てくればOKです。入っていない人はこちらを参考にしてNode.jsとnpmをして下さい。
    次に、TypeScriptをインストールします。
    npm install -g typescript
    インストールし終わったら、とりあえず下記の内容をコピーして、.tsを拡張子につけたファイル名(例えばhello.ts)で保存して下さい。

    class Hello {
      public name: string;
      constructor(name: string) {
        this.name = name;
      }
    }
    
    let user = new Hello("World");
    console.log("Hello " + user.name);

    そしたら、”tsc hello.ts”で保存したファイルをコンパイルすればhello.jsというJavaScriptのファイルができているはずです。
    後は、HTMLに埋め込んでブラウザで開けば、検証ツールで”Hello World”と出力されることが確認できますし、node hello.jsでターミナル上で出力を確認してもいいでしょう。次回はTypeScriptで使えるデータ型などについて説明しようと思います。

SpringBoot入門その3 Spring Security

# Spring Securityによる認証・認可
次に、セキュリティを保持するためのフレームワークである「Spring Security」を使って、Userクラスのaccountとpasswordによるログイン機能を作ることを考えてみます。
1. pom.xmlの設定

org.springframework.boot
spring-boot-starter-security

2. application.propertiesの設定
今回はBASIC認証は使わないので、下記の設定でBASIC認証を無効にします(もちろん、有効にする場合はtrueにする)。
“`
security.basic.enabled=false
“`
3. Userのエンティティとリポジトリの作成
「Spring Data JPAによるデータベースへのアクセス」で説明したやり方で、ログインユーザーを定義するユーザーのエンティティとリポジトリを作成します。
4. SecurityConfigクラスの作成
詳細は後日記載しますが、org.springframework.security,config.annotation.web.configuration.EnableWebSecurityをインポートして@EnableWebSecurityをアノテーションにつけます。また、org.springframework.security,config.annotation.web.configuration.WebSecurityConfigurerAdapterをインポートしてWebSecurityConfigurerAdapterを拡張したSecurityConfigクラスを作成します。
こうして作成したSecurityConfigクラスにセキュリティ関連の設定を行なっていきます。ログインの永続化やCSRF対策の設定もここで行います。

SpringBoot入門その2Spring Data JPA

(注、この記事は書き途中です。後日更新します。)
SpringBoot入門その1を書いてから、1年以上経ってしまった(大汗)ということで、今回は1年ぶりのSpringBoot入門その2です。
今回は、Spring Data JPAによるデータベースへのアクセスとSpring Securityによる認証・認可について簡単に紹介したいと思います。
# Spring Data JPAによるデータベースへのアクセス
1. そもそもJPAとは何か
一言でいうと、Javaでの標準のO/Rマッパーです。O/Rマッパーは、ObjectとRelationを対応づける、すなわちオブジェクト指向のクラスとデータベースのテーブルを関連させるものと考えておけばいいでしょう。
例として、「顧客」というクラスがあるとします。メンバー変数としてはID(Integer、必須)、名前(String、必須)、性別(Byte、1:男 2:女)、年齢(Integer)を持っているとします。
この時、対応するcustomorテーブルはこんな感じになるでしょう。
| id | name | gender | age |
| —- | —- | —- | —- |
| 1 | 鈴木 | 1 | 28|
| 2 | 佐藤 | 2 | 30|
| 3 | 田中 | 1 | |
| 4 | 山田 | | 26|
Javaの顧客クラスからDBのcustomorテーブルに簡単にアクセスできるようにする仕組みが、JPAです。JPAには、このマッピングの他にもDBへのCRUD(Create,Read,Update,Delete)処理をカプセル化したAPIおよびJavaオブジェクトを間作するためのクエリ言語(JPQL)を持っています。
2. pom.xmlとapplication.propertiesの設定
まずは、pom.xmlに、下記の内容を追加して、「spring-boot-starter-data-jpa」を読み込ませます。

org.springframework.boot
spring-boot-starter-data-jpa

次に、application.propertiesに下記の設定をします。なお、ここではMySQLを使う場合を想定しています。


spring.datasource.url=jdbc:mysql://localhost:3306/database
spring.datasource.username=user
spring.datasource.password=password
spring.datasource.driverClassName=com.mysql.jdbc.Driver
spring.jpa.database=MYSQL
logging.level.jdbc=OFF
spring.jpa.hibernate.ddl-auto=validate

3. エンティティとリポジトリの作成
次に、エンティティクラスとリポジトリインタフェースを定義します。
エンティティクラスは、いわゆるMVCの”M”にあたるもので、以下のように定義します。


@Entity
@Table(name = "customers")
public class Customer {
@Id
@GeneratedValue
private Integer id;
private String firstName;
private String lastName;
@ManyToOne(fetch = FetchType.LAZY)
@JoinColumn(nullable = true, name = "username")
private User user;
}

リポジトリインタフェースはJavaからデータベースにアクセスするためのインタフェースで、次のようにします。


import com.example.domain.Customer;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;

import java.util.List;

public interface CustomerRepository extends JpaRepository<Customer, Integer> {
@Query(“SELECT x FROM Customer x ORDER BY x.firstName, x.lastName”)
List findAllOrderByName();¥
}

最低限必要なのはエンティティクラスと”org.springframework.data.jpa.repository.JpaRepository”のインポートです。これに”org.springframework.data.jpa.repository.Query”を追加でインポートすることでSQL文を作ってそれを呼び出すメソッドの定義もできるようになります。
それ以外だと、Serviceクラスを作ってそこからエンティティへの操作を定義して、それをコントローラーから呼び出すという使い方をすることが多いです。
Serviceクラスの作り方、使い方については「SpringBoot入門その3」あたりで紹介しようと思います(いつになるかわからないけど)。

Javaのコレクション入門

(注.この記事に限らず、Javaの記事では基本的にJava8以降を前提にします)
0. 前置き
Javaに限らず、プログラミングではデータをまとめておくのに配列だけではどうにもうまくいかないことが多々あります。そこでデータ構造が重要になってくるのですが、そのあたりの表現方法は言語によって様々です。
C++ならvectorとかlistとか標準ライブラリのコンテナが用意されていて、(あまり経験ないけど)C#だとLINQというものを使うようです。PHPだと配列でかなりのことが出来たりします(その分使い方には慎重さを要する)。Pythonだとリスト型やタプル、辞書などを用途に応じて使い分ける感じですね。

1. コレクションフレームワークとは
さて、Java。Javaでは、コレクションフレームワークというものを使います。コレクションフレームワークではリスト(値が順番に並んだもの)、セット(値が順番になっているとは限らないが、同じ値のものが1つだけのもの)、マップ(キーごとに値が対応したもの)といったデータを表現するのに必要なデータ構造が一通り揃っています(他にも両端からしか値を出し入れできないDequeというのもあるんですが、用途が限られるので今回は割愛)。

2. リスト
まずはリスト。リストは0から始まるインデックスごとにデータが入ったものです。Listインターフェースを元に実装されていて、ArrayList(可変長配列)LinkedList(連結リスト)の2つのクラスがよく使われます。ArrayListがC++でいうvectorみたいなものです。なお、JavaにもVectorクラスはあるんですが、こちらはJava8以降では非推奨になっています。
それぞれ、次のように定義します。

List<Integer> arrayList = new ArrayList<>();
List<Integer> linkedList = new LinkedList<>();

どちらのクラスで定義するかは、コンストラクタを呼び出す時に決まります。ちなみに、クラスとかっこの間の<>は、ダイヤモンド演算子といって、要素の型を省略する時の記法です。
よく使う操作は以下のような感じです。ArrayListに対しての記述になっていますが、LinkedListであっても行う処理は同じです。

List<String> arrayList = new ArrayList<>();
List<String> linkedList = new LinkedList<>();
arrayList.add("Apple");  // リストの最後に要素"Apple"を追加
arrayList.get(5);  // リストの5 + 1番目の要素を取得する
arrayList.set(3, "Orange");  // リストの3 + 1番目の要素の値を"Orange"に設定する
arrayList.remove(4); // リストの4 + 1番目の要素を削除し、後続のインデックスを1つ減らす
arrayList.size();  // リストの要素数を返す
arrayList.clear();  // リストを空にする
// arrayListの要素一覧を出力する
for (String data : arrayList) {
	System.out.println(data);
}

ただ、上で「行う処理は同じ」と書きましたが、ArrayListとLinkedListでは実装方法が違うので、それぞれ得意不得意があったりします。
getとかsetとかはそれぞれの要素がメモリ上でインデックスされているArrayListの方が速く、addとかremoveは要素間がお互いのリンク情報(C言語のポインタのようなイメージ。Javaにはポインタはないけど)で繋がっているLinkedListの方が高速だったりします。
なので、データベースとかからある程度大きなデータを持ってきて、その中の要素へのアクセスが主目的の場合はArrayListが、リストへのデータの追加や削除が頻繁に発生する場合はLinkedListが向いています。

3. セット
セットはリストと同様にデータをまとめたものですが、リストとは違ってインデックスは存在せず、また、同じ値のものは2つ以上持てないというものです。大学で数学を勉強した人は集合・位相の集合をイメージしてもらえればと思います。
こちらはSetインターフェースを元に実装されていて、HashSet、TreeSet、LinkedHashSetの3つがよく使われます。それぞれ、次のように定義します。

Set<String> hashSet = new HashSet<>();
Set<String> treeList = new TreeList<>();
Set<String> linkedHashSet = new LinkedHashSet<>();

基本的な操作は以下のような感じです。HashSetに対して書いていますが、他の2つでも同じです。getとsetがないところに気をつけてください。

Set<String> hashSet = new HashSet<>();
Set<String> treeSet = new TreeSet<>();
Set<String> linkedHashSet = new LinkedHashSet<>();
hashSet.add("Banana");  // 集合の要素に"Banana"が含まれていなければ追加する
hashSet.remove("Lemon"); // 集合に"Lemon"が含まれていたら削除する
hashSet.size();  // 集合の要素数を返す
// hashSetの要素一覧を出力する
for (String data : hashSet) {
	System.out.println(data);
}

HashSet、TreeSet、LinkedHashSetの違いですが、HashSetは処理が高速な代わりに順番が全く保証されず、TreeSetは要素がソートされた状態で保持され、LinkedHashSetは要素を追加した順番が保持されます。

treeSet.add("Banana");
treeSet.add("Orange");
treeSet.add("Apple");
for (String data : treeSet) {
	System.out.println(data);
}

だと、”Apple” -> “Banana” -> “Orange”の順に出力され、

linkedHashSet.add("Banana"); 
linkedHashSet.add("Orange");
linkedHashSet.add("Apple"); 
for (String data : linkedHashSet) {
	System.out.println(data);
}

だと、”Banana” -> “Orange” -> “Apple”の順番に出力されます。

4. マップ
マップは値だけでなく、値を指定するキーと一緒の組み合わせでデータを保持するものです。マップではキーは一意(同じものが複数存在しない)ですが、値は同じものが複数あってもいいです。
マップはMapインターフェースを元に実装されていて、HashMap、TreMap、LinkedHashMapの3つがよく使われます。それぞれ次のように定義します。

Map<String, Integer> hashMap = new HashMap<>();
Map<String, Integer> treeMap = new TreeMap<>();
Map<String, Integer> linkedHashMap = new LinkedHashMap<>();

基本的な操作は以下のようになります。putメソッドを使ってキーと値の組合せをマップに追加します。

Map<String, Integer> hashMap = new HashMap<>();
Map<String, Integer> treeMap = new TreeMap<>();
Map<String, Integer> linkedHashMap = new LinkedHashMap<>();
hashMap.put("Tomato", 300);  // マップのキー"Tomato"の値を300に設定する
hashMap.get("Tomato");  // マップのキーが"Tomato"のものの値を返す(なければnull)
hashMap.remove("Lemon"); // マップにキーが"Lemon"のものが含まれていたら削除する
hashMap.size();  // マップの要素数を返す
// マップの要素ごとにキー:値という形で出力する
for (Map.Entry<String, Integer> data : hashSet.entrySet()) {
	System.out.println(data.getKey() + ":" + data.getValue());
}

こちらも、セットと同様HashMapは高速だけど順番が保証されない、TreeMapはキーを順番としてデータを保持、LinkedHashMapはデータを追加した順番に保持されます。

5. 終わりに
Javaで通常よく使うコレクションについて、駆け足で紹介してみました。他にもいくつかあるようですが、今回紹介したものを用途に応じて使いこなせれば、Javaでのデータの扱いで困ることはそんなにはないと思います。
自分は以前、名前とあるオブジェクトの組み合わせのデータをHashMapで定義していたのですが、途中で名前の昇順に出力する必要があることに気がついて、あわててTreeMapに書き直したことがありました。皆さんもコレクションを使うときは何を目的にしているかを考えて、最適なものを選択するようにしてください。

Reactでnpm startがうまくいかない時にやったこと

ReactとReduxでWebアプリを作るための前段階としてとりあえずこちらのチュートリアルをやってみようとしたのだが、途中でnpm startを実行したところエラーが出てにっちもさっちもいかない状況になってしまった。

こんな感じ。

package.jsonの中身を確認して、

“scripts”: {
“start”: “react-scripts start”,

が記述されていることも確認したし、ネットで調べて見つけたpackage-lock.jsonとnode_modulesを消してnpm installを再実行する方法を試してもうまくいかず、nodeとnpmを再インストールしてもダメで困り果てていたが、create-react-appを再インストールして見たら、なんとうまく行った!

チュートリアルをやってみて作ったTodoアプリおよびこれからやってみたいこと

2020年目標など

遅ればせながら、明けましておめでとうございます。2020年は沖縄でのエンジニア生活2年目、エンジニアとしてより充実した1年にして行きたいと思います。
とりあえず目標をいくつか箇条書きに。

・システム設計技術の向上
 やはり、最大の目標はこれかと。本格的な設計業務をやるのはかなり久しぶりだったけど、自分でもまだまだだと感じた。
 これに関しては業務経験を通して身につけて行くのが一番なんだろうけど、書籍を通して得られる知見もあると思うので、その辺りも勉強しようと思う。現在この本を途中まで読んだけど、最後までちゃんと読んで理解して、それプラスもう1冊かな。

・Reactの取得
 フロントエンドではまずはReactおよびその周辺のライブラリであるRedux、react-routerなどを身につけたい。
 去年はドットインストールで勉強してどんな感じかはわかって来たが、それだけでは実務ではまだまだ不十分なので、何か簡単なWebアプリを作って見て、アップロードするところまで行きたい。
 余裕があればReact Nativeを勉強してスマホアプリを作れるようになりたいが、少し難しいか。

・Javaでの開発技術全般の向上
 JavaではSpringBootのアーキテクチャをよりしっかり理解することとモダンな書き方を身につけて行くことの2つが大きな目標かな。
 前者ではReactで作ったWebアプリと連携したRestAPIを作ってみることと、後者では最近この本を買ったので、それを理解してより質の高いコードを書けるようにして行きたい。

・データベーススペシャリスト合格
 4月のデータベーススペシャリスト、早速申し込んだ。過去2回午後2で落ちているので、流石にいい加減受かりたい。後、10月はやはり前回午後2でダメだったシステムアーキテクト も合格目指して頑張りたい。

・Microsoft Azureを使えるようにする
 クラウド技術もどこかでしっかりと学んでおきたい。
 1つ考えているのは現在さくらレンタルサーバーを使っているこのサイトだけど、それをAzureに移してみようかと思っている。ただ、そうすると月当たりいくらかかるかが不安。

・Python,、機械学習の勉強
 現在の業務では使わないこともあって、気が向いた時にちょっとだけ勉強しているくらいだけど、勉強しておけばいつか役に立つ場面もあるかなと。
 PythonのフレームワークDjangoと組み合わせて機械学習を用いた簡単なWebアプリを作ってみるもの面白いかも。

ざっと色々書いて見たけど、技術面でも人間的な面でも大きく成長して飛躍の1年にしたいなと。頑張るぞ!

CSS設計で気をつけること

今回はQiitaのアドベントカレンダーに参加しようと思い、まだ残っていたCSSのアドベントカレンダーへの記事として投稿します。
前の会社にいた時に書いたブログをこっちに移植するという形での投稿です。

Webシステムの開発はユーザーの方が期待する通りに動くことはもちろん大事ですが、アクセスするページの見栄えが悪かったり、どこに何があるかがわかりにくかったりすると、使う側にとって気持ちよく使えなかったりするので、Webシステムはどう見えるかも結構大切だったりします。

そこで、Webページのデザインを整える役割を持つCSSをどうやって作るかが問題になってきます。 今回は、こちらの本を参考に、CSS設計の中でも一番基本的なところを簡単にまとめてみました。

CSSの設計を考える上でまず押さえておくべきなのが、「セレクタの詳細度」です。セレクタとは、クラスとかIDとか、スタイルを適用させる要素のことです。ある要素に複数のスタイルが当てられているときには、詳細度の高い方が優先されます(同じ詳細度の場合は後に設定されたものが優先になります)。

セレクタの詳細度は、ずばり以下のようになります。

高 (1) !important

↑ (2) インライン記述(HTMLのstyle属性)

↑ (3) IDセレクタ

↓ (4) クラスセレクタ・属性セレクタ・擬似クラス (button:first-childなど)

↓ (5) 要素セレクタ・擬似要素(::after, ::beforeなど)

低 (6) ユニバーサルセレクタ(*を使ったもので、他にスタイルが当たってないもの全てに適用される)

例えば、

#red-id {
color: red;
}
.blue-class {
color: blue;
}

このようになっていた場合、

<div id="red-id" class="blue-class">こんにちは。</div>

この「こんにちは。」はIDセレクタの方がクラスセレクタより優先度が高くなるので、赤く表示されます。

実際にはいくつかのセレクタの組み合わせで適用される要素が決まることが多く、結構複雑になりがちなのですが、例えばクラスセレクタが1つの場合と2つの場合で後者の方が優先されることになります。 このサイトを使ってみると、理解が深まるかもしれません。

この中で、(1)と(2)は保守性の観点から出来れば使わない方が望ましいのですが、なかなか思ったように表示させることができなくて、ついやってしまうことがあります。

そうならないようにも、セレクタをうまくリファクタリングすることが重要になってくるわけです。リファクタリングのコツはいろいろあるのですが、例えばこんな感じです。

要素セレクタを省略する

例えば、以下のようなスタイル設定があったとします。

span.form-control {
    font-size: 14px;
}

これは、spanを省略して下のようにしても、多くの場合問題なかったりします。

.form-control {
    font-size: 14px;
}

セレクタを短くする
例えば、次のようなケースを考えます。

<ul class="students">
 	<li><a href="/student1.html">学生1</a></li>
 	<li><a href="/student2.html">学生2</a></li>
 	<li><a href="/student3.html">学生3</a></li>
</ul>

これに対して、以下のスタイルを設定することを考えます。

. students li a {
    font-weight: bold;
}

ここで、HTML5の仕様ではul要素の直下はli要素になるのですが、セレクタはそのようなマークアップの構造に縛られないので、以下のように省略することができます。

. students a {
    font-weight: bold;
}

セレクタを限定的にする
例えば、div .dataというふうに書くと、div要素の子要素だけでなく、それの子要素やさらにそれの子要素、・・・という風にdiv以下の全ての要素が影響を受けてしまいます。

div > .dataと書けば、div要素の直下のdataクラスのみに影響範囲を狭めることができます。

クラスセレクタを活用する
セレクタの詳細度一覧を見ても分かる通り、IDセレクタは結構強いセレクタなので、あるIDが含まれる要素の中の一部だけにスタイルを当てたい場合は、IDセレクタを使わずにその部分の要素にクラスを設定し、クラスセレクタでスタイルを設定した方がより柔軟な設計になります。

前の会社にいたときの社内のプログラマによる勉強会でCSSの設計がテーマになったことがあり、その時自分自身発表を聞いていて「あの時はこうすればよかったのか」と思ったりしたので、今回基本的なところをまとめてみました。

実際にはOOCSSとかSMACSSとか、色々な手法があるようなので、余裕がある時にさらに深く勉強して、今後のCSS設計に役立てていきたいです。

追記
とはいっても、例えばAdminLTEなどのCSSフレームワークを導入している場合、そっちの方の設定の方が強力でなかなか思うように設定できない場合もあったりします(しかも、AdminLTE自体が!importantを結構使っていたり)。

そういう場合どうするか悩むところですが、おとなしくCSSフレームワークの設定に合わせるか、CSSフレームワークで使っていないクラス名を設定するか、ケースバイケースとしか言えないでしょうね。もしかしたらこういう時にも定石みたいなのがあるのかもしれないですが、少なくとも僕は知らないです。

追記2
設定したい要素が限定的な場合はまとめて行うプロパティよりも必要な要素に対してのみ働くプロパティを使用したほうが良さそうです。

例えば、背景の色だけを変えたいと言った場合、背景に関する指定をまとめて行うbackgroundよりも、背景色の設定のみを行うbackground-colorを使うといった感じです。

.input-form {
    background:red;
}

ではなく、

.input-form {
    background-color:red;
}

みたいな感じです。

Gitのコマンド With 英単語

普段よく使っているGitコマンド。でも、意外とその意味については十分に理解していないのかもしれません。というのも、Gitのオプションの単語で日常あまり使わないなーという単語が結構あるような気がします。
今回はGitのコマンドに出てくる単語をGooのオンライン英和辞典で調べてみようと思います。

commit 身を委ねる、引き渡す、約束させる
git add (変更したファイル名)で変更をインデックスに上げて、git commit -m “コメント”でインデックスに上がっている変更を確定させるというのは基本中の基本。
で、commitを調べると、身を委ねるとか引き渡すとかの他に(犯罪を)犯すとか物騒な意味も。まあGitのコマンドの場合は変更内容をリポジトリに引き渡すとかそんな感じだろう。
余談だけど、ライザップのCMで良く言っている「結果にコミット」は、どちらかというと約束させるとかに近いのかな。

amend 訂正する、改良する、修理する
上のgit commitで変更内容をコメントとともにリポジトリに渡したはいいが、コメントに間違ったことを書いてしまったとか、たまにありますよね。こんな時はgit commit –amendと打つと、エディタが開いてコメントを訂正することができます。1番目の意味そのまんまですね、変なコメントが残ったままだと何かと格好悪いので、コメントを間違えた!という時はこのコマンドを使いましょう。

revert (元の習慣・状態・話題などに)戻る,(元の考え・議論に)立ち帰る,戻る,(…を)顧みる,回顧する
上のamendはコミットコメントを修正するものですが、コミットそのものをなかったことにしたい場合もあります(なるべく避けたいケースですが)。そんな場合はgit revert ***(コミットID)でコミットを打ち消します。この場合は、まさに元の状態に戻るという意味ですね。

stash  …を(秘密の場所に)しまっておく,かたづけておく,隠しておく
作業の途中で別のブランチに切り替えて作業したりするときに現在の変更を一時的に退避しておくときにgit stashを使います。stashの詳しい使い方はこの記事が参考になります。
秘密の場所というと大げさですが、一時的に別の場所にしまっておくという感じですね。

fetch 行って取ってくる、奪い取る、もたらす
最近だとgit pull origin masterでリモートブランチの中身をローカルに取り込んで更新することが多いのでgit fetchはそんなに使うことはないのですが、git fetchでリモートの更新内容をローカルに持ってきて、git merge origin masterで持ってきた内容に更新するということなので、意味は知っておいたほうがいいと思います。
fetchという単語は色々な意味があるようですが、この場合は行って取ってくるに近いですね。

rebase 新しいベース[土台・基準レベル]を~に設定する
この単語はGooのオンライン辞典ではなかったので、アルクの英辞郎 on the webで調べました。
チーム開発ではよく使うコマンドで、マスターブランチ(例えばdevelopとします)を他の人が更新したとき、git rebase developで更新内容を自分が今いるブランチに取り込んで、自分のブランチを最新のdevelopから派生したようにすることです。詳細な説明はこちらの記事をみてください。
英単語としてはそんなに使う単語ではないようですが、新しいベースに設定するという意味を見ると、なるほどという感じですね。
それ以外だと、歯科医が義歯の交換をするなどの意味で使うようです。

gitのコマンドの意味を正しく理解してより正確に使えるようにして、ついでに英語にも強くなりたいですね。

システムアーキテクト  受験記

10月20日日曜日に那覇市の沖縄大学でシステムアーキテクト の試験を受けてきた。
令和第1回の試験、自分にとってもアーキテクトは今回は初めてなのでとにかくやれるだけやってみようということで受けてみた。
ちなみに、北谷町からの自宅だとバスで1時間近くかかり、朝が不安だったので県庁前近くにゲストハウスに前泊した。

さて、試験。
午前1
前回高度(DBスペシャリスト、午後2で不合格)から2年半経ってしまって免除がなくなったので午前1から。受験者の数はだいたい10人くらいか。
午前1は前にも受かったことがあるし、過去問でも大丈夫だったのでこれで落ちるとは思っていなかったが、問題を見てみるとエネルギーハーベスティングとか虹彩認証とか今まであまり見なかった問題がちらほらあって少し焦る。それでも取れる問題を先にしっかりマークし、わからない問題もとりあえず勘で答える。
回答はこちら。自己採点の結果は21/30。とりあえず一安心。

午前2
午前1免除の受験者が何人か教室入りし、試験会場の受験者は15、6人ほどに。
こちらは過去問で見た問題が結構多くて安心したが、いくつかド忘れしているのもあったりオーバーライド(親クラスのメソッドを引数の型、個数を変えずに定義し直す)とオーバーロード(同じ名前のメソッドを引数の型、個数を変えて複数定義する)を間違えて回答してしまったり(誰だこんな紛らわしいネーミングにしたのは)、もったいないミスもちらほら。
回答はこちら。自己採点の結果は15/25。危ない危ない。

ところで、午前1、2と特許や著作権などの知的財産の問題と機械学習、人工知能の問題が目立った気がする。後者は自分にとってはボーナス問題だが、前者の方はしっかり復習しておかねば。応用だとニューラルネットの問題が出たようで。

昼食は近くの食堂でゲン担ぎでカツカレーを食べる。その後、雨が結構強く降っていたのでコンビニで傘を買って試験会場に戻る。

午後1
問1〜4から2題選択。問4は組み込みなのでとりあえずスルーし、問1〜3にざっと目を通す。
問1はサービスデザインだのカスタマジャーニマップだの見慣れない単語が出て最初難しいかなと思って次に行く。問2、問3を見ると問3は書く量が多く、これも何か嫌だなと思う。
そうなると問2は絶対落とせなくなる。設問1は何とかわかったが、設問2で手が止まる。
ここで気分転換も兼ねて問1の問題文を読んで見ると、何だかわかりそうな感じがしてきた。とりあえず問1を全部解いて、問2に戻る。
問2はどうしてもわからない問題は勘で答え、何とか試験時間ギリギリで全部の解答欄を埋めることができた。
こちらは公式解答はまだだが、5ちゃんのスレを見た感じだと問1はやはり大体できてるっぽい。問2は結構厳しい感じ。問1の貯金で何とか持ちこたえられるか。

午後2
問1〜3から1題選択。自分は問1を選択。
自分は設計業務の経験は少ないのだが、それでもここ最近で設計、要件定義に少しでも関わった案件を思い出しながら、何とか頑張って書いたが、書き終わるとしばらく手が痛くなった。

合格は今回は難しそうとは思うが、これからの1年で設計、要件定義などの業務経験も増えて行くと思われるので、書けることの引き出しも増えているはず。来年は絶対受かりたい。
でも、それよりも来年4月のデータベーススペシャリスト。流石にいい加減受からなくては。