ライブラリとは、汎用的に使える機能を「部品」にして、再利用可能にしたものをいくつかまとめてセットにしたファイルのことです。そのセット全てを必ず使うというものではなく、そのライブラリの中から必要なものだけ引っ張り出して使うことができます。
フレームワークとは、アプリケーションの「骨組み」を意味します。型が決まっているため、構造に沿ってプログラミングすることができ、作業量や時間を削減することができます。
今回はライブラリとフレームワークを、一つずつ紹介します。
ライブラリの紹介
JQuery
JQueryとは表示されているページをより使いやすくするために用いるJavaScriptのライブラリの一つです。
以下のコードをHTMLの<head>タグ内に記載することでJQueryを使うことができます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
// バージョン部は適宜変更する基本構文
$(function(){
$(セレクタ).メソッド()
});$(function(){
$(".test").css("color","red")
});上記例を参考にしますと、testクラスの要素に対してcssメソッドを適応させ、色を変えるための関数になります。JQueryのメソッドはたくさんありますので、全てを覚える必要はありません。下記、リンクより一度目を通し、実装する際に必要に応じてメソッドの挙動を確認し覚えていきましょう。
フレームワークの紹介
Bootstrap
BootstrapとはWEB画面を作るときに便利なCSSフレームワークの一つです。Bootstrapを使うと、簡単におしゃれでスマホ対応済み(レスポンシブ)の画面を作ることができます。
以下のコードをHTML内に記載するだけでCSSを用いずにBootstrapにてレイアウトを作成することができるようになります。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
// バージョン部は適宜変更する。また、グリッドシステムという、画面を12分割した数字を入れるだけで、簡単に画面の幅を指定することができる仕組みをデフォルトで備えております。col-XX(数値)という形を取ることで横幅全体を12とした際の比率にて幅を指定することができます。また、col-〇〇-XX(数値)という形で〇〇にデバイスごとのブレイクポイントを指定することもできます。
Bootstrapのクラスについてエンジニアからのアドバイス
ライブラリやフレームワークを利用するメリットとして、コードの記述量が減るだけでなく、プログラムの生産性向上や品質向上など多くの恩恵がございますので、できる限り活用していきましょう。