勉強｜GitHubと連携させたVSCodeでDart Sassを記述する練習
グラフィックデザインの学習に重きを置いていたここ2年近くですが、細々と続けていたWebの学習を本格的に再開しています。
というのも、個人で管理しているWebサイトをリニューアルする際、現行のソースコードを上書きしてしまうミスがあったり、関数を使えずコーディングに手間がかかってしまったりしていた初学者の頃から2年経っているにもかかわらず、そんなに進歩が無かったんですよね。
その間にできるようになったのはFigmaとXDでのモーション付きのWebデザイン制作のみです。それも必要な部分だけなのでまだまだなのですが、ソースコード管理的な面で進歩がないのはマズイと思い、学習を再開した次第です。
コーディングの学習のために準備したこと
1.「Web制作者のためのSassの教科書（改訂2版）」を読む
随分前に買って読み切れなかったこちらの本では、node-sass（LibSass）を使用しています。しかし、私がSassの学習に取りかかる頃には、公式に推奨されている実装環境がDart Sassに変更されたため、こちらの本をなぞって勉強することができなくなっていました。
とはいえ、現状評判がいいのはこちらの本。なのでまずはこちらの本をすべて読み進めた上で、Dart Sassでの変更点は都度調べて覚えていくことにしたのでした。
結果、理解しやすい内容なのでこの本を選んでよかったと思いました。暗記したわけではないので辞書がわりとしてもパラパラとめくっています。
2.Dart Sassの基本的な使い方を記した記事をnotionに集める
学習記録や個人仕事をまとめるためにnotionを利用しています。
そこに項目ごとに読み直したい記事を埋め込んでまとめ、必要に応じて読み返しています。
そもそもDart Sassってなんぞや？というレベルなので、上記の記事がとても為になりました。
3.GitとGitHubの使い方を記した記事をnotionに集める
なんとなくでもDart Sassのことを知ってきたら、今度はGitとGitHubの準備です。存在は知っていたけど使ってこなかったGut。
ソースコードを上書きしてしまった過去があるので、管理に便利と知って取り入れてみることにしました。
4.Gitのインストール、GitHugアカウント（非公開設定）の登録
記憶に新しいGitHubでの求職者による案件ソースコード流出事件。ソースコードが公開されてしまうなら使う事がないかと思っていたんですが、無料版でも非公開設定にできるとのことでさっそくアカウントを作りました。
5.VSCodeとGitHubを連携させる
https://breezegroup.co.jp/202102/vscode-github-windows/
VSCodeとGitHubを連携させました。
ここで一度、よくわからないのにVSCode上で操作を進めたせいで作ったファイルをローカルから消してしまうというミスをしました。何をやっちゃいけないのかわかってよかったです…。
6.DartJS Sass Compilerをインストール
ちゃんと連携されていることが確認できたあと、念のため複製したフォルダにscssフォルダを新規作成。そしてDartJS Sass Compilerをインストールしてsassを自動コンパイルできるようにしました。
***
このような流れで、今サイトリニューアルのためのコーディングを進めながらソースコード管理を学習しています。まだコミットとプッシュするときにミスが無いかドキドキします。
Web業界への転職を目指しているので、転職用ポートフォリオサイトもGithubで公開できたらと思っています。ペースは遅いけれど、一歩一歩確実に自分の物にしていきたいですね。
この記事が気に入ったらサポートをしてみませんか？