Go to Qiita Advent Calendar 2024 Top
LoginSignup
32
38

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@papi_tokei(あっきー)

現役エンジニアが個人的にベストな開発環境、フレームワークなどについて書く【2020年末】

Last updated at Posted at 2020-12-29

はじめに

COVID-19の影響でITエンジニアの方もリモートワークをされている方も多いかと思います。日常で利用するツールやデバイス、開発環境やフレームワークについてまとめます。分類の分け方があまり良くないので、わかりにくいかもしれませんが、少しでも参考になればと思います。
また、今回それぞれの内容について詳細な解説をしてませんので、もし興味がある方がいらっしゃいましたら、コメント頂ければできる限り回答させて頂きます。

※原則macOS環境を想定しています。また、macOS Big Sur、M1搭載Macでは検証していませんので、動作保証は出来出来かねますのでご了承ください。

開発環境系

共通

Homebrew

公式リンク：Homebrew
料金：無料

Macで開発する場合、まずHomebrewを入れるべし、というくらい有名。以下で説明するツールのいくつかについてはHomebrew経由で入れるので、必ず入れましょう。

iTerm2

公式リンク：iTerm2
料金：無料

Macデフォルトのターミナルでも基本的なことはできるが、カスタマイズ性が少し弱い。iTerm2の場合は以下のようなメリットがあるので、とりあえずインストールすることをお勧めします。

  • ステータスバーをカスタマイズして、CPU使用率などを表示できる
  • 背景に画像を設定できる←ココ重要
  • 背景透過設定ができる

XCode Command Line Tools

公式リンク：??
料金：無料

コンパイラ等が含まれるため、Pythonのインストール時などに必要になります(恐らくですが)ので、とりあえずインストールしましょう。インストール方法は2種類存在します。

方法1：
下記コマンドを実行する

$ xcode-select --install

方法2：
Apple Developerからダウンロードする。その場合は、Apple Developerアカウント(無料で取得可能)が必要です。

Visual Studio Code(VSCode)

公式リンク：Visual Studio Code
料金：無料

開発用のエディタです。拡張機能が豊富で非常に使いやすいので、とりあえずインストールしましょう。動作も比較的軽いです。

おススメの拡張機能を載せます。

SourceTree

公式リンク：SourceTree
料金：無料(アカウント登録必要)

GitのGUIクライアントです。CLIで利用することもできますが、個人的にはdiffはGUIで見たい派なので、SourceTreeはおススメです。CLIの場合はtigなどが有名ですし、tigは結構使いやすいのでお好みで。

Node.js

公式リンク：Node.js
料金：無料

フロントエンド開発のベースとなる環境(言語？)です。フロントエンド開発をする場合は、とりあえずインストールしましょう。
インストールする場合、直接インストールするのではなく、バージョン管理ツールを経由してインストールすることをお勧めします。
バージョン管理ツールは以下が有名だと思います。

Python

公式リンク：Python
料金：無料

プログラミング言語の中の一つです。AWS Lambdaでの開発や簡単なツール作成、機械学習等で利用します。Pythonについても直接インストールするのではなく、パッケージマネージャ経由でインストールすることをお勧めします。パッケージマネージャは個人的にはpyenvがおすすめす。

Pythonでの開発で利用頻度の高いツールを紹介します(あくまで個人的にですが)。

  • Poetry
    • Pythonにおけるパッケージ管理ツール
  • Pylance(Pyright)
    • Pythonの言語解析ツール、型チェックツール
  • black
    • コードフォーマッタ
  • pytest
    • テストツール
  • Boto3
    • AWS SDK for Python
  • Requests
    • HTTPライブラリ
  • opencv-python
    • 画像処理用ライブラリ
    • OpenCVをpipでインストールできるようにしたもの
    • OpenCV公式がだしているわけではない(たぶん)
  • Pillow
    • 画像処理ライブラリ
    • opencv-pythonよりもサイズが小さいので、Pillowの方が個人的にはいいと思っている
  • NumPy
    • 数値計算用ライブラリ
  • pandas
    • データ分析ライブラリ
  • Jupyter
    • Jupyter Notebookはコードをインタラクティブに実行することができる
  • Matplotlib
    • データ可視化ライブラリ
  • seaborn
    • データ可視化ライブラリ
  • TensorFlow
    • 機械学習ライブラリ
  • scikit-learn
    • 機械学習ライブラリ

Docker Desktop

公式リンク：Install Docker Desktop on Mac
料金：無料

Dockerコンテナを動かすための基盤です。テストをコンテナで動かす、DynamoDB Localを起動するなどで利用することも多いかと思います。

