Bootstrap

この記事はBootstrapについて解説した記事です。会話形式のやさしい文章で「Bootstrap」の用語のイメージを紹介した後に、採用に役立つBootstrapの知識を解説しています。

1分で分かる!Bootstrapとは?

ジャバード先生!いきなりだけどさ、Webサイトとかスマートフォンアプリのデザインって難しいの?

なかなか難しい質問だね。でも、急にどうしたの?

まえに「きつねの本屋さん」っていうECサイトを運営しているきつねさんのお話ししたこと覚えている?

たしかアプリのUI/UXがあまり良くなくて炎上してたよね?

※ 部リンク:UI/UX

あ、そうそう!そのきつねさんなんだけど、全面的にWebサイトやスマートフォンアプリのデザインを見直すことにしたんだって!

そうなんだね!うまくいくといいね!

でもね、Webサイト用のデザインとスマートフォンアプリ用のデザインを別々に作っているらしいんだ。しょうがないとは思うんだけど、時間もお金もかかっちゃうし、片方を修正したら、もう片方も修正しないといけないってのも修正漏れが発生しそうだって悩んでてさ。

たしかにそうだね。

もっと効率的にデザインをつくる方法はないのかな?

Bootstrap (ブートストラップ)を使えばいいんじゃないかな?

Bootstrap??なにそれ??

BootstrapはフロントエンドフレームワークとかCSSフレームワークってよばれるものだよ。

Bootstrapを使うとどうなるの?

簡単にいうと、Bootstrapっていうのは画面のデザインを簡単にしてくれるものなんだ。画面のデザインによく使うものが、あらかじめフレームワークとして作られているから、それを使ってサクサクと画面を作れちゃうイメージかな。

あぁ、なんか便利そうだね!でも、Bootstrapを使ってもWebサイトとスマートフォンアプリ用のデザインを別々で作らないといけないことには変わらないんじゃないのかな?

いや、そんなことはないよ。BootstrapはレスポンシブWebデザインに対応しているんだ。

レスポンシブ??Webデザイン??

そうそう。レスポンシブWebデザインっていうのは、Webサイトを表示するデバイスにあわせて、自動的に最適な表示になる仕組みのことだよ。

うーん。わかったようなわからないような…。

簡単にいうと、あくまでも「画面サイズ」を基準として表示内容を調整するから「PC用のデザイン」と「スマートフォン用のデザイン」を分けて作る必要がなくなるんだ。

あ、それはきつねさんが喜びそうだね!

そのほかにも、CSSの書き方を統一できるっていうメリットもあるよ!CSSって書く人によって、かなり差がでるんだけどBootstrapなどのフレームワークを使うと、固定の書き方になるから、メンテナンス性がアップするんだよ!

それもきつねさん喜びそうだね!じゃあ、きつねさんにはBootstrapってやつをおすすめしてみるよ!

はーい!いってらっしゃい!

Bootstrapとは?採用に役立つ基礎知識

Bootstrapは、Webアプリケーションのフロントエンドを開発するためのフレームワークです。人によっては、CSSフレームワークと表現することもあります。Bootstrapを開発したのは、Twitter社のエンジニアやデザイナーでしたが、現在ではオープンソースとして公開されています。

Bootstrapを利用することで、CSSに統一性 (エンジニアによってバラバラとなるCSSの実装を統一化できる)をもたらしたり、レスポンシブWebデザイン(ユーザーの画面サイズやデバイスが何であれ問題なく表示される)に対応した画面を作ることができるなど、さまざまな恩恵を受けることができます。

フロントエンドフレームワークは新しいものが次々に登場しており、Bootstrapは比較的古い部類に入りますが、現在もなお高い人気を集めています。

Bootstrapを使うエンジニア

Bootstrapを使うエンジニアとして挙げられるのは、フロントエンドエンジニアです。フロントエンドエンジニアは、さまざまなフロントエンドフレームワークを使用します。その中でも、Bootstrapは抑えておきたいフレームワークの1つです。

Bootstrapを使うエンジニアの特徴と在籍業界

Bootstrapは、フロントエンドエンジニアにとっては、ポピュラーなフレームワークです。そのため、Bootstrapを使うエンジニアに共通した特徴はありません。

在籍業界としては、Web業界を中心にWebアプリケーションのフロントエンドを開発する企業に多く在籍しています。フロントエンドフレームワークの中でも人気があるため、マスターしているエンジニアも多いのが特徴です。

採用する時に知っておくとよいこと

Bootstrapは人気No.1

前述したように、CSSフレームワークにはさまざまなものが存在しています。その中でもBootstrapは、2位以下を大きく引き離して「最も使用されているCSSフレームワーク」の座を獲得しています。

引用:State of CSS 2020

ちなみに、Bootstrapと同じようなCSSフレームワークとしては以下のようなものがあります。

求人のポイント

求人を作成する時は、下記の内容を求人に入れるとよいです。

1システム(サービス)の詳細
※特にそのシステム(サービス)をなぜ作っているのかを熱量をもって記載する。
2開発環境
3現在のエンジニア組織の体制
4現行システムの課題と募集の背景
5求められる業務と期待値
6エンジニアとしてのスキルアップ支援制度の有無と詳細
7エンジニアチーム内での相互成長のための仕組み(勉強会やLT会など)の有無と詳細
8選考フロー
9待遇
10キャリアパス

Bootstrapの豆知識

Bootstrap関連の資格

前述したように、Bootstrapはフロントエンドフレームワークです。フロントエンドに関する資格としては以下のようなものがあります。

HTML5プロフェッショナル認定

HTML5プロフェッショナル認定は、LPI-Japanが主催している資格試験であり、HTML5、CSS3、JavaScriptなどに関するスキルや知識を問われます。この資格は、レベル1とレベル2という2つの試験で構成されています。

参考:HTML5プロフェッショナル認定

ウェブデザイン技能検定

ウェブデザイン技能検定は、ウェブデザインに関する知識や技能、実務能力などを問う検定試験です。この資格は厚生労働省の指定を受けて、インターネットスキル認定普及協会という団体が主催している国家資格です。

ウェブデザイン技能検定は1級から3級に分かれており、合格時にはウェブデザイン技能士の証書を受け取ることができます。

参考:特定非営利活動法人 インターネットスキル認定普及協会

Bootstrap関連のイベント 

Bootstrapに関連するイベントとしては以下のようなものがあります。

フロントエンドカンファレンス

フロントエンドカンファレンスは、HTML、CSS、JavaScriptなどのフロントエンドに特化したカンファレンスです。このカンファレンスは、全国に存在するコミュニティが、それぞれの地域で開催しています。

参考:フロントエンドカンファレンス福岡2019 フロントエンドカンファレンス沖縄

 

関連記事

  1. Flux

  2. JSON

  3. SQL

    SQL

  4. Django

  5. ShellScript

  6. ruby

    Ruby