bootstrap PR

bootstrap treeview 使い方を解説!導入方法からバグった時の対象法

記事内に商品プロモーションを含む場合があります
✓本記事のテーマ
  • treeviewとは?
  • 導入方法
  • 正しく動作しなかったりバグった時の対処方法

今回は上記のテーマで解説していきます。

細かいところについて詳しく解説していきますので、是非参考にして頂ければと思います。

[bootstrap treeview 使い方]treeviewとは?

出典:react-bootstrap-treeview

上記のように、アコーディオンのような開閉式で、どんどん下に繋がっていくコンテンツ表示形式のことです。

ファイルの階層や、パソコンのフォルダの階層など、構成要素が多くどこにあるか忘れてしまう・・・そんな時によく用いられます。

 

[bootstrap treeview 使い方]導入方法

対象Githubのダウンロードボタンをクリックします。

次に、download ZIP」をクリックします。

次にファイルを作ります。名前はなんでも大丈夫です。

今回は「tree」にしました。

先ほどダウンロードしたファイルを先ほど作成したファイル「tree」に移し、解凍、展開をします。

次に、srcというファイル内のcssファイルとjsファイルをコピーします。

コピーしたファイルをtreeの一番上の階層にドロップします。

次に、jsファイルを移動します。

distファイルの中にある「bootstrap-treeview.min.js」をコピーします。

一番上の階層に戻り、先ほどドロップしたjsファイルを開きます。

その中にさきほどコピーした「bootstrap-treeview.min.js」をペーストします。

次にdistファイルの中にある「bootstrap-treeview.min.css」をコピーします。

コピーしたcssファイルを先ほどペーストしたcssファイルの中にペーストします。

ここまでの作業が終わりましたら、cssファイルとjsファイル以外を削除します。

理由は、後ほどcssおよびjsのリンクをこのファイルに指定するのですが、同じファイルが2つ以上あると誤作動の原因になるからです。

1枚目の画像が消す前。2枚目の画像が消した後になります。

次にファイルごとプログラミングツールに入れます。

下記のようにcssファイルやjsファイルが表示されていることを確認しましょう。

次に、cssファイル、jsファイルと同じ階層にindex.htmlを作成していきます。

よく分からない方は画像と同じ位置に作成すれば大丈夫です。

bootstrap公式にアクセスします。

Documentationをクリックします。

Starter templateをクリックします。


すると雛形があるのでコピー&ペーストします。

※言語設定が英語向けに設定されているので<html lang=”en”>を<html lang=”ja”>に直す必要があります。

直したものが以下になります。

次に、下記の2行をコピーして真下にペーストします。

ペーストした状態は下記です。

次に先ほどの「bootstrap-treeview.min.css」にリンクさせるために「名前部分」をコピーします。

次に「“css/bootstrap-treeview.min.css”」を先ほど増やした部分に挿入します。

既に混乱している方向けに現時点までのコードを下記に置いておきます。

とりあえず、コピーしてそのまま使っちゃってOKです。(ただし前述したとおりファイルごと読み込んでいないとうまく作動しない場合アリ)

次にjsを変更していきます。

<scriptsrc=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap-treeview.min”></script>
を足します。
どこに足したか分かりやすいようにビフォーとアフターが下記になります。
ここまで出来たら、<body>内に

と記述していきます。
現状、下記のようなコードになっていればOKです。

念のためソースコードも置いておきます。

次に「bootstrap treeview」の配布サイトへ戻ります。
そして、マークしている<div id=”tree”></div>をコピーします。

挿入する場所は先ほど作成したcontainerの内部です。

次に「bootstrap treeview」の配布サイトへ戻ります。
青く色が付いている部分のみコピーします。

コードで言うと下記になります。

こちらを</body>の直前に設置します。
下記のようになっていればOKです。

また「bootstrap treeview」の配布サイトへ戻ります。
こちらのdata structureをコピーします。

それを、先ほど作成した<script>内に設置します。
画像で説明してる範囲に設置します。

次にvar以降を少し変更します。

具体的には、
var test_tree = [
と変更します。

次に、$(‘#tree’)の後ろも変更していきます。
$(‘#tree’).treeview({ data: test_tree });
と書き換えてください。

すると、上記のようにbootstrapを使用したtreeviewが完成します。

[bootstrap treeview 使い方]正しく動作しなかったりバグった時の対処方法

上記のコードではうまく作動しないケースがあります。

そうなった場合の対処方法について解説していきます。

  • jsの表記を変更する。
  • デベロッパーツールを使用して、エラーの原因を探る。

まずは、jsの表記を変更するところから解説していきます。

そもそも当初のコードはコチラだったのですが、これではうまく動作しませんでした。

結論から先にいうと、このコードのjsのtree view部分が作動しません。
なので、下記のようにコードを書き換えます。

<Before>

<After>

に変更します。
変更したものが下記画面の通りです。

たいていの場合はこちらで解決するはずです。
デベロッパーツールを使用して、エラーの原因を探る。について解説していきます。

上記のjsの置き換えでもダメな場合はデベロッパーツールを使用して、バグの解析をしましょう。

下記が実際のデベロッパーツールの画面です。

この画像の一番下、treeview is not a functionとなっています。

つまり先ほどのjsファイルの置き換えについて指しています。

上記のコードだとtreeviewのjsファイルに接続できないよ!と言っているのです。

と、このように、どこに繋がらないか、どこが間違えているかを教えてくれるのがデベロッパーツールです。

Google ChomeでしたらF12を押すと、右側から出現します。

そして

「結局どのコードが正しいの?」と思われてる方、ご安心ください。

とりあえず、上記をコピペすればすぐtree viewが使えるようになります。

※ただし、導入部分で説明したファイル一式を作成し、ファイルごと読み込んだ場合のみ作動します。

[bootstrap treeview 使い方]まとめ

ここまでがbootstrap treeviewの導入方法、動作しないときの解決方法などを解説してきました。

まとめると、

  • 導入方法厳守。あと少し難しい。
  • 作動しないときはデベロッパーツールでエラーを確認すべし。

それでは最後までご覧いただきありがとうございました。