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

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

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

VSCode(TypeScript)でChromeのデバッグ(Debug)をする方法

 VSCodeでChromeをデバッグ(Debug)する方法をご紹介。

 

 

VSCodeにDebugger for Chromeをインストール

まず最初はVSCodeにDebugger for Chromeプラグインをインストールします。 

f:id:ksakae1216:20190318225132p:plain

 

①拡張機能を押下

②テキストボックスに"debugger for chrome"と入力

③Installボタンを押下でインストール完了 

 

launch.jsonの修正

次に、launch.jsonを修正します。

もしlaunch.jsonが存在しない場合は、".vscode"フォルダ配下に作成してください。

gist2352e32a404fe7eafd9c82e421d574bb

 

11行目のURLのみ、自分の環境用に修正してください。 

 

デバッグ(Debug)

 launch.jsonを修正したら一度ビルドして下さい。

VSCodeメニューの「ターミナル」→「Run Build Task」でビルドできます。

 

私はAngular CLI使ってるので"npm run build"でビルドします。

f:id:ksakae1216:20190318230202p:plain

 

次にデバッグしたい場所をクリック。

f:id:ksakae1216:20190318230438p:plain

 

サーバーを起動。

f:id:ksakae1216:20190318230604p:plain

 

デバッガを起動。

f:id:ksakae1216:20190318230812p:plain

①「Debug」を選択
②「Start Debugging」を押下

 

するとブラウザが起動します。

f:id:ksakae1216:20190318231110p:plain

ブレークポイントは「login」ボタン押下したとこにセットしてるのでログインID、パスワードを入力してloginボタンを押下すると

f:id:ksakae1216:20190318231436p:plain

このように35行目で処理が止まって、変数の内容も確認できます。

 

簡単ですね!!

この記事でデバッグしたソースと設定

https://github.com/ksakae1216/my-app3

横広のディスプレイがあると開発が効率的でサイコーです

f:id:ksakae1216:20190316224512p:plain

最近Visual Studio CodeでAngular(TypeScript)書いてるんだけど、横広の外付けディスプレイがあまりにも開発を効率的にしてくれるのでご紹介。

 

 

横広の外付けディスプレイ

この記事で以前紹介してるディスプレイ。

www.ksakae1216.com

 

23インチの外付けディスプレイで解像度は2560 X 1080なので横はMacbookProと同じだけど、アスペクト比が21:9で通常の16:9よりも横が大幅に広いディスプレイです。

 

どのように効率的か?

基本、外付けディスプレイにVisual Studio Codeをフルスクリーンで表示してMacにブラウザを表示。

 

こんな感じ。

f:id:ksakae1216:20190316225247p:plain

 

これの何が楽かっていうと、ディスプレイに表示してあるVSCode(Visual Studio Codeの事)でコード書いて、結果もそのまま確認できるので便利。

※VSCodeの右に表示されてるブラウザはBrowser Previewっていうプラグイン。

f:id:ksakae1216:20190316225855p:plain

 

それでMacにはブラウザを表示して、調べ物があるときは、Macに表示してあるブラウザで調べる。

 

マウスカーソルは基本、ディスプレイ上に置いてあり、Macのブラウザはキーボードのみで操作。

ブラウザをキーボードで操作できるvimiumプラグインをChromeにインストールしてあるからマウスカーソルを持ってくる必要もなし。

www.ksakae1216.com

 

長時間の作業もマウスカーソル動かすのはディスプレイ上のみなので広い画面を使ってても疲れない。

 

画面が広いのでコード書くのも捗る!!

 

実際の開発

実際、どんな感じで便利かはgifを見てね。

f:id:ksakae1216:20190316232524g:plain


見えやすいようにズームにしてます。

エディタでloginボタンの表示を"login!!!"(ビックリマーク3つ追加)に変更、保存するとブラウザが自動的にリロードされコードの内容が反映されます。

※Angularをnpmで起動するとブラウザが自動的にリロードされます。

※コードは下記の記事を参考

www.ksakae1216.com

 

外付けディスプレイは選べるなら横広

という事で、外付けディスプレイ使うなら横広がおすすめ!!

 

開発はディスプレイ上で完結するし、調べ物はPCにブラウザ開いて操作はキーボードでやるのでマウスカーソルをディスプレイ、PCを行ったり来たりする必要もない。

 

なので横広ディスプレイがおすすめ!!

 

【Angular】Webテスト(npm test)が失敗した時のスクリーンショットを撮る方法

