【CSS】CSSのフレームワークとテストについて

前回の記事ではフレームワークについてご紹介させていただきました。

今回はCSSのフレームワークとプログラミングをする上で非常に重要なテストについて書きます。

CSSにもフレームワークがあります。

CSSのフレームワークを使う時は注意が必要です。

なぜなら、CSSの場合一度フレームワークを使用してしまうと既に決まっている型なので特徴がないという事と、フレームワークを一度使用してしまうとデザインを変えるのが非常に大変です。

CSSのフレームワークをそもそも使うのか使わないのか、この二択になりますのでそこだけははっきりしてからフレームワークを使いましょう。

「Bootstrap」で一度検索してみてください。

次はテストです。

前回の記事でも触れましたが、プログラムには必ずバグがあるものです。

そのバグが起きないようにするのがテストです。

例えば、料理をした後に味見をしないで料理を提供してしまったら、場合によっては大変なことになりますよね。

プログラムも一緒です。

コードを書いたら必ずテストをしてください。

テストには2種類あります。

単体テストと結合テストがあります。

単体テストは名前の通り小さい単位のテストです。

料理で例えるなら、料理の炒める部分だけを抜粋して焼き加減をみるといったようにその一部分だけをテストします。

結合テストは、その逆で色々なプログラム同士を結合させて1つの大きなプログラムにしてテストを行うというものです。

フロントエンドで使われるテストツール1に「Jest」というものがあります。

ググってどういうものかを実際に調べてみてください。

また、テストの他にもそもそもバグを生み出しにくいプログラムもあります。

「Type Script」というものがあります。

これを使うことでバグを生み出しにくいプログラムを書くことできて、Javaでの変換も非常に安全にできます。

以上がCSSのフレームワークとテストについてでした。

これに加えて知っておくと便利な用語を少しご紹介したいと思います。

それは「PWA」「AMP」「モバイルアプリケーション」「デスクトップアプリケーション」「Firebase Hosting」です。

PWA(Progressive Web Apps)とはWebページから通知を受け取ったり、ダウンロードしないと使えないような動きをWebページで表現する技術です。

AMP(Acclerated Mobile Pages)とは読み込みの速いWebページです。

人は読み込みに3秒以上かかると半分の人が離脱してしまいます。

しかし、AMPの場合は具Googleに高速で見つけもらえるので、読み込みが早いです。

さらにAMP対応のページはGoogleに優遇されています。

次は「モバイルアプリケーション」について書きます。

モバイルアプリを作ろうとすると、従来はHTMLやCSSやJavaScriptとは別のプログラムで書かなければいけませんでした。

しかし、このモバイルアプリケーションはHTMLやJavaScriptでアプリを作りましょう。といったことが可能なものなのです。

詳しいことはハイブリッドアプリで検索すると出てきます。

このモバイルアプリケーションを使う時に絶対必要になるツールがあります。

今回は代表的な3つのツールをご紹介します。

lonic・Flutter・ReactNative この3つです。

この3つはそれぞれ特徴がありますので調べて理解を深めていってください。

次にデスクトップアプリケーションを紹介します。

デスクトップアプリケーションはデスクトップ用のアプリがJavaやHTMLで作れるものです。

Electronを調べてみてください。

より理解を深めることができます。

最後にFirebase Hostingをご紹介します。

Firebase Hostingはドメインの紐付けが簡単であり簡単に公開することができます。

まとめると、CSSフレームワークは使うか使わないかをまずは選ぶこと。

次にテストができない人はプログラミングが本当に出来ない人です。

絶対に自分が書いたコードはテストしましょう。

また、これ以外の単語はきちんと1つ1つ調べて理解を深めておきましょう。