What's New Qiita

20190701の新人プログラマ応援に関する記事は2件です。

  • 投稿日：2019-07-01T12:10:07+09:00

なぜサードパーティ・ライブラリを避けるべきなのか？

最近のプログラミング言語1は標準ライブラリが充実していますが、標準ライブラリが使いにくいために、別のサードパーティが普及している事も多いです。

例えばRubyでは、標準ライブラリのnet/http に対し、faraday がよく使われます。

しかし、私は先日あるプロジェクトであえてfaradayを避けnet/httpを使うことを選びました。私は以下のような理由から、サードパーティ・ライブラリは避けるべき(時もある)と思っています。

昔話：Pythonをシェルスクリプトで書き直した

「シェルスクリプトをPythonで」ではありません。

若い頃あるプログラムを任された私は「RHELなら標準でPythonがインストールされている。このプログラムは RHEL でしか動かさないんだから、Pythonで書いてもいいだろう。PythonはBashより可読性も高いし、クールだ！」と考え、Pythonで書いた結果、先輩にゲンコツ（の絵文字）を食らいました。

というのも、任されたプログラムが、商用パッケージのアップデート用スクリプトだったからです。「RHELでしか動かさない」ものの、RHEL のバージョンは顧客によりまちまちでした(4.x 〜 5.x)。

Python では複数のバージョンで動くスクリプトを書くのは注意が必要です（2.4にはwith文が無い！）。気を付けて書いたとしても、そのスクリプトが将来のバージョンでも動く保証はありません（2.5ではwithという変数名は使えない！）。

一方、シェルスクリプトはどのRHELでも同じように動作することが期待できます（少なくともPythonよりは確実性が高い）。

サードパーティはコントロールできない

さて、サードパーティ・ライブラリの話です。

サードパーティ・ライブラリはあなたの所有物ではありません。ゆえに、ライブラリに大きな変更が加わったり、開発終了になることを止めることはできません。

これが如実に現れたのが、2016年のleft-pad問題でした2。left-padというライブラリが公開停止されたことで、それを（間接的に）利用するReactやBabelなどの有名ライブラリも動作しなくなったのです。

「left-padは極端な例だろう」「有名ライブラリが公開停止されることはない」と思われるでしょう。

でも、有名ライブラリもメジャーバージョンアップで後方互換性が無くなることは珍しくはありません。旧バージョンの利用者から見ると、実質的には開発終了と同じです。

もし、旧バージョンに深刻な不具合・脆弱性が見つかった場合、利用者であるあなたは、

  1. 自分のコードを新バージョン向けに修正する（もちろん、テスト等の工数もかかる）
  2. もはやメンテされない旧バージョンを使い続ける（場合によってはフォーク版を作る）

という選択に迫られます。

こんなリスクを追うぐらいなら、多少不便でも標準ライブラリで書いた方が良いのではないですか？

そのサードパーティ、そんなに重要？

さて結局、サードパーティ・ライブラリを使うかどうかは、

  • バージョンアップ時の書き換えにかかるコスト
  • 得られる利便性

この2つを天秤にかけることになります。

あなたが書いているのが「長期間使うが滅多に変更はしないコード」の場合は、「最後に触ったのが3年前だから勘所が思い出せない」「開発環境構築から始めないといけない」「保守フェーズなので工数が取れない」といったことが起きがちなので、最初に標準ライブラリと多少格闘した方が、後々のコストは安いでしょう。一方、書き捨てスクリプトや、頻繁に手を加えるコード０なら、書き換えのコストはゼロあるいは低くなります。

また、例えばPythonでデータ分析処理を書くとき pandas や numpy といったライブラリは不可欠でしょう（明らかに利便性がコストに勝ります）。一方、付加的な処理（分析結果の保存とか）で楽をするためにrequests を導入するというなら、それはちょっと考え直した方がいいかもしれません。

  1. "Batteries included" が売りのPythonは1991年登場なので「最近」という表現はちょっと変ですが。 ↩

  2. left-pad については、こちらの記事で解説されています: NPMとleft-pad : 私たちはプログラミングのやり方を忘れてしまったのか？ | POSTD ↩

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-01T11:11:44+09:00

