js-tic-tac-toe

このリポジトリ はHTML, CSS(SASS), JavaScriptの練習用リポジトリです。

デモ: https://version1-workspace.github.io/ws-0300-js-tic-tac-toe/

デモをみながら同じようなアプリを実装してください。

準備

課題に取り組む前にnode.jsのインストールが必要です。下記記事にしたがってインストールをしてください。

• nvm + Node.js + npmのインストール - Qiita

課題で身に着けること

• yarn でのパッケージ管理
• 関数型プログラミングの基礎
• データと振る舞いの分離
• EventListenerの使い方
• HTML, CSS, JSの分離

課題の進め方

準備

また、下記概念を理解して課題を行うようにしてください。

DOMについて

• MDN | DOM の紹介
• MDN | ドキュメントの操作
• ライブラリを使わない素のJavaScriptでDOM操作
• JavaScript DOM操作再入門①
• JavaScript DOM操作再入門②

イベントについて

• MDN | イベントの紹介
• EventTarget.addEventListener() - Web APIs | MDN

関数型プログラミングについて

• 関数型プログラミングはまず考え方から理解しよう - Qiita
• 関数型プログラミング入門 | POSTD

yarnについて

• npmとは、yarnとは

0. 課題を始める前にリポジトリ をフォーク

• GitHubフォークのやり方

1. フォークしてリポジトリ をクローンして課題をスタート

Gitが初めての方は下記を参照ください。

• プログラミングを学ぶ前に始めるGit入門

git clone https://github.com/version-1/js-tic-tac-toe.git

2. 留意事項を確認する

1. JavaScriptでのイベントの実装はaddEventListenerを利用することhtml内でのイベントの登録は行わない。

英語: EventTarget.addEventListener() - Web APIs | MDN

日本語: EventTarget.addEventListener() - Web APIs | MDN

2. htmlのDOMに直接スタイルをあてない、またはjsでDOMのスタイルを書き換えるのではなく、クラスを付与することでスタイルを変化させること。
3. 関数型プログラミングの考え方にのっとって、状態と振る舞いを分離させること
4. 成果物はGithub Pagesにて公開する。(gh-pagesブランチをつくってPUSHするだけ）
5. cssのスタイルはSASS記法でSMACCSSの考えに則って実装する
6. 上記ルールに則りながら必要に応じて自分でファイルを追加・編集する

3. sassのコンパイル

cd [クローンしたディレクトリ]
yarn install
yarn run compile:css

サーバが起動していることを確認して、HTMLを開く。以降はnodeのサーバを起動しながら開発を行う。

4. github pagesにてサイトを公開

作業が終わったら変更をコミット & pushしてリモートリポジトリ に変更を反映させます。 masterへの変更が終わったら下記手順でサイトをgithub ページ上に公開してください。

https://docs.github.com/ja/pages/getting-started-with-github-pages/creating-a-github-pages-site