Roll With IT

tamakiのIT日記

プログラミング初学者のためのツール20選

f:id:shiro-tamaki:20201229182251j:plain
出典:photAC

フィヨルドブートキャンプに参加し早10日。 カリキュラムを通して学んだことや、実際に使ってみて「便利だな〜」と思った各種ツールを、2020年という事で「20」に絞りご紹介。20選すべて無料で利用できます。
Webの広い世界の入口にようやく立てた感じですが、初学者の方の参考になれば幸いです。

使用環境

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

タイピスト

タイピング練習ソフトといえば、寿司打が有名ですが、個人的にはこちらををプッシュしたい。理由としては、英文の入力コースがあるからです。普段から打ち慣れている日本語とは違い、プログラミングコードは英単語の羅列になります。英単語の入力パターンに慣れる上でもこちらをオススメしたいです。

「タイピスト」Mac App Store