JavaScriptからjQueryへの第一歩

この記事でやること・やらないことなど

  • 基本的に初心者向けの内容です。
  • JavaScriptは少しかじったけどjQueryはそこまで…みたいな方を想定しています。
  • JavaScriptの構文をさらっとおさらいしてからjQueryの導入手順、簡単なDOM操作をやります。
  • 詳細な説明はあまりしません。ざっくりいきます。
  • jQueryのバージョンは3系を使用します。
  • npm/yarnなどのパッケージマネージャーは使用しません。
  • jQuery UI/プラグインの導入に関する詳細な手順は紹介しません。
  • Ajaxはやりません。
  • jQueryオワコンとか言ってはいけない

JavaScriptとは

  • プログラミング言語
  • Webブラウザ上で動作する
  • Webで快適なUIを構築したいのであればほぼ必須スキル

jQueryとは

  • JavaScriptのライブラリ
  • 使用することでJavaScriptを短い記述量で書ける
  • (JavaScriptだけでもなんとかなることはなる)

速習JavaScript 基本構文

// 変数
var hello = "Hello World";
console.log(hello);

// 変数（再宣言不可）
let hello2 = "Hello JavaScript";
// let hello2 = "Hello"; // エラー発生
// hello2 = "Hello"; // 実行可能
console.log(hello2);

// 定数（再代入不可）
const hello3 = "Hello jQuery";
// hello3 = "Hello"; // エラー
console.log(hello3);

// 関数宣言
function showMessage(message) {
    console.log(message);
}
// 定義した関数を実行
showMessage("executed");

// if文
var isTrue = true;
if(isTrue) {
    console.log("OK");
} else {
    console.log("NG");
}

// for文
for(var i = 0; i < 10; i++) {
    console.log(i + "番目");
}

速習JavaScript DOM

① 要素を取得し、その中のテキストを表示する(onclickで呼ぶパターン)

<script>
// 関数定義
function button1Pushed() {
    // 要素取得
    var sample1 = document.getElementById("sample1");
    // 表示
    alert(sample1.textContent);
}
</script>

<h1 id="sample1">Hello JavaScript</h1>
<!-- scriptタグ内で定義されている関数をクリック時に呼ぶ -->
<button onclick="button1Pushed()">Push</button>

② クリック時にtargetに要素を追加する(addEventListenerを使うパターン)

<script>
window.onload = function() {
    // ページが読み込まれたらこの中身が実行される

    // ボタン取得
    var button = document.getElementsByTagName("button")[0];
    // クリックイベントを付与する
    button.addEventListener("click", function() {
        // idがtargetの要素を取得
        var target = document.getElementById("target");
        // div要素を作成し、Hogeというテキストをセット
        var child = document.createElement("div");
        child.innerText = "Hoge";
        // targetの中に作成したdivを追加
        target.appendChild(child);
    });
}
</script>

<button>Push</button>
<div id="target"></div>

jQuery

  • document.getElement~やdocument.createElementでやっていたことを$でできる
  • CSSセレクタと同じような使い方で要素を取得できる

導入方法

方法① CDNを使う

  • 簡単
  • インターネットにつながってないと使えない

  1. 以下にアクセス
    https://code.jquery.com/

  2. jQuery Core 3.4.1のminifiedをクリック

    (どれでも良いですが、slim系のを選ぶと純粋なjQueryの機能に絞ったものになるので最後に紹介するjQueryUIなどが使えません)

  3. 出てきたscriptタグをコピーして適用したいHTMLのheadタグ内に記述する

以下記述例

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sample</title>
    <!-- jQuery読み込み部分 -->
    <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>
    <script>
    $(function() {
        $("body").append($("<div>jQueryが使えるようになりました。</div>"))
    })
    </script>
</head>
<body>

