フリーランス チャレンジ!!

フリーランス チャレンジ!!

現役フリーランスエンジニアが書く雑記ブログ

【GitHub】依存先パッケージ(ライブラリ)のSecurityAlerts(脆弱性)はマージするだけ(Botが自動的にプルリク作成)

GitHub パッケージ ライブラリ 脆弱性

 

GitHubから依存先パッケージ(ライブラリ)のSecurityAlerts(脆弱性)に関するメールを受信しました。

 

GitHubは依存先パッケージ(ライブラリ)でSecurityAlerts(脆弱性)が修正されるとそれを使用してるリポジトリに対して、「脆弱性が直ったからプルリクしたよ、マージしてね」とお知らせしてくれます。なんて便利!!

 

 

依存先パッケージ(ライブラリ)のSecurityAlerts(脆弱性)

こんな感じのメールを受信します。

GitHub パッケージ ライブラリ 脆弱性

 件名のピンク色がリポジトリ名、緑色がパッケージ(ライブラリ)です。

このようにSecurityAlerts(脆弱性)のあるリポジトリとパッケージ(ライブラリ)が件名になったメールとなります、わかりやすい!!

 

Botが自動的にプルリク作成してくれる

 はい、メールを一番下までスクロールするとこのように(ピンク色下線)、自分のリポジトリにBotが自動的にプルリクを作成してくれてる。

 

リンクをクリックすると

GitHub パッケージ ライブラリ 脆弱性

GitHubのページが開きます。

 

対応はマージするだけ

気になる人は修正内容(commits, Files changed)見て、後はマージするだけ。

特に問題ないよーって人は、マージボタンを押すだけ。

 

マージボタン押下して、次に出てくるConfirmボタンも押下すると無事マージ完了。

しかも、少しその画面で待ってると、Botが作成したプルリクのブランチも自動的に削除してくれます。素晴らしい。

 

 ライブラリって一度導入すると仲々バージョンアップもしないしSecurityAlerts(脆弱性)があってもそんなことも知らずに放置することになるけど、この仕組みがあると安心ですね。

【Visual Studio Code】Java開発でTomcatホットデプロイ(HotDeploy HotReload)

f:id:ksakae1216:20200308150946p:plain


長年、JavaのWeb開発はeclipseを使ってて世間的にもデファクトスタンダードになってると思うんですけど、やっぱeclipseは重い!!

 

もし、Visual Studio Codeでも簡単にホットデプロイができるんだったらもうeclipseにこだわる必要は無いですね。

 

ということで評判の良い(と思ってる)Visual Studio Codeで挑戦です。

(ちなみにMacですが、Windowsの人も参考になると思います)

 

 

Githubからcloneする

下記のGithubプロジェクトをローカルにcloneしてください。

GitHub - ksakae1216/vscodeJava: try java develop to vscode

 

mavenプラグインをインストール

次は、Visual Studio Codeのプラグイン関連です。

まずはmavenプラグインをインストール。

f:id:ksakae1216:20200308150205p:plain

 

Tomcatプラグインをインストール

Tomcatプラグインのインストールです。

f:id:ksakae1216:20200308152654p:plain

 

Tomcat起動

プラグインを入れたのでVSCODEからTomcatを起動できます。

f:id:ksakae1216:20200308152732p:plain

ダイアログが出てくるのでローカルにインストールしてあるTomcatディレクトリを指定。

 

f:id:ksakae1216:20200308152820p:plain
 

Web画面を開く

Tomcatが起動できたのでWeb画面を開いてみます。 

f:id:ksakae1216:20200308153036p:plain

 

するとデフォルトブラウザが開きます。

f:id:ksakae1216:20200308153103p:plain

はい、とりあえずWeb画面が開きました。

 

次はGithubからcloneしたコードの画面を表示してみましょう。

f:id:ksakae1216:20200308153136p:plain

 

f:id:ksakae1216:20200308153230p:plain

 

f:id:ksakae1216:20200308153339p:plain

Welcomeページが開きました。もう成功したようなもんです。

 

アドレスバーの最後に"index"という文字列を付与してEnterキー押下するとこの画面(Githubでcloneしたページ)が開きます。 

f:id:ksakae1216:20200308153924p:plain

 

Tomcatのホットリロード設定

 VSCODEの設定を開きます(MacだとCmd + ,で開きます)

検索窓に"autobuild"と入力すると設定がフィルタリングされるので「Java Autobuild」と「Java・Debug」のHod Codeをそれぞれ下記のようにします。

f:id:ksakae1216:20200308154014p:plain

 

Tomcatをdebug起動する

さあ、あと少しですよ。

TomcatをDebug起動します。

一度、Tomcatをstopしてから「Debug War Package」を選択してdebugモードでtomcatを起動。

