実際に使ってみて「便利だな〜」と思った各種ツールを、2020年に掛け「20」に絞りご紹介。
20選すべて無料で利用できます。
Webの広い世界の入口にようやく立てた感じですが、初学者の方の参考になれば幸いです。
使用環境
- OS：macOS Cataline
- ブラウザ：Google chrome
Chrome拡張機能編
WhatFont
Webサイトで表示されているフォントの詳細情報をみることができる拡張機能。Webページ制作において、参考にしているページのfont-size、font-familyなどを知る上で役に立ちます。
WhatFont - Chrome ウェブストア
ColorPick Eyedropper
Web上のページやロゴ、ヘッダー画像などの色コードを調べたい時に使える拡張機能です。
ColorPick Eyedropper - Chrome ウェブストア
GoFullPage - Full Page Screen Capture
Chromeで開いているWebページ全体のスクリーンショットを取得することができる拡張機能。相手側（メンターや講師の方等）にページ全体の内容を共有したい時に役に立ちます。
GoFullPage - Full Page Screen Capture - Chrome ウェブストア
Create Link
そのページのリンクをMarkdown形式でコピペしたい時に便利です。通常、ページタイトルとURLをそれぞれコピーしてから、Markdowon形式で [hogehoge](http://piyopiyo.ne.jp) と記述すると思いますが、こちらを用いれば、この一連の動作をたった2回のクリックのみで行うことができます。
Create Link - Chrome ウェブストア
Google翻訳
プログラミング学習において避けては通れない英語。特に英文を翻訳する時に利用しています。
Google 翻訳 - Chrome ウェブストア
Google Directionary
同じくGoogleから出ている辞書ツール。こちらの方は単語をクリックすると、ポップアップで簡易的な意味や発音を確認できます。「これどういった意味だったかな〜」と、簡易的に調べたい時に利用しています。
Google Dictionary (by Google) - Chrome ウェブストア
Evernote web Clipper
ノートアプリの定番Evernoteへ切り取って保存できます。気になった記事はとりあず切り取ることを習慣にしています。
Evernote Web Clipper - Chrome ウェブストア
UI Build Assistand
YouTuberのしまぶーが開発したUI構築に便利な拡張機能。HTML要素にbackground-colorとoutline のCSSを付与し、レイアウトを作るときの補助として使えます。ページ全体のUI構築をザックリと知りたい時に利用しています。
UI Build Assistant - Chrome ウェブストア
Wappalyzer
表示中のWebページで利用されているソフトウェアやサービス、フレームワークなどを一覧表示してくれます。気になったWebページで、何が使われれているのか知りたい時に利用しています。
Wappalyzer - Chrome ウェブストア
アプリケーション編
Alfred
便利なランチャーアプリケーション（アプリを簡単に呼び出すための機能）。検索欄に起動したいアプリケーションの名前を入力することで、該当する候補を表示でき、そこから一発でアプリケーションを起動できます。
Alfred - Productivity App for macOS
Clipy
プログラミングコードを編集する中で多用されるコピペ作業ですが、過去にさかのぼって同じコードを使いたいという場面に便利です。
Clipy - Clipboard extension app for macOS
Mac標準カラーピッカーアプリ「DigitalColor Meter」
前述のChrome拡張機能でも同じような機能をご紹介しましたが、こちらは最初からMacに搭載されているアプリケーションです。個人的にはこっちが好み。
Mac用Digital Color Meterユーザガイド - Apple サポート
Skitch
切り取った画像に加工（コメント、矢印、囲いなど）を加える事ができるツール。相手側（メンターや講師の方等）に情報をお伝えする時に役に立ちます。
Skitch | Evernote
Gyazo
画像やGIF動画をURLで共有できるツールです。
Gyazo/Gyazo GIF
Gyazo - ダウンロード
Record it
デスクトップの指定した範囲を録画してWeb上で共有できます。動画の場合はGyazo GIF（無料版）よりもこちらの方が長い時間録画でき便利です。
Recordit: Record screencasts fast & free! with GIF Support!
CODEPEN
HTML・CSS・JSのソースを共有できるサービスです。打ったコードもすぐに確認できるので学習にも最適です。
CodePen
Boost Note
Markdownを使いメモを取れるアプリケーション。色々とメモアプリは試してはみましたが、今のところコレが一番しっくりきました。
Boost Note - An open sourced markdown editor for developers
VSCode
定番のテキストエディタ。テキストエディタも色々試してみましたが、初学者の僕にとってはコレが一番使いやすいと思いました。また、Qitta、ブログ、Twitterなどの情報ですが、初学者に人気な間違いなくトップで名前が上がるエディタなので、VSCode一択で大丈夫だと思います。
Visual Studio Code – コード エディター | Microsoft Azure
iTerm2
Macの標準ターミナルで十分だとは思いますが、カッコいいターミナルに憧れ導入しました。全然使いこなせていないですが...。みようみまねで見た目だけはイケてる感じにして利用しています。
iTerm2 - macOS Terminal Replacement
タイピスト
タイピング練習ソフトといえば、寿司打が有名ですが、個人的にはこちらををプッシュしたい。理由としては、英文の入力コースがあるからです。普段から打ち慣れている日本語とは違い、プログラミングコードは英単語の羅列になります。英単語の入力パターンに慣れる上でもこちらをオススメしたいです。