【最新版】エンジニア向けおすすめの学習サービスまとめ

## はじめに

今回はプログラミング初心者と中級者向けの**プログラミング学習サービス**を紹介する。  
自身が実際に学んできた中で特によかったものだけを厳選した。

日本語のサービスに限定して紹介をしています。

なお、progateやドットインストールのような誰もが知っている学習サービスは省いている。

## Web制作系 (HTML・CSS等の基本)

### [web-design-textbook](https://web-design-textbook.com/makepage-middle.html)

最初に紹介するのは、Web制作を基礎から実装手法まで網羅的に学べる「[web-design-textbook](https://web-design-textbook.com/makepage-middle.html)」。  

![FR9MuMzaUAAlam0.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/7385901b-eb0e-b8cb-f66e-b6373e16693e.jpeg)

基本編から上級編までレベル別に構成されており、初心者でも入りやすい。  
問題数が豊富で図を多用した解説が特徴で、独学でも挫折せずに学習を進められる教材として優れている。  

これからWeb制作の学習を始めたい人におすすめ。

### Codestep

次に紹介するのは、HTMLやCSSなどの基礎を実際のサイトを作りながら学べる「[Codestep](https://code-step.com/)」。  

![スクリーンショット 2022-06-02 22.06.04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/45e5340e-2d27-b77e-962d-affa738007be.jpeg)

Codestepでは、入門的なコーディングから実務レベルのサイト制作までを**無料**で学べる。  
素材やソースコードが最初から用意されており、丁寧な解説が付いているため初学者に最適。 

また、サイト制作の単価の目安が記載されており、学習のモチベーションを高める工夫がされている。  

HTMLとCSSの基礎を学び終えた後のアウトプット教材として活用できる。

### 動くWebデザインアイディア帳

次に紹介するのは、Web制作で重要な「動き」を学べる「[動くwebデザインアイディア帳](https://coco-factory.jp/ugokuweb/)」。  

![スクリーンショット 2022-06-03 8.20.37.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/8d645fec-fa75-903b-c774-ed788ff21113.jpeg)

アニメーションや動きに特化した教材で、JavaScriptやjQueryを中心に学習を進められる。  
ハンズオン形式で静的コーディングを基に動きを実装し、解説はコメントアウト形式で丁寧に記述されている。  
実装例が実際のサイトでどのように活用されているかもサンプルとして紹介されており、実務への応用力も高められる。

### mosya

https://mosya.dev/

案件などにも対応できる「実践力」を身につけることができる学習サービス。

レベル別に文法や記法を学習することができ、実際にWebサイトを制作する過程で知識を定着させることができる。

AIによるチャット機能も充実しているので、初心者でもサクサク進められる構成になっている。

![スクリーンショット 2024-12-02 22.47.55.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/123ae46e-3df8-b089-5c6e-9d938d48a6d1.jpeg)

### ぷよぷよプログラミング

https://puyo.sega.jp/program_2020/

![スクリーンショット 2024-12-03 7.36.57.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/8b5d7e93-76ee-ae8f-622f-c9f4f6a1f129.jpeg)

人気ゲームぷよぷよを開発しながら、HTMLやCSSやJavaScriptといった技術を学ぶことができる。

実際にアプリ開発をしながら学べるので、インプットとアウトプットが同時にできる。

初心者から中級者でアプリを開発してみたい人におすすめの学習サービスになっている。

### 無料コーディング練習所

https://webdesigner-go.com/coding-practice/

HTMLやCSS、jQueryの基礎を学んだ上でWebサイトを実際に制作しながら学んだ知識をアウトプットできる。

レベル別にWebサイトの制作ができるので初心者から中級者まで学びがある学習サービスになっている。

![スクリーンショット 2024-12-02 22.44.44.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/074a9812-0c42-f7a4-9696-4dc5b0e1b54d.jpeg)

### FLEXBOX FROGGY

https://flexboxfroggy.com/#ja

![スクリーンショット 2024-12-03 7.38.34.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/d7538c3f-21b5-0b16-7d6f-3c83a76bb599.jpeg)

CSSの必須項目かつ初心者が躓きやすい**FlexBox**をゲーム感覚で学ぶことができる。

ゲームの内容はシンプルで実際にコードを入力し、カエルを横並びにすればクリアというゲームになっている。

## Webアプリ開発系

### ut.code(); Learn

https://learn.utcode.net/

![スクリーンショット 2024-12-02 22.43.13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/b6afedc5-55ea-9fb7-789b-4e609dd805dd.jpeg)

東大生が無料で公開しているWebアプリ開発の学習サービス。

ブラウザの仕組みやWebサーバーの動作、現代アプリ開発といった本質から学ぶことができる。

初心者から上級者まで幅広い層が学べる学習サービスになっている。

### ちいさなWebブラウザを作ってみよう

https://browserbook.shift-js.info/

Webブラウザを作りながら、ブラウザの基礎、DOM、レンダリングツリー、JavaScript、セキュリティの仕組みを学べる。

![スクリーンショット 2024-12-03 7.41.59.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/74e5172e-c0d7-9ee2-6834-2fb5641a5d09.jpeg)

### Techpit

アプリ開発を通じて様々な技術を学べる「[Techpit](https://www.techpit.jp/)」。  

![スクリーンショット 2022-06-03 8.30.26.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/06ec5ab9-6a09-d2a2-063b-8d8dd3abf7ae.jpeg)

1000円から3000円の買い切り型プログラミング講座が販売されており、「マッチングアプリ」や「LineBot」など実用的なテーマが揃う。  

環境構築の解説も丁寧で、初心者でもつまずきにくい構成。基礎を固めた後のアウトプット教材やポートフォリオ作成にも適している。

### Recursion

GAFAエンジニアが運営する「[Recursion](https://recursionist.io/)」は、コンピューターサイエンスを学べる。  

![スクリーンショット 2024-12-02 22.39.11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/7af0ab35-57c2-618c-4d8b-22d465459429.jpeg)

基礎知識を座学で学んだ後、豊富な演習問題を解きながら実践的なスキルを習得できる。  
チーム開発や勉強会も定期的に開催されており、開発現場を意識した学習が可能。

### Zenn Books

エンジニア向け情報コミュニティ「[Zenn](https://zenn.dev/)」の中にある「[Zenn Books](https://zenn.dev/books/explore)」。  

![スクリーンショット 2024-12-02 22.39.47.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/76ef4b81-0080-e850-0e66-f2075e52b00f.jpeg)


多くの技術書が無料で公開されており、基礎から応用まで幅広く対応している。  
ハンズオン形式で手を動かしながら学べるため、初心者から上級者まで幅広い層におすすめ。

### Envader

サーバー構築やネットワーク、セキュリティを学べる「[Envader](https://envader.plus/)」。 

![スクリーンショット 2024-12-02 22.49.40.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/3963be0e-4e86-15fd-6039-5cc516b3eba1.jpeg)

ターミナル上でのハンズオン形式で学べるため、実践力が身につく。環境構築が簡単で、動画解説もあるため初心者でもスムーズに学習を進められる。

### [忍者CODE](https://ninjacode.work/#courseSection)

https://ninjacode.work/drill

![スクリーンショット 2024-12-02 22.50.31.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/d0e492c6-8c59-4693-ecd4-36bc7587ab3f.jpeg)

問題を実際に解く過程の中でWebアプリ開発やWeb制作の知識を定着させることができる。

扱っている技術も幅が広く、いろいろなものに挑戦できる。

### SQL Lab

https://sqlab.net/

SQLを演習形式で基礎から応用まで一通り学ぶことができる。

ハンズオン形式なので実際にSQLを書く過程の中で定着させることができる優れもの。

## 最後に

他にもいろいろな記事を執筆しているので読んでいただけると幸いです！

https://qiita.com/KNR109/items/853c8d8fe36ede1cc453

https://qiita.com/KNR109/items/528cbcaafb84aa57553d

https://qiita.com/KNR109/items/1fa6d697a936c54329c6