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

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

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

フリーランスの生産性を上げるタイムマネジメントと仕事術

※執筆者:ゲストライター フリーランスの一番の魅力は、自由に働くことができることです。 会社員や契約社員、短期のアルバイトとして働いている方も一度は「フリーランスになってみたい」と思ったこともあるのでは? フリーランスは、会社内の人間関係など…

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

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

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

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

在宅勤務が長引き肩こりが酷くなってきたのでPCスタンドを買った

コロナウィルスの影響で2月後半から気がつけば1ヶ月以上、在宅勤務が続いています。 最近ではめっきり肩こりがひどくなってきた。 今後もしばらく在宅勤務は続くだろうと予想して家のPC環境を整えようと決意。 ノートPCで簡単に肩こりを解消できるグッズが…

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

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

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

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

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

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

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

chrome.google.com プロトタイプ作成してる時、デモの時に他の人の意見を聞きながら、文字や色、フォントなど変更したい時ってありますよね? そんな時に便利なのが、visbugというChromeで使える拡張機能。 visbugの簡単なデモ インストール方法 機能紹介:G…

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

tableplus.io PostgreSQL用のクライアントツールでしかもMacとなるといいクライアントツールがないんだよね〜。 PG Commander, PSequel, TeamSQLとそれぞれ試してきたけど不満だらけ。。。 PG Commanderはテーブルの絞り込みができないし、SQLの補完もない。…

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

前回記事の続きです。 Nxチュートリアルをやってみた(Add E2E Tests) - フリーランス チャレンジ!! この記事ではチュートリアルのStep3から最後まで一気に紹介します。 今までは、最初だったので1つずつ丁寧に紹介しましたが、大分慣れてきたので各Stepの…

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

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

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

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

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

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

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

IT業界で働くこと20年弱。 今までたくさんのプログラマーに出会ってきた。 超一流プログラマー、できるプログラマー、普通のプログラマー、できないプログラマーと大体4つくらいに分けられる。 ※ちなみに超一流プログラマーはGoogleとかにいるのかもしれな…

SEだったら当然知ってるよね? PDCAじゃなくOODAループの事を

(出典:Wikipediaより) 「PDCA知ってる?」、「PDCAやったことある?」ってよく聞かれると思うけど「OODA知ってる?」って聞かれる事はあまりないんじゃないかな〜と思います。 が、手段としてOODAループってとても有効だから知らない人はぜひ、この記事読ん…

勉強できる人が必ずしも仕事ができるわけではない

勉強できる人は、問題を解決できる問題解決力があるから仕事もできると思ってた。 仕事はまさに問題を解決する事が目的だから。 でも大手SIにいた時、有名大学を卒業した勉強ができてた人をたくさん見てきたが仕事ができない人もまあまあいた。 なぜ勉強はで…

【A day in the Life of a Engineer】世界のエンジニアの1日に密着

YouTubeを見てたときにたまたま発見したんだけど、エンジニアの1日に密着したシリーズ(?)みたいなのがあって、とても面白かったのでオススメの5点を紹介します。 これを見れば世界のエンジニアがどのように働いてるか分かりますよ。 A day in the Life of…

ログイン画面のレイアウト崩れをGridレイアウトで直す

この記事で作成したログイン画面がSafariで開くとレイアウト崩れを起こす。 www.ksakae1216.com Chromeだと大丈夫だったのに・・・ ちなみにFirefoxも大丈夫だった、Safariはダメ(IEは環境ないので見てない) ということでログイン画面をGridレイアウトで崩…

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

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

すぐ怒る人の4つの特徴

あなたの周りにすぐ怒る人っていないですか? 私の周りにはそんなにいないんですが、40年以上生きてるとたまにすぐ怒る人っているんですよね。 すぐ怒る人のパターンって下記の4パターンです。 ①自分の思い通りになると思ってる ②自分に余裕が無い ③完璧主…

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

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

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

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

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

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

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

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

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

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

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

コマンド+タブでアプリ切り替えがWindowsと違ってMacはちょっと使えないな〜と不満に思ってたんだけど、キーの押し間違えで結構使える技を発見したのでご紹介。 目次 Macのアプリ切り替えはアプリ毎にまとめられて使いづらい Chromeを複数ウィンドウ立ち上…

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

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

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

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

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

次の現場がなんとIntelliJを使うとのことで、自宅のMacにIntelliJをインストールします。 そもそも無料でも使えるの? IntelliJの特徴 インストール手順 IntelliJ起動 Hello World表示 そもそも無料でも使えるの? IntelliJは有償しかないと思ってたんですが…

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

前回は、Spring環境を作成し、"Hellow World"をコンソールに表示しました。 次は、DI(依存性の注入)について勉強していきます。 やはりネットの情報だけでは、分かりづらかったのですが本で体系的(順序立てて)に学ぶと理解が深まります。 今回も下記の本…