これから開発・プログラミングをはじめるならおさえておきたいサービス16選

# はじめに
開発・プログラミングをはじめるにあたり、ぜひとも知っておきたいサービスをまとめておきます。めちゃくちゃ使わせてもらっており、感謝しかないです。初心者・初学者の方はぜひチェックしてもらって、自分にあったものを使い込んでいくとよいかと思います。

-【１】オンラインIDE①
-【２】オンラインIDE②
-【３】調べる・質問する
-【４】無料ホスティング
-【５】プログラミング学習
-【６】画像・アイコン・イラスト

## 【１】オンラインIDE①
画面がHTML・CSS・JSと分かれており、結果も同じ画面に表示される。サンプルプログラムをつくり、動作確認をしたいときなどにとても便利。


### ①JS fiddle
**https://jsfiddle.net/**
![101-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/38882c9c-b5d6-aa5b-0712-994466c80390.png)

### ②Code Pen
**https://codepen.io/**
![102.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/b97212ac-0202-393b-f296-2cc2b95407d9.png)

## 【２】オンラインIDE②
GitHubと連携がとてもスムーズなのが「Gitpod」(毎月50Hまで無料に使える)。CodeSandboxは、ほとんど無料で使用可能で、Vue.jsなどのフレームワークを利用する際に、導入準備がほとんど必要ないのが特徴。

### ①Gitpod
**https://www.gitpod.io/**
![103.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/8ef2899f-d32a-1480-b36a-bb554bda2b50.png)

### ②CodeSandbox
**https://codesandbox.io/**
![104.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/19438452-864d-60db-5984-8b23d13fad7c.png)

## 【３】調べる・質問する

Qiitaは解説不要。InputにもOutputにおいても大変お世話になっています。開発者の方々が使用しているだけあって、派生のサービスに素晴らしいものが多いのも特徴だと思います。

また、プログラムにエラーが発生したときに、エラーメッセージを調べるとStackoverflowにたどり着くことがとても多く、なんだかんだで、解決のヒントをもらえます。Teratailは、質問に対する回答率またレスの速さがすごいです。何回か質問させていただきましたが、全部解決にたどり着けました。

### ①Qiita
- Qiitaタグまとめ http://youwht.ml/static/TAG_TOP.html
- QT Visualizer https://qtvisualizer.com/
- Qiitaの殿堂 http://youwht.ml/
- QiitaDeck https://qiitadeck.com/

### ②Stackoverflow
**https://stackoverflow.com/**

### ③Teratail
**https://teratail.com/**


## 【４】無料ホスティング
自分のつくったものを公開するとなると、AWSを代表とするクラウドサービスでもいいと思いますが、無料期間が終わると、少なからずコストが発生します。無料で利用できる下記のサイトは、お世話になっています。とくに、netlifyはGitHubの連携が簡単なので、「GitHub」・「GitPod」・「Netlify」の組み合わせはとても便利だと思います。

### ①netlify
**https://www.netlify.com/**
![105.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/6137360c-0d64-5317-6946-0897e49f2ea6.png)

### ②clodui
**https://www.clodui.com/**
![106.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/8ed237a0-39d7-7c66-b9d7-ec7e31cb0c67.png)

### ③Heroku
**https://jp.heroku.com/**
![107.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/3449c1c2-16d5-637e-f551-11a3e1ac81b0.png)


## 【５】プログラミング学習
Qiitaのまとめ記事でも何度もでてきていますが、プログラムをはじめるなら、まずは下記の３つの学習サイトは超がつくほど有名かと思います。1つのサイトプレミアムに申し込み（無料でもたくさんのコンテンツが利用可能ですが、お金をかけてやる気を引き出すため）、1つのサイト1カ月で合計3か月集中してやったこともありました。

### ①ドットインストール
**https://dotinstall.com/**
![108.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/b21ecdaa-4912-c367-5ee3-ff8b95132f77.png)

### ②Progate
**https://prog-8.com/**
![109.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/7c3c9095-f708-f261-c5eb-60dc9f9de1a3.png)

### ③paiza ラーニング
**https://paiza.jp/works**
![110.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/41d7abb8-c389-a867-e95b-486642740e39.png)


## 【６】画像・アイコン・イラスト
サイトでもWEBサービスでも何かを作成するときに、地味に探すのに時間がかかるのが、画像・アイコン・イラストだと思います。そのようなときは、このサイトを探す、と決めておくとよいと思います。個人的には次の３つがなんだかだで一番お世話になっています。

### ①フリー画像を探す：Pixabay
**https://pixabay.com/ja/**
![111.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/a38c96ab-8f46-067e-9207-26f57415dce4.png)

### ②アイコンを探す：iconfinder
**https://www.iconfinder.com/**
![112.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/6698c998-b8e5-3e8a-b229-2f0b3aaf44ec.png)

### ③フリー素材：イラストヤ
**https://www.irasutoya.com/**
![113.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/68cd09c3-9869-b97f-2a61-58412998b212.png)

※特別な意味はないですが、個人的にこのイラストが好きです。
![114c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/eecd19de-9931-895e-7279-c71ab19d8192.png)

## まとめ
- 開発・プログラミングを行う上で、とても便利なサービスがたくさんあります。感謝しつつ日々精進です。