f:id:ksakae1216:20200308154114p:plain
 

Java修正してホットデプロイ確認

 いよいよです!!

それでは早速Javaを修正してみます。

Indexページを表示した時のJavaコード(IndexController.java)にログを追加してみます。

f:id:ksakae1216:20200308154203p:plain

赤枠部分を追加して保存。

 

この状態でWebページ(http://localhost:8080/web/index)をリロードすると

f:id:ksakae1216:20200308154429p:plain

ホットデプロイされて追加したログが表示されましたね!! 

 

最後に

Visual Studio CodeでもJavaのWeb開発できそうなのでeclipseはもうやめようと思います。(多分ね)

 

ホントは会社で普段Intellij使ってるからプライベートもそうしたいんだけど、自宅では無償版使ってて機能が制限されてるので今後はオープンソース化されてるVisual Studio CodeをメインのIDEとしてやっていこー

【Java DB】Webアプリケーションサンプル

以前、Springを使ってDBのデータを画面に表示する記事を書きましたが、ログイン、一覧、更新画面まで作成したのでサンプルを紹介します。

 

 

今回のサンプルでできること

使う技術は多いですが

・ポートフォリオっぽい画面を表示

・ログイン画面(DBのID、パスワードをみてログイン可否)

・一覧画面(ログインした後、DBのデータを表示して一覧画面を表示、ページャー、フィルタも使える)

・更新画面(一覧で選択したデータを更新、削除または新規登録)

 

環境

環境は以下の通りです。

・eclipse Oxygen

・tomcat 9.0

・java 9

・Docker

・MySQL 5.6

 

※あとPCはMACなのと、言語を英語にしてるのでそこはすいません。

 

eclipse

eclipseをインストールしてください。

あとSpringを使うのでプラグインも必要なので下記記事を参考に。

【Java】Eclipse + Spring(STS) でMVCサンプル簡単作成 - フリーランス チャレンジ!!

 

 

DataBase

DBは好きにインストールしてください。

個人的にはDockerにDB(MySQL)をインストールするのがすごく楽ですし、Dockerは覚えておいて損はないのでチャレンジした方がいいかなーと思います。

【Docker入門】5分でMySQLのDB、テーブル作成 - フリーランス チャレンジ!!

 

DBを作成したら下記SQL文でテーブルを作成してください。

※下記はDB名を"test_mysql"としてるので適宜変えてくださいね。

gist6b68c7ab5adee45a34d155a306b7f83e

 

 次にデータも入れてください。

gista43e808ab58f4dfee8b345f422692c75

  

eclipseにインポート

gitから直接cloneしてeclipseにインポートします。

f:id:ksakae1216:20191218215503p:plain

 

f:id:ksakae1216:20191218215517p:plain

 

f:id:ksakae1216:20191218215727p:plain


URIに下記を入力

gistc0f85a6930c05066cca93848abe9aeb7

 

f:id:ksakae1216:20191218215835p:plain


そのままNextボタンを押下

f:id:ksakae1216:20191218220123p:plain

 

f:id:ksakae1216:20191218220348p:plain

 

何かいろいろやるので終わったらNextボタン押下

f:id:ksakae1216:20191218220555p:plain

 

これで無事eclipseにインポートされます。

 

動かすための準備

インポートしたプロジェクトを右クリックして「Maven」→「Update Project」を選択してダイアログが出てくるのでOKボタンを押下。

f:id:ksakae1216:20191218220926p:plain


 プロジェクトを右クリックして「Run As」→「Maven Clean」を選択してCleanを実行。

f:id:ksakae1216:20191218221315p:plain

 

 プロジェクトを右クリックして「Run As」→「Maven install」を選択してbuildを実行。

f:id:ksakae1216:20191218221342p:plain

 

Tomcat設定

次にWebサーバーを設定します。

事前にTomcatをローカルにダウンロードしてください。

Apache Tomcat® - Apache Tomcat 9 Software Downloads

 

プロジェクトを右クリックして「Run As」→「Run on Server」を選択。

f:id:ksakae1216:20191218221704p:plain

 

Webサーバーを選択できるので、ダウンロードしたTomcatのバージョンを指定します。

今回は、Tomcat9。

f:id:ksakae1216:20191218222130p:plain

 

Finishボタン押下すると、Tomcatが起動してHello World画面がeclipse内に表示されると思います。

 

次に「Servers」→「Tomcat v9.0.5」→「Add and Remove」を選択。

f:id:ksakae1216:20191219075017p:plain

 

今回のプロジェクト「web-sample」を追加してFinishボタンを押下してください。

f:id:ksakae1216:20191219075352p:plain

 

これで準備完了!!

 

動作確認

 さて動作確認です。

 

ブラウザに下記URLを入力するとポートフォリオっぽい画面が表示されます。

gist7ea5ef810ed4e31df9d7a955b099cf8f

f:id:ksakae1216:20191219075850p:plain

 

 さらに下記URLでログイン画面。

gist8763aa97a0215e7c4ffab66b6cfa2735

f:id:ksakae1216:20191219080605p:plain

 

ログインID、パスワードはloginテーブルにinsertした値(testlogin, testpass)です。

入力してEnterボタン押下で一覧画面に遷移します。

f:id:ksakae1216:20191219080633p:plain

 

一覧画面の機能としては下記の通り。

・画面右上のログアウトボタン押下でログイン画面に遷移

・1ページの表示件数変更(10, 25, 50, 100)

・データの検索(1文字ずつ入力する毎にフィルタされます)

・テーブルの列名(ユーザーID、名前・・・)をクリックでソート

・新規登録ボタンで更新画面遷移(新規登録モード)

・ユーザーIDのリンク押下で更新画面遷移(更新モード)

 

更新画面に遷移するとこんな感じです。

【新規登録】

f:id:ksakae1216:20191219081723p:plain

 

【更新】

f:id:ksakae1216:20191219081741p:plain

 

最後に

ボリュームは少しありますが1つずつ丁寧にやってけば大丈夫です。

なかなか、JavaでDBのデータを画面に表示するサンプルってネットにたくさんあるんですがうまくいかないんですよね。

 

私の感覚としては環境、ライブラリのバージョン、手順もれが原因ではないかと思います。

この記事では1つずつ確認しながら作ってたので安心してこの記事通りに進めていただければと思います。

プロトタイプ作成やデモの時にWebページを直接変更する方法

chrome.google.com

 

プロトタイプ作成してる時、デモの時に他の人の意見を聞きながら、文字や色、フォントなど変更したい時ってありますよね?

 

そんな時に便利なのが、visbugというChromeで使える拡張機能。

 

 

visbugの簡単なデモ

まずは、一部機能の簡単なデモ動画を見てください。

※検索結果の3番目に表示されたこのブログ記事を1番目に移動しました。

 

youtu.be

 

インストール方法

インストール方法は簡単。

下記ページでChrome拡張を追加するだけ。

https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc

 

機能紹介:Guides

f:id:ksakae1216:20190818203253p:plain

 

マウスカーソルを調べたい箇所の上に持ってくと要素を表示してくれます。

また、要素をクリックして、他の要素にカーソルを持ってくと最初にクリックした要素との距離をピクセル表示してくれます。

 

機能紹介:Inspect

f:id:ksakae1216:20190818210819p:plain

マウスカーソルで選択した要素のStyle(CSS)を表示してくれます。

 

またMacの場合、Optionキー押下して、クリックすると表示を残してくれます。

例えば、最初に選択した要素をOption+クリックして、別の要素をOptin+クリックすると最初と2番目をそのまま表示してくれるので見比べることができます。

 

機能紹介:Accessibility

f:id:ksakae1216:20190818210841p:plain

人が見て、どのくらい分かりやすいかをチェックするためのものっぽいです。

マウスカーソルで選択した箇所で出てくる数値が高ければ高いほど人の目に優しくて問題なければ緑色のチェックが表示され、問題があれば赤色でバツが表示されます。

 

機能紹介:Move

f:id:ksakae1216:20190818210855p:plain

要素の中で上下左右に対象の要素を移動できます。

例えば横にボタンが3つ並んでいたらそのボタンの順番を変更できます。

 

つまり要素の中だけで順番を変更できる感じです。

 

機能紹介:Margin

f:id:ksakae1216:20190818212100p:plain

要素を選択して、その後に上下左右ボタン押下でそれぞれのMarginを広げたり、狭めたりできます。

 

機能紹介:Padding

f:id:ksakae1216:20190818212208p:plain

要素を選択して、その後に上下左右ボタン押下でそれぞれのPaddingを広げたり、狭めたりできます。

 

機能紹介:Flexbox Align

f:id:ksakae1216:20190818212325p:plain

選択した要素のAlignを上下左右ボタン押下で変更することができます。 

 

機能紹介:Hue Shift

f:id:ksakae1216:20190818212914p:plain

選択した要素の色、背景色を上下左右ボタンで変更することができます。

要素は複数選択も可です。 

 

機能紹介:Shadow

f:id:ksakae1216:20190818212946p:plain

選択した要素の影を追加することができます。

こちらも上下左右ボタンで変更することが可能です。 

 

機能紹介:Position

f:id:ksakae1216:20190818213155p:plain

このブログのデモに紹介した機能です。

要素を移動できます。 

 

機能紹介:Font Styles

f:id:ksakae1216:20190818213922p:plain

選択した要素のフォントサイズ、Boldを変更できます。

こちらも上下左右ボタンで変更可能。 

 

機能紹介:Edit Text 

f:id:ksakae1216:20190818214117p:plain

選択した要素のテキストを変更する機能です。 

 

機能紹介:Search

f:id:ksakae1216:20190818214730p:plain

要素を検索できます。

検索ボックスに検索したいスタイルなどを入力し検索します。

また、▼ボタンからそのページで使われてる要素の候補から検索することもできます。

PostgreSQLも使える無償クライアントツールTablePlus(Mac, Windows対応)

tableplus.io

 

PostgreSQL用のクライアントツールでしかもMacとなるといいクライアントツールがないんだよね〜。

 

PG Commander, PSequel, TeamSQLとそれぞれ試してきたけど不満だらけ。。。

 

PG Commanderはテーブルの絞り込みができないし、SQLの補完もない。

PSequelは絞り込み、補完はできるけど、まだまだ機能不足。

TeamSQLは唯一良かったけど、使えなくなった。。。

DB接続のクライアントツールはTeamSQLで決まり(インストールからMySQL接続まで紹介) - フリーランス チャレンジ!!

 

そこで、無償でPostgreSQL(他のDBも使えるよ)で使えて多機能ですばらしいTablePlusを紹介します。

 

WindowsでもMacでも使えるのはうれしいよね!!

 

 

ダウンロード先

ここからダウンロードできます↓↓↓

TablePlus | Modern, Native Tool for Database Management

 

対応データベース

たくさんのデータベースに対応してます。

f:id:ksakae1216:20190814180120p:plain

・PostgreSQL

・MySQL

・Amazon Redshift

・Microsoft SQL Server

・SQLite

・MariaDB

・Oracle

・Redis

・Cassandra

・Cockroach

・MongoDB(Beta)

・Vertica

 ※MongoDBはBetaと書いてなるのでもしかしてまだ正式にサポートしてないかも。

 

SSH、秘密鍵も対応

SSH、秘密鍵も対応してます。

私も仕事で使ってますが、ローカルのVirtualBox、SSH接続するサーバー、AWSどれも接続できました。

 

接続方法の紹介

先に接続してから機能を紹介しようと思います。

接続方法に興味ない方は飛ばしてください。

 

「Create new connection」をクリック 

f:id:ksakae1216:20190814181548p:plain

 

 ここから対象のDBを選択します。

f:id:ksakae1216:20190814181811p:plain

 

接続情報を入力し、「Test」ボタンを押下します。

テスト接続が成功すればフィールドがこのように緑色になるので「Connect」ボタン押下でDB接続します。

f:id:ksakae1216:20190814182752p:plain

 

はい、接続できましたね。

それではこれから機能を紹介してきます。

f:id:ksakae1216:20190814183100p:plain

 

テーブルの絞りこみ

画面左上のテキストボックで絞り込むことができます。

ちょっと変わってるのが"ka"と入力すると"kanto_chiba", "kanto_tokyo"だけになりそうだと思いますが、"kyushu_fukuoka", "kyushu_kagoshima"もそのまま表示されます。

このテキストボックスは入力した文字全てに一致するテーブルが表示されるからです。

なのでこの場合、正規表現使って"^ka"とするか"kan"まで入力すれば"kanto"のテーブルが表示されます。

f:id:ksakae1216:20190814183909p:plain

 

データの修正、テーブル構成

テーブルをクリックするとそのテーブルの内容が表示されます。

変更したいデータをクリックすると編集できるので変更してEnter。

f:id:ksakae1216:20190814184403p:plain

 

するとテーブル名の背景が黄色になるのでMacならCmd + S押下で変更が反映されます。

f:id:ksakae1216:20190814184413p:plain

 

テーブルの構成は「Structure」をクリックすると見ることができます。

もちろんここで変更することもできます。

f:id:ksakae1216:20190814184703p:plain

 

SQL補完

SQLの補完も完璧です、赤矢印のSQLをクリックするとSQLビューが開きます。

f:id:ksakae1216:20190814185137p:plain

 

"sele"と打つとこのように補完候補が表示されます。

f:id:ksakae1216:20190814185618p:plain

 

テーブル名も同様に補完されます。

f:id:ksakae1216:20190814185651p:plain

 

ビューの右下にある「Run Current」ボタン押下でSQL実行。

「Beautify」ボタンでSQL文を整形もしてくれます。地味に便利。

 

複数のDB接続

 赤矢印のコンセントアイコンをクリックすると

f:id:ksakae1216:20190814190022p:plain

 

登録してある接続先一覧が出てくるので、もう1つのMySQLを選択します。

f:id:ksakae1216:20190814190225p:plain

 

はい、このようにPostgreSQL(postgres)、MySQL(test_mysql)の2つを接続できました。

それぞれクリックすることで表示を切り替えることができます。

f:id:ksakae1216:20190814190240p:plain

 

色の変更

地味に気に入ってるんですが、接続先を表示してあるバーの色を変えることができます。

私はMySQLの色を変更しました。

デフォルト色(灰色)のPostgreSQL

f:id:ksakae1216:20190814191017p:plain

 

色を変更したMySQL

ローカル環境とStaging環境みたいなことを視覚的にもわかりやすくできるのでいいですよね。

f:id:ksakae1216:20190814191045p:plain  

データのselect文作成

 この機能もあるとまあまあ助かるんですよね。

テーブルのデータを選択し、右クリック、「SQL Insert Statement」で選択したデータのInsert文をクリップボードにコピーしてくれます。

f:id:ksakae1216:20190814191148p:plain

 

テーブル右クリックでTruncateとテーブル削除

テーブル削除はあまり使わないですがTruncateってたまに使いますよね。

SQL文打つのもそんなに大変じゃないですが、マウス操作でできるのはうれしいです。

f:id:ksakae1216:20190814191324p:plain

  

無償版の注意点

ここまでメリットを中心に紹介しましたが最後に1点だけ無償版の注意点です。

 

無償版はテーブル、接続先を2つ以上開くと「Free Trial limited 2 tabs」と表示されます。

無償版はタブ2つまでだよということです。

なのでこまめにタブを閉じて使ってください。

タブを閉じるのはMacだとCmd + Wです。

Nxチュートリアルをやってみた(Step 3 〜 12)

前回記事の続きです。

Nxチュートリアルをやってみた(Add E2E Tests) - フリーランス チャレンジ!!

 

この記事ではチュートリアルのStep3から最後まで一気に紹介します。

今までは、最初だったので1つずつ丁寧に紹介しましたが、大分慣れてきたので各Stepのやること結果をピックアップして紹介。

 

 

 

Step 3: Display Todos

nx.dev

AppComponent.tsにtodos配列を定義。

画面側にもこのtodos配列の内容を表示するよう修正し、Cypressテストを実行、見事パスします。

 

Step 4: Connect to API

nx.dev

 

AppComponentクラスにAPIにアクセスするコードを追加して、最後に画面表示です。

APIを受け取って返す処理がないので画面を表示してもコンソールには404 NotFoundが出力されます。

 

Step 5: Add Node Application Implementing API

nx.dev

 

nestアプリケーションを開発できる機能を追加。

nestを使用してAPIを作成して、コードを一部修正。

最後にAPIを起動してブラウザからURLを叩けば結果を返してくれる。

※チュートリアルは"https://localhost:3333/api/todos"となってるが本当は"http"。

  "https"だと表示できないので注意が必要。

この記事を書いた時にissueを出してhttpに変更されたのでチュートリアル通りでOK

 

Step 6: Proxy

nx.dev

 

Step5で作成したAPIのProxy設定を解説。

todos, apiをng serveで起動し画面が表示されることを確認。

APIを作成するまでは、todosはソースに直書きだったものがAPI経由で取得できるようになった。

 

Step 7: Share Code

 

nx.dev

 

todosインターフェースをフロント、バックエンド両方で定義してるのが問題なのでこのステップでインターフェースをシェアするように変更する。

インターフェース格納用のlibディレクトリをコマンドで作成し、インターフェースを定義。

その後、ng serveで画面起動して表示されることを確認。

 

Step 8: Create Libs

nx.dev

 

 UIライブラリを作成してtodosコンポーネントを作成。

 画面はそのコンポーネントの部品を使う感じ。

正直ここのチュートリアルだけだとコンポーネント部分のとこがイマイチ理解しきれない。

 

Step 9: Dep Graph

nx.dev

 

Nxの標準機能で依存関係をブラウザに表示することができます。

 

Step 10: Test Affected Projects 

nx.dev

 

"npm run affected:apps"で変更された内容を調べ、変更の影響を受ける可能性があるアプリを特定する。

 また、変更内容から影響の受ける可能性のある箇所をテストすることもできる"npm run affected:test"

あと、parallelオプションをつけるとtestをパラレルで実行してくれるのでテストがすぐ終わる。

 

Step 11: Build Affected Projects

nx.dev

 

"npm run affected:build"はtodosをビルドするがuiはビルドしない。

 

Step 12: Summary

nx.dev

 

ここまでのチュートリアルでやってきたことを振り返り

 

最後に

この記事でStep3から12まで一気にやってきました。

 

正直チュートリアルやっただけでNxを全て理解することはできませんが、少なくともNxを使えばしっかりしたテンプレートを自動的に作ってくれるのでしっかりした(?)アプリを作成することができる印象です。

Nxチュートリアルをやってみた(Add E2E Tests)

前回はnpx、ngコマンドでアプリケーションを作成しました。

今回はE2Eテスト(Cypress)をこのアプリケーションに追加します。

※NxはデフォルトでCypressが使えるよ。

 CypressってどんなE2Eテストか知りたかったら下記の記事をぜひ読んでみて。

簡単、速い、テストの動画保存、Cypressは最高のe2eテストだ!! - フリーランス チャレンジ!!

 

 

チュートリアル

このページです。

nx.dev

 

チュートリアル前にテスト実行

前回の記事で作成したアプリのテストを起動します。

 

テスト実行コマンド

gist0f781f571dd2c7f3ce5e856e8b9549f5

 

IDEが立ち上がるので画面右の「Run all specs」ボタンを押下。

f:id:ksakae1216:20190709204707p:plain

 

はい、テスト成功です。

f:id:ksakae1216:20190709205055p:plain

 

テスト内容の解説

テストが成功しましたが、どんなテストだったか解説します。

 

gist177e3d812a5b41e17c78fc6980619fa3

定数(const)で"getGreeting"を定義して"h1"タグをセットしてます。

Cypressで使えるAPIは下記を参照して下さい。

get | Cypress Documentation

 

gist3260c97f95315c3e38e942c5ef57838b

次はテストコードです。

 

・1行目で先ほどの定数ファイルをimport

・4行目の"cy.visit('/'));"で画面を開き

・7行目でh1タグに"Welcome to todos!"が含まれてるかチェック

 

もう一度、テスト結果画面の左部分を再掲します。

コードを説明した通りのテストとなってます。

f:id:ksakae1216:20190722225740p:plain

 

どうですか?

直感的でわかりやすいですよね?

 

テストコードを追加 

gist739c4ed2e6bb6d91c8596fb7a5a22968

 

ボタンに関する定数"getAddTodoButton"を追加。

 

gistd52f019606fd691255a35c012ef4e215

 

テストコードもチュートリアルに合わせて大幅に変更してます。

 

e2eテスト実行

それでは変更したコードでe2eテストを実行してみます。

f:id:ksakae1216:20190727170517p:plain

 

テスト失敗です。

”expected 0 to equal 2”がテスト失敗の部分です。 

 

最後に

このチュートリアルはテストを追加するが失敗するのがゴールとなります。

このチュートリアルにも書いてありますが、チュートリアルを進めてくとこのテストも合格するようになるそうです。

 

ソースコードは下記を参照ください。

github.com

 

【次の記事】

Nxチュートリアルをやってみた(Step 3 〜 12) - フリーランス チャレンジ!!

Nxチュートリアルをやってみた(Create Application)

f:id:ksakae1216:20190615173336p:plain

Nxチュートリアルをやってみた!!

 

その前にNxって何?って人もいるよね。

実は私もこのチュートリアルやる前にそんな状態でした。

プロジェクトで使ってるけど、内容理解してなくて。。。

 

まずはそこから調べて、チュートリアルを進めてきます。

 

 

Nxって何?

まずは公式ページを見てみる。

nx.dev

 

簡単に説明するとAngularアプリケーションを構築できるOSSのツールキットです。

 

Use Modern Tools

Use Modern Tools

Using Nx, you can add Cypress, Jest, Prettier, and Nest into your dev workflow. Nx sets up these tools and allows you to use them seamlessly. These innovative tools offer a lot of advantages and help you work better and smarter.

 

(翻訳)

Nxを使用すると、開発ワークフローにサイプレス、ジェスト、プリティー、ネストを追加できます。 Nxはこれらのツールをセットアップし、それらをシームレスに使用できるようにします。これらの革新的なツールは多くの利点を提供し、あなたがより良くそしてより賢く働くのを助けます。 もっと詳しく知る

 

Cypressはe2eテストランナー、JestはFacebookが作ったテストランナー、Prettierはコード整形(フォーマット)、NestはNodeJsフレームワーク(サーバー側もTypeScriptで書こうみたいな)です。

 

上記で上げたこれらのツールを使えるようにできるってこと。

 

Build Full-Stack Applications

Build Full-Stack Applications


With Nx, you can build full-stack applications using Angular and Node.js frameworks such as Nest and Express. You can share code between the frontend and the backend. And you can use the familiar ng build/test/serve commands to power the whole

 

(翻訳) 

Nxでは、NestやExpressなどのAngularおよびNode.jsフレームワークを使用してフルスタックアプリケーションを構築できます。フロントエンドとバックエンドの間でコードを共有できます。そして、あなたは全体に力を与えるためにおなじみのng build / test / serveコマンドを使うことができます。 

 

さっき出てきたNestの話ですね。

バックもTypeScriptで書けるのでバックエンドと同じようにコードを書くことができるということです。

フロントとバックが同じTypeScriptで書けるのは開発者にとってだいぶ楽になりますね。

 

Develop Like Google

 

Develop Like Google

With Nx, you can develop multiple full-stack applications holistically and share code between them all in the same workspace. Nx provides advanced tools which help you scale your enterprise development. Nx helps enforce your organization’s standards and community best practices.

 

(翻訳)

Nxを使用すると、複数のフルスタックアプリケーションを総合的に開発し、それらの間でコードをすべて同じワークスペースで共有できます。

Nxはあなたがあなたのエンタープライズ開発を拡大するのを助ける高度なツールを提供します。 Nxは、組織の標準とコミュニティのベストプラクティスを強化するのに役立ちます。

 

正直翻訳しても内容が理解できないですがタイトルは「Googleのように開発する」となってるのできっとGoogleのように開発できるんでしょう。

 

長くなりましたが便利なテストランナー、コードフォーマット、サーバー側もTypeScriptで書けてGoogleのように開発できるのがNxのようです。

 

チュートリアルやってみた(Create Application)

 それではようやくチュートリアルです。

下記ページを参考にチュートリアルを実施してみます。

Step 1: Create Application

 

workspace作成

gistb00f694d843ca15731db67ee2a861f36

 

f:id:ksakae1216:20190615215120p:plain

 

途中で、何回か聞かれます、「CSS」と「empty」を選択しました。

完了するとmyorgディレクトリにとその下にいろいろ作成されます。

f:id:ksakae1216:20190615215806p:plain

 

アプリケーション作成

gist5e5038233f91e707f5774ca6cde4e350

 

f:id:ksakae1216:20190615215819p:plain

 

gist4107c6272f3c99353236c9a915cf69f5

 

f:id:ksakae1216:20190615220109p:plain

 

todoアプリケーションが作成されました。

 

アプリケーション起動

gist1a0e3d91902a78fdee481336d907c6f8

 

localhost:4200に接続すると、アプリが起動されてることがわかります。

f:id:ksakae1216:20190615220533p:plain

 

最後に

このチュートリアルでわかったことは、applicationコマンドでアプリが簡単に作成できたことです。

この後続いてチュートリアルを実施していきたいと思います。

 

github.com

 

【次の記事】

Nxチュートリアルをやってみた(Add E2E Tests) - フリーランス チャレンジ!!

簡単、速い、テストの動画保存、Cypressは最高のe2eテストだ!!

www.cypress.io

インストールが簡単、速いe2eテスト、テストを動画で保存するなど、素晴らしいe2eテストツールのCypress!!

 

Cypressとはどんなツールなのか?

実際にインストールしてテスト書いて実行するとこまで紹介します。

 

Githubにもソースを登録するので簡単に試してみたい方はgit cloneしてe2eテストやってみてください!!

 

e2eテストやった事ない人は本当に感動するし、今後テストも書いていこうって思えますよ!!!

 

 

Cypressとは?

以下の特徴があります。

・インストールがとても簡単

・テストが速い(らしい)

・テスト過程を自動で動画保存

・CI連携

・テスト用IDEがある

・テストの補助(selector)がある 

 

ただし、現在Chromeしか対応してないのでクロスブラウザが必須の人は他のテストツールを探してください。

 

e2eテストは動作の保証ができればOKな人は、ぜひこのCypressをお試しください。

いいテストツールですよ!!

 

Cypressインストール

コマンド1つでインストールOK!!

gistd82e4148b16b802246f5c8ad532e9107

 

後、下記のコマンドでCypressの雛形を作成してくれます。

gist86b15f9fa22489ee81b63328a8d962cf

 

作成される雛形、Cypressフォルダが作成されます。

f:id:ksakae1216:20190610230201p:plain

 

ちなみにprotractorのe2eテストがそのプロジェクトにすでにある場合、下記の削除する質問で'Y'を入力すればprotoractorのe2eテストを削除してくれます。

f:id:ksakae1216:20190610230012p:plain

 

テストの書き方 

cypress/integrationフォルダ配下にテストファイルを作成して テストを書きます。

 

まず1つサンプルから、ログイン画面を表示できるか確認するテスト。

gistc25420def06dc01d3ef8d7f5149fd9f5

 

'cy.' + APIでテストを書くことができます。

このサンプルでは'cy.visit(ログイン画面URL)'でログイン画面を表示できる事をテストします。

 

APIは下記を参照してください(英語だけど。。。)

Table of Contents | Cypress Documentation

 

e2eテスト失敗

まずは失敗ケースを見てみましょう。

Cypressはe2eテスト実行すると、画面のスクリーンショットと動画を保存してくれるのでどこで、どのようにテストが落ちたか簡単に確認することができます。

 

'npm run start'しないでテストするので画面が起動できず失敗するテスト。

 

【スクリーンショット】

 cypress/screenshotsフォルダにスクリーンショットがテスト毎にあります。

f:id:ksakae1216:20190611213415p:plain

 

テスト失敗のスクリーンショット

f:id:ksakae1216:20190611220841p:plain

 

【動画保存】

cypress/videosの下にテスト毎の動画。

f:id:ksakae1216:20190611221134p:plain 

 

e2eテスト実行(cypress run)

次は正常のe2eテストです。

こちらは普通のe2eテストを想定してもらえればOKです。

 

実際のテストを実行した動画です。


Cypress e2e run

 

e2eテスト実行(cypress open)

次は対話モード 、こちらも動画で紹介。

テストランナーが起動するまで時間がかかるので起動後の動画です。


Cypress e2e open

 

この記事のソースと実行方法

github.com

 

下記コマンドの通り、cloneしてテスト実行できます。

gist52d280ff4f289d8629922095b9e11bb8

 

超一流プログラマーの3つの共通点は「英語」、「公式リファレンス」、「とにかくコード書く」ですね

超一流 プログラマー 共通点 英語 公式リファレンス コード書く

IT業界で働くこと20年弱。

 

今までたくさんのプログラマーに出会ってきた。

 

超一流プログラマー、できるプログラマー、普通のプログラマー、できないプログラマーと大体4つくらいに分けられる。

※ちなみに超一流プログラマーはGoogleとかにいるのかもしれないけど、そんなとことは縁がないので私が会ってきた中でとにかくすごかった人を超一流としてます。

 

それぞれの比率は大体こんな感じだと思う。

02%:超一流プログラマー

08%:できるプログラマー

50%:普通のプログラマー

40%:できないプログラマー

 

そして出会ってきた超一流プログラマーはみんな

・英語ができる

・公式リファレンスをみる

・とにかくコード書く

感じだったんです。

 

自分の中の整理の意味も込めてそれぞれのプログラマーの共通点をまとめてみました。

 

 

超一流プログラマーの共通点

冒頭にも書いたけど、「英語」、「公式リファレンス」、「とにかくコードを書く」の3つ。

 

英語ができるので、情報を入手するのは英語のページから。

日本語だけと違い英語ができると、入手する情報の早さ、正確さが全然違う。

 

技術的な記事で日本語が一番先に出ることはなく、基本英語での記事が一番早いです。

Googleにしろ、Microsoftにしろ、オープンソース系にしろ全部英語記事が一番早い。

 

英語ができれば情報量、情報の早さが格段に違う。

 

 

次に公式リファレンスなんかも基本英語。

日本語訳があるとこもたまにあるけど、基本英語ですよね。

 

英語できる人はちゃんと公式リファレンス見ます。

英語ができない私なんかは、英語のリファレンスを無理やりGoogle翻訳してみるけど、意味をあまり理解できずQiitaとかに頼っちゃう。

 

公式リファレンス以外だと、結構ウソ情報が多いので超一流プログラマーは必ず公式ふリファレンスを見ますね。

 

 

最後にとにかくコード書きます。

できる人って結局、普通の人の何倍も作業してるんですね。

 

平日、仕事終わった後自宅で。

休日、朝から夜まで。

趣味はプログラム。

みたいな。

 

本人も楽しんでやってるので、「趣味はプログラム」って言いそうな。

そのくらい普通の人より何倍もコード書いてる。

 

そりゃ勝てないよって感じです。

 

できるプログラマーの共通点

頭が良くて、作業量多い人ですね。

 

周りを見回しても、他と段違いで頭が良く回転が早い人。

 

その上、作業量も多い。

 

超一流プログラマーと違って自宅でも四六時中プログラム書くことはないが(それでも普通の人よりは書いてる)、会社では人よりも長く残業してプログラム書いてるタイプ。

 

普通のプログラマーの共通点

そこそこプログラム好きで自宅でも多少プログラムするタイプ。

 

プログラムは好きだし、技術的なキャッチアップもするが会社でもそんなに残業しないし、自宅でもたまにプログラム書く程度。

 

できないプログラマーの共通点

 ここまでに書いた共通点が無い人ですね。

 

ただ共通点を挙げるとしたらこれかな?

・多分、そんなにプログラムが好きじゃない。

・分からないことを調べたり解決するのも好きじゃない。

・仕事でお金もらえるからやってる。

 

分からないことは人に聞いて解決したり、意味も理解せずどっかからソースコード持ってきてコピペ済ませたり、とりあえず動けばいいや系。

 

現場によるけど、技術者のレベルが低い現場に行くとこの手の人が結構います。

逆に技術レベルが普通以上だと少数派。

 

最後に

どうですかね??

 

超一流と呼ばれるプログラマーの共通点について違う意見があれば教えて欲しいです。