note初投稿します✨（ご容赦ください）
新卒からWEB業界に入り、自分の中でこれは大切だったなと思ったことや技術についてつらつらと書いていこうかなと思います。

ざっくり自己紹介です！
日本工学院専門学校3年制を卒業しweb業界に入り5年目のマークアップエンジニアになります。
業界に入ってからは業界のコーディングついて知り、アクセシビリティなどマークアップについてよく考えています

この話はHTMLやCSS JavaScriptなどのマークアップの話や業界で使われる技術についてを主な題材としていますのでご了承ください。

学生時代から業界に入った時

自分は専門学生を卒業し、縁があって制作会社に勤めさせていただくことになりました。
初めのスキルとしてはHTML CSS は書けてJS(JavaScript)はバニラではなく、Jqueryを用いて書けてサイト上の動きを追加できる程度でした。
見ていただいている方のスキルレベルはわかりませんが今の自分が学生時代の自分に”使えるといいよ！”と思う事をここに書いておきます！

中途採用によくある歓迎されるスキルで未経験のうちから勉強しておきたかったこと

中途採用の募集要項などで【歓迎されるスキル】の中で学生や未経験で勉強してますという方にやっておいたほうがいいかもというのが"Git"や"Sass(Scss)"は、HTML CSS JavaScript以外にやっておきたかったなと思います。

Gitについて

Gitの使い方や概要については下記を参考に

Git管理でリポジトリをどこで作るかがありますが、Backlog(株式会社ヌーラボが提供するプロジェクト管理ツール。)のリポジトリを使うことをありますし、GitHubやGitLabといったサービスのリポジトリを扱うことがあります。
業界に入って、BacklogのGit（リポジトリ）を使うことが多かったですが、
Gitの使用方法は一緒なので困ることはありませんでした
（2社しか経験していないのでこれら以外にもGitLabを使っている会社さんもあると思います💦）

GitHubは個人でも利用可能ですので勉強がてら使ってみるのをオススメします

gitを扱うにあたって、GUIで操作するかGit BashというCMDような画面でコマンドを打って操作するかがありますが、最初は業界でも使われているSource Treeを使ってclone pull commit push などのgitの基本的な動作を画面上の操作で感覚的に覚えるのがいいと思います。
Source Treeの説明はこちら

最初の縁があった会社の上司の方にGit Bashでの操作を教わった自分はGit Bashにて操作をしておりますが強みとして、gitで管理しているフォルダの容量が大きいとSource Treeでpullできないことがありますが、Git Bashだとpullできたり、サーバーなどにgitを置いて操作する際にGit Bashと同じことをやるのでシステムサイドの方はコマンド打って作業している方が多い気はします！
ただデメリットとして、作業を確定する addがコマンドだと一つ一つ打たなきゃいけないこともあるので大変です。（ブランチをまたいで作業をしていた時に涙目になります）※git add .　ですべての作業を加えることもできますが、ブランチ管理上やらないことが多いです。
とはいえ、Git Bashでコマンドをたたいていたとしても、Source Treeで作業することもあるのでどちらも触れると強みになると思います。

Gitの作業を開始する際のお作法

Gitリポジトリを立てた時のお作法として、空コミットをするというのがあります。

こちらをする理由としては、Git上の機能としてコミットに戻すことができるので、初めてプッシュしたファイルが間違っていたり何か不足があった場合の戻す点を作るイメージですね

Gitを使用していく中で”ブランチ”という機能が出てきますが、会社によってブランチの作り方が違うことがあるので、縁があって入った会社に確認するといいと思います！

Sass(Scss)について

Sass(Syntactically Awesome StyleSheet)はCSSをよりよく記述ができる技術です。SassとScssがありますが、記述方法が少し違う（{}や;を記載しないのがSass）だけで同じだと思っていていいと思います。
※私は業界に入ってからScssで作業をしておりますが、後述する文章ではSassと記載します

そしてこのSassを学ぶにあたって重要なのが、使用するSassの種類とCSS記法（メソッド）だと思います。

Sassの種類

Sassの種類には

• Ruby Sass

• LibSass

• Dart Sass

の三つがあり、自分が業務で使った来たのはLibSassとDart Sassです。
※Ruby Sassが遅いこともあり生まれたのが、LibSassのようですね

この二つの中でどちらを学んだほうが良いと言われたらどちらも学んだほうが良いと思っていて、理由としてはDart Sassが現在Sassの開発において推奨されている技術でこれからのスタンダートな技術になります。
LibSassはLibSass内の機能が原因で非推奨となった技術ですが、今まで使われていた技術なので会社によってはDart Sassの導入がまだでLibSassで制作を行っている現場もあるのでどちらも学んでいるといいと思います。

ただ、二つは機能面での違いがあるので、自分のパソコンでどちらも開発環境を立てられるぐらいまで勉強しておき、会社に入ってから深く勉強をすると実際の業務の中で使う機能、使わない機能など判断できるようになり、
とても良いのかなと思います。

Sassの記述方法や種類については下記が参考になるかと思います！

CSS記法（メソッド）

自分は学生時代、とりあえずクラスつけてセレクタで取り合えずCSSを当てるということをやっていましたが、業界に入りCSSの記述方法があることを知りました。なので今学生の方や未経験で制作物を作っている方はCSSの書き方が意識できてるとよいのかなと思います。

CSSの記述方法として知られているのが、

• SMACSS

• OOCSS

• BEM

• FLOCSS

の４つかと思います！

業界に入り、自分はBEM設計での制作しか経験しておりませんが、ほかの会社さんではSMACSSがメインの設計であったり、OOCSSがメインのところもあるので、書き方をざっくりと知っておき、学生時代やフリーで制作しているときには一つの書き方で固定させたほうが、SMACSSやBEM書き方などごっちゃにならなくていいかと思います。
会社説明とかで聞いておいて、その後の制作で試してみるのもいいですね

CSS設計に関しては下記が参考になるかと思います

古い記事ですが、、、

終わりに

以上が、出来ると良かったなぁと思うことでした！
もちろん書いていることは初歩のことなので、もうできているよ！という方もいらっしゃると思いますが実際に会社に入ってからは組織の方針があったりするので幅広くストライクゾーンがあると強みなのかなと思います。

また書いているうちに調べ物をしたりと自分の勉強にもなったので、これからも引き続き書いていきます！（ogの設定大切✨）

ここまで読んでいただきありがとうございました。