余計なフレームワーク、ライブラリ抜きの Vanilla Web Project 20本でHTML5、CSS、JSを楽しくお得に学ぶ

Vanilla Web Project。

https://vanillawebprojects.com/

HTML5、CSS、JavaScriptのみで構築された20 (+増量予定と書いてある) のミニプロジェクトらしい。GitHubから引用。

|  #  |            Project             | Live Demo |
| :-: | :----------------------------: | :-------: |
| 01  |       [Form Validator](https://github.com/bradtraversy/vanillawebprojects/tree/master/form-validator)       | [Live Demo](https://vanillawebprojects.com/projects/form-validator/)  |
| 02  |     [Movie Seat Booking](https://github.com/bradtraversy/vanillawebprojects/tree/master/movie-seat-booking)    | [Live Demo](https://vanillawebprojects.com/projects/movie-seat-booking/)  |
| 03  |    [Custom Video Player](https://github.com/bradtraversy/vanillawebprojects/tree/master/custom-video-player)     | [Live Demo](https://vanillawebprojects.com/projects/custom-video-player/)  |
| 04  |  [Exchange Rate Calculator](https://github.com/bradtraversy/vanillawebprojects/tree/master/exchange-rate)  | [Live Demo](https://vanillawebprojects.com/projects/exchange-rate/)  |
| 05  | [DOM Array Methods Project](https://github.com/bradtraversy/vanillawebprojects/tree/master/dom-array-methods)  | [Live Demo](https://vanillawebprojects.com/projects/dom-array-methods/)  |
| 06  |    [Menu Slider & Modal](https://github.com/bradtraversy/vanillawebprojects/tree/master/modal-menu-slider)    | [Live Demo](https://vanillawebprojects.com/projects/modal-menu-slider/)  |
| 07  |        [Hangman Game](https://github.com/bradtraversy/vanillawebprojects/tree/master/hangman)       | [Live Demo](https://vanillawebprojects.com/projects/hangman/)  |
| 08  |       [Mealfinder App](https://github.com/bradtraversy/vanillawebprojects/tree/master/meal-finder)      | [Live Demo](https://vanillawebprojects.com/projects/meal-finder/)  |
| 09  |      [Expense Tracker](https://github.com/bradtraversy/vanillawebprojects/tree/master/expense-tracker)       | [Live Demo](https://vanillawebprojects.com/projects/expense-tracker/)  |
| 10  |        [Music Player](https://github.com/bradtraversy/vanillawebprojects/tree/master/music-player)       | [Live Demo](https://vanillawebprojects.com/projects/music-player/)  |
| 11  |     [Infinite Scrolling](https://github.com/bradtraversy/vanillawebprojects/tree/master/infinite_scroll_blog)     | [Live Demo](https://vanillawebprojects.com/projects/infinite_scroll_blog/)  |
| 12  |        [Typing Game](https://github.com/bradtraversy/vanillawebprojects/tree/master/typing-game)     | [Live Demo](https://vanillawebprojects.com/projects/typing-game/)  |
| 13  |     [Speech Text Reader](https://github.com/bradtraversy/vanillawebprojects/tree/master/speech-text-reader)    | [Live Demo](https://vanillawebprojects.com/projects/speech-text-reader/)  |
| 14  |        [Memory Cards](https://github.com/bradtraversy/vanillawebprojects/tree/master/memory-cards)     | [Live Demo](https://vanillawebprojects.com/projects/memory-cards/)  |
| 15  |      [LyricsSearch App](https://github.com/bradtraversy/vanillawebprojects/tree/master/lyrics-search)     | [Live Demo](https://vanillawebprojects.com/projects/lyrics-search/)  |
| 16  |        [Relaxer App](https://github.com/bradtraversy/vanillawebprojects/tree/master/relaxer-app)       | [Live Demo](https://vanillawebprojects.com/projects//relaxer-app/)  |
| 17  |       [Breakout Game](https://github.com/bradtraversy/vanillawebprojects/tree/master/breakout-game)       | [Live Demo](https://vanillawebprojects.com/projects/breakout-game/)  |
| 18  |     [New Year Countdown](https://github.com/bradtraversy/vanillawebprojects/tree/master/new-year-countdown)   | [Live Demo](https://vanillawebprojects.com/projects/new-year-countdown/)  |
| 19  |       [Sortable List](https://github.com/bradtraversy/vanillawebprojects/tree/master/sortable-list)       | [Live Demo](https://vanillawebprojects.com/projects/sortable-list/)  |
| 20  | [Speak Number Guessing Game](https://github.com/bradtraversy/vanillawebprojects/tree/master/speak-number-guess) | [Live Demo](https://vanillawebprojects.com/projects/speak-number-guess/)  |


## [Vanilla Web Project とは](https://vanillawebprojects.com/about.html)

> このコースは、純粋で、実用的で、楽しいプロジェクトベースのコースです。すべてのプロジェクトは異なり、繰り返し行われるプラクティスを使用しますが、それらはそれぞれ新しいことを学ぶためのものです。フレームワークやライブラリは使用しません。HTML、CSS、JavaScriptを含むすべてのプロジェクトをゼロから構築します。

> プロジェクトは将来的に更新・追加される予定です。最終的には、「50のWebプロジェクト」というタイトルで、より高度なプロジェクトも含めたコースにしたいと考えています。

とのこと。初心者から中級者までを対象に作られており、HTML、CSSとJavaScriptの基本的な知識があれば楽しめる。

- HTML/CSSによるレイアウトやUIの作成
- 基本的なJSを実際のプロジェクトで使う
- CSS アニメーションと JS トリガー
- DOMの選択と操作
- JavaScriptイベント
- 配列メソッド - map()、filter()、reduce()など
- データの取得とサードパーティのAPIとの連携
- JSON
- プロミスと非同期/待ち時間
- ローカルストレージ
- ドラッグ＆ドロップ
- 音声認識
- 音声合成
- キャンバスAPIとアニメーション

というのが以上、(DeepL翻訳での翻訳と) サマリ。


## 具体的にどう楽しむか

ソースを丁寧に読むとよさそうだったので読んだ。以下つまみ食いメモ。


### Dom Array Methods

https://vanillawebprojects.com/projects/dom-array-methods/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/029f3a08-9735-4868-46c2-d10bc1cfa49e.png)

https://github.com/bradtraversy/vanillawebprojects/tree/master/dom-array-methods

```抜粋.js
// Fetch random user and add money
async function getRandomUser() {
  const res = await fetch('https://randomuser.me/api');
  const data = await res.json();
  const user = data.results[0];
  const newUser = {
    name: `${user.name.first} ${user.name.last}`,
    money: Math.floor(Math.random() * 1000000)
  };
  addData(newUser);
}
```

なんて部分がありますが、以下を発見した。Random User Generator などというAPIがあるのですね。

https://randomuser.me/


```例.js
var res;
var data;
var user;
res = await fetch('https://randomuser.me/api');
data = await res.json();
user = data.results[0];
console.log(user);
```
  
でお試し可能。



### Exchange Rate

https://vanillawebprojects.com/projects/exchange-rate/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/2dbe750a-263f-0154-10b2-a8ad2817ea58.png)

https://github.com/bradtraversy/vanillawebprojects/tree/master/exchange-rate

```抜粋.js
function calculate() {
  const currency_one = currencyEl_one.value;
  const currency_two = currencyEl_two.value;
  fetch("https://open.exchangerate-api.com/v6/latest")
    .then(res => res.json())
    .then(data => {
      //  console.log(data);
      const rate = data.rates[currency_two] / data.rates[currency_one];
      rateEl.innerText = `1 ${currency_one} = ${rate} ${currency_two}`;
      amountEl_two.value = (amountEl_one.value * (rate)).toFixed(2);
    });
}
```

こちらも

https://www.exchangerate-api.com/

などというAPIを使っている。




### Memory Card

https://vanillawebprojects.com/projects/memory-cards/

![memory.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/b7d731a1-f4fe-318a-dfe1-3e71270b4a71.gif)

こちらはlocalStorageが何なのかを知るにはよさそう。

https://github.com/bradtraversy/vanillawebprojects/tree/master/memory-cards

```js
// Get cards from local storage
function getCardsData() {
  const cards = JSON.parse(localStorage.getItem('cards'));
  return cards === null ? [] : cards;
}

// Add card to local storage
function setCardsData(cards) {
  localStorage.setItem('cards', JSON.stringify(cards));
  window.location.reload();
}

// Clear cards button
clearBtn.addEventListener('click', () => {
  localStorage.clear();
  cardsContainer.innerHTML = '';
  window.location.reload();
});

```

https://qiita.com/ichikawa_0829/items/85413fedc59822ccef75

https://techracho.bpsinc.jp/hachi8833/2019_10_09/80851

LocalStorageは色々注意。



### Infinite Scroll 

https://vanillawebprojects.com/projects/infinite_scroll_blog/

![scroll.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/383dfd65-3fbb-5dac-da2b-6a205012c23c.gif)


https://github.com/bradtraversy/vanillawebprojects/tree/master/infinite_scroll_blog


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/358afa4f-17e8-7531-e9a1-5973e2145f9b.png)

こちらもどうやらこんなものを使っている。

https://jsonplaceholder.typicode.com/



```抜粋.js
// Fetch posts from API
async function getPosts() {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts?_limit=${limit}&_page=${page}`
  );

  const data = await res.json();

  return data;
}

window.addEventListener('scroll', () => {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;

  if (scrollTop + clientHeight >= scrollHeight - 5) {
    showLoading();
  }
});

// Show posts in DOM
async function showPosts() {
  const posts = await getPosts();

  posts.forEach(post => {
    const postEl = document.createElement('div');
    postEl.classList.add('post');
    postEl.innerHTML = `
      <div class="number">${post.id}</div>
      <div class="post-info">
        <h2 class="post-title">${post.title}</h2>
        <p class="post-body">${post.body}</p>
      </div>
    `;

    postsContainer.appendChild(postEl);
  });
}

// Show loader & fetch more posts
function showLoading() {
  loading.classList.add('show');
  setTimeout(() => {
    loading.classList.remove('show');
    setTimeout(() => {
      page++;
      showPosts();
    }, 300);
  }, 1000);
}

```

等など。動かしてみると少し分かる。


### そのほか副産物

色々なPlaceholder発見。

https://placeholder.com/

https://qiita.com/suin/items/1f3898c1fa108b1e47b1

https://jsonplaceholder.typicode.com/

https://qiita.com/Abbiscuit/items/66ee955509284e941803

https://nihongoipsum.com/



## Udemyの教材らしい

内容が充実しているのはそのはず、Udemyのコースの題材だからのようですが、GitHubを覗くだけなら上述のとおり。お得。

https://www.udemy.com/course/web-projects-with-vanilla-javascript/?referralCode=F9B7C7FED834F91ADE75

以上 GitHubのTrending に居たのを見つけたのでメモでした。お役に立てばさいわいです。