テーマ別研修

CSS設計・Sass研修【コンポーネント設計を身につける】

Sassの基礎的な技術の理解、実践を通してコンポーネント設計の考え方を身につける

本研修では、Sassの基礎的なコードを学んで実際に書くことで、CSSで重要な考えであるコンポーネント設計を、フロントエンド開発に携わるエンジニアが身につけていきます。宣言型スタイル言語であるCSSは他言語に比べて設計手法が定着していません。Sassでの開発を通してより良い設計手法に基づいた開発のできるエンジニアを育成します。

リカレント研修の3つの特徴

研修準備フルサポートで良質な研修を

研修日の運用のみではなく、研修準備のサポートも受けることができます。例えば、研修で使う教材・備品は一式郵送で手元に届きます。そのため、研修の準備時間を減らしながらも良質な研修が実施できます。

明瞭価格で10秒見積り

「もっと研修を」をコンセプトとしたリカレントでは、研修がしやすい環境づくりのために一社研修であっても明瞭価格で研修ができるようにしています。

オンラインLIVE研修無料対応

研修は集合型でも、オンラインLIVE研修でも、集合型をメインとして一部オンラインLIVE配信でも、どのような形態でも対応できるようになっています。研修形態もお気軽にご相談ください。

研修コード:100355

CSS設計・Sass研修とは?

SassとはCSSにプログラミング言語の機能を与え、簡潔な記法・分割したファイルの管理を可能にするものです。

宣言型スタイル言語であるCSSは他のプログラミング言語のようなオブジェクト指向やカプセル化などが存在しません。そのためコードが重複したり指定した範囲以上に影響がでたりと管理が難しく、メンテナンス性も低下します。

そんなCSSの弱点を補うために様々な設計手法が生まれています。その中でも重要なのがコンポーネント設計です。コンポーネント設計とはそれぞれを独立した部品とみなす考え方です。

Sassを利用することでコンポーネント設計をより実現しやすくなります。

※ 4名以下の少人数であれば「【公開講座】CSS設計・Sass研修」も便利にご利用いただけます。

本研修の狙い

SassはCSSのプリプロセッサーの中でも広く普及しています。現場で使えるSass開発を学び正しい設計を意識して開発できるエンジニアを育成します。

本研修の対象

基本的な研修対象は以下のとおりです。研修によって調整できるため、まずはお問い合わせください。

フロントエンジニア、CSSを書く機会のあるエンジニア

本研修を実施すると

  1. Sassの基礎を学習して、正しい記法で見やすいコードを書けるようになる
  2. CSSとの違いを体験して、Sassを学ぶメリットを実感できるようになる
  3. Webpackの基本操作を身につけて、Sassの実践的な使い方ができるようになる

研修概要

本研修では、Sassの基礎を学びながらその都度実際にコードを書くことで即戦力の技術を習得するのはもちろん、同じテーマへの複数のアプローチを知ることでその後の応用学習にも対応できる知識を身につけます。
また各々がただ自由に書くのではなく、決められた設計手法に従って開発を行うことで、Sassに限らずCSS関連の技術で共通して重要な設計手法の考え方を養うことができます。
ワークでは、反面教師としてバッドプラクティスを学ぶ「このコードのどこが問題か」や、Sassの記法と設計手法を同時に学べる「それぞれの設計手法にそって開発」を取り入れることで、即実務で使用することができます。
設計手法の考え方を理解し、正しいコードが書けるように集中的にトレーニングします。

3つの特徴

基本的なSass開発ができるようになり、応用力のある知識を身につける

Sassの書き方を学ぶだけでは、単にその場しのぎの技術になりかねません。同じ結果でもそこに至るアプローチは複数あり、その中のバッドプラクティスも知ることで正しいコードを本質から理解できその後の応用に繋がります。

設計手法の本質を理解し、あらゆる現場で広く使える考え方を養う

先人たちが試行錯誤を経て作り上げた設計手法はそれぞれに優れた点がありますが、すべてに使用できる万能な設計手法はありません。したがって自分に必要な手法を適宜使い分ける必要があります。そのためには本質の理解が欠かせません。

他のエンジニアが見ても分かりやすいコードが書ける

正しい設計手法に則ったコードを書いていけば、担当者が変わっても引き継ぎやすく拡張・メンテナンスが容易になります。

想定研修時間

6時間 (変更が可能です)

研修カリキュラム

下記、研修カリキュラムを元に、他研修を組み合わせてのアレンジにも対応しています。別途料金はかかりませんのでご安心ください。

1. CSS設計の問題点とその対処 【ゴール】CSS設計で何が問題となるのか、それにどう対処するのかを学ぶ
  • CSSの基本
  • CSSの問題点
  • CSSの破綻例
  • CSSセレクタの基本
  • セレクタの正しい使い方
  • ワーク:「このコードのどこが問題か」(例示されたコードの問題点を考える)
2. コンポーネント設計の重要性と注意点 【ゴール】CSSの問題点を解消するコンポーネント設計の考え方を学ぶ
  • コンポーネントとは
  • コンポーネント設計の利点
  • コンポーネント設計の様々なアイデア(OOCSS、SMACSS、BEM、MCSS)
  • Rule of three (早まった最適化はしない)
  • 開放/閉鎖の原則
  • 過剰な再利用はしない
  • 単一責任の原則
3. Sassの基本 【ゴール】Sassの記法を学ぶ
  • 変数、@mixins
  • ネスティング
  • 部分テンプレート、@import
  • Extend
  • 演算
  • ワーク:「CSSをSassで書き換える」(用意されたCSSコードをSassで書き直すことでSassの記法と利便性を学ぶ)
4. Sassでコンポーネント設計 【ゴール】代表的なコンポーネント設計をSassで実現
  • OOCSS、SMACSS、BEM、MCSSそれぞれの設計をSassで実現することで学ぶ
  • ワーク:「それぞれの設計手法にそって開発」
  • (それぞれの設計手法に基づいた課題を与え、Sassを使って開発)
5. webpackを学ぶ 【ゴール】モジュールバンドラを学ぶ
  • モジュールバンドラを学ぶ
  • webpackとは
  • webpackの様々な機能
  • ワーク:「webpackを使ってみる」(作ったSassファイルを使ってwebpackの機能を学ぶ)

研修金額

アレンジ無料の明瞭価格で一社研修を実施することができます。研修時間と概算人数の情報のみで見積りをすぐにお送りします。

参加者の必須条件

特になし

リカレントの研修は様々な企業様にご利用頂いています

研修実績

研修のお問い合わせはこちら

リカレントのサービスに関する
お見積もり、お問い合わせはこちらから

お電話はこちら

0120-80-9217

0120-80-9217

受付時間:平日9:30-21:30/土日祝9:30-18:30

お問い合わせ
お問い合わせ
0120-80-9217 メールでのお問い合わせ