2022年6月28日、Fresh 1.0がリリースされました。Fresh は、**Denoのフルスタックのウェブフレームワークで、次世代フレームワークと位置付けられています。**ビルドステップがないため、高速なデプロイメントが可能です。2022年8月時点の最新版は、8月1日にリリースされた1.0.2です。

Freshとは、JavaScriptおよびTypeScript開発のためのフルスタックのウェブフレームワークを指します。フレームワークを活用した高品質で高性能のウェブアプリケーションを簡単に作成できるように設計されています

Freshでは、*Denoが提供する実行環境をルーティングフレームワークとテンプレートエンジンを用いて、簡単に利用できるようにします。*サーバー上でのジャストインタイム（JIT）レンダリングと、クライアントサイドのコンポーネントレンダリングを併用し、インタラクティブ性をより高めています。

TypeScriptとは？JavaScriptとの違いも解説！

*Denoとは、V8 JavaScriptエンジン上に構築されたランタイム環境を指します。*JavaScriptやTypeScriptの実行を行うものです。Node.jsの作者であるライアン・ダール氏はNode.js考案後、その経験と反省を生かしDenoを開発しました。2022年8月時点の最新版は、バージョン1.24.2です。

【参考】：[Deno](https://deno.land/)
【参考】：[GitHub Deno](https://github.com/denoland/deno)

Node.jsとは？JavaScriptとの違いや使い所を解説

一般的にクライアントサイドのレンダリングは、JavaScriptのコード通信量が多く処理が重くなります。Freshでは、*レンダリングの大半をサーバーで行い、特定コンポーネントのみ明示的にクライアントサイドでレンダリングします。*デフォルトでは、クライアントにJavaScriptコードを送信しません。

フレームワークを実装するために、ルーティングフレームワークとテンプレートエンジンを用い、要求ページをサーバー上でレンダリングします。この仕組みにより、ランタイムのオーバーヘッドが発生せず、インタラクティブ性を向上させることができます。

Freshはビルドステップがないので、デプロイメントが高速です。TypeScriptやJSXからJavaScriptへの変換は、ジャストインタイムで必要時に自動的に行われます。

*Fresh 1.0は初めての安定版としてリリースされました。*マイナーリリースは適宜行われており、2022年8月時点の最新版は1.0.2です。現時点では登場間もないため、将来計画に関する情報は公開されていません。

【参考】：[GitHub Denoland Fresh Reealses](https://github.com/denoland/fresh/releases)

*Freshの設計方針は、高速でスケーラブル、信頼性の高いアプリケーションを簡単に構築することを目指したものです。*

【参考】：[Fresh Docs: Concepts](https://fresh.deno.dev/docs/concepts)

設計目標を達成するために、いくつかの原則に基づき設計されています。具体的には、1つ目としてページのロード時間は最小限に抑えるべき、ということです。2つ目はクライアントが行う作業を最小限にする、3つ目はエラーは最小限の範囲にとどめて周辺への影響を最小にする、ということです。

上記を実装するために、アイランドアーキテクチャ・パターンを採用しています。具体的にはFreshのアプリケーションが、デフォルトでJavaScriptコードを用いずに、純粋なHTMLをクライアントに送信するものです。

サーバーでレンダリングされたページの一部は、インタラクティブ性を高めるためクライアントサイドでレンダリングすることができます。一般的に再レンダリングの対象は限定されるので、高速で軽量なアプリケーションが開発できます。

Freshを使うには、先行してDenoのインストールが必要です。*Freshは、Deno 1.22.3以降でサポートされます。*インストール済みの場合は、念のため最新バージョンにアップグレードしておきます。Denoが利用可能になったら、プロジェクトを作成し開発を進めます。

【参考】：[Fresh Docs: Getting Started](https://fresh.deno.dev/docs/getting-started)

*Denoのインストールは、シングルパッケージをダウンロードし展開して行います。*WindowsやmacOS・Linuxに対応します。macOSでは、M1（arm64）とIntel（x64）に対応し、WindowsとLinuxでは、x64のみでサポートされます。

【参考】：[Deno Installation](https://deno.land/manual/getting_started/installation)
【参考】：[GitHub deno_install](https://github.com/denoland/deno_install)

macOSやLinuxのシェルでは以下のように、インストールします。

```curl -fsSL https://deno.land/install.sh | sh```

Windowsでは、PowerShellを用いて以下のようにインストールを行います。

```irm https://deno.land/install.ps1 | iex```

すでにDenoをインストール済みの場合は、最新バージョンにアップグレードしておきます。

プロジェクトの作成は、Freshのプロジェクト作成ツールを用います。
【参考】：[Fresh Docs: Create a project](https://fresh.deno.dev/docs/getting-started/create-a-project)

プロジェクトを作成することで、Freshに必要なファイルが指定フォルダに作成されます。ここでは作成フォルダを”my-proj”として指定し、プロジェクトを作成します。

```deno run -A -r https://fresh.deno.dev my-proj```

### プロジェクトのファイル構成

先ほど作成したプロジェクトでは、指定したフォルダにいくつかのファイルが自動的に作成されています。必ず必要となるのは、以下の4つです。
【参考】：[Fresh Docs: Create a project](https://fresh.deno.dev/docs/getting-started/create-a-project)

・*dev.ts*
作成したプロジェクトの開発エントリポイントで、プロジェクトを開始するために実行するファイルです。

・*main.ts*
プロジェクトで実際に使用するコードのエントリポイントで、Deno Deployで使用するファイルです。

・*fresh.gen.ts*
ルートとアイランドに関する情報を含むファイルで、開発時にroutesとislandsの各フォルダを元に自動生成されます。

・*import_map.json*
プロジェクトの依存関係を管理するために使用されるインポートマップです。

上記の他に、Denoとの連携のために、deno.jsonファイルが作成されます。

*ローカルでの実行は、プロジェクト作成時に指定したフォルダに移動し開発サーバーを起動します。*

これで、DenoのWatcherプロセスが開始されました。”http\://localhost:8000”にアクセスすると、レモンのロゴとカウンターが表示されていることが分かります。
【参考】：[Fresh Docs: Running locally](https://fresh.deno.dev/docs/getting-started/running-locally)

ここで、細かく起動オプションを指定することもできます。

*ページの作成は、トップページとなる” routes/index.tsx”を修正することでメッセージを簡単に更新することができます。*もちろん、ここで手直しすることで商用利用できる品質レベルに仕上げることもできます。

具体的には、静的および動的なルート設定とレンダリング、フォーム入力やハンドラーなどを設定し、インタラクティブ性を高めるための仕上げを行っていきます。具体的な作業項目は、公式サイトをご確認ください。
【参考】：[Fresh Docs: Getting Started](https://fresh.deno.dev/docs/getting-started)

*完成版をデプロイするには、Deno Deployを利用します。*Deno Deployは、JavaScriptやTypeScriptをエッジで実行する分散ランタイムシステムを指します。

【参考】：[Deno Deploy](https://deno.com/deploy)

Deno Deployでは、GitHubインテグレーションを利用します。コードをGitHub上のリポジトリにプッシュし、Deno Deployのダッシュボードでデプロイのためにプロジェクトを作成します。プロジェクト作成が完了したら、プロジェクト設定の「Git」タブからリポジトリを選択し、Branchを”main”に、そしてEntrypoint fileを”main.ts”に指定します。

【参考】：[Fresh Docs: Deploy to production](https://fresh.deno.dev/docs/getting-started/deploy-to-production)

GitHubとは？メリットや使い方、Gitとの違いも徹底解説！

Deno Deployの手続きで、作成プロジェクトが自動的にインターネットにデプロイされます。Deno Deployは、URLを指定するだけでコードをデプロイすることができます。グローバルに分散配置されるリージョンを活用して世界中のユーザ向けの高速デプロイを実現します。具体的には、  *”https\://$PROJECT_NAME.deno.dev” のリンクを用いてアクセスすることができます。*

Freshの導入手順は非常に簡単です。インストールからプロジェクトの作成、開発サーバーの起動、そして完成した完成版のデプロイまでスムーズに行うことができます。カスタマイズはDocsを見ながら進めることができます。まずは、*知識吸収の最初の1歩としてDenoとFreshに実際に触れてみてはいかがでしょうか。*

2022年6月28日、DenoのフルスタックのウェブフレームワークとなるFresh 1.0が、正式リリースされました。ビルドステップがないため、高速なデプロイメントが可能です。ここでは、Freshの特徴と機能、使い方について解説していきます。

Fresh は、Denoのフルスタックのウェブフレームワークで、次世代フレームワークと位置付けられます

ルーティングフレームワークとテンプレートエンジンを用い、簡単に利用できるようにします

インストールからプロジェクトの作成、開発、完成版のデプロイまで簡単に行うことができます

フルスタックの新フレームワーク「Fresh 1.0」がリリース！使い方を解説

WebKitとは、Apple社が開発する**オープンソースの「HTMLレンダリングエンジン」の名称です。**Web系エンジニアの方以外はあまり聞かない言葉かと思いますが、これからWebKitの歴史や概要、Webプログラミングで意識しておきたいことなどについて解説します。

Webエンジニアを目指す方、エンジニアとして知識を広げたい方はぜひ最後までお付き合いください。

*【参考】：[WebKit ｜公式](https://webkit.org/)*

iPhoneなどiOSのSafari、iOSで利用されているGoogle Chrome、いずれもHTMLレンダリングエンジンは WebKitが使われています。**WebKitはApple・Nokia・Adobeなどが中心になっているWebKit Foundationで、オープンソースのレンダリングソフトウェアとして開発されました。**

現在WebKitを採用している製品としては、Mac OSやiOSの標準ブラウザであるSafari、さらにはiOS向けのGoogle ChromeやFirefoxなどがあります。

*【参考】：[Safari - Apple（日本）](https://www.apple.com/jp/safari/)*
*【参考】：[Google Chrome｜ Google](https://www.google.com/intl/ja_jp/chrome/)*
*【参考】：[ Firefox ｜Mozilla ](https://www.mozilla.org/ja/)*

WebKitはApple社がMac OS標準ブラウザの「Safari」のレンダリングエンジンとして2002年に開発を始めました。**WebKitの元はUNIX系OS向けオープンソースHTMLレンダリングエンジンの「KHTML」です。**

WebKitは2005年にオープンソース化され、2008年にはGoogle社もその開発に参画し、WebKit「Google Chrome」やオープンソース版の「Chromium」のレンダリングエンジンとして採用されました。

2013年にAppleとGoogleが開発方針を巡って対立した結果、GoogleはWebKitから分岐した新しいレンダリングエンジンとして「Blink」の開発プロジェクトを立ち上げました。このBlinkはデスクトップ向けブラウザのChrome、Microsoft Edgeなどに搭載されています。

## レンダリングエンジンとWebエンジニア

Webブラウザは、Webプログラマーが開発したWebページを表現する重要なツールです。その表現にはHTMLレンダリングエンジンが使われており、Webブラウザに種類があるように、HTMLレンダリングエンジンにも種類があります。

作成したWebページは、*ブラウザの設計思想やそこに組み込まれているHTMLレンダリングエンジンによって見え方が違ったり、時にはレイアウトが崩れたりすることがあるため、注意が必要です。*

私たちが普段目にしているWebサイトはHTMLで書かれ、CSSで装飾し、体裁が整えられています。しかし、そのソース（元情報）は一般の方が見てもよく分かりません。**レンダリング（rendering ） は、特殊な言語やデータなどをインプットとして、それらの情報から画像や映像、音声などを生成することです。**

レンダリングエンジン（rendering engine）とは、レンダリングを行うソフトウェア部品のことです。レイアウトエンジン （layout engine）とも言われます。

【初心者必見】HTMLとCSSの違いは？基本知識と学習方法も解説！

### ブラウザのシェアを意識する

Webページを作成する際には、主要なブラウザに対応しなければならず、特にどのブラウザに完全対応するのかを決める必要があります。ブラウザとHTMLレンダリングエンジンはWebプログラマーにとって大切だということを常に意識しておきましょう。

ちなみに、デスクトップブラウザのシェア※は、日本ではChromeとMicrosoft Edgeだけで8割前後を占めています。スマートフォンではSafariが65%を占め、デスクトップとは真逆の状況になっています。

これから、ブラウザとHTMLレンダリングエンジンとの関係について紹介しますが、**デスクトップ向けのサイトではChromeとMicrosoft Edgeが採用したHTMLレンダリングエンジンの「Blink」を、スマホ向けサイトでは、SafariやiOS向けChromeなどが採用した「WebKit」を意識しておく必要がある**と言えます。

*【参考】：※1 [12月デスクトップブラウザシェア、日本のEdgeは世界の2倍 | マイナビニュース](https://news.mynavi.jp/techplus/article/20220106-2242636/)*
*【参考】：※1 [1月モバイルブラウザシェア、Safari増加続く | マイナビニュース](https://news.mynavi.jp/techplus/article/20220106-2242636/)*

### レンダリングエンジンの種類

Webブラウザで利用されているレンダリングエンジンにはいくつか種類があります。**代表的なレンダリングエンジンとWebブラウザとの関係を見てみましょう。**

*■ WebKit*
WebKitは、主にWebブラウザのSafarで使われています。軽快さ、スピードを特徴とするHTMLレンダリングエンジンです。Safariは、iPhoneやiPadなどのApple製品に標準で組み込まれているブラウザですが、他にiOS用で利用されるChromeやFirefoxでもWebKitが使われています。

本来、Google ChromeはBlink、FirefoxはGeckoというHTMLレンダリングを採用していますが、iOS版のChromeやFirefoxはApple社の規約に従ってWebKitを組み込んでいます。

*■ Trident*
「IE」として親しまれていたInternet Explorerで採用されていたHTMLレンダリングエンジンです。IEが廃止されたことにより、Tridentを利用する主要なブラウザはほぼ消滅し、ローカルでの利用がメインとなりました。

*■ EdgeHTML*
IEの後継ブラウザとなったMicrosoft Edge向けに、Tridentからフォーク（派生）して開発されたHTMLレンダリングエンジンです。2014年から2020年までMicrosoft Edgeで使われていました。

*■ Blink*
BlinkはGoogle社が中心に開発するHTMLレンダリングエンジンで、2013年にWebKitから分岐して開発が始まっています。同社のWebブラウザ Chromeをはじめ、様々なブラウザで利用されています。

Chromeは「Chromium」というオープンソースのブラウザ用ソフトをベースにしていますが、Microsoft Edgeも「Chromium」を採用したことで、HTMLレンダリングエンジンをBlinkに切り替えています。

*【参考】：[Opera Web Browser | Opera](https://www.opera.com/ja)*

IEサポート終了の影響は？終了の理由やEdgeのIEモードも紹介

WebKitが主にMacOSやiOSで動いているSafariなどのブラウザのHTMLレンダリングエンジンであることは理解できたと思いますが、実際にHTMLレンダリングエンジンに関する理解が進むにつれて、幾つかの疑問が湧いてきます。ここでは、*ネット上で見かけるWebKitにまつわる疑問について解説します。*

Webサイトの検証モードを確認した際に、誰もが1度は「-webkit-」という記述を目にすると思います。気になりながらも、その意味まで確認する人は少ないと思いますので、解説します。**-webkit-はCSSにおいて「ベンダープレフィックス（Vendor Prefix）」と呼ばれるもので、レンタリングエンジンに対応しています。**

ブラウザの開発に関わっているプログラマーの方を除いて、WebプログラマーはWebKitの使い方まで覚える必要はありませんが、ベンダープレフィックスは覚えておいた方がよいでしょう。

### ベンダープレフィックスとは

**ベンダープレフィックスはCSSのプロパティの拡張機能を各ブラウザに実装するための識別子です。**

まだブラウザで標準になっていない、非標準のCSSプロパティに-webkitのような「ベンダープレフィックス」をつけることで、新たな機能が利用できるようになる仕組みです。

CSSには、「-webKit-transition:」というように記述します。たとえば、要素を回転させて表示する「Tranform」プロパティにベンダープレフィックスを付ける場合は、

div {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

ちなみに、Internet Explorerのベンダープレフィックスは-ms-でしたが、今は使われていません。また、デスクトップ版のChromeやEdgeが採用しているHTMLレンダリングエンジンのBlinkでは、ベンダープレフィックスはSafariと同じ-webkit-です。

これはBlinkがWebKitから派生しているため、-webkit-で問題がないからです。こうしたことにより、ベンダープレフィックスを意識するのは、-webkit-とFirefoxの-moz-の2種類だけになりました。この結果、ベンダープレフィクスを意識する必要性が薄れてきています。

SafariなどHTMLレンダリングエンジンにWebKitを使用しているブラウザでは、稀に“WebKit Encountered an Internal Error” といった内部エラーが表示されることがあります。これはWebKitが出しているエラーメッセージです。

主な対処法としては、**エラーが表示された端末を再起動する、あるいはOSを最新のビルドに更新することです。**大抵の場合はこの2つの方法で改善できます。

## レンダリングエンジンに明るいエンジニアを

ここでは、HTMLレンダリングエンジンの1つ、WebKitをテーマに、Webブラウザの種類、HTMLレンダリングの種類について紹介しました。

Webプログラマーが「HTMLレンダリングエンジン」に直接関わる機会は非常に少ないと思いますが、私たちが開発したサイトが正しく表示され、ユーザの目を惹いているのは「HTMLレンダリングエンジン」のおかげです。**Webエンジニアは「HTMLレンダリングエンジン」についてしっかり把握しておきましょう。**

WebKitは、Apple社開発のオープンソースの「HTMLレンダリングエンジン」の名称で、同社のブラウザSafariで使われています。一方、ChromeにはHTMLレンダリングエンジンとしてBlinkが使われており、Webエンジニアはその違いを理解しておくことが求められます。

WebKitとは、Apple社が開発するオープンソースの「HTMLレンダリングエンジン」の名称

主要なHTMLレンダリングエンジンにはSafariで使われるWebKitとChromeのBlinkがある

ベンダープレフィックスはCSSのプロパティ拡張機能を各ブラウザに実装するための識別子

WebKitとは？HTMLレンダリングエンジンの役割や特徴を解説！

近年のWebサイトになくてはならない機能、それらを提供するのがJavascriptです。言語としての人気も高く、需要も高いことから学んでみたいと考えるエンジニアの方も多いのではないでしょうか。本記事では、**JavaScriptの独学を考えている方に向けて、学習のポイントを解説していくとともに、効率的に学習するための具体的な方法を紹介していきます**。

## 学習のポイントはロードマップ、費用を抑える学習方法も活用しよう

結論から言うと、JavaScriptの独学に際して学習のポイントとなるのは、ロードマップの策定と言えるでしょう。**他のプログラミング言語と同じく、JavaScriptがどのように使われているかを想定し、それを使って何ができるかが非常に重要です**。

JavaScriptの場合には、主にWebサイトやWebアプリの開発に使われており、それらを作成できるようになることが1つのゴールになるとも言えます。

ロードマップの策定はそのゴールに向けた学習計画を作成することと同じであるため、独学において重要なプロセスとなります。また、その独学での学習方法として、*従来的な書籍の活用だけでなく、学習サイトや学習アプリの活用も費用を抑える点で、おすすめすることができると言えるでしょう*。

JavaScriptとは？人気のJavaScriptを5分で学ぶ

学習のロードマップを紹介していく前にJavaScript自体を学ぶメリットについておさらいしておきましょう。

JavaScriptを学ぶ大きなメリットとして、様々なWeb開発を行える点があります。Webページに便利な機能を実装し、*サイトの付加価値を高めるフロントエンド開発を行えるだけでなく、サーバーサイドの処理を実行するバックエンド開発も行えます*。JavaScriptはこうしたWeb開発の中核を担うことができる言語となっています。

フロントエンドエンジニアとバックエンドエンジニアを詳しく解説！

JavaScriptはWebベースの言語であるため、HTMLやCSSと同様に特定の開発環境を構築する必要がありません。*極端なことを言えば、テキストエディタとブラウザさえあれば、開発ができてしまいます*。こうした学習コストの低さは新規参入を非常に容易にしています。

HTML・CSSとは何か？使い方やできること、独学方法を解説！

JavaScript自体の大きなメリットに、エンジニア市場においてまだまだ需要が高いということがあります。Web開発自体の需要がこれからも伸びていくという状況では、*JavaScriptを学ぶことで職業選択の自由度を広げることもできるでしょう*。ライブラリやフレームワークも毎年更新され、新しく生まれてもいます。

前述の通り学習のポイントはロードマップの策定です。ここでは、最終的にJavaScriptによるWeb開発ができるようになるためのロードマップについて、簡潔に紹介していきます。

まず大前提としてJavaScriptを学ぶ前にHTMLとCSSを学ばなければなりません。というのも、*Web開発の基礎であるWebページの作成はそれらの言語の上に成り立っており、JavaScriptだけができても役に立たないからです*。HTMLやCSSを全てマスターする必要はなく、シンプルなWebページを作れるくらいまでの知識と実力はつけておきましょう。

HTML/CSSを費用をかけずに学べるおすすめの入門書15選！

土台となる言語を習得したら、いよいよJavaScript自体の文法を学んでいきます。名前が似ていますがJavaとは文法も実行環境も全てが異なるので先入観を持たないよう注意しましょう。*前述したHTMLやCSSを学んでおけば、設計したコードの動作確認をスムーズに行える点で経験は活きてきます*。

JavaScriptとJavaの違いは？質問されたときの説明方法

### ライブラリやフレームワークを学ぶ

JavaScriptは歴史が古く、広く普及しているため、汎用的なものから専門的なものまでライブラリやフレームワークが充実しています。例えば、簡易的にJavaScript特有の機能を実装できるjQueryというライブラリは、2006年のリリース以降普及を続け、今ではあらゆるWebサイトで使用されるまでになりました。

*こうしたライブラリを使いこなすことはJavaScriptで仕事をしていくにあたり必須とも言えるでしょう*。

フレームワークの例に関しては、Googleが開発したAngularJSがあります。*ライブラリやフレームワークを学ぶには、実際に使ってみるのが1番であり、その内部でどのように動いているかも確認していくことがポイントです*。

フレームワークとは？プログラミング言語ごとに代表的なものを解説

jQueryとは？特徴・できること・導入方法・使い方を解説！

JavaScriptの学習の成果を試すのにうってつけなのがWebサイト作成です。今まで学んだことを活かし、JavaScriptならではの機能が実装されたWebサイトを作ってみましょう。

デザイナーではなく、あくまでエンジニアを目指すのであれば、*サイトそのもののデザインはテンプレートを活用し、様々なサイトで使われている機能や動きを実装できるかチャレンジしてみましょう*。アニメーション手段の複雑なサイトを自分で作れるようになれば、かなりの実力を付けられたと言えますし、ポートフォリオとしても活用できます。

上記のようにJavaScriptの学習ロードマップを紹介していきました。では具体的にどのように勉強していけばよいのでしょうか。いくつかおすすめの方法を紹介していきます。

最も一般的ですが、書籍を活用する方法は手堅く知識を身に付けたい方にとっておすすめできます。

*書籍はボリュームが多く、学び切るまで時間がかかるものが多いのですが、網羅的に必要な知識がまとまっており、確実に知識や実力を身に付けることができます*。入門向けの分かりやすいものから上級者向けのテクニックが書かれているものまで幅広くあります。

以下に代表的なおすすめ書籍を紹介します。

**・これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん**

この書籍はJavaScriptだけでなく前提となるHTMLとCSSも学ぶことができるのでWeb開発の入門者にぴったりです。

▪著者：たにぐちまこと
▪ページ数：320ページ
▪出版社：マイナビ出版
▪発売日：2017/3/27

【参考】：[これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん](https://book.mynavi.jp/ec/products/detail/id=65861)

**・確かな力が身につくJavaScript「超」入門 第2版**

この書籍はJavaScriptのサンプルを一つ一つ作っていくことで実力を身に付けることができます。

▪著者：狩野 祐東
▪ページ数：336ページ
▪出版社：SBクリエイティブ
▪発売日：2019/9/21

【参考】：[確かな力が身につくJavaScript「超」入門 第2版](https://www.sbcr.jp/product/4815601577/)

JavaScriptの本おすすめ15選！選び方や勉強方法は？

インターネット上に公開されている学習サイトは手軽にコストをかけずに学習したい方にとっておすすめできます。

プログラミングは単に知識を身に付けただけではできるようにはならず、実際にコードを書いていかなければ実力は身に付きません。*いくつかの学習サイトは、環境構築をすることなくコードの記述からその動作確認までを行えるため、非常に手軽に練習ができ、実力も身に付けることができます*。

代表的な学習サイトには「Progate」や「paizaラーニング」があり、これらのサイトでは実際にコードを記述しながら学習を進めることが可能です。

【参考】：[Progate](https://prog-8.com/)

【参考】：[paizaラーニング](https://paiza.jp/works)

もっと手軽に学習をしたいという方には学習アプリがおすすめです。

*学習アプリはその名の通りスマートフォン上でプログラミング学習を行えるアプリであり、電車などの移動時間やスキマ時間でも学習を進めることができる点が特徴です*。動画を見る形式だけでなく実際にコードを記述することができるアプリもあるので、ちょっとした時間でもそれなりの学習を行うことができるでしょう。

学習アプリの例としては、動画で学べる「Udemy」やコードを記述できる「JavaScript Anywhere JSAnywhere」などがあります。

【参考】：[Udemy Online Video Courses](https://apps.apple.com/us/app/udemy-online-video-courses/id562413829)

【参考】：[JavaScript Anywhere JSAnywhere](https://apps.apple.com/jp/app/javascript-anywhere-jsanywhere/id363452277)

本記事ではJavaScriptを学ぶにあたって重要なロードマップとおすすめの学習方法を紹介してきました。**ロードマップを決め、それに向かって学習を進めればプログラミング技術を習得することもできることでしょう**。しかし、技術を身につけた後は何をすればよいでしょうか。

次に待っているのはキャリアの選択であり、身に付けた技術でどのような企業で働きたいかを考えていくことになるでしょう。ただ、自分の実力とやりたいことが合う企業を探していくことは数々の転職サイトを使っても難しいものです。

そこでぜひご活用いただきたいのが[マイナビIT エージェント](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv07)です。 

マイナビITエージェント【公式】IT・Webエンジニアの求人・転職エージェント

マイナビIT エージェントは、IT・Webエンジニア向けの無料の転職⽀援サービスです。

IT・Webエンジニアの転職事情に詳しいキャリアアドバイザーが、あなたのご経験やスキルをお伺いし、転職活動のプランをご提案致します。

アドバイザーは企業側の人事担当者と直接連携を取れますので、求人票に載っていない企業情報も確認することができます。残業時間や給与面など、働き方などをしっかり確認の上で応募企業を選んでいくのが良いでしょう。


・資格やプログラミングの勉強をしているけれど、企業が求めるレベルに達しているのかわからない
・スキルアップをして市場価値を上げていける企業の選び方を知りたい
・数多くあるITエンジニアの職種の中で、自分に向いている仕事は何か知りたい

こうした悩みを抱えていらっしゃる方は、まずは無料登録でキャリアカウンセリングをおすすめ致します。

<center>[あなたに合った企業選びをサポート致します。<br/>エンジニア転職のご相談はぜひ<br/>*『マイナビIT エージェント』*へ！](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv07)</center>

JavaScriptはWeb開発において幅広く使われている言語であり、サイトに動きを付けたり、機能を実装するのになくてはならない存在です。本記事ではJavaScriptを独学するにあたっての学習のポイントや学習方法を紹介していきます。

JavaScriptの学習のポイントは何ができるようになるかのロードマップを策定すること

JavaScriptはWeb開発においてまだまだ需要があり、学習のメリットはある

JavaScriptの学習方法として書籍だけでなく学習サイトや学習アプリの活用もおすすめできる

【JavaScript学習ロードマップ】勉強する上で重要なポイントも紹介

Webプログラミングを学びはじめると、HTMLの次にCSS（シーエスエス）を学ぶというのが一般的です。CSSは（Cascading Style Sheets）の略語で、Webページの文字の色、大きさ、配置、背景などの見た目（スタイル）を指定するための言語です。

その**CSSをさらに高機能にした拡張メタ言語がSCSSです。簡単に言えば、CSSをより効率的に書くことができる言語といって良いでしょう。**SCSSはSass（サス）というCSSの拡張言語の1つの記法です。**　

この記事ではSCSS（Sass）とは何か？SCSSの基本、SCSSのメリットやデメリットなどについて解説をしていきます。CSSを習得した方であれば、SCSSは簡単に使えますので、ぜひこの機会にSCSSについて理解を深めてください。

CSSでできることとは？メリットや勉強方法についても解説！

SCSSはSassの1つの記法だと紹介しました。ではSassとは何でしょうか?Sassはサス、またはサースと発音し、CSSを拡張してより書きやすく、より見やすくした「スタイルシート」のことです。Sassは、これまでのCSSに不満を感じていたデザイナーやWebプログラマーのために生まれたスタイルシートと言ってよいでしょう。

**Sassは人気プログラミング言語のRubyで実装されたオープンソースのスタイルシート言語で、2006年に登場しています。**Sassは「Syntactically Awesome StyleSheet」の略語で、ハンプトン・キャトリン氏が設計を担当し、ネイサン・ワイゼンバウム氏が開発をしました。

SassはCSSのメタ言語です。メタ言語とは、言葉を定義する、あるいは言語に関する情報を記述するための言語のことです。

SCSSはSassの1記法で、もう一つの記法はSASSです。Sassの2種類の記法について説明をしておきましょう。

*■ SCSS記法*
SCSSはCSSと書き方がよく似ています。SCSSではCSSのようにネスト（入れ子）を使用しますので、CSSを利用している人であれば、直感的に書けますので、Sassの記法の中ではSCSSが一般的に使われています。SCSSで書いたファイルは拡張子が、「.scss」となっています。

*■ SASS記法*
SASS記法はSCSSよりも簡略化されている点が特徴です。たとえば、セミコロンや波カッコを使いません。コードがSCSSよりも簡略化された記法のため、書く時の負担がより少ない点がメリットです。SASS記法で書かれたファイルの拡張子は「.sass」です。
*【参考】：[Sass: Syntactically Awesome Style Sheets](https://sass-lang.com/)*

### SCSS（Sass）を学ぶのにおすすめの参考書

SCSS(Sass)に興味が湧き、学んでみたいという方は以下の参考書をおすすめします。Webエンジニアを目指す方、初心者の方向けに書かれた参考書で、分かりやすいのが特徴です。

*■ Web制作者のためのSassの教科書 改訂2版*
▪著者：平澤 隆（Latele）/森田 壮
▪ページ数：296ページ
▪出版社：インプレス
▪発売：2017年
*【参考】：[Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ](https://book.impress.co.jp/books/1117101020)*

**SCSS(Sass)を利用することで得られるメリットを見ていきましょう。**こうしたメリットが広く知られることで、WebエンジニアでSCSSを利用する人が大変多くなっています。

セレクターやプロパティのネストを利用して**全体的な記述量を減らせます。**また一度定義したスタイルのセットを呼び出せたり、記述済みの複雑なコードを再利用できたりするなど、作業の効率化を図れます。

SCSSでは変数や四則演算、関数などが使えるので、それらの**値を書き換えるだけで、修正や使いまわしができるため、メンテナンス性が向上します。**

### コーディングの正確性が上がる

SCSSを用いることで、記述量が減り、またコードの再利用がしやすくなるため、人為的なミス、バグが減り、**コーディングの精度が上がります。**

SCSSをはじめ、Sassの利用には前記のようなメリットがある反面、デメリットもあります。以下、**SCSS（Sass）のデメリットと併せてデメリットの軽減、回避方法について解説していきます。**

### 環境構築やコンパイルが必要

Sassで作成したSCSS形式のファイルはそのままではWebブラウザは認識できません。そのため、**CSSに変換するためのコンパイル作業が必要となり、コンパイルを行える環境の構築が必要です。**

その環境構築には様々な方法がありますが、それらを調べ、必要なツールをインストールし、操作を覚えるというハードルがあります。

ただし、WebサービスでSCSSをCSSに変換してくれるサービスである「SassMeister」を利用したり、コンパイルツールを活用したり、ハードルを下げる方法もありますので、大きなデメリットではなくなってきています。

【参考】：[SassMeister](https://www.sassmeister.com/)

SCSS（Sass）を利用するWebエンジニアは過半数に達していると言われていますが、まだ標準言語とはなっていません。クライアントがSassを導入していなければ、メンテナンス作業を依頼された場合にはCSSを直接編集していくことになり、SCSSのメリットを享受することができなくなります。

こうした問題はどこでも起こりがちですが、クライアントの理解と協力を得ることで解決が可能です。**SCSS（Sass）を使ってメリットを実感したエンジニアは、その普及を進めることでさらに大きなメリットが得られるという認識を持つことが必要です。**

では実際にSassを実際に使ってみましょう。**Windows環境でRubyをインストールした後にSassをインストールする方法について紹介していきます。**Sass自体の編集に使う「エディタ」は普段利用しているもので構いませんが、新たにインストールする場合は「VSCode」をおすすめします。

*【参考】：[Download Visual Studio Code - Mac, Linux, Windows](https://code.visualstudio.com/download)*

**Sassはプログラミング言語「Ruby」で実装されていることもあり、Sassの開発環境構築にはRubyを使うのが一般的です。**以下のサイトにアクセスし、Rubyのインストーラーを利用してRubyをインストールします。［ダウンロード］ボタンをクリックしてダウンロードのページに移動し、『WITHOUT DEVKIT』にある最新バージョンをダウンロードします。Windows10、11の方は『Ruby 3.1.2-1 (x64)』を選択しましょう。 

インストーラーが起動したら、同意画面で同意をし、［NEXT］ボタンでそのままインストールを進めていきます。インストーラーの最終画面で［Finish］ボタンを押す前に、チェックボックスのチェックを外しておきます。

チェックしたままでも構いませんが、チェックが入っているとUNIX互換環境構築のソフトがインストールされます。インストールが完了したら、コマンドプロンプトで

と入力すると、Rubyのバージョンが表示されます。
*【参考】：[RubyInstaller for Windows](https://rubyinstaller.org/)*

Rubyとは何か？Rubyの特徴やできることについて解説

Rubyのインストールが完了したら、続いてSassをインストールします。**コマンドプロンブトで「gem install sass」と入力するだけでインストールが行われます。**

インストールが済んだらコマンドプロンプトで

言語・開発の記事（83ページ目）