以前、Springを使ってDBのデータを画面に表示する記事を書きましたが、ログイン、一覧、更新画面まで作成したのでサンプルを紹介します。環境は以下の通りです。5.6※あとPCはMACなのと、言語を英語にしてるのでそこはすいません。eclipseeclipseをインストールしてください。あとSpringを使うのでプラグインも必要なので下記記事を参考に。チャレンジ!!DataBaseDBは好きにインストールしてください。個人的にはDockerにDB(MySQL)をインストールするのがすごく楽ですし、Dockerは覚えておいて損はないのでチャレンジした方がいいかなーと思います。チャレンジ!!DBを作成したら下記SQL文でテーブルを作成してください。※下記はDB名を"test_mysql"としてるので適宜変えてくださいね。gist6b68c7ab5adee45a34d155a306b7f83e次にデータも入れてください。gista43e808ab58f4dfee8b345f422692c75eclipseにインポートgitから直接cloneしてeclipseにインポートします。何かいろいろやるので終わったらNextボタン押下これで無事eclipseにインポートされます。Project」を選択してダイアログが出てくるのでOKボタンを押下。Clean」を選択してCleanを実行。install」を選択してbuildを実行。次にWebサーバーを設定します。事前にTomcatをローカルにダウンロードしてください。Server」を選択。Webサーバーを選択できるので、ダウンロードしたTomcatのバージョンを指定します。今回は、Tomcat9。World画面がeclipse内に表示されると思います。Remove」を選択。今回のプロジェクト「web-sample」を追加してFinishボタンを押下してください。これで準備完了!!動作確認さて動作確認です。ブラウザに下記URLを入力するとポートフォリオっぽい画面が表示されます。gist7ea5ef810ed4e31df9d7a955b099cf8fさらに下記URLでログイン画面。testpass)です。入力してEnterボタン押下で一覧画面に遷移します。一覧画面の機能としては下記の通り。ボリュームは少しありますが1つずつ丁寧にやってけば大丈夫です。JavaでDBのデータを画面に表示するサンプルってネットにたくさんあるんですがうまくいかないんですよね。私の感覚としては環境、ライブラリのバージョン、手順もれが原因ではないかと思います。この記事では1つずつ確認しながら作ってたので安心してこの記事通りに進めていただければと思います。08:30もっと読むコメントを書く2019-08-20プロトタイプ作成やデモの時にWebページを直接変更する方法chrome.google.comプロトタイプ作成してる時、デモの時に他の人の意見を聞きながら、文字や色、フォントなど変更したい時ってありますよね?そんな時に便利なのが、visbugというChromeで使える拡張機能。Text機能紹介:Searchvisbugの簡単なデモまずは、一部機能の簡単なデモ動画を見てください。※検索結果の3番目に表示されたこのブログ記事を1番目に移動しました。youtu.beインストール方法インストール方法は簡単。下記ページでChrome拡張を追加するだけ。https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc機能紹介:Guidesマウスカーソルを調べたい箇所の上に持ってくと要素を表示してくれます。要素をクリックして、他の要素にカーソルを持ってくと最初にクリックした要素との距離をピクセル表示してくれます。機能紹介:Inspectマウスカーソルで選択した要素のStyle(CSS)を表示してくれます。Macの場合、Optionキー押下して、クリックすると表示を残してくれます。最初に選択した要素をOption+クリックして、別の要素をOptin+クリックすると最初と2番目をそのまま表示してくれるので見比べることができます。機能紹介:Accessibility人が見て、どのくらい分かりやすいかをチェックするためのものっぽいです。マウスカーソルで選択した箇所で出てくる数値が高ければ高いほど人の目に優しくて問題なければ緑色のチェックが表示され、問題があれば赤色でバツが表示されます。機能紹介:Move要素の中で上下左右に対象の要素を移動できます。横にボタンが3つ並んでいたらそのボタンの順番を変更できます。要素の中だけで順番を変更できる感じです。機能紹介:Margin要素を選択して、その後に上下左右ボタン押下でそれぞれのMarginを広げたり、狭めたりできます。機能紹介:Padding要素を選択して、その後に上下左右ボタン押下でそれぞれのPaddingを広げたり、狭めたりできます。Align選択した要素のAlignを上下左右ボタン押下で変更することができます。Shift選択した要素の色、背景色を上下左右ボタンで変更することができます。要素は複数選択も可です。機能紹介:Shadow選択した要素の影を追加することができます。こちらも上下左右ボタンで変更することが可能です。機能紹介:Positionこのブログのデモに紹介した機能です。Styles選択した要素のフォントサイズ、Boldを変更できます。Text選択した要素のテキストを変更する機能です。機能紹介:Search要素を検索できます。検索ボックスに検索したいスタイルなどを入力し検索します。▼ボタンからそのページで使われてる要素の候補から検索することもできます。Windows対応)tableplus.ioPostgreSQL用のクライアントツールでしかもMacとなるといいクライアントツールがないんだよね〜。TeamSQLとそれぞれ試してきたけど不満だらけ。Commanderはテーブルの絞り込みができないし、SQLの補完もない。PSequelは絞り込み、補完はできるけど、まだまだ機能不足。TeamSQLは唯一良かったけど、使えなくなった。チャレンジ!!そこで、無償でPostgreSQL(他のDBも使えるよ)で使えて多機能ですばらしいTablePlusを紹介します。Management対応データベースたくさんのデータベースに対応してます。Server・SQLite・MariaDB・Oracle・Redis・Cassandra・Cockroach・MongoDB(Beta)・Vertica※MongoDBはBetaと書いてなるのでもしかしてまだ正式にサポートしてないかも。SSH、秘密鍵も対応SSH、秘密鍵も対応してます。私も仕事で使ってますが、ローカルのVirtualBox、SSH接続するサーバー、AWSどれも接続できました。先に接続してから機能を紹介しようと思います。接続方法に興味ない方は飛ばしてください。connection」をクリックここから対象のDBを選択します。接続情報を入力し、「Test」ボタンを押下します。テスト接続が成功すればフィールドがこのように緑色になるので「Connect」ボタン押下でDB接続します。はい、接続できましたね。それではこれから機能を紹介してきます。テーブルの絞りこみ画面左上のテキストボックで絞り込むことができます。"kyushu_kagoshima"もそのまま表示されます。このテキストボックスは入力した文字全てに一致するテーブルが表示されるからです。この場合、正規表現使って"^ka"とするか"kan"まで入力すれば"kanto"のテーブルが表示されます。データの修正、テーブル構成テーブルをクリックするとそのテーブルの内容が表示されます。変更したいデータをクリックすると編集できるので変更してEnter。S押下で変更が反映されます。テーブルの構成は「Structure」をクリックすると見ることができます。ここで変更することもできます。SQL補完SQLの補完も完璧です、赤矢印のSQLをクリックするとSQLビューが開きます。"sele"と打つとこのように補完候補が表示されます。テーブル名も同様に補完されます。Current」ボタン押下でSQL実行。「Beautify」ボタンでSQL文を整形もしてくれます。赤矢印のコンセントアイコンをクリックすると登録してある接続先一覧が出てくるので、もう1つのMySQLを選択します。はい、このようにPostgreSQL(postgres)、MySQL(test_mysql)の2つを接続できました。それぞれクリックすることで表示を切り替えることができます。地味に気に入ってるんですが、接続先を表示してあるバーの色を変えることができます。私はMySQLの色を変更しました。デフォルト色(灰色)のPostgreSQL色を変更したMySQLローカル環境とStaging環境みたいなことを視覚的にもわかりやすくできるのでいいですよね。データのselect文作成この機能もあるとまあまあ助かるんですよね。Statement」で選択したデータのInsert文をクリップボードにコピーしてくれます。テーブル右クリックでTruncateとテーブル削除テーブル削除はあまり使わないですがTruncateってたまに使いますよね。SQL文打つのもそんなに大変じゃないですが、マウス操作でできるのはうれしいです。無償版の注意点ここまでメリットを中心に紹介しましたが最後に1点だけ無償版の注意点です。tabs」と表示されます。無償版はタブ2つまでだよということです。こまめにタブを閉じて使ってください。12)前回記事の続きです。チャレンジ!!この記事ではチュートリアルのStep3から最後まで一気に紹介します。今までは、最初だったので1つずつ丁寧に紹介しましたが、大分慣れてきたので各Stepのやること結果をピックアップして紹介。Todosnx.devAppComponent.tsにtodos配列を定義。画面側にもこのtodos配列の内容を表示するよう修正し、Cypressテストを実行、見事パスします。APInx.devAppComponentクラスにAPIにアクセスするコードを追加して、最後に画面表示です。NotFoundが出力されます。APInx.devnestアプリケーションを開発できる機能を追加。nestを使用してAPIを作成して、コードを一部修正。最後にAPIを起動してブラウザからURLを叩けば結果を返してくれる。※チュートリアルは"https://localhost:3333/api/todos"となってるが本当は"http"。"https"だと表示できないので注意が必要。Proxynx.devStep5で作成したAPIのProxy設定を解説。serveで起動し画面が表示されることを確認。APIを作成するまでは、todosはソースに直書きだったものがAPI経由で取得できるようになった。Codenx.devtodosインターフェースをフロント、バックエンド両方で定義してるのが問題なのでこのステップでインターフェースをシェアするように変更する。インターフェース格納用のlibディレクトリをコマンドで作成し、インターフェースを定義。serveで画面起動して表示されることを確認。Libsnx.devUIライブラリを作成してtodosコンポーネントを作成。画面はそのコンポーネントの部品を使う感じ。ここのチュートリアルだけだとコンポーネント部分のとこがイマイチ理解しきれない。Graphnx.devNxの標準機能で依存関係をブラウザに表示することができます。affected:apps"で変更された内容を調べ、変更の影響を受ける可能性があるアプリを特定する。affected:test"あと、parallelオプションをつけるとtestをパラレルで実行してくれるのでテストがすぐ終わる。affected:build"はtodosをビルドするがuiはビルドしない。Summarynx.devここまでのチュートリアルでやってきたことを振り返り最後にこの記事でStep3から12まで一気にやってきました。チュートリアルやっただけでNxを全て理解することはできませんが、少なくともNxを使えばしっかりしたテンプレートを自動的に作ってくれるのでしっかりした(?)アプリを作成することができる印象です。前回はnpx、ngコマンドでアプリケーションを作成しました。今回はE2Eテスト(Cypress)をこのアプリケーションに追加します。※NxはデフォルトでCypressが使えるよ。CypressってどんなE2Eテストか知りたかったら下記の記事をぜひ読んでみて。最後にチュートリアルこのページです。前回の記事で作成したアプリのテストを起動します。specs」ボタンを押下。はい、テスト成功です。テスト内容の解説テストが成功しましたが、どんなテストだったか解説します。gist177e3d812a5b41e17c78fc6980619fa3定数(const)で"getGreeting"を定義して"h1"タグをセットしてます。Cypressで使えるAPIは下記を参照して下さい。Documentationgist3260c97f95315c3e38e942c5ef57838b次はテストコードです。todos!"が含まれてるかチェックもう一度、テスト結果画面の左部分を再掲します。コードを説明した通りのテストとなってます。?直感的でわかりやすいですよね?テストコードを追加gist739c4ed2e6bb6d91c8596fb7a5a22968ボタンに関する定数"getAddTodoButton"を追加。gistd52f019606fd691255a35c012ef4e215テストコードもチュートリアルに合わせて大幅に変更してます。e2eテスト実行それでは変更したコードでe2eテストを実行してみます。2”がテスト失敗の部分です。最後にこのチュートリアルはテストを追加するが失敗するのがゴールとなります。このチュートリアルにも書いてありますが、チュートリアルを進めてくとこのテストも合格するようになるそうです。ソースコードは下記を参照ください。Application)技術Nxチュートリアルをやってみた!!その前にNxって何?って人もいるよね。実は私もこのチュートリアルやる前にそんな状態でした。プロジェクトで使ってるけど、内容理解してなくて。そこから調べて、チュートリアルを進めてきます。最後にNxって何?まずは公式ページを見てみる。nx.dev簡単に説明するとAngularアプリケーションを構築できるOSSのツールキットです。smarter.(翻訳)Nxを使用すると、開発ワークフローにサイプレス、ジェスト、プリティー、ネストを追加できます。Nxはこれらのツールをセットアップし、それらをシームレスに使用できるようにします。これらの革新的なツールは多くの利点を提供し、あなたがより良くそしてより賢く働くのを助けます。詳しく知るCypressはe2eテストランナー、JestはFacebookが作ったテストランナー、Prettierはコード整形(フォーマット)、NestはNodeJsフレームワーク(サーバー側もTypeScriptで書こうみたいな)です。上記で上げたこれらのツールを使えるようにできるってこと。whole(翻訳)Nxでは、NestやExpressなどのAngularおよびNode.jsフレームワークを使用してフルスタックアプリケーションを構築できます。フロントエンドとバックエンドの間でコードを共有できます。serveコマンドを使うことができます。さっき出てきたNestの話ですね。バックもTypeScriptで書けるのでバックエンドと同じようにコードを書くことができるということです。フロントとバックが同じTypeScriptで書けるのは開発者にとってだいぶ楽になりますね。practices.(翻訳)Nxを使用すると、複数のフルスタックアプリケーションを総合的に開発し、それらの間でコードをすべて同じワークスペースで共有できます。Nxはあなたがあなたのエンタープライズ開発を拡大するのを助ける高度なツールを提供します。Nxは、組織の標準とコミュニティのベストプラクティスを強化するのに役立ちます。翻訳しても内容が理解できないですがタイトルは「Googleのように開発する」となってるのできっとGoogleのように開発できるんでしょう。長くなりましたが便利なテストランナー、コードフォーマット、サーバー側もTypeScriptで書けてGoogleのように開発できるのがNxのようです。Application)それではようやくチュートリアルです。下記ページを参考にチュートリアルを実施してみます。Applicationworkspace作成gistb00f694d843ca15731db67ee2a861f36途中で、何回か聞かれます、「CSS」と「empty」を選択しました。完了するとmyorgディレクトリにとその下にいろいろ作成されます。アプリケーション作成gist5e5038233f91e707f5774ca6cde4e350gist4107c6272f3c99353236c9a915cf69f5todoアプリケーションが作成されました。アプリケーション起動gist1a0e3d91902a78fdee481336d907c6f8localhost:4200に接続すると、アプリが起動されてることがわかります。最後にこのチュートリアルでわかったことは、applicationコマンドでアプリが簡単に作成できたことです。この後続いてチュートリアルを実施していきたいと思います。07:30もっと読むコメントを書く2019-06-12簡単、速い、テストの動画保存、Cypressは最高のe2eテストだ!!技術www.cypress.ioインストールが簡単、速いe2eテスト、テストを動画で保存するなど、素晴らしいe2eテストツールのCypress!!Cypressとはどんなツールなのか?実際にインストールしてテスト書いて実行するとこまで紹介します。open)この記事のソースと実行方法Cypressとは?以下の特徴があります。・テスト用IDEがある・テストの補助(selector)があるただし、現在Chromeしか対応してないのでクロスブラウザが必須の人は他のテストツールを探してください。e2eテストは動作の保証ができればOKな人は、ぜひこのCypressをお試しください。いいテストツールですよ!!Cypressインストールコマンド1つでインストールOK!!gistd82e4148b16b802246f5c8ad532e9107後、下記のコマンドでCypressの雛形を作成してくれます。gist86b15f9fa22489ee81b63328a8d962cf作成される雛形、Cypressフォルダが作成されます。ちなみにprotractorのe2eテストがそのプロジェクトにすでにある場合、下記の削除する質問で'Y'を入力すればprotoractorのe2eテストを削除してくれます。1つサンプルから、ログイン画面を表示できるか確認するテスト。APIでテストを書くことができます。このサンプルでは'cy.visit(ログイン画面URL)'でログイン画面を表示できる事をテストします。APIは下記を参照してください(英語だけど。Documentatione2eテスト失敗まずは失敗ケースを見てみましょう。Cypressはe2eテスト実行すると、画面のスクリーンショットと動画を保存してくれるのでどこで、どのようにテストが落ちたか簡単に確認することができます。start'しないでテストするので画面が起動できず失敗するテスト。【スクリーンショット】cypress/screenshotsフォルダにスクリーンショットがテスト毎にあります。テスト失敗のスクリーンショット【動画保存】cypress/videosの下にテスト毎の動画。run)次は正常のe2eテストです。こちらは普通のe2eテストを想定してもらえればOKです。実際のテストを実行した動画です。テストランナーが起動するまで時間がかかるので起動後の動画です。openこの記事のソースと実行方法github.com下記コマンドの通り、cloneしてテスト実行できます。07:30もっと読むコメントを書く2019-05-16超一流プログラマーの3つの共通点は「英語」、「公式リファレンス」、「とにかくコード書く」ですねその他IT業界で働くこと20年弱。今までたくさんのプログラマーに出会ってきた。超一流プログラマー、できるプログラマー、普通のプログラマー、できないプログラマーと大体4つくらいに分けられる。※ちなみに超一流プログラマーはGoogleとかにいるのかもしれないけど、そんなとことは縁がないので私が会ってきた中でとにかくすごかった人を超一流としてます。それぞれの比率は大体こんな感じだと思う。02%:超一流プログラマー08%:できるプログラマー50%:普通のプログラマー40%:できないプログラマーそして出会ってきた超一流プログラマーはみんな・英語ができる・公式リファレンスをみる・とにかくコード書く感じだったんです。自分の中の整理の意味も込めてそれぞれのプログラマーの共通点をまとめてみました。リファレンス」、「とにかくコードを書く」の3つ。英語ができるので、情報を入手するのは英語のページから。日本語だけと違い英語ができると、入手する情報の早さ、正確さが全然違う。技術的な記事で日本語が一番先に出ることはなく、基本英語での記事が一番早いです。Googleにしろ、Microsoftにしろ、オープンソース系にしろ全部英語記事が一番早い。英語ができれば情報量、情報の早さが格段に違う。あるとこもたまにあるけど、基本英語ですよね。英語できる人はちゃんと公式リファレンス見ます。英語ができない私なんかは、英語のリファレンスを無理やりGoogle翻訳してみるけど、意味をあまり理解できずQiitaとかに頼っちゃう。公式リファレンス以外だと、結構ウソ情報が多いので超一流プログラマーは必ず公式ふリファレンスを見ますね。最後にとにかくコード書きます。できる人って結局、普通の人の何倍も作業してるんですね。平日、仕事終わった後自宅で。