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月のデータベーススペシャリスト。流石にいい加減受からなくては。

システムアーキテクト 勉強2 よく出る略語一覧

システムアーキテクト試験対策その2、今回は午後2のシステム設計やシステム戦略などの分野を中心に、よく出される略語関連を簡単にまとめてみます。

BABOK ビジネスアナリシス知識体系ガイド Business Analysis Body Of Knowledge ビジネスアナリシスの計画と監視、引き出し、要求管理とコミュニケーション、エンタープライズ・アナリシス、要求分析、ソリューションの評価と妥当性確認、基礎コンピ天使という7つの知識エリアを体系づけている。

BCP 事業継続計画 Business Continuity Planning 災害などの緊急事態が発生したときに、企業が損害を最小限に抑え、事業の継続や復旧を図るための計画

BPMN ビジネスプロセスモデリング表記法 Business Process Model and Notation ワークフローとしてビジネスプロセスを描画するグラフィカルな標準記法

BSC バランスト・スコアカード Balanced Scorecard  「財務」「顧客」「社内ビジネスプロセス」「学習と成長」の4つの視点で業績管理指標をバランスよく組み合わせ、戦略実行や業績評価を行うためのツール

DFD 機能情報関連図 Data Flow Diagram 対象業務の処理過程と情報の流れを統一記述規則に基づいて表現したもの。

EVA アーンド・バリュー分析  Earned Value Analysis  予算および予定の観点からプロジェクトがどのように遂行されつつあるかを定量的に評価し、コスト効率と進捗率を一度に把握するためのプロジェクト管理の技法

FMEA 故障モードと影響解析 Failure Mode and Effects Analysis 故障・不具合の防止を目的とした、潜在的な故障の体系的な分析方法

FTA フォルトツリー解析 Fault Tree Analysis 故障・事故の分析手法、下位アイテム又は外部事象、若しくはこれらの組合せのフォールトモードのいずれが、定められたフォールトモードを発生させ得るか決めるための、フォールトの木形式で表された解析

KPI 主要業績評価指標 Key Performance Indicator 企業目標の達成度を評価するための主要業績評価指標

NPV Net Present Value 正味現在価値 ある将来に受け取れる価値が、もし現在受け取れたとしたらどの程度の価値を持つかを表すもの

RFI 情報提供依頼書 Request For Information 各種事業への参画能力についての情報を収集するための文書(事務手続)

RFP提案依頼書 Request For Proposal システムの導入や何らかの業務を委託する際に、IT企業に「○○したいので最適な提案を下さい」と依頼するための文書

ROI 投資利益率 Return On Investment 投資額に対してどれだけ利益を生み出しているかを見る尺度 (投資利益率 %)= 100 ×(当期純利益)÷{(期首総資本+期末総資本)÷ 2 }

略語系はとりあえずこれだけ覚えればなんとかなるかな。
午前はなんとなく大丈夫そうな感じなので、午後の対策も試験までに1〜2回くらい記事にしようかな。

システムアーキテクト 勉強1 セキュリティ

ここのところ、技術ブログの更新が滞っていたので、ここらで久々に更新してみようと思う。
勉強したいこと(というより、する必要があるもの)はSpringBootやAngularなど山ほどあるけど、ここ1ヶ月は来月のシステムアーキテクト 試験に備えたものを中心にしようと思う。
というわけで、今回はセキュリティ分野でも特に色々なものがあって紛らわしくなりそうな暗号技術を中心に。この辺は午前対策で。

・共通鍵暗号方式
暗号化と復号化に同じ鍵を用いるやつ。n人の利用者が使う場合、各利用者は(n-1)個の鍵を管理し、システム中にはn (n-1) / 2個の鍵が存在する。
代表例
・DES(Data Encryption Standard) 56ビットの共通鍵を用いる。
・AES(Advanced Encryption Standard) Advancedという通り、↑の後継で、ブロック長は128ビット、鍵長は128ビット・192ビット・256ビットの3つが利用できる。
・RC ストリーム暗号(平文をビット単位あるいはバイト単位などで逐次暗号化)で、RC4, RC5, RC6などがある。

