はじめに

Webフロントをいじり始め、はや半年強・・・
毎日勉強の連続ですが、少しばかり自分が開発する時のスタイルが確立してきました。
その中でも開発を助けてくれるツールとかって死ぬほどありますよね。もうわけわからないくらい。

でも皆さん、便利なツール、使ってますか？
今回は駆け出し開発者の皆様に向けて、自分が開発の時に一番使用しているツールたちをまとめようと思います。
開発スタイルは人の数だけ千差万別、あくまで自分自身の開発スタイルを見つける一助となれば幸いです！

また、自分がこんなツールがあって使ってるよ！等もコメントとかしてくれると嬉しいです。

では行ってみよう！

目次

プロジェクトに取り組むとき
- 1.1 ChatGPT
- 1.2 Codesandbox
- 1.3 Postman
困ったときは？
- 2.1 Qiita
- 2.2 Zenn
- 2.3 Stack Overflow
英語の情報へのアクセス
- 3.1 Google翻訳
- 3.2 chatGPTの活用
学習リソース
- 4.1 Udemy
- 4.2 YouTube
最後に

1. プロジェクトに取り組むとき

1.1 ChatGPT

まずはこれでしょう。
こんな機能を作成したい、こういうアイデアを形にしたいと思った時、どこから手をつけたものかと思うことがあります。

（むしろそんなことしかないのですが。。。）

そんなときはもう騙されたと思って、chatGPTを使ってください。
「この言語で何を作りたい！」をざっくり質問するだけで、大体のアイデアを出してくれます。
もうこれでもかってくらい便利です。

使ってない人は今すぐ使用しましょう。文明の力を使わない手はない！！！
できれば課金した方が良いが・・・お財布に優しいGPT3.5でも十分有用です。

私がよく質問するやり方としては、

作りたい機能、コード、をそのまま聞いてみる
既存コードのデバックをしたい時にコードをコピペ
エラーをそのまま貼り付けて解決策を聞く

↓こんな感じ

こんなところでしょうか？

（※後述しますが、chatGPTは全然間違ってることや、むしろ冗長なコードを回答することもあります。情報丸呑みは良くないです。）

1.2 CodeSandbox

生成したコードのUI確認や挙動のテストを手早く行いたいときには、CodeSandboxが超絶便利です。
オンライン開発環境なので、Web開発限定ですが、新しいボタンのデザインを試したり、新しい機能の動きをチェックしたりできます。

ポイントは3点、

作成物をローカル環境にインストールすることなく、ブラウザ上で全てが完結！
作成物をGitHubにUpload可能なので、使いまわせる！
Webの言語、ライブラリはほぼ全て揃ってる！

わざわざ環境立ち上げたり、現行のアプリに手を加える必要もないので、めちゃくちゃお世話になってます。

↓サイトに入って、右上からCREATEをクリックすると、以下のように様々な言語を選択できます。

↓言語を選択すると、もう環境が出来上がっています。簡単！早い！楽！

↓ここに作ったコードを貼り貼りしましょう！！！

1.3 Postman

言わずと知れた、人気者です。
APIの動作を確認したいときは、Postmanがおすすめです。
例えば、新たに作成したREST APIが適切に動作するかを確認したい場合、Postmanを使って簡単にリクエストを送信し、レスポンスを確認できます。
使い方もわかりやすいので、使用しない手はないですね。

2. 困ったときは？

困った時はとりあえずChatGPTでいいのかなとも思いますし、正しい内容ならドキュメントを読むのが良いです。
しかし「ChatGPTの情報が正しいのかわからん！」、「ドキュメントってまだ読みにくいです・・・・」といった葛藤があります。
そんな時は同じような境遇に立った人の言葉に耳を傾けるのが一番安心です。

2.1 Qiita

開発中に困ったときは、Qiitaをチェックしてみましょう！
自分が詰まるところは、大体先駆者がいます。

Reactの新機能について理解を深めたい・・・でもドキュメントわかりにくっ！！！とか、
Vue.jsで複雑なコンポーネントを作成する方法を学びたいぜっ！といったときに等に役立つ情報が見つかるはずです。

ここら辺はお世話になった記事です。

2.2 Zenn

Qiitaと同じく、Zennも知識を深めるための良いプラットフォームです。Qiitaとは異なる視点や情報が共有されているので、新しい視点を得ることができます。例えば、最新のフレームワークの比較記事や、Webパフォーマンスの最適化についてなど、あくまで印象ですが技術的内容だけじゃない記事も多いです。

2.3 Stack Overflow

全世界の開発者の味方ですね。
エラーメッセージが出て詰まったとき、、、助けてくださいStack Overflowです。
他の開発者が同じ問題を解決した方法が見つかります。（未解決の場合もある。）
自分の環境ででたエラーをコピペして調べてみたら意外と見つかります。

3. 英語の情報へのアクセス

困った時は、記事を参考にするのが良いですが、有用な記事は英語のものが多かったりします。
そんな時は翻訳ツールをうまく使うのが良いです！

3.1 Google翻訳

Google翻訳は英語の記事やドキュメントのサイトがあれば、URLを打ち込むだけでサイト丸ごと翻訳してくれる機能があります。
ただし、全部日本語になるのでところどころわかりづらくなってしまうことがあるので、
個人的にはGoogleChromeの拡張機能であるTranslatorがおすすめです。

3.2 ChatGPTの活用

ChatGPTは、英語の情報を日本語にして要約してくれます。
例えば、「この英語の技術ブログの要点を教えて」と尋ねると、ChatGPTが要点を日本語で説明してくれます。

もう便利っ！大好きChatGPT。

4. 学習リソース

さて、ここまで長々紹介しましたが、ChatGPTを使うにしても基礎的な開発能力がないことには質問もできません。
そこでチュートリアル、参考書から始めるますが、人によっては人から教えてもらう方が理解しやすい人もいるのではないでしょうか？

マンツーマンで先輩がついてくれていれば・・・とも思いますがそんなわけにもいきません。
そんな方にはオンラインの学習ツールはおすすめです。

4.1 Udemy

スキルアップに欠かせないUdemy。ここには開発に特化したコースがたくさんあります。
有料なんですけどね・・・・
でも本当に勉強になるものが多いので、最初の一歩を踏み出すためにぜひ活用していただきたいです。

全般で役に立ったやつ
Reactを勉強した時に役に立った講座
- モダンJavaScriptの基礎から始める挫折しないためのReact入門
- Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
Swiftを勉強した時に役に立った講座
- 【iOS】SwiftUI 超入門 - Swift を基礎から学んで iOS (iPhone) アプリを開発しよう

4.2 YouTube

やはりお財布が・・・という方はYouTubeも学習リソースとしてとっても便利です。
正直本当に無料でいいのか・・・？と言った内容のチャンネルも多いので是非探してみることをオススメします。

最後に

以上、私が開発で活用してきたツールとリソースの一部を紹介しました。
Webフロント寄りなのは申し訳ありませんが、実際使用してるものってこの程度なんですね〜。

ともあれ皆さんの参考になれば幸いです！
ただし、最も大切なのは自分で試し、自分自身の経験を積むことです。
その中で取捨選択し、自分自身のスタイルを確立していきましょう！

自分もまだまだこれから、一緒に頑張っていきましょう〜！
ではでは。