駆け出しWEBコーダーが覚えるべきもの
こんばんは。からと申します。今回は実務経験が無い僕がWEB制作・WEB受託会社に潜り込んで「入社する前に覚えておくべきだったな～」と感じたことについて書いていきます。
結論から言うとGitとSassです。
自分は今やってることがhtml,cssを触るだけのコーダーなんですが、git,sassは使えなきゃダメっていうことを感じますw
— ql@駆け出しwebコーダー (@qlpt2020) February 10, 2020
sassはエディタがvscodeなら簡単に導入できますが、慣れると生のCSSに戻れなくなるほど便利で楽しいです。
独学時代からGitについては知っていましたが、Githubのアカウントを持っているだけで転職で有利に進めやすい、「ポーフォリオをとりあえずGithubにpushしておけばいいか」ぐらいの認識でした。
Gitとは？
gitは、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムである。Linuxカーネルのソースコード管理に用いるためにリーナス・トーバルズによって開発され、それ以降ほかの多くのプロジェクトで採用されている。(wikipediaから引用)
全く知らない人からしてみればいまいち意味が分かりづらいかと思いますが、多人数で共同で開発・同じファイルを編集したりしても問題なく進めやすくしたシステムです。
Gitを扱う際に、黒い画面に文字列を打ち込むイメージをする方も多いですが、SorcetreeやTortoiseGitといったマウスやクリックで操作できるソフトもあるのでそういったGUIを使うことでハードルを下げやいのかな、と思います。
ローカル(手元のPC・オフライン)で使うのがGit、インターネット上で共有できるのがGithub(等のサービス)と認識してもらって問題ないです。
WEBコーダー・フロントエンドエンジニアのGit利用の大まかな流れ
・GIthubなどのリモートリポジトリから、ローカルのプロジェクトファイルを置く場所にクローンする
・ブランチを、masterから特定のブランチに切り替えする
・コーディングを行い、その内容をコミットする
・リモートリポジトリに差分を反映させるためにプッシュする
少し前まではGitと言えばプログラマのためのシステムという位置づけだったのですが、今やWEBコーダーやWEBデザイナー・WEBライターが当たり前のように使っています。
ただ学習用の書籍や動画を視聴する、ひとまずコマンドを覚える、Githubを設定してローカルからpushするだけでなくポートフォリオの作成している段階からGitを使って管理して一連の流れを覚えるのが理想だな、と今では思います。
Sassとは？
SassとはCSSをより効率的に記述できるようにした言語です。
windowsPCの場合は元々Rubyをインストールするなど、ちょっとした手間が必要でしたが、今では無料エディタの機能で簡単に導入することができます。下の画像は実際のsassのコードの一例です。
御覧の様に、変数を活用したり入れ子構造を用いることができます。毎回毎回同じセレクタを記述せずに { }を使ったり「&(アンバサンド)」を使うだけで記述できるため、CSSと比べたらコードの量が減りますし、使いこなせればスピードも上がるわけですね。
他にも色々な便利な機能があります。SassはCSSの延長線といった位置づけですが、プログラミング的な要素も含まれるためプログラミングも勉強されている方にはとっつきやすいと思います。
導入の仕方は簡単です。
マイクロソフト社が提供している無料のソフトウェア「Visual Studio code」とそのプラグインである「Live Server」「Live Sass Compiler」というプラグインをインストールすればそれで準備は完了します。興味のある方はぜひググってみて下さい。
Visual Studio Code (https://azure.microsoft.com/ja-jp/products/visual-studio-code/)
僕の方でも、また別の記事で具体的な手順などを書いていければと思います。
学ぶ方法
皆さんお馴染みのProgateがおすすめです（↓で紹介しているコースは無料でできます）。
まとめ
今回は、駆け出しWEBコーダーが思う「実務が始まる前に覚えておくべきだったもの」について書きました。
バックエンド側も含めてそれなりの条件で就職を考える場合はAWS、Docker、Linuxといった分野も覚えていく必要がありますが、こちらについてもまた別の記事で書いていければと思います。
それでは！
この記事が気に入ったらサポートをしてみませんか？