Parallels Desktop

公式リンク：Parallels Desktop
料金：約1万円/年

Dockerはコンテナ型仮想化を実現する技術ですが、Parallels Desktopはハイパーバイザ型仮想化を実現します。簡単に言うと、Macの中でWindowsを立ち上げることができます。MacとWindowsを併用する必要がある人には、値段は高いですがお勧めできるツールです。

個人的に気に入っている機能

  • 比較的動作が軽い
  • OSのインストールが簡単
    • メジャーなOSは仮想マシンの作成がめちゃ簡単
  • リソースの再利用ができる
    • HDD領域が動的に変更されるようになっているので、必要な領域しか利用しない
    • ワンクリックで領域の再利用が可能
  • ホストOSとのディレクトリ共有の設定が簡単
  • ホストOSとのコピー、ペーストの設定が簡単
  • Coherenceモードが便利
  • Parallels Toolboxのクリーンドライブが便利

Wireshark

公式リンク：Wireshark
料金：無料

パケットキャプチャツールです。ネットワーク専門ではありませんが、デバイスのデータ通信の様子をpcapファイルとしてダンプして、そのファイルをMacで見るときなどに利用します。

kite

公式リンク：kite
料金：無料

コード補完ツールです。VSCodeと連携して使います。
メリットは下記ページが分かりやすいので参照ください。

Arduino IDE

公式リンク：Arduino IDE
料金：無料

マイコンへのプログラムを流し込むために使います。ビルド、シリアルデバッグ、データ送信までを一貫して行えるのでとても使いやすいです。

フロントエンド

HTML,CSS,JavaScript(JS)

フロントエンド技術の基本の基の部分です。

TypeScript(TS)

公式リンク：TypeScript

いわゆるaltJSのくくりですが、最近はTypeScript一強だと思います。ほとんどのフロントエンドのプロジェクトが生のJSではなくTSでコードを書いているはず。学習難易度は比較的高めですが、個人的にはとてもお勧めできる言語です。

Vue.js

公式リンク：Vue.js

ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。フロントエンドのデータをリアクティブに表示する部分が自動的に反映されるので、以前の様にjQueryを使ってデータの書き換えを明示的に行うことが不要になります。

Nuxt.js

公式リンク：Nuxt.js

Vue.jsのラッパー？としてのフレームワークです(日本語が無茶苦茶、、、)。Vue.js単体で利用するよりも便利な機能がたくさんあります。

個人的に気に入ってる機能を紹介します。

  • Create Nuxt Appが便利
    • UI Framework(Vuetifyなど)を自動で設定してくれる
  • メタタグとSEOの設定が可能
  • Prefech機能がある
  • 静的サイトジェネレートができる
    • full static exportがNuxt 2.13から利用可能、nuxt exportがNuxt 2.14から利用可能
    • Jamstack構成がやりやすい
  • モジュールの追加が簡単
    • PostCSSとか
  • nuxt/contentが便利
    • 開発モードでのビックリするほど高速なホットリロード
    • Markdownの中でVueコンポーネントを利用できます
    • 全文検索
    • 静的サイト生成(SSG)のサポート nuxt generate
    • 強力なクエリビルダーAPI (MongoDBライク)
    • PrismJSを利用した、Markdown内コードブロックのシンタックスハイライト
    • 目次の自動生成
    • Markdown, CSV, YAML, JSON(5)、XMLを適切に処理します
    • hooksによる拡張

React

公式リンク：React

詳しくは知りません、、、

API呼び出し

  • RESTful API
    • HTTPメソッド(GETなど)を使ってデータのやり取りを実施
    • 現在も主流で利用されている
  • GraphQL
    • HTTPメソッドを利用してデータのやりとりを実施するが、必要な情報だけを取得したり、型で取得できるデータを絞ったりできる
    • RESTの場合、複数のエンドポイントに対してデータを要求する必要がある場合でも、GraphQLの場合は同じエンドポイントに対して1回の呼び出しで済む場合がある
    • BFF(Backends For Frontends)の役割としても利用される
    • AWS AppSyncと連携してSubscription処理を実現することが可能

UIフレームワーク

  • Vuetify
    • リッチなUIコンポーネントがたくさんある
    • Vuetify自体の学習が必要
  • Tailwind CSS
    • ユーティティファーストなライブラリ
    • 自由度が高く使いやすい
    • 原則CSSプロパティと一対一対応しているので、CSSの知識があればそこまで学習コストは高くない
    • VueTailwindなどを使えば、コンポーネントを自作しなくてもいい
  • chakra-ui/vue
    • Vuetifyよりもコンポーネントを意識した設計になっているライブラリ
    • 個人的にはVuetifyは結構ブラックボックス的なイメージがある

