ウェブフロント中心に新人プログラマ向け研修資料を作った

HTML, CSS, JavaScript, TypeScript, Git, デバッグ, ユニットテスト, Vue, Node.js など。
正直今の環境は初学者に気にしすぎる。




目的



昨今のカオスなウェブ開発について、どこから手をつけたらいいかわからない人にざっくり道筋を示す。
そこそこモダンなウェブ開発に対応できるようにする。
詳細については自分で調べる。

以下の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



後半はあらが目立つのでもう少し整備したい。
たまにノリが異なるのは書いた時のテンションのせい。

2019年6月4日火曜日