Tachyonsとは可能な限り少ないCSSでWebサイトを構築するためのユーティリティファーストのCSSフレームワークです。CSSを一切記述せずとも新しいUIをすばやく構築・デザインすることができます。この記事ではTachyonsを理解するために初心者でも分かる概要、特徴などの基礎知識について簡単に解説をしていきます。
Tachyonsとは可能な限り少ないCSSでWebサイトを構築するためのユーティリティファーストのCSSフレームワークです。モバイル優先で設計されていることから高速な読み込みで完全なレスポンシブとなっており、ユーザーがコンテンツを簡単に読めるように考慮されています。特徴として「マイクロフレームワーク」「カスタマイズと拡張が簡単」「豊富なコンポーネント」などが挙げられます。Webサイトがデバイス問わず高いパフォーマンスを維持するために一躍をになっております。
CSSとはWebページの見た目・デザインを調整するためのスタイルシート言語です。正式名称は『Cascading Style Sheets(カスケーディング・スタイル・シート)』であり、それぞれの頭文字をとって略称した呼び名で親しまれております。CSSの登場によってHTMLで作成されたWebページ上での表現をより高度に装飾ができるようになりました。具体的には文字のサイズや色、レイアウトなどの表示スタイルなど細かな編集まで手が届くようになったのです。CSSはファイル名に拡張子の『.CSS』を付けることで、コンピューターにCSSファイルとして認識されます。
フロントエンドとはWebサービス利用者の目に触れる部分を表します。よってフロントエンドとはWebサービスの利用者が目に触れる部分のシステムを開発することです。フロントエンドの開発を行うエンジニアを『フロントエンドエンジニア』と呼びます。システム業界では”見える部分を作る人”と呼ばれております。主な業務内容としてWebブラウザ上で見ることが出来るページや機能の作成など挙げられます。その際に利用される技術要素としてHTML、CSS、JavaScriptなどがあります。フロントエンド側がサーバーにプログラム実行のリクエストをすることで。サーバから必要な情報を受け取りWeb上にリクエストした内容が表示されます。
フロントエンジニアが習得するべき最低限の技術について解説している記事はこちら>>
Tachyonsの読み方は『タキオン』です。Tachyonsの名前の由来はギリシャ語からきており「迅速(常に光よりも速く移動する)」を意味しているそうです。
Tachyonsは2016年に初めての安定したバージョンとして『Tachyons v4.0.0』を誕生させました。プレリリースの時期かと思われる『Tachyons v3.0.0』より前の記録は公式サイトのドキュメントやGitHubにも記録がありませんでした。Twitter公式アカウントの開設も2016年8月であることからユーザーへのお披露目となったのは『Tachyons v4.0.0』からと考えるのが自然でしょう。翌年の2017年4月には『Tachyons v4.7.0』がリリースされました。2021年現在最新バージョンは『Tachyons v4.12.0』です。バージョンアップについて簡単に以下の年表にまとめておりますのでご覧ください。
年代 | 内容 |
2016年6月 | 『Tachyons v4.0.0』 ※最初の公式リリース |
2016年9月 | 『Tachyons v4.5.0』 |
2017年6月 | 『Tachyons v4.7.0』 |
2017年8月 | 『Tachyons v4.8.0』 |
Tachyonsの特徴を見ていきましょう。
Tachyonsはファイルサイズが非常に軽量という特徴があります。そのサイズは縮小してgzip圧縮をすると、ライブラリ全体が14kb未満となります。また、さらに小さくしたい場合には不要なものを簡単に取り除くことができます。このようにマイクロフレームワークとして軽量かつシンプルであることでも注目を集めております。
Tachyonsはカスタマイズと拡張が簡単という特徴があります。CSSフレームワークの中でも比較的玄人向けとなっている理由としてカスタマイズ前提であることが挙げられます。プロジェクトのニーズに合わせて編集およびカスタマイズすることを目的としております。
Tachyonsは豊富なコンポーネントを持つという特徴があります。Webアプリケーションの開発を助けるための優れたユーティリティクラスとCSSコンポーネントが含まれています。
公式サイトにはコンポーネントライブラリがカテゴリに分けて見やすくまとめられており利便性が高いです。
Tachyonsのコンポーネントライブラリーはこちら>>
Tachyons以外のCSSフレームワークを見ていきましょう。
BootstrapとはWebサイト及びWebアプリケーションを作成するためのCSSフレームワークです。Twitter社が2011年に開発し、フロントエンドフレームワークの中でも最も人気を集めております。BootstrapではWebページの基本機能として使用される「メニュー」「ボタン」「フォーム」などのパーツをテンプレートで用意しております。見た目を調整するCSSファイルや動きをつけるJavascriptファイルが既に作成されており、それらの定義を呼び出すだけでデザインやUIの知識がなくとも、動きのあるリッチなWebサイトを素早く簡単に制作することができます。
MaterializeとはGoogleが提唱するマテリアルデザインに基づくWebサイト及びWebアプリケーションを作成するためのCSSフレームワークです。ユーザーエクスペリエンス重視しマテリアルデザインの要素と原則を利用することで、ユーザーにより多くのフィードバックを提供するコンポーネントとアニメーションを組み込んだフレームワークを実現しております。
同じCSSフレームワークの中でも最も人気を集める「Bootstrap」と見た目も操作方法も似ているのでBootstrapの使用経験がある方は簡単に使いこなせます。デザイン性が高いだけでなくアニメーションやトランジションも兼ね備えており多くのユーザーから人気を集めております。
Semantic UIとは美しいWebサイトを素早くデザインするためのCSSフレームワークです。プログラマーに優しいHTMLを使用して、美しくレスポンシブなレイアウトを作成するのに役立つ開発フレームワークとして人気を集めております。数あるCSSフレームワークの中でも「デザイン性が高い」「学習コストが低い」という特徴があります。また3,000以上のテーマ変数が装備されているため、高次元の自由度の高さを実現しております。他にも主な機能として「50以上のUI要素」「3レベルの変数継承」「Flexboxフレンドリー」などが挙げられます。
Tachyonsを理解するために初心者でも分かる概要、特徴などの基礎知識について簡単に解説させていただきました。Tachyonsを一言で表すと『可能な限り少ないCSSでWebサイトを構築するためのユーティリティファーストのCSSフレームワーク』です。特徴として「ファイルサイズが非常に軽量」「カスタマイズと拡張が簡単」「豊富なコンポーネント」などが挙げられます。Tachyonsについてこの記事に書かれている最低限の内容は理解をしておくようにしましょう。