Hello World.
ヒヨコラボのWEB担当、にゃんたじです。

最近の趣味は海を眺めながら、一服することです。
海はいいぞ（海はいいぞおじさん）

今回はWEBで使っている技術についてまとめてみようと思います。
※ 使い方などについては説明しません！

Git（バージョン管理）

Gitとは、分散型バージョン管理システムの一つで、もともとLinuxのソースコードを効果的に管理するために開発されました。

Gitでは、ファイルの状態を好きなときに更新履歴として保存しておくことができます。そのため、一度編集したファイルを過去の状態に戻したり、編集箇所の差分を表示したりすることができます。

また、古いファイルを元に編集したファイルで、他人の編集した最新ファイルを上書きしようとすると、サーバにアップロードした時に警告が出ます。そのため、知らず知らずのうちに他人の編集内容を上書きしてしまうといった失敗は起こりません。

引用元：Gitを使ったバージョン管理｜サル先生のGit入門【プロジェクト管理ツールBacklog】

チームだけでなく、個人で開発するときにとても役立つのがGit。
めっちゃ端的に言えば、セーブポイントをいくらでも作れるし、過去のセーブポイントにも戻れるし、データを見比べることもでき、他人との共有が容易なシステムです。

すべての機能を使いこなせているわけではないですが、基本的なclone、branch、checkout、add、commit、push、fetch、pull、pull request、mergeぐらいを覚えておけば、十分に活躍してくれると思います。

また、コメントはできる限りわかりやすく記載することが大事。
1ヶ月後の自分は他人と思いましょう。

npm（Node Package Manager）

・Node Package Manager の略。
・JavaScript 系のパッケージを管理するツール。
・必要とするパッケージをインストールする際、依存するパッケージもまとめてインストールしてくれる。
・ライセンスは Artistic License。GPL に似ているが、改造版を再配布する際に名称変更が必要な点が異なる。
・npm パッケージを集めたリポジトリ (npmjs.com) が運営され、40万ものパッケージが登録されている。

引用元：npm入門 – とほほのWWW入門

後述のGulpやSCSS、TS（TypeScript）を簡単に使用できるため、使用しています。
実際、インストールされる「node_modules」はバージョン管理（Git）に含めず、「package.json」からそれぞれのPCでインストールを行う形がベターです。

考える時間や制作時間に多く時間を割きたいので、開発前の準備期間はできるかぎり短くしたい。

Gulp（タスクランナー）

gulp（ガルプ）はNode.jsのパッケージ（プラグイン）として開発されているWeb開発を効率的に行うためのツールです。様々な処理や作業を自動化することができ、実際の開発現場でも使われています。

引用元：Node.jsのパッケージgulp（ガルプ）で開発を効率化 | パソコン工房 NEXMAG

SCSSやTS（TypeScript）を生成、画像の圧縮などに使っています。
「ホットリロード」の機能なども設定しているので、SCSSやTSを更新すると、自動的に画面が更新され、開発がスムーズに進むのでとても便利。

SCSS

SCSSとは、簡単に言うとCSSよりも手間がかからずに書ける記述方法です。

CSSは、広く活用されているスタイルシート言語です。しかしCSSは、記述するには手間が多くかかるなどの課題が複数存在します。

それらの課題を解決するために生まれたのがSCSSです。

SCSSは、Sass（読み方：サス）というスタイルシート言語※の記法のひとつで、もうひとつにはSASS（読み方：サス）という記法があります。

引用元：【Sass入門】SCSSとは？CSSとの違い、メリット、注意点を解説 – カゴヤのサーバー研究室

ファイルの分割や変数・関数などの機能が使えるCSSの弱いところをカバーした記法になります。
最終的にはCSSを生成するので、今までのブラウザでも安心して利用できます。

最初の準備や設計は大変ですが、保守・更新が行いやすくなるので手は抜けません。
WEBサイト・システムは一般的なシステムなどと異なり、短い期間での更新があったりするので、保守性はとても大事です。

TS（TypeScript）

TypeScriptは、JavaScriptを拡張して作られたプログラミング言語です。2014年頃にMicrosoftによって開発・発表されました。

TypeScriptで書かれたコードをコンパイルするとJavaScriptのコードに変換されます。そのため、JavaScriptファイルが実行できる環境ならすぐに使えて、JavaScriptライブラリもTypeScriptから使用できるなど、互換性の高さが特徴です。

TypeScriptは、大人数のプログラマーが開発に携わる場合でもエラーを防ぎやすいように設計されています。ほかにも、変数のデータ型をあらかじめ決められることや、1つの関数定義で異なるデータ型の引数を処理できることなどの特徴があります。

引用元：TypeScriptを入門者向けに解説！JavaScriptとの違い…｜Udemy メディア

CSSの上位版がSCSSだとすれば、こちらはJavascriptの上位版というイメージ。

今はJavaScriptも便利になってきたので、そこまでTypeScriptにこだわる必要はないのかな…という印象ですが、型宣言ができたり、ファイルの分割など細かいところですが、ミスが早期に見つけやすい仕組みがあり、助かっています。

ただ、便利すぎるがゆえにJavaScriptの新しい記法を学べていないのも事実…。
便利は不便とはよく言ったものです。

技術は定期的にアップデートを

昨日使っていた技術が古くなっているケースもWEBの世界では少なくありません。
できる限り、新しい技術のキャッチアップ・導入を考えていきたいものです。