プログラミングを始めたばかりで検索の仕方がわからない方へ
ウェブサイトなどを作っている時に、
「動作はわかるけど一般的になんて呼ばれているか分からないから何て検索すればいいか分からない」
っていう経験ありませんか?
私はあります。
特にプログラミングを勉強し始めていた頃は
「なんかボタン押したらちっちゃい窓みたいなものが画面中央に出てくるやつ」
みたいな感じでやりたいことはハッキリと分かっているのに検索の仕方が分からずイライラしていた時期がありました。(ちなみに↑はモーダルのことを言っています)
この記事では主にプログラミングを始めたばかりでやりたいことはハッキリと分かっているけど一般的な名称が分からず困っている過去の自分のような人に向けて、今後はなんて検索すればいいかを紹介していきます。
前置き:コンポネートについて
まず最初に。
スライドショーのように画像がぐるぐる回るコレ↓とか
※カルーセル
ボタン押したら背景が暗くなってちっちゃい窓が出てくるアレ↓とか
※モーダル
これらにはちゃんと一般的な名称があります。それぞれの個別の名称を紹介して行く前に、上記のようにhtmlとcss(とjavascript)によって構成されている一連の動作や表現を「コンポネート」と呼びます。
「コンポネート」をAmerican Heritage Dictionary で調べると下記のようにあります:
1. A constituent element, as of a system. See Synonyms at element.
2. A part of a mechanical or electrical complex.
3. Mathematics One of a set of two or more vectors having a sum equal to a given vector.
この記事の趣旨からは外れてしまうので深い概念については言及しませんが要するに「再利用可能な部品」ぐらいに捉えていれば問題ないと思います。
詳しくコンポネートの概念について知りたい方は以下の記事が参考になると思います
よくみるコンポネート一覧とその名称
1. Breadcrumb (パンくず)
2. Carousel (カルーセル)
3. Collapse /Accordion(アコーディオン)
4. Dropdown(ドロップダウン)
5. Modal(モーダル)
6. Pagination(ページネーション)
7. Popover(ポップオーバー)
8. Tooltips(ツールチップ)
有名なフロントエンドコンポネートライブラリのドキュメントを読もう
上記はあくまで一部の例にすぎません。
他にもたくさんコンポネートはありますので、求めてるものが上記に含まれていない方や他に何があるか気になる方はフロントエンドコンポネートのライブラリを提供しているサイトのドキュメントご覧ください。
下記が有名どころです: