LeaderLineの使い方”ほぼ”完全攻略【JavaScript】

JavaScript

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています!

今回はLeaderLine.jsの使い方を学んでいきましょう!

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!

この記事を読むと・・・
  • LeaderLineの導入方法がわかる
  • LeaderLineを使って要素間を繋ぐ線が引ける
  • LeaderLineのオプションがわかる
すごく便利なライブラリなので、ぜひ使ってみよう!!

LeaderLine.jsとは?

  • JavaScriptのライブラリ
  • HTMLの要素と要素を線で結ぶことができるもの
https://anseki.github.io/leader-line/

LeaderLine.jsの導入方法

導入方法は簡単で、以下の2通りです。

  • ダウンロードしたファイルを配置
  • 直接CDNのリンクを貼る

今回はリンクを貼る前提で解説しています。
HTMLのbodyタグ内に以下のscriptタグを記述してください。

<script src="https://cdn.jsdelivr.net/npm/leader-line@1.0.1/leader-line.min.js"></script>
ちなみにだけど、上記スクリプトタグは自分の作ったJavaScriptファイルより上で読み込んでね!

<script src="https://cdn.jsdelivr.net/npm/leader-line@1.0.1/leader-line.min.js"></script>
<script src="./script.js"></script>

LeaderLineを使って要素間を線で繋ぐ

やるべきことは以下の3つです。

  • 開始位置の要素を取得
  • 終了位置の要素を取得
  • 要素間を線で繋ぐ

See the Pen 【leaderLine】要素を線で繋ぐ※デフォルト by samehack (@samehack) on CodePen.

HTMLの要素を取得する構文

document.getElementById(HTMLのid名)

要素間を線で繋ぐ構文

new LeaderLine(開始位置の要素, 終了位置の要素, オプション);

このように簡単に要素と要素を線で繋ぐことが可能です!

LeaderLineのオプションを設定しよう

LeaderLineには様々なオプションがあるのですが、今回は代表的な物を設定してみました。
目的に応じて設定してみてください

See the Pen 【leaderLine】要素を線で繋ぐ※デフォルト by samehack (@samehack) on CodePen.

大体8割位の機能はここに入っています。
細かなスタイルの変更は公式サイトをご確認ください

  • ホバーしたら線を引く※コメントアウト中
  • 終了位置の要素を枠で囲う
  • 線の形状
  • 線の色
  • 線の太さ
  • 開始位置の形状・サイズ
  • 終了位置の形状・サイズ
  • アニメーション
  • 線にテキストを表示
今回設定したオプションはこれらだよ!

まとめ

  • LeaderLineとは、HTMLの要素と要素を線で繋ぐライブラリ

  • 必要な手順
    • 開始位置のHTMLの要素を取得
    • 終了位置のHTMLの要素を取得
    • new LeaderLine(開始位置の要素, 終了位置の要素, オプション);

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

タイトルとURLをコピーしました