・公開鍵暗号方式
暗号化と復号化にペアになった異なる鍵を用いる。
情報漏洩対策に使う→受信者が公開している鍵で暗号化し、受信者の秘密鍵で復号化。
送信者認証に使う→受信者の秘密鍵で暗号化し、送信者の公開鍵で復号化。
代表例
・ElGamal 離散対数暗号を用いた公開鍵暗号方式
・RSA とても大きな2つの素数の積の素因数分解が困難なことを用いた暗号。RSAは人の名前(リベスト、シャリア、エーデルマン)の略。
・楕円曲線暗号 楕円曲線状の特殊な演算を用いて暗号化

・ディジタル署名、認証局
送信者の秘密鍵で暗号化し、送信者の公開鍵で復号化することで送信者本人であることを証明する。
送信者の公開鍵の正当性を証明するのにPKI(Public Key Infrastructure 公開鍵基盤)が用いられるが、認証局(CA : Certificate Authority)によるディタル証明書が含まれている必要がある。
有効期間中に失効したディジタル証明書の一覧をCPL(Certificate Revocation List : 証明書失効リスト)という。
メッセージダイジェスト(送信平文をMD5などで圧縮したもの)を用いて送信者の確認と改ざん有無を同時に行える。

とまあ駆け足でまとめてみた。この辺の問題は高度試験の午後2で毎回大体1問くらい出ているので、きっちり押さえたいところですね。

Spring Boot入門その1

この記事で書いたように、昨年までPHPのWebフレームワークLaravelを使っていましたが、今年の4月に入った会社ではJavaのSpring Bootを用いて開発を行っています。
WEB+DB PRESS106号でSpring Bootの記事でタスク管理サービスとQiitaのクロール&配信サービスを作るというのがあったので、とりあえずタスク管理サービスをの方をやってみました。
今回WEB+DB PRESSの記事をまねて作ったソースコードはこちらにあります。今後色々と改良していく予定です。
ちなみに、完成品(?)はこんな感じです。

1.Spring Bootとは
2003年にSpring FrameworkというJavaのWebフレームワークが作られて、それを使いやすくしたものとして2014年に作られたのがSpring Bootです。
DI(依存性の注入)の考え方を用いているのが特徴です。

2. Spring Bootで開発を行うために必要なもの

OpenJDK(フレームワーク以前にJavaで開発をやるんなら当然必要でしょう。バージョンは今時の機能を使うんなら最低でも8以上は必要かと)
Spring Tool Suite(STSと略す。EclipseベースのIDE。本だと3.9.5でやってたみたいだが、2019年4月時点だと4以降がデフォルトなので、自分は4.1.2でやった)
Lombok(ロンボックと読む。アノテーションをつけるだけでgetterとsetterを自動生成してくれる便利なライブラリです。ダウンロードしたlombok.jarをダブルクリックするだけでインストールされます。)
・データベース管理システム(Webシステムなんだから必要に決まってる。自分が普段使っているやつを使えばいいと思います。本ではH2 Databaseを使っていたが、自分は使い慣れているMySQLでやりました。)
Pleiades(プレアデスと読む。Eclipse日本語化プラグイン。英語が得意な人には必要ではないんだろうけど、自分は入れました。導入の仕方はこちらを参照(リンク先はWindowsでの説明だけど、Macでもfeaturesとpluginsフォルダにダウンロードしたものの中身を入れるという、同じやり方で大丈夫です)。)
Maven(メイヴンと読む。Javaのビルドツール。STSを公式ページからダウンロードしてインストールした場合は大丈夫(なはず)だけど、brewコマンドとかでインストールした場合はmvn -versionで入っているか確認して、なかったら公式ページから持ってくるかbrew install mavenとかでインストールしてください)

3. Spring Bootの構成の大雑把な説明
ここでは、Laravelとの比較っぽい感じでSpring Bootの構成をかいつまんで説明して行きます。なお、Spring BootではLaravelとかと違って、フォルダ構成は決まっていないので、自分で構成を考える必要があります。
Javaのソースはsrc/main/java以下に、Java以外(html, css, jsなど)はsrc/main/resources以下に置かれます。JUnitでテストを行うためのソースはsrc/test以下に置かれます。

