このサイトは、学びと共に生きる人の提供でお送りします。

最新情報を受け取る

トップページ
テクノロジー
【2021年】フロントエンド開発で使用している技術やツール

2021/3/2

テクノロジー

【2021年】フロントエンド開発で使用している技術やツール

【2021年】フロントエンド開発で使用している技術やツール

いつも1月から3月まではあっという間に過ぎてしまっている、そんな気がします。振り返らないと多くのことを忘れてしまいそうです。今回は現在フロントエンド開発で使用している技術やツールなどをまとめます。

※ 覚え書きの意味も込めて一部過去使ったもの、未使用のものも掲載しています。

目次

デザイン
マークアップ
プログラミング
開発環境
パフォーマンス最適化
その他
さいごに

デザイン

マークアップ

Can I use...
HTML
- 構造化マークアップ
- テンプレートエンジン: pug, Slim
CSS
- Sass
- PostCSS

プログラミング

JavaScript (フレームワーク)
- React (Next.js)
- Vue.js (Nuxt)
Lint
- ESLint
- stylelint
コードフォーマッター
- Prettier
テスト
- Jest
型定義
- TypeScript
- Flow
CMS
- WordPress
- HeadlessCMS: Strapi, Netlify CMS, Micro CMS, Contentful, GraphCMS

開発環境

バージョン管理（Git）
- GitHub
- GitLab
- Bitbucket
パッケージ管理
- npm (nodebrew)
- Yarn
モジュールバンドラー
- webpack
- Parcel
- Rollup
トランスパイラー
- Babel
polyfill

パフォーマンス最適化

その他

エディタ
- Visual Studio Code
UIコンポーネント管理
- Storybook
CI/CD
- Travis CI
- CircleCI
仮想環境
クラウド
- AWS
- GCP
チャットツール
- Slack
- Chatwork
プロジェクト管理ツール
- JIRA
- Trello
- Asana
- Backlog
ウィキ
- Confluence
解析・分析
- Google Analytics
- Google Search console

さいごに

まとめてみたらデファクトスタンダードなものが多いような印象です。フロントエンド開発に興味がある方や既にフロントエンドに携わっている方は参考にしてみてはいかがでしょうか。フロントエンドは興味が湧いたらとりあえず使ってみるのが一番。善は急げ。

Have a nice engineering life!

フロントエンド

関連記事

ブログをリニューアルしました
2021/1/11
ブログのCSSの使用ライブラリをEmotionからCSS Modulesに乗り換えた
2022/1/31
【2020年】フロントエンドの棚卸し
2020/12/25