2020-07-19

jqueryで「Object doesn't support property or method」と出たときの対処法

実際に出た状況

HTML/JavaScriptで、アンカーの移動時に指定px分さらにずらしたい時に、以下の関数を埋め込んだ。

$(function () {

    var windowWidth = $(window).width();
    var headerHight = 70; 
    $('a[href^="#img"]').click(function() {

        console.log("click anchor!");

        var speed = 100;
        var href= jQuery(this).attr("href");
        console.log("href : " + href);
        var target = jQuery(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top-headerHight;
        console.log("position : " + position);
        $('body,html').animate({scrollTop:position}, speed, 'swing');
        return false;
        
    });

});

すると、実行時に以下のエラーが発生。

Object doesn't support property or method 'animate'

原因

HTML側で読み込んでいるjqueryは以下のようになっていた。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

この、 slim とは、jqueryの最低限の機能のみを持ったファイルらしい。
slimを消して、 jquery-3.3.1.min.js としてあげるとエラーが消える。
ちなみに、 min は改行スペースを省いた軽量なファイルのことです。

2020-07-13

Gitの基本的使い方まとめ

Git ってなあに

分散型のヴァージョン管理システムです。
* 分散型 * というのは、リポジトリを複数人でそれぞれ作成することが可能、ということです。

反対に、中央集権型もあります。
SVN(Subversion)などがそうですが、
それらはリポジトリは一つしかありません。

分散型は、リモートリポジトリにアクセスできなかったとしても、
ローカルリポジトリに変更履歴を更新していくことができます。
中央集権型では、リポジトリが一つしかないため、
そこへアクセスできない場合（オフラインなど）は更新できません。

基本の流れ

git pull
git add
git commit
git push TODO write

2020-07-05

npmを使用してhttp-serverをインストールしてみた

http-serverとは

作成したいカレントDir上で、
ローカルサーバーを立ち上げることができるコマンドラインツール。

インストール&起動

cmdで以下を実行！
>npm install -g http-server
npmコマンドはnode.jsインストール時に一緒にインストールされます。

起動は、起動させたいDirに移動して以下を実行。
> http-server

-p 3000：指定した番号でポートを開く（defaultは8080）。
-o：サーバー起動後にブラウザで開く。

2020-07-05

Node.jsことはじめ

目的

昨日のブログで、ひとまずNode.jsをインストールしました。
今回は、基本的なプログラム実行などで少しずつNode.jsもしくはJavaScriptに触れていきたいと思います。

ひとまずHelloWorldしてみる

VScodeで以下のjsをファイルを保存して、> node hello.jsを実行してみます。

console.log("Hello World");

2020-07-04

Bootstrapをとりあえず導入したい！

今回の目的

先週の業務で初めてBootstrapに触れました。
業務中はに軽く理解したつもりではありますが、
確実な知識にするために基本を押さえて簡単など導入をしてみます。

Bootstrapとは

一言でいうと、Web画面を作成する際に
とっても便利なCSS フレームワークです。
さらに、これを使用するだけでスマホ対応ができます（レスポンシブ）。

CSSとは、HTMLに記述した各要素をどのようなデザインや装飾にするかを定義する言語です。

Bootstrapの特徴

知識がなくてもなんとかなる！
デザイン性の確保あらかじめ用意されたCSSを使用することで、
デザインがわからなくてもある程度のクオリティを確保できる。
レスポンシブなデザイン一つのソースコードでPCやタブレットなど様々な端末に対応できる。
Bootstrapが登場するまでは、PC・スマホ別々にページを準備する必要がありました。

現在は、Bootstrap3のシェアが高いが、今後は４のシェアが拡大する見通し。

導入方法

HTMLに以下を挿入するだけ！

<!-- こっちは<head>タグ内に記述 -->
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 
<!-- こっちは<body>タグ内に記述 -->
<!-- Bootstrap Javascript(jQuery含む) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

2020-07-04

Node.jsをWindowsにインストールする

Node.jsとは

サーバサイドで使用されるJavaScript
コマンドラインツール
実行は、 > node hoge.js
非同期処理を行うことができる
- 非同期とは、I/Oの処理結果を待たずに処理を進めることができるという意味
シングルスレッドなため、メモリ消費が少なくて済む
何かしらのきっかけがあり、初めて実行される（イベントドリブン）

「非同期」について整理

普通のプログラムは、上から1行ずつ、 n行の処理が完了してから(n+1)行を実行 します。
当たり前のことですよね～。
でも非同期処理は違います。

非同期処理は、関数を呼び出したらすぐ、次の行を実行します。
その後、関数の返り値がgetできたときにその結果を返します。

このような、非同期な処理を行う関数を コールバック関数 といいます。

とりあえずインストールしてみる

以下の公式サイトにてインストールします。
Node.js 公式(http://nodejs.org/)
Downloadタブから、Windows用Installer(.msi)64-bit版をダウンロードして実行です。

インストールが完了したら、cmdで以下を実行して確認してみます。
> node --version
v12.8.2
npmというものも同時にインストールされるはずなので、こちらも確認してみます。
> npm --version
6.14.5

npmって何

正式には、Node Package Managerといいます。
Node.jsのPackageを管理するツールです。

以下実行で、PC内すべてのパッケージを表示します。
私がNode.jsをインストールした直後は、何もなかったです。
> npm list -g

カレントDirにあるパッケージを確認する際は、`-g を消して実行。

ひとまずインストールが終わりました。
次ステップとして、Node.jsでシンプルな実装を確認していきたいと思います。

2020-07-01

Ajaxについて調べてました

Ajax

Ajaxとは

「Asynchronous JavaScript + XML」の略 Asynchronous自体は、非同期の、という意味らしい

JavascriptとXMLを用いて、非同期にサーバとの通信を行うこと。という感じだろうか

非同期とは

ブラウザから一部の情報のみリクエストするため、画面全体を更新（リクエストからのレスポンス）する必要がない。

Ajaxを構成する技術たち

XMLHttpRequest 要は、ブラウザ上でサーバーとHTTP通信を行うAPIのこと。このAPIを使用して実装するのがJavaScript。
Javascript Ajaxの名前にある通り、javascriptを使用しないと実装できない。 XMLHttpRequestはJavaScriptの組み込みオブジェクトとして実装されている。
DOM(Document Object Model) Webページをスクリプトやプログラミング言語と繋ぐ機構をしている。 Ajaxを使用して動的なWebページを作成する際に、HTML・XMLのどの要素を変更するかを指定します。 DOMは、それらを「ツリー構造」として展開し、アプリケーション側に文章の情報を加え、加工や変更をしやすくするもの。ツリー構造とは、一つのノードが複数の子を持ち、枝分かれっしていく構造のこと。

XML(Extensible Markup Language)

文書やデータの意味や構造を記述するためのマークアップ言語（HTMLのようなもの）

XMLでは、タグを自由に設定でき、意味づけを行うことができる。

現在は、XMLの代わりにJsonがよく使用されている。