正直今の環境は初学者に気にしすぎる。
目的
昨今のカオスなウェブ開発について、どこから手をつけたらいいかわからない人にざっくり道筋を示す。
そこそこモダンなウェブ開発に対応できるようにする。
詳細については自分で調べる。
以下のGitHubレポジトリから
https://github.com/ninomae-makoto/learn-web-programming
注意事項
コーディングルールなどはかなり独特かもしれない。適宜置き換える。
環境
OS
Windows/Mac Linuxも恐らくいけるはず(未確認そのうち確認する)IDE
Visual Studio Code
Backend
Node.js
TypeScript
Express
FrontEnd
TypeScript
Vue
Element
Webpack
ブラウザ
IE11, Edge, Chrome, FireFox, Safari(Macのみ)での動作を想定している。
Chromeで動作確認しているのでミスがあるかも。
資料と使い方
以下のGitHubレポジトリから
https://github.com/ninomae-makoto/learn-web-programming
各章のREADEME.mdを参考に学習、実際に手を動かして動作確認していく。
1~4あたりは飛ばしてもいい。
それ以降は前の章を前提にしている部分があるので順番に進めることを推奨。
何から着手したらいいかわからない場合00_Environment から進めていく。
00_Environment
https://github.com/ninomae-makoto/learn-web-programming/tree/master/00_Environment
学習に当たって必要な環境を構築する。
Visual Studioインストール。
Gitインストール。
Node.js。
レポジトリからクローン など。
どれもマルチプラットフォームなのでどのOSでも同じように使える。
HTML
基本的なタグとEmmetについて説明。
https://github.com/ninomae-makoto/learn-web-programming/tree/master/01_HTML
02_CSS
Cascading Style Sheets.
Webの基本的な構成要素の一つ。
主に文書のデザインを記述する。
ちなみにSass・SCSSなどのAltCSSについては解説しない。使用してもまずい設計が微妙に延命するだけで生産性はあまり向上しないと判断したため。
https://github.com/ninomae-makoto/learn-web-programming/tree/master/02_CSS
03_JavaScript
スクリプト言語。
Webの基本的な構成要素の一つ。
主に文書に振る舞いを記述する目的で利用する。
そこそこ丁寧に作り込んでいるつもり。
https://github.com/ninomae-makoto/learn-web-programming/tree/master/03_JavaScript
04_Git
分散型バージョン管理Gitについて学ぶ。
早めに作って壊せる環境を整える。
個人で扱う範囲しか書いていないのでチーム開発時はもう少し覚えることがある。
https://github.com/ninomae-makoto/learn-web-programming/tree/master/04_Git
05_VisualStudioCode
エディタについて学ぶ。
インテリセンス、コード補完、デバッグ機能、ターミナルやバージョン管理と統合などが出来る。
知っている範囲で便利機能を紹介。
https://github.com/ninomae-makoto/learn-web-programming/tree/master/05_VisualStudioCode
06_DOM
ライブラリに依存しないDocument Object Model(HTMLの各要素)の操作について学ぶ。
https://github.com/ninomae-makoto/learn-web-programming/tree/master/06_DOM
07_TypeScript
型を導入してより安全に実装する。
TypeScriptはJavaScriptによく似た型付き言語。
JavaScriptとの違いがわかるように
https://github.com/ninomae-makoto/learn-web-programming/tree/master/03_JavaScript
と内容を対応させている。
08_Refactoring
リファクタについて
動作を変えずによりわかりやすい構造へと変更する
具体例を用意するのはちょっと難易度高かったので末尾の参考書籍を参照して欲しい。
https://github.com/ninomae-makoto/learn-web-programming/tree/master/08_Refactoring
09_Lint
tslintを使用して構文チェックをおこなう。
できることを減らしてバグを減らす、記述を統一して可読性をあげるのが目的。
Lintルールは私のプロジェクトではこうするといったものなので参考にしてもいいししなくてもいい。
https://github.com/ninomae-makoto/learn-web-programming/tree/master/09_Lint
10_CodingStandards
コーディング規約、スタイルについて。
制限はきつめ。入れてはいないが個人レベルだと改行の数とかも決まってたりする。
何も基準を持たないなら参考にしてもいいし、使えそうな部分を抜き出してもいいし、全く受け入れられない間違っているというのなら参考にしなくてもいい。
https://github.com/ninomae-makoto/learn-web-programming/tree/master/10_CodingStandards
11_Debugging
一般的なデバッグの手順と
VisualStudioCodeのデバッグ機能とChromeの開発者ツールの機能について解説。
https://github.com/ninomae-makoto/learn-web-programming/tree/master/11_Debugging
12_UnitTest
書いたコードが『実装者』の意図した通りに動くかどうか調べるコード。
TDD本の付録BについてTypeScriptで試している。
https://github.com/ninomae-makoto/learn-web-programming/tree/master/12_UnitTest
13_NPMScript
コマンドのエイリアス。
Node.jsのスクリプトと組み合わせれば大体のことができるようになる。
主な用途はよく使う複雑なコマンドをまとめる、ビルド、テスト、リリースなど。
コマンドがOSで異なる場合tasks.jsonで呼び分けることができる。
package.jsonのscriptsに記述する。
https://github.com/ninomae-makoto/learn-web-programming/tree/master/13_NPMScript
14_Webpack
いろいろなファイル(ES6〜,ts,sass,cjs,png,jpg)からブラウザが認識可能なjs,css,画像ファイルへ変換するツール。
VueCLIなどが代替(内部的に使用)してあまり意識しないケースが増えてきたので概要のみ。
https://github.com/ninomae-makoto/learn-web-programming/tree/master/14_Webpack
15_Vue
JavaScriptのUIフレームワークについて。
日本語ドキュメントが最も豊富。公式だけで事足りる。
https://jp.vuejs.org/v2/guide/
他にReact, Angularなどがある。
Angular:Heavy
React:Simple
Vue:Easy
この手のフレームワークは現実として比率的にそれほど使われているわけではないらしい。
https://github.com/ninomae-makoto/learn-web-programming/tree/master/15_Vue
16_VueElement
UIコンポーネント。
デザインをしっかり作り込むならむしろ使わない方がいいかもしれない。
https://github.com/ninomae-makoto/learn-web-programming/tree/master/16_VueElement
17_GuiTest(vue/test-utils)
Vue用のテストフレームワークvue/test-utilsを使用して画面のテストを行う。
https://github.com/ninomae-makoto/learn-web-programming/tree/master/17_GuiTest
18_Node.js&Express
サーバサイドについて
TODOアプリを作成してみる。
https://github.com/ninomae-makoto/learn-web-programming/tree/master/18_Express
後半はあらが目立つのでもう少し整備したい。
たまにノリが異なるのは書いた時のテンションのせい。
