Bootstrap使う時

私、非フロントエンジニアですが、この度Bootstrapを入れようと思ったのでその時の手順などをメモりました
そして、使った以上、フロントエンドエンジニアに迷惑を掛けたくないので、少しでもエラーを出さないようにしました
その時のメモです
まぁ、改善の余地はありますが、どこまでこっちがわでやるのとかそういう話は、今回はどうでもいいです。そこまで踏み込んで考える記事ではないので

気をつけたことリスト

バージョン → 今だとv3.3.1ですよね
要素を検証時にエラー未発生 → これは下にやり方まとめました
容量を減らす → これも下に

初心者なので、最初はまずテーマなどを選択し、適用するかと思う

その時の手順などをまとめる

1 . http://getbootstrap.com/ にアクセス

2 . ヘッダーメニューから「Getting started」をクリック

3 . 右サイドメニューから「Basic template」をクリック（適用の手順が書かれています）

4 . 「Examples」というのがすぐ下にあるので適用したいテンプレートを選択します（今回はDashboard Templateを選択）

5 . 右クリックしてソースを表示させます（HTML5対応なので<!DOCTYPE html>から始まるページが出ると思います）
6 . <head> タグにある「stylesheet」と「scriptタグ」は全て適用しないといけないので、ダウンロードして自分のプロジェクトなどに保存しましょう
7 . <body> タグの最下位にある「scriptタグ」も必要ですので、同じく保存します

一旦、準備完了でしょう。おそらくこれで表面上は上手く動いています。

ただし、要素を検証しますとなぜかエラーが発生しています。

これの解決方法はエラー文を検索するよりも早い方法があります。

まずは、エラーメッセージを確認して対応します（例えば、404であれば該当ファイルを追加する必要があります。読んでいるファイル名が違っているということも有るでしょう）
次に、それでもエラーが消えない時はエラーの原因となるjsファイルを開きましょう（大抵jsのエラーがおおいとおもいます）
そのjsファイルには必ずコメントアウトされた必要ファイルが記されています
その必要ファイルをGitHubなどからダウンロードしてプロジェクトにつっこめばえらーは出なくなります

今回ですとこちらのjsが特定のものを呼んでいます

docs.min.js

/*!

Holder - client side image placeholders
Version 2.4.1+f2l1h
© 2014 Ivan Malopinsky - http://imsky.co

Site:     http://imsky.github.io/holder
Issues:   https://github.com/imsky/holder/issues
License:  http://opensource.org/licenses/MIT

*/

function() { ~~~~~~~ }

* ZeroClipboard
* The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface.
* Copyright (c) 2014 Jon Rohan, James M. Greene
* Licensed MIT
* http://zeroclipboard.org/
* v1.3.5
*/

function() { ~~~~~~~ }

 * JavaScript for Bootstrap's docs (http://getbootstrap.com)
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under the Creative Commons Attribution 3.0 Unported License. For
 * details, see http://creativecommons.org/licenses/by/3.0/.
 */

function() { ~~~~~~~ }

こんなコメントがありました

最初のコメントは誰がいつ作ったのか、バージョンやその公式サイトやらライセンス、バグ報告のURLなどが乗っていますので、これはどうでもいいです

2個めのコメントを見ますと

「The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface.」とあります。このファイルが必要なそうです
http://zeroclipboard.org/ こちらに該当ファイルがあるそうなのでアクセスして必要なファイルをダウンロードしてきます。当然全部持って来てもいいですが、重くなるのでそういうことは普通しません

そして、次に大事なのはバージョンです

jQuery, Bootstrap共に更新されることが多いので、常にバージョンが合っているかという部分にも気を配ることで余計なエラーを未然に防ぐことが出来ます

さいごに

初心者だからこそ、いきなりエラーが発生してもそれを無視してしまいがちですが、そこを少し踏み込んでみることでこんなに簡単にエラーを解消することができます
とはいえ、私が今やっているPJはHTMLテンプレを使わずにフレームワークと言語に合わせますので、疲れました。jsなどはブラウザ依存の話なので助かりましたが

フロントエンドエンジニアがかっこいいなと日々思っている所存です
ただ、フロントエンドエンジニアはやることが本当に多いと思いますので、少しでもエラーをなくしたり、また作業を減らしてあげる事が大事だと思います
試行系では、日々スロークエリ減らしたり、Libのバージョンを上げたり新しいLibを適合して試したりと泥臭いことばかりじゃなくてたまにフロント触ると楽しいなと思ってしまいます
綺麗に済むので

フロントエンドエンジニアに迷惑かけないようにBootstrapを入れた