devVScode.md

VScodeを普通にインストールした後のはなし

とりあえずeveryoneGitPracticeをVScodeで開く。

ここで cloneまでやっておくこと！

Github Desktopで、正しいブランチにいることを確かめる。

拡張について

左のタブの積み木みたいなアイコンから拡張機能を入れれる。

検索してどんどん追加していこう。

おれのおすすめ拡張を紹介するね(個人の好み)

• Japanese (日本語化)
• git (必須)
• Live Server (HTMLの確認)(git練習で便利)
• Material Icon Theme (純正アイコンがダサいので)
• 好きな配色を探す→ "https://vscodethemes.com/"
  おれのおすすめはMonokai系。macっぽいから。拡張でmonokaiで検索したら色々あると思う。
• Color Info (色)
• Docker
• ES7 React/Redux (文法チェック)
• ESLint (同じ)
• Highlight Matching tag (便利)

右クリック→Open with Live Server

command+s で保存するたびにブラウザも更新される。

参考になりそうなこと

まずwebサイトっていうのはHTML,CSS,JavaScriptでつくられているんや。

HTML→骨格
CSS→色、形付け
Javascript→HTML要素の操作、動き付け、複雑な条件分岐の処理

今のところおれたちのレポジトリではhtmlファイルとcssファイルが1つずつある。
やりたいことはぐぐればだいたいでてくる。

で、やってると気づくと思うけど素のHTML,CSSで書き進めていくのは色々限界なんや。
それでJavaScriptを使った(なぜならJSはHTML,CSSを外から自由にコントロールできる！)様々な便利ツールが開発されてきた。

有名どころ jQuery, knockdown.js, angular.js, vue.js, react.js など
さらにNode.jsっていうやばいやつが開発されたことによって、最近は全部JSでええやんってなってきた。

おれらも便利ツールの恩恵に預かりたいということで、最近メジャーなreact(スマホアプリ用の拡張ツール→react nativeもある！)を使うことにしたで。
一つ覚えるだけでwebもアプリもできるなんて一石二鳥やね。

でも、一つ覚えておいてほしいのは、これらのツールはかっこいいスマートな書き方ができるけど、
結局素のHTML,CSS,JSを吐き出しているということや。これらは触っておいて損はないとおもう～

ということで今週はHTMLで練習だあ～

有能なサイト

ninjaさん → このプレイリストを、codingしてるとこだけを飛ばしながら見たら大体わかると思う。全部見るのはだるい
MDN docs → ちょっとかたい感じだけど全部書いてある
codepen → 小作品集。簡単なやつからこんなのも作れるんやっていうやつまで。(おすすめで出てくるやつは正直むずすぎる。)
css tricks → CSSやさん