ウィンドウを開くwindow.open、hrefタグでセキュリティも気を付ける(noopener, noreferrer)

技術

javascriptのwindow.open、HTMLのhrefタグで、このnoopener, noreferrerを知ったので備忘録のために記事にします。 ※最後に記載してますが、IE、Opera以外は、比較的新しいバージョンのブラウザを使ってれば自動的にnoopenerは設定されてるようです。 noopen…

【VSCode】キーボードでエクスプローラーとエディタとターミナルを移動する

VSCode 技術

会社ではIntellij、自宅ではVSCodeを使ってます。やっぱり長い時間使うIDEであれば、キーボードショートカットを使いこなせば開発効率は格段にアップします。エクスプローラーのファイルをマウスで選択。エディタをマウスでクリック。ターミナルをマウス…

vscode #設定変更

キーボード

2020-11-16

GitHub Actionをローカルで実行する方法(Mac)

技術

Github Action GitHub Actionのworkflowを書いたんだけど、確認するのがgithubへpushなどしなければいけないと確認するのがちょっと大変。ということで、ローカルで実行する方法が分かったので記事にします。 GitHub Actionとは actでローカル実行 GitHub A…

act

githubaction

2020-06-15

【Angular】Cypressスクリーンショットの差分でデグレしてないことを確認する

cypress 技術

開発の過程で画面表示に差分が出てもCypressのcypress-image-snapshotを使えば、e2eテストで差分を検知し教えてくれるので、画面表示のデグレを心配せずにガンガン開発することができます！！ cypress-image-snapshot インストール準備実装動作確認最後…

2020-05-06

【Visual Studio Code】Githubのプルリク(pull-req)便利プラグイン

VSCode 効率化技術

Githubにpushしてレビューしてもらったら、レビュー指摘事項をGithub見ながらソース修正しますね。ノートPCの場合、外付けディスプレイがあれば、片方にGithub表示して、もう片方にソース修正すればいいけど、ノートPCだけの場合、画面がそんなに大きくない…

2020-03-17

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

技術

GitHubから依存先パッケージ(ライブラリ)のSecurityAlerts(脆弱性)に関するメールを受信しました。 GitHubは依存先パッケージ(ライブラリ)でSecurityAlerts(脆弱性)が修正されるとそれを使用してるリポジトリに対して、「脆弱性が直ったからプルリクしたよ、…

2020-03-09

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

java 技術

長年、JavaのWeb開発はeclipseを使ってて世間的にもデファクトスタンダードになってると思うんですけど、やっぱeclipseは重い！！もし、Visual Studio Codeでも簡単にホットデプロイができるんだったらもうeclipseにこだわる必要は無いですね。ということ…

2019-12-19

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

docker eclipse java 技術

以前、Springを使ってDBのデータを画面に表示する記事を書きましたが、ログイン、一覧、更新画面まで作成したのでサンプルを紹介します。今回のサンプルでできること環境 eclipse DataBase eclipseにインポート動かすための準備 Tomcat設定動作確認最後…

2019-07-29

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

技術

前回はnpx、ngコマンドでアプリケーションを作成しました。今回はE2Eテスト(Cypress)をこのアプリケーションに追加します。 ※NxはデフォルトでCypressが使えるよ。 CypressってどんなE2Eテストか知りたかったら下記の記事をぜひ読んでみて。簡単、速い、テ…

2019-06-17

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

技術

Nxチュートリアルをやってみた！！その前にNxって何？って人もいるよね。実は私もこのチュートリアルやる前にそんな状態でした。プロジェクトで使ってるけど、内容理解してなくて。。。まずはそこから調べて、チュートリアルを進めてきます。 Nxって何？…

2019-06-12

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

技術

www.cypress.io インストールが簡単、速いe2eテスト、テストを動画で保存するなど、素晴らしいe2eテストツールのCypress！！ Cypressとはどんなツールなのか？実際にインストールしてテスト書いて実行するとこまで紹介します。 Githubにもソースを登録する…

2019-03-27

【JavaScript】知ってた？　変数にvar付けないとグローバルスコープになるって！！

技術 JavaScript

リーダブルコード posted with ヨメレバダスティン・ボズウェル/トレバー・フォシェオライリー・ジャパン 2012年06月楽天ブックス Amazon Kindle 7net リーダブルコード読んでて結構衝撃的だったので記事にしました。サンプルコードも書いて実際に動きを…

2019-03-19

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

技術

VSCodeでChromeをデバッグ(Debug)する方法をご紹介。 VSCodeにDebugger for Chromeをインストール launch.jsonの修正デバッグ(Debug) VSCodeにDebugger for Chromeをインストールまず最初はVSCodeにDebugger for Chromeプラグインをインストールします。 ①…

2019-03-05

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

技術 Angular

Webテスト(npm test)が失敗し、エラーが発生した時にスクリーンショットを取る方法(コード)をご紹介。 ※私はMacですが、多分Windowsでもここに書いてある手順でいけるはずです。環境(Angular、node、Visual Studio Code) 参考にしたページ実装（コード） …

2019-02-20

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

技術 Angular

最近Angularjsにハマってます！！覚えることは多いんだけど、結構楽しくコード書いてます。前回の記事で作成した画面にFlex-Layout、Materialを適用してもう少し綺麗な画面に仕上げます。 Flex-Layoutとは？ Materialとは？作成した画面最後に Flex-Layo…

2019-02-12

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

技術

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

2018-12-20

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

IntelliJ 技術

次の現場がIntelliJを使って開発するので最近、自宅でIntelliJ使ってるんだけど、マウス使わない派の自分としては、すっごい使いやすい！！隅から隅までIntelliJを使ってるわけではないけど、キーボード操作はEclipseよりも断然上！！もっと早くIntelliJに…

2018-12-18

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

IntelliJ git 技術

GitHubのリポジトリからCheckOutしてIntelliJに取り込む方法を画像付きで紹介します。 ※Macです。 IntelliJでGitHub連携 GitHubからCheckOut チェックアウトしたリポジトリを実行 IntelliJでGitHub連携まずGitHubからチェック(CheckOut)アウトするためにGit…