リンター、フォーマッター

  • ESlint
    • リンター
    • JS、TSともに対応
  • Prettier
    • フォーマッター
    • 結構いろいろな言語をフォーマットできる

テストツール

  • Jest
    • テストツール
    • 正直ほかのツールを使ったことがないけれど、このツールであまり不満を感じたことがない(というよりも使いこなせていない)

ホスティング環境

  • AWS Amplify Console
    • AWS内で完結するので、AWS CodeCommitとは相性が良い
    • フックの設定や、ビルドスクリプトのカスタマイズなど基本的な機能はある
  • Netlify
    • Githubと連携することで自動でデプロイできる
  • Vercel(旧Zeit Now)
    • 名前が変わってからそこまでちゃんと使ったことがないけど、nowの時代はゼロコンフィグレーションということで、設定なしでnowコマンドをたたくだけでデプロイできる優れものでした
  • Surge
    • surgeコマンドでデプロイして、エンドポイントの払い出しまで可能
    • Webのダッシュボードなどはないが、シンプルで個人利用とかであれば十分利用できる

Stoplight

公式リンク：Stoplight
料金：無料

OpenAPI用のエディター。自前でYAMLファイルを書く必要がないので、OpenAPIを書くハードルは比較的下がると思う。UIもきれいなので普通に使えます。

Insomnia Core

公式リンク：Insomnia Core
料金：無料

いわゆるAPIクライアントです。RESTとGraphQLの両方に対応しています。

バックエンド

Amazon Web Services(AWS)

公式リンク：Amazon Web Services
料金：従量課金

便利なサービスがたくさんあります。他のクラウドサービスをしっかり使ったことがないのですが、基本的には不自由しません。

AWS Command Line Interface(AWS CLI)

公式リンク：AWS Command Line Interface
料金：無料

コマンドラインからAWS環境を触ることができるサービス。AWSはWEBマネジメントコンソールから設定が変更できない項目などがあるので、その場合はAWS CLIを使います。

AWS Cloud Development Kit (AWS CDK)

公式リンク：AWS Cloud Development Kit
料金：無料

いわゆるInfrastructure as Codeを実現するためのツール。実際にはAWS CloudFormationのテンプレートを生成するためのツールだが、TypeScriptなどのプログラミング言語を利用してテンプレートの作成が可能。他にはTerraformやserverless frameworkなどがあるが、AWS CDKはAWS公式がだしているツール。

AWS Vault

公式リンク：AWS Vault
料金：無料

AWS CLI等のツールを利用する場合、認証情報をAWSから払い出して利用する必要があります。ただ、その認証情報が漏洩するととんでもないことになるので、IAMの権限にMFAログイン済みでないと操作できない様な権限を付与します。AWS Vaultを使うと、コマンドラインでのMFAログイン操作が簡単に出来ます。

アプリ開発

Android Studio

公式リンク：Android Studio
料金：無料

Androidアプリ開発するのであれば、まずは入れましょう。

XCode

公式リンク：XCode
料金：無料

Apple端末のアプリを開発するのであれば、まずは入れましょう。

Android File Transfer

公式リンク：Android File Transfer
料金：無料

実機アプリでデバッグする際に、画面のスクリーンショットなどをPCと共有する際に、重宝します。簡単にAndroid内のファイルを参照したり、Android側にファイルを送ったりできます。

Apple Configurator 2

公式リンク：Apple Configurator 2
料金：無料

iOSアプリの開発はXcodeでできますが、作成済みのipaファイルのインストールはXCodeではできません。Apple Configurator 2を使うとipaファイルからアプリのインストール、iOSデバイスの画面ミラーリングなどができます。

日常アプリ系

Googleアカウント

公式リンク：Google Account
料金：無料

Google Documentやスプレッドシート、スライドはとても便利です。

Google Chrome

公式リンク：Google Chrome
料金：無料

Webブラウザです。普段利用と開発での利用の両方で使います。
おススメの拡張機能を以下に紹介します。

  • Vue.js devtools
    • Vue.jsのデバッグには必須のツールです
  • Raindrop.io
    • Raindrop.ioと連携するためのツール
    • ブックマークの登録を簡単に出来る
  • Zoom Scheduler
    • Googleカレンダーで予定を入れる際に、一緒にZoomミーティングを作成してくれる

Firefox

公式リンク：Firefox
料金：無料

Webブラウザです。フロントエンド開発では複数のブラウザでの動作確認をするために入れてます。Linuxの場合は、普段のブラウザがFirefoxの人も多いかもしれません。

Raindrop.io

公式リンク：Raindrop.io
料金：無料

ブックマーク管理アプリです。
Chromeの拡張機能と連携すると便利で使いやすいです。ブラウザとは独立しているので、複数のブラウザやアカウントを横断してブックマークを管理できるのでおススメです。

Microsoft 365

公式リンク：Microsoft 365
料金：12,984/年

WordやExcelは仕事では必須かもしれません。個人利用ではあまり必要はなくなってきている気もしますが、、、

1Password

公式リンク：1Password
料金：約$3/月

パスワード管理ツール。特に不自由に思ったことはないです。

Slack

公式リンク：Slack
料金：無料

チャットツールです。普通に便利です。

Zoom

公式リンク：Zoom
料金：無料

ビデオ会議ツールです。バーチャル背景機能、ブレークアウトセッション機能など便利な機能がたくさんあるので、便利です。

Discord

公式リンク：Discord
料金：無料

チャットツールです。Steamのゲームなどをしながら、配信やボイスチャットをすることができます。個人的には動作が軽いので、ずっとつなぎっぱなしでもPCの負荷が上がりにくいので、テレワークでもたくさん利用されているようです。

Fantastical

公式リンク：Fantastical
料金：408円/月

Fantastical2の時は買い切りだったのですが、最近サブスクになったようです。カレンダーアプリとしてはUIがきれいでとても使いやすいです。

BetterTouchTool

公式リンク：BetterTouchTool
料金：$8.5/2年ライセンス

キーのカスタマイズ用です。すべてのアプリでemacsキーバインドを使えるように設定していたりなど、細かなカスタマイズができます。

Yoink

公式リンク：Yoink
料金：980円

ドラッグアンドドロップの一時保存ができるアプリです。スクリーンショットなどを貼り付ける際に、一時保存できるので便利です。

Alfred

公式リンク：Alfred
料金：無料(Powerpackは有料)

いわゆるランチャーアプリです。アプリを簡単に起動できる、コピーペーストの履歴などを呼び出したり、ブラウザの検索、ブックマークを開いたりできます。

Snagit

公式リンク：Snagit
料金：5,722円

キャプチャソフトですが動画も撮れますし画像加工もできます。ブラウザのスクロールキャプチャもできます。有料ですが、キャプチャアプリとしては一番使いやすいと思ってます。

日常デバイス系

ディスプレイ

ノートPCの場合は、ディスプレイは2台あると便利です。ディスプレイも好みだと思いますが、参考までに私が所有しているディスプレイを載せます。

PTFWLD-24W / PTFBLD-24W

キーボード

複数のディスプレイをつなげている場合、PCのキーボードだと姿勢がまっすぐ向かないので、外部キーボードを使う方がいいと思います。
私はAppleのキーボード使ってます。

Magic Keyboard - 日本語（JIS）

マウス

個人的にはマウス派なのでマウス使ってます。私が使ってるのは以下のマウスです。

静音EX-G ワイヤレスBlueLEDマウス

PCスタンド

開発しているとDocker起動時やアプリのビルド時に結構PCのファンが回るので、PCスタンドはあるといいのかなと思います。ちなみに、私が持っているのは下記です。

ノートパソコンスタンド

空気清浄機、加湿器

部屋で仕事することが増えたので、空気清浄機と加湿器はあるといいのかなと。

龍角散のど飴

長時間話すとのどが痛くなるので、定期的に龍角散のど飴を摂取しないと、、、、

龍角散ののどすっきり飴

ウエットティッシュ

個人的には毎日マウスとキーボードの手入れを実施するのですが、以下の商品はめちゃおススメです。

エリエール 除菌できるアルコールタオル 本体

通話デバイス

長時間の会議などでイヤホンの電源が切れた経験はありませんか？Anker PowerConfをPCと有線でつなげれば、電源が切れる心配もないし、電波を気にする必要もないし、音声つなぎっぱなしでも対応できるのでおススメです。

Anker PowerConf

ウェブカメラ

Webカメラは何でもいい気がするのですが、以下のカメラは画質がいいのでおススメです。

C920N HD PRO ウェブカメラ

最後に

結構長くなってしまった。他にもデバイスやツールはありますが、今回はこの辺で。リモートワークでもできる限りのパフォーマンスを出していきたい今日この頃です。

32
38
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
32
38

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?