Webテスト(npm test)が失敗し、エラーが発生した時にスクリーンショットを取る方法(コード)をご紹介。

 

※私はMacですが、多分Windowsでもここに書いてある手順でいけるはずです。

 

 

環境(Angular、node、Visual Studio Code)

コードはTypeScriptで書き、フレームワークはAngularを使います。

 

IDEは何でもいいですが、TypeScriptを書くなら早くて便利なVisual Studio Codeがおすすめです。

 

参考にしたページ

www.webdriverjs.com

 

www.webdriverjs.com

 

英語のページですが、Google翻訳で日本語にすれば何をするかは読み取れます。

 

 

実装(コード)

まず、始める前にnodeをインストールしてください。

nodejs.org

 

ディレクトリ作成

Visual Studio Codeを使って説明します。

最初にディレクトリを作成します。

gistd3a009b5327c6a5569c0bd2d59a6a2d0

 

ディレクトリ作成後

f:id:ksakae1216:20190304221732p:plain

 

protoractorとかjasmineとかインストール

ProtractorAutomationフォルダ配下で下記のコマンドを実行。

gistf0b82b720b719ab2b6aa17ddde92fee0

 

package.json作成

ProtractorAutomation配下にpackage.jsonを作成します。

gist6e4d9596967f58d44cc8fd2e130d051a

 

tsconfig.json作成

ProtractorAutomation配下にtsconfig.jsonを作成します。

gist258208ad6b6fce7835e747cad6561da0

 

package.jsonとtsconfig.jsonファイルを作成後

f:id:ksakae1216:20190304223044p:plain

 

テストコード作成

specsフォルダの下にFistSpec.tsを作成

gist3e398abf2965bfbc90fb7a1c3834314c

 

config.ts作成

ProtractorAutomation配下にconfig.jsonを作成します。

gist885f01660570102867038bf021ffba3c

 

正常にWebテスト(npm test)ができる事を確認

selenium起動

gistca62c6518f05da858e6cd48a63bcb928

f:id:ksakae1216:20190304224114p:plain

 

プラスマークをクリックしてコマンドプロンプトをもう1つ開きます。

f:id:ksakae1216:20190304224402p:plain

 

Webテスト実行

gist9944cacb77ce0081cbde6e4e63e48b57

f:id:ksakae1216:20190304224908p:plain

 

テスト1件(1 spec)、エラー0件(0 failures)で無事Webテスト完了です。

 

ScreenShotを撮る仕組み

次にScreenShotを撮る仕組みを作ります。

 

jasmine_reporter.ts作成

ProtractorAutomation配下にjasmine_reporter.tsを作成します。

gist424f8bb734249e26cd924cc69128c302

 

config.tsの修正

以下のコードをconfig.tsに上書きしてください。

gist977e151fc850346470581b6eebb968dd

 

FistSpec.tsの修正

11行目の'3'を'0'に修正

f:id:ksakae1216:20190304230347p:plain

 

Webテスト(npm test)失敗でスクリーンショットを取る

seleniumをもし落としてる場合は、もう一度コマンドプロンプトで"webdriver-manager start"を実行してseleniumを起動してください。

 

その状態で、"npm test"を実行。

"reports/screenshots"フォルダが作成され、スクリーンショット(pngファイル)があればOKです。

Webテスト失敗時のスクリーンショットを撮る事ができました!!

f:id:ksakae1216:20190304231056p:plain

 

Gitにソース登録しました。

github.com

【Angular】Flex-Layout, Materialを使ったログイン、テーブル表示サンプル

最近Angularjsにハマってます!!

 

覚えることは多いんだけど、結構楽しくコード書いてます。

 

前回の記事で作成した画面にFlex-Layout、Materialを適用してもう少し綺麗な画面に仕上げます。

 

 

Flex-Layoutとは?

Flexboxでレイアウトを簡単に設定する事ができます。

部品を横並び、縦並びにするのに、CSSを駆使する事なく簡単に設定する事ができます。

詳細は下記のページをご確認ください。

Angular Flex-Layout Demos

 

横並びの例

f:id:ksakae1216:20190219222941p:plain

 

縦並びの例

f:id:ksakae1216:20190219223008p:plain

 

しかもレスポンシブデザインもできる優れもの!!

 

【導入手順】

下記コマンドを実行する

npm i -s @angular/flex-layout @angular/cdk

 

Materialとは?

マテリアルデザインを実現するコンポーネント集です。