</body>
</html>

方法② ローカルにダウンロードして使う

  1. 以下にアクセス
    https://jquery.com/

  2. Download jQueryをクリック

  3. Download the compressed, production jQuery 3.4.1を右クリックし、名前を付けて保存する

  4. 適用したいHTMLのheadタグ内にscriptタグを記述し、src属性でダウンロードしたファイルを読み込む。

    （以下の例ではhtmlファイルと同じ階層にjsフォルダを作成し、そこにjqueryのファイルを配置しています）

以下記述例

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sample</title>
    <!-- jQuery読み込み部分 -->
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
    $(function() {
        $("body").append($("<div>jQueryが使えるようになりました。</div>"))
    })
    </script>
</head>
<body>

</body>
</html>

jQueryの記述例

headタグ等省略してます

① 要素を取得し、その中のテキストを表示する

<script>
function button1Pushed() {
    // idがsample1の要素のテキストを取得して、アラートに出す
    alert($("#sample1").text());
}
// buttonタグのonclickを消して以下で書く方が方が良いといわれることもある
// $(function () {
//     $("button").on("click", function() {
//         alert($("#sample1").text());
//     });
// })
</script>

<h1 id="sample1">Hello JavaScript</h1>
<!-- scriptタグ内で定義されている関数をクリック時に呼ぶ -->
<button onclick="button1Pushed()">Push</button>

② クリック時にtargetに要素を追加する

<script>
$(function() {
    $("button").on("click", function() {
        // idがtargetの要素にdivタグを作成して追加
        $("#target").append($("<div>Hoge</div>"));
    });
});
</script>

<button>Push</button>
<div id="target"></div>

③ 削除も増やしてみた

<script>
$(function() {
    $("#add").on("click", function() {
        $("#target").append($("<div>Hoge</div>"));
    });
    $("#remove").on("click", function() {
        $("#target").empty();
    });
});
</script>

<button id="add">ADD BUTTON</button><button id="remove">REMOVE BUTTON</button>
<div id="target"></div>

セレクタ

基本的にはCSSのセレクタと同じように扱える。

サンプル
https://jsfiddle.net/45cq2nk7/1/

イベントハンドラ

選択した要素（jQueryオブジェクト）のonメソッドを使用することでイベントと処理を結び付けられる。

サンプル
https://jsfiddle.net/tv1n76ak/

よく使うメソッド

メソッド名 説明
val() 引数なしの場合、inputタグなどで入力されている値を取得する。
また、引数を設定すると引数の値をinputタグのvalueにセットする。
text() 引数なしの場合、タグ内のテキストを取得する。
また、引数を設定すると引数の値をタグ内にセットする。
css() 引数が１つの場合、引数に設定したスタイルの値を取得する。引数が２つの場合、引数に設定したスタイルを適用する。
attr() 引数が１つの場合、引数に設定したプロパティの値を取得する。
また、引数が2つの場合、引数に設定したプロパティを設定する。
append() 引数にjQueryオブジェクトを指定することで、タグ内に子要素に引数の要素を追加する。
remove() そのタグを削除する。
empty() そのタグの中身を削除する。

サンプル
https://jsfiddle.net/ftv97mkj/

その他

jQuery UIを使う

jQuery UIを使うと、すでに用意された部品を使用できます。
こちらもCDNで導入する方法とローカルにダウンロードして使う方法があります。
https://jqueryui.com/

datepickerなどが有名です。

サンプル
https://jsfiddle.net/j4fa6vo8/

プラグインを使う

jQuery UI以外にも様々な開発者が作成したプラグインを導入することもできます。
導入方法は各プラグインによるので、それぞれの公式ページを参照するなどしてください。

LIGHTBOX（個人的になんとなく好きなプラグイン）
https://lokeshdhakar.com/projects/lightbox2/

最後に

今回は初学者向けにボリュームを絞った形になりましたが、
他にもできることがたくさんあるので調べて使ってみてください。

https://api.jquery.com/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