src/main/java (Javaソースファイル)
・Application(メイン関数です。アノテーションに@SpringBootApplicationをつけます。プロジェクトを実行するとこのメイン関数が呼ばれます。Laravelのindex.phpに近いか。)
・Entity(データの定義です。@Entityアノテーションをつけます。lombok.Dataをインポートして@Dataをつければゲッターとセッターが自動的に生成されます。さらにJPA(Javaでデータベースを扱う標準技術)を使って@Table(name = “テーブル名”)をつければ、自動的にテーブルを作ってくれます。LaravelのModel(app直下のやつ)+マイグレーションといったところか。)
・Repository(Entityで定義したデータのCRUD(create, read, update, delete)の基本操作を行うためのもので、JpaRepositoryを継承したインタフェースとして定義されます。Laravelにはない機能ですね。)
・Controller(MVCのCを担うControllerで、Laravelのものと似ていますが、データに対する処理などは次に説明するServiceを呼び出す形で実装します。@Controllerアノテーションをクラスにつけます。また、Getメソッドならメソッドに@GetMapping(value=”(URL)”)を、Postメソッドならメソッドに@PostMapping(value=”(URL)”)をアノテーションにつけることでリクエストをマッピングすることができます。なので、LaravelだとController+routesに近いイメージかも)
・Service(データに対して行う処理を実装して、Controllerに渡すものです。これもLaravelにはないですが、あえて言えばModelとControllerの間をつなぐものというイメージかもしれないです。@Serviceアノテーションをつけます。実際の処理はRepositoryのCRUD操作を呼び出して実装します。)
・Form(htmlフォームに入力した値をコントローラに渡すためのクラス。バリデーションとかもここで行うことが多いようです。LaravelでいうRequest?)

src/main/resources(フロントエンドなど)
・Thymeleaf(タイムリーフと読む。植物のハーブから名付けられたようです。いわゆるテンプレートエンジン。LaravelだとBladeがデフォルトだけど、Spring Bootではこれ以外にもいくつかのテンプレートエンジンをサポートしているようです。)
・application.properties(アプリケーションの設定値を持たせるもので、Laravelだとconfig配下のファイルが近いと思います。使用するデータベースの設定なんかもここで行います。)

以上、かなり駆け足で書いたのでざっくりとした説明になってしまいましたが、その2を書くときはもう少し詳しく書ければと思います。

Angular入門その1

JavaScriptのフレームワークの1つ、Angular。今の所は勉強中といったところですが、これから自己学習を兼ねて何回かに分けてAngularについて投稿していこうと思います。
使い方的にはVue.jsと似ているところもあるようですが、AngularはTypeScript(JavaScriptをわかりやすく改良したもので、これをコンパイルするとJavaScriptになる)を使うことが推奨されているので、それについても別途記事を書こうかと。ちなみに、もともとAngularJSと呼ばれていたものが、JavaScriptでなくTypeScriptが推奨されるようになってからJSが外れてAngularと呼ばれるようになったようです(なので、上でJavaScriptのフレームワークと書いていますが、フロントエンドのフレームワークといった方が正確なのかもしれないです)。
なお、Vue.jsの入門記事は その1 その2 その3 (近いうちにこちらに移転します)

1. 環境構築
Angularは、一般的には「Angular CLI」というコマンドラインツールを使って環境構築することが多いようです。流れとしては、ざっとこんな感じです。
i) Node.jsをインストール
とりあえず、Macなら

$ brew install nodebrew

でOK。Homebrewが入ってなければそれを入れるのが先だけど。
WindowsならNode.js公式ページからインストーラを落としてそれでインストールすればいいかと。

ii) TypeScriptをインストール

$ npm install -g typescript

Node.jsインストールでnpmも使えるようになっているはずなので、npmを使ってインストールします。もしかしたらsudoでやる必要があるかも。

iii) Angular CLIをインストール

$ npm install -g @angular/cli

こちらも、同様にnpmを使ってインストールします。これで、ngコマンドでAngularのコマンドラインツールを使えるようになります。

iv) プロジェクトを作成
例えば、AngularTest1という名前のプロジェクトを作成するとします。

$ ng new AngularTest1

これで、こんな感じのソースコードができます。
ここからさらに

$ ng serve --open

で、ローカルにサーバーが立ち上がり、こんな感じの画面が出てきます。

ただ、他のサイトとかだと
「Welcome to app!」
と出て、下に大きなAngularのアイコンが表示されてるのを見たけど、バージョンが違うのかな?もしくはどっかで操作を誤ったか(汗)

2.ソースの中身の簡単な解説

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>AngularTest1</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}
<h1>
  {{title}}
</h1>

一番上のindex.htmlにapp-rootというものがありますが、これはコンポーネントといって、Vue.jsでもありましたが、1つの部品のようなものにするものです。
main.tsでapp/app.module.tsが呼ばれ、app/app.module.tsでapp/app.component.tsが呼ばれ、app/app.component.tsで実際のコンポーネントを定義するという流れになります。
なので、app/app.component.tsのtitleを変えれば、表示される文字列も変わってくることになります。

ここまでざっと書いて見たけど、次回はもう少し詳しく説明しようと思います。

ここ5年ほどのJavaを簡単に振り返ってみる

下の記事で転職先が決まって久しぶりにJavaを使うことになると書いたが、ここでここ5年ほどのJavaの動向を振り返ってみようと思う。

WikipediaのページJDK公式ページによると、大体こんな感じ。
2014年3月 Java8(ラムダ式、型アノテーション、Date and Time API 、JavaFX(Swingより高機能なGUIツール)など)
2017年9月 Java9(言語レベルでのモジュール化のサポートなど)
2018年3月 Java10(ローカル変数型推論など)
2018年9月 Java11(ネストベースのアクセスコントロールなど、OracleJDKの有償化!!
2019年3月 Java12(JVM定数のAPIなど)

こうして見ると、5年前のJava8で色々な機能が追加されたのが目につく。中でも、今更ながらラムダ式の導入はかなり大きかったのではないかと。
ラムダ式の例としては、こんな感じ。

package Lambdatest;
import java.util.function.*;

public class LambdaTest {
	public static void main(String[] args) {
		double x1 = 3.0;
		double y1 = 4.0;
		BiFunction<Double, Double, Double> z = (x, y) -> Math.sqrt(x * x + y * y);
		System.out.println(z.apply(x1, y1));
	}
}

これと同じことをラムダ式を使わずにやろうとすると、無名クラスを使ったり、結構ややこしいことになるんではと思う。
そういえば、C++も言語仕様が大きく追加されたC++11からラムダ式が使えるようになったんだったな。

他にも色々な機能が増えて、ここ数年で本当に進歩したんだなあ。とはいえ、いいことばかりではなくJava11からOracleJDKが有償化されてしまった(個人で使う分には大丈夫みたいですが)のは多くの人にとっては痛そうですね。。。OpenJDKの方は無償で使うことができるのですが、サポート期間が短かったりするので、悩みどころですね。

追記
Qiitaのコメント欄で情報をいただいたので、少しだけ追記します。
Amazon CorrettoというOpenJDK互換の無償のディストリビューションがあるようです。インストール方法などはこちらを参考にして見てください。

今後の技術テーマ

こちらに書いた通り、4月から転職が決まって沖縄で働くことになった。
それに伴い、使用する技術も今までとは異なったものになるので当面は引越し作業の合間に新しい技術や久々に使う技術を中心に勉強していこうと思う。
・Java (2つ前の会社では客先によっては使っていたけど、ここ数年で色々と変わったことがあるようなので、その辺りを中心に)
・Spring Boot (Javaのフレームワーク。WEB+DB PRESSの106号にちょうどそれについての記事があったので、それを元に勉強中。パッと見Laravelとは手触り感なんかが結構異なる感じだけど、DIなんかでLaravelと共通した考え方を使っているところもあるらしい。)
・Node.js  (以前ドットインストールでちょっとやったけど、余裕があるときに復習しようと思う)
・AngularJS (ドットインストールでちょっとだけやった感じだと、Vue.jsに少し似ているかも。)
・クラウド技術(Microsoft Azureの使い方を基本的なところだけでも勉強しておきたい)

常に勉強し続けなくてはいけないのは技術者の宿命だけど、新天地で頑張るぞ!
とりあえず記事を書けるところまできたらこっちに書いて、同じ内容をQiitaにも投稿しようかと。