今回はテーブル表示で使ってます。

 

【導入手順】

下記コマンドを実行する

npm install --save @angular/material @angular/cdk @angular/animations

npm install --save angular/material2-builds angular/cdk-builds angular/animations-builds

ng add @angular/material

 

作成した画面

こんな感じです。

 

ログイン画面 

f:id:ksakae1216:20190219225303p:plain

 

テーブル表示画面

f:id:ksakae1216:20190219225321p:plain

スマホ版ログイン画面

f:id:ksakae1216:20190219225353p:plain

 

スマホ版テーブル表示画面

f:id:ksakae1216:20190219225616p:plain

 

レスポンシブ確認(画面を少し小さくしたテーブル表示画面)

f:id:ksakae1216:20190219225653p:plain

 

最後に

Flex-Layoutを使うと、レスポンシブ対応をわざわざしなくても勝手に対応してくれるので便利ですね。

 

あと、Materialを使うとテーブル表示も簡単です。

 

コードをGitに上げてあります。ご参考までに。

github.com

Angularを学ぶなら公式チュートリアルがおすすめ!!

f:id:ksakae1216:20190211222932p:plain

Angular Tutorial チュートリアル

今までAngular1.3の経験しかなかったが現在の案件がAngular7を使っているため、一から勉強しようと思い、公式チュートリアルをやってみたら結構理解が深まったのでご紹介。

 

 

Angular公式チュートリアル

Angularで少し調べるとQiitaやブログ記事が出てくるが一通り読んでみてよく分からなかった。

 

読むだけでなく手を動かし考えるのが一番の近道だと経験上わかっているのでAngularの公式チュートリアルはまさに手を動かしながら覚えるベストな方法だ。

 

angular.jp

 

チュートリアルの内容

チュートリアルを見てもらえれば分かるがNode.js、Angular CLI、nmpをインストールして環境構築、その後のアプリ作成まで丁寧に記載されているので比較的スムーズに読み進めながら、実際にコードを書いて理解を深めることができるでしょう。

 

また、チュートリアルでは記載されてませんが、エディタはVisual Studio Codeを使うのがオススメです。(もし他にお気に入りのエディタ、IDEがあれば自分のお気に入りを使ってもらって問題ないです)

 

Visual Studio Codeはコードを書くときに補完してくれたり、ターミナルも備えてるのでチュートリアルに出てくるコマンドもVisual Studio Code上で叩けるので非常に便利です。

 

もし途中で分からなくなった場合

このチュートリアルですが結構ボリュームがあるので最初の方は結構丁寧に記載されてますが後半の「4.サービス」あたりから徐々に難しくなっていき、チュートリアル通りにやってるつもりが、動かなくなることが何度かありました。

(私の勘違いでなければチュートリアルで稀に説明漏れがあるんじゃないか?)

 

でも各チュートリアルの最後にはその章で説明した全てのコードを参照することができ、さらにデモ(live example)の参照、ソースのダウンロードができるので分からなくなったり、動かない場合はコードを参照して次に進めます。

 

個人的なおすすめですが、一度で全て理解しようとするよりは、一旦最後までやり切って、もう一度、チュートリアルを読み直すか、自分でコーディングするのが理解の早道だと思います。

 

勉強後にログイン画面、リスト表示画面を作成

ということで、自分でコーディングしてみました。

最初なのでシンプルなページです。

 

【ログイン画面】

モックにログインユーザーを設定していて、そのユーザー、パスワードと一致する場合のみログインできます。

f:id:ksakae1216:20190211220435p:plain

【リスト画面】

モックに設定してあるリストデータをカンマ区切りで表示しています。

「back to login page」リンク押下でログイン画面に戻ります。

f:id:ksakae1216:20190211220604p:plain

 

チュートリアルをやる事で基礎からしっかり学べた印象です。

この2つの画面もそんなに時間がかからずコーディングする事ができました。

※Gitにもあげておきます。

github.com

 

Angular未経験者が適当にネットの記事を参考に勉強しようと思うなら間違いなく公式チュートリアルをやる事をおすすめします。

【Mac】アプリ切り替えの意外と便利なキーボードショートカット

 コマンド+タブでアプリ切り替えがWindowsと違ってMacはちょっと使えないな〜と不満に思ってたんだけど、キーの押し間違えで結構使える技を発見したのでご紹介。

 

目次

 

Macのアプリ切り替えはアプリ毎にまとめられて使いづらい

Chromeを複数ウィンドウ立ち上げていて、コマンド+タブでアプリ切り替えてもこのようにアプリ毎にしか表示されない。(ホントはChromeが2つ立ち上がってるのに) 

f:id:ksakae1216:20190124215922p:plain

 

使えるショートカット

コマンド⌘ + タブTABで下記のような表示でChromeが選択されているときに

f:id:ksakae1216:20190124215922p:plain

 

矢印キーの上 or 下のどちらかを押すと・・・

f:id:ksakae1216:20190124230527p:plain

 

こんな風に選択されたアプリからさらに選べるようになるので矢印キーの左or右で好きな方を選んで最後にEnterキーを押せばOKです!!

 

最後に

HyperSwitchなどのツールなどを導入するではなく標準のキーでアプリ切り替えができるのでぜひ使ってもらいたい!

 

WindowsのAlt+TABよりは1手間多いけど、慣れれば気にならないですよ!!

マウス使わない派の人にはEclipseよりもIntelliJをオススメします

次の現場がIntelliJを使って開発するので最近、自宅でIntelliJ使ってるんだけど、マウス使わない派の自分としては、すっごい使いやすい!!

 

隅から隅までIntelliJを使ってるわけではないけど、キーボード操作はEclipseよりも断然上!!

 

もっと早くIntelliJに出会いたかった!!!

 

※ちなみにMacです。

 

 

コマンドキー(⌘)プラス数字でいろいろ移動できる

コマンドキー+数字キーでいろいろ移動できるんです。

 

プロジェクト表示

例えば赤ワク部分を見てください。

1:Project」となってます。

f:id:ksakae1216:20181219223011p:plain

数字にアンダーバーが付いてるとこはコマンドキー(⌘)プラス数字で移動できます。

 

しかも「コマンド+1」でプロジェクトにカーソルを移動して、キーボード打つと該当する箇所が選択されます。

 

例えば、"appco"と打つとこのように「AppConfig」選択されます。

f:id:ksakae1216:20181219223742p:plain

 

Run表示

「コマンド+4」でRun表示。

 

表示前

f:id:ksakae1216:20181219225050p:plain

 

表示後(赤ワク部分)

f:id:ksakae1216:20181219225114p:plain

 

最後に

今後も備忘録的に追記してきます。

 

やっぱりマウス使わない派にとって、キーボードだけで操作できるのは嬉しいですね!!

【IntelliJ】GitHubからチェックアウト(CheckOut)してIntelliJに取り込む方法

 GitHubのリポジトリからCheckOutしてIntelliJに取り込む方法を画像付きで紹介します。

※Macです。

 

 

 

IntelliJでGitHub連携

まずGitHubからチェック(CheckOut)アウトするためにGitHubと連携します。

IntelliJの環境設定(⌘,)を開きます。

「Version Control」→「GitHub」を選択し、「Add account」を選択。

f:id:ksakae1216:20181216002002p:plain

 

自分のGitHubアカウントの「Login」、「Password」を入力し、「Log In」ボタンを押下。

f:id:ksakae1216:20181216002325p:plain

 

はい、アカウントが追加されました。

画面右下の「OK」ボタンを押下して下さい、これでGitHubとの連携は完了です。

f:id:ksakae1216:20181216002814p:plain

 

GitHubからCheckOut

メニューの「VCS」→「Check from Version Control」→「Git」を選択。

URLは下記を入力します。

https://github.com/ksakae1216/springProject02_di.git

f:id:ksakae1216:20181216003727p:plain

※このURLは下記記事で作成したリポジトリ

【Spring Boot入門】DI(依存性の注入)とは? サンプルソースを使って深掘り - フリーランス チャレンジ!!

 

 チェックアウトの確認です、「Yes」ボタンを押下。

f:id:ksakae1216:20181217075126p:plain

 

そのままで画面右下の「OK」ボタンを押下。

f:id:ksakae1216:20181217075349p:plain

 

画面左の「1:Project」を選択するとプロジェクトが表示されます。

GitHubからIntelliJにインポートが成功しましたね。

f:id:ksakae1216:20181217075838p:plain

 

チェックアウトしたリポジトリを実行

実行してみます。

「SpringProject02StartApplication.java」を選択、右クリックして「Run 'Spring 〜main'」を選択して下さい。

f:id:ksakae1216:20181217083912p:plain

はい、実行されました。

f:id:ksakae1216:20181217084255p:plain

 

無料で使えるIntelliJをMacにインストールする

 次の現場がなんとIntelliJを使うとのことで、自宅のMacにIntelliJをインストールします。

 

 

そもそも無料でも使えるの?

IntelliJは有償しかないと思ってたんですが、無料でも使えるんですね。

知らなかった。。。

 

有償はUltimate版、無償(無料)はCommunity版となってます。

ちなみにOSはWindows、Mac、Linux全てで使えます。

 

尚、有償、無償の違いは下記のページを参照ください。

英語ですが、なんとなくわかると思います。

Ultimate vs. Community - Compare Editions | IntelliJ IDEA

 

ザックリ説明すると、有償版は無償版と違って下記の特徴があります。

・JavaScript、TypeScript、Rubyなどの言語も使える

・フレームワークはSpring、JavaEE、Grailsなども使える

・WebコンテナのTomcat、Weblogicなどが使える

・ビルドツールはGulp、Gruntも使える

 

IntelliJの特徴

直感的にコーティング、デバッグ、リファクタリング、テストが可能なIDEです。

人間工学に基づいた設計で、高い生産性で開発を楽しむことができるそうです。

 

ただでさえ楽しい開発がIDEでさらに楽しくなるなんてまるで夢のよう!!

 

インストール手順

下記のページからダウンロードします。

黒いボタンを押下してインストーラーをダウンロードします。

f:id:ksakae1216:20181215113418p:plain

 

ダウンロードしたインストーラーをダブルクリック。

Macの人はおなじみですね、アプリケーションフォルダにドラッグ&ドロップすればOKです。

f:id:ksakae1216:20181215114019p:plain
 

IntelliJ起動

アプリケーションフォルダにあるIntelliJを起動して下さい。

 

そのままで「OK」ボタン押下して下さい。

f:id:ksakae1216:20181215114643p:plain

 

チェックボックスをチェックして「Continue」ボタンを押下。

f:id:ksakae1216:20181215114859p:plain

IDE使用の使用情報をJetBrainsに送信するか?と聞いてます。

まあ、ここはそのまま「Send Usage Statistics」ボタンを押下して下さい。

どうしてもイヤな場合は、「Don't send」ボタンを押下して下さい。

f:id:ksakae1216:20181215115118p:plain

色(テーマ)を選びます。

黒い方が玄人っぽいのでオススメです、画面右下の「Next: Keymaps」ボタンを押下。

f:id:ksakae1216:20181215115716p:plain

 

お好みの方を洗濯して下さい。

私は初めてでよく分からないのでそのままで「Next: Launcher Script」ボタンを押下。

f:id:ksakae1216:20181215120204p:plain

 

プラグインの置き場ですね、そのままでよければ「Next: Default plugins」ボタンを押下。

f:id:ksakae1216:20181215120734p:plain

 

青文字のリンク押下でプラグインの有効、無効を選択できます。

これはデフォルト。

f:id:ksakae1216:20181215121016p:plain

 

Swing、Android、Antは要らないので設定を変更しました。

「Next: Featured plugins」ボタンを押下。

f:id:ksakae1216:20181215121322p:plain

 

追加でプラグインのインストールみたいです。

左はScala、真ん中はVimエディタ、右はIDEトレーナー?

私はVimmerなので真ん中のVimのみインストールします。

最後に「Start using IntelliJ IDEA」ボタンを押下。

f:id:ksakae1216:20181215121915p:plain

 

お〜〜起動されました。

とりあえず「Create New Project」ボタン押下です。

f:id:ksakae1216:20181215122409p:plain

 

そのまま画面右下の「Next」ボタン押下。

f:id:ksakae1216:20181215122751p:plain

 

初めてなのでテンプレートを利用します。

チェックボックスをチェックして「Java Hello World」を選択肢、画面右下の「Next」ボタンを押下。

f:id:ksakae1216:20181215134615p:plain


任意の名前(赤ワク部分)をつけて、最後に「Finish」ボタン押下。

f:id:ksakae1216:20181215135112p:plain

 

おぉ〜〜

Eclipse以外のIDE使うの初めてだからちょっと感動するな〜。

シンプルで美しいですね。

f:id:ksakae1216:20181215135621p:plain

 

Hello World表示

実行のショートカットは"Ctrl + R"です。

実行してみます。

f:id:ksakae1216:20181215140217p:plain

 

ちょっと小さいですが、赤ワク部分に"Hello World"と表示されてます。

 

【関連記事】

www.ksakae1216.com

 

 

【Spring Boot入門】DI(依存性の注入)とは? サンプルソースを使って深掘り

 前回は、Spring環境を作成し、"Hellow World"をコンソールに表示しました。

 

次は、DI(依存性の注入)について勉強していきます。

やはりネットの情報だけでは、分かりづらかったのですが本で体系的(順序立てて)に学ぶと理解が深まります。

 

今回も下記の本を参考にしてます。

 

 

DI(依存性の注入)とは?

依存性の注入と言われてもピンとこないです。

 

ソフトウェアのデザインパターン の1つで、「Inversion of Control Principle(制御の反転の原則)」を実現します。DIを用いることで、コンポーネントを構成するインスタンスの生成と依存関係の解決をソースコードから分離することができます。

※本からの引用

ネットの情報も参考にすると、

依存性とは、オブジェクトのこと

注入は使う側に渡すこと

です。

 

つまり、依存性の注入は、オブジェクトを使う側に渡すことです。

少し分かりやすくなりました。

 

SpringでDI(依存性の注入)することのメリットとは?

SpringによるDI(依存性の注入)はDIコンテナがその機能を提供します。

 

DIコンテナを経由してインスタンスを管理することにより、以下のようなメリットを享受できるようになります。

・インスタンスのスコープを制御できる

・インスタンスのライフサイクルを制御できる

・共通機能を組み込める

・コンポーネント間が疎結合になるため、単体テストがしやすくなる

※本からの引用

 

上記いろいろメリットがありますが「インスタンスのスコープを制御」について説明します。

 

スコープとは簡単に言うと見える範囲の事です。

例えば、singletonは一度DIコンテナからBeanのインスタンスを作成すると、その後はずっとそのインスタンスを利用します。

 

prototypeの場合は、Beanのインスタンスを作成する度に新しいインスタンスを作成します。

 

このようにsingleton、prototypeでインスタンス作成後の見え方が変わるのです。

 

このスコープ機能を自前で実装するには、ソースを書かなきゃいけないし、バグが発生する可能性もあるけど、Springを使う事で簡単にスコープの機能を使うことができます。

 

SpringでDIを使うには

SpringでDIを使うには、代表的な3つの方法があります。

・JavaベースConfiguration

・XMLベースConfiguration

・アノテーションベースConfiguration

 

言葉で説明するよりサンプルプログラムを見た方が早いので、サンプルプログラムで紹介します。

 

サンプルプログラム

それぞれのサンプルコードを紹介します。

 

JavaベースConfiguration

 Configuration定義

gist19ee17d15f5edc3ee34dba87c3a9dc5b

 

ポイントとしては6行目の"@Configuration"と10行目の"Bean"です。

ConfigurationアノテーションでDI対象となるように宣言し、DIコンテナに注入したいインスタンスはBeanアノテーションを付与します。

複数DIコンテナに注入したいのであれば、Beanアノテーションでクラスを定義すればOKです。

 

Bean定義

giste6fe8a69ddd363db4c116bd73b9e08f0

 

 

XMLベースConfiguration

 applicationContext.xml

gist864230bf13d50e343d0eb6d9c603630e

 

11行目でDIコンテナに注入させたいパッケージを設定してます。

この指定したパッケージ配下で"@Component"や"@Service"、"@Controller"などのアノテーションをスキャンしてDIコンテナに注入します。 

 

Bean定義

gist62ae54b89c6bb3c311e1f85522c5163a

 

アノテーションベースConfiguration

Bean定義 

gist62ae54b89c6bb3c311e1f85522c5163a

 

サンプル実行ソース

gist147443987be6ddeaae89dff88a8283a7

 

サンプル実行

f:id:ksakae1216:20181213224642p:plain

このプログラムを実行すると、コンソールにメッセージを表示します。(赤ワク部分)
 

最後に

このシンプルなサンプルを理解できれば、SpringでのDIのやり方はそんなに難しくないと思えるはずです。

 

また、サンプルでは「JavaベースConfiguration」、「XMLベースConfiguration」、

「アノテーションベースConfiguration」の3パターン用意しました。

 

複数人で開発を想定すると修正が競合する「JavaベースConfiguration」、「XMLベースConfiguration」はオススメできません。

「アノテーションベースConfiguration」が同じファイルを修正するケースもなく、記述量も少ないのでこちらがオススメです。

 

Gitに登録するのでぜひ、クローンしてローカルで動かしてみて下さい。

github.com

 

Gitからクローンしてeclipseにインポートするなら下記を参照ください。

www.ksakae1216.com