元Webデザイナー兼コーダーの備忘録

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

JavaScript入門

jQueryのプラグインのテンプレート作成

jQueryのプラグインのテンプレートを作成しました。あくまで自分用に作成しました。jQueryは、新しい技術とは言えないかもしれません。しかし、学ぶことがありました。 何となくVue.jsの書き方に通ずるところがあります。個人的にVue.jsの理解の助けになりま…

JavaScript:モジュールのawait

MDNのドキュメントからモジュールについて勉強しました。awaitはモジュール内で利用できる機能だそうです。詳しくは分かりませんが、モジュールが非同期関数として動作できるようになるそうです。 ファイル構造 ファイルの役割 モジュールのサンプルコード …

JavaScript:モジュールを動的に読み込む

MDNのドキュメントからモジュールについて勉強しました。ボタンをクリックしたときにモジュールがインポートされるようにします。モジュールをインポートする側でその処理を記述します。 ファイル構造 ファイルの役割 モジュールのサンプルコード 実行結果 …

JavaScript:モジュールの集約

MDNのドキュメントからモジュールについて勉強しました。モジュールファイルが複数になったとき、それらをまとめておくファイルを作れます。今回は、square.jsとcircle.jsをshapes.jsにまとめて、エクスポートします。インポートする側では、shapes.jsだけを…

JavaScript:クラスをインポートする

MDNのドキュメントからモジュールについて勉強しました。モジュールをクラス構文で定義して、エクスポートします。インポートした側では、Javaのように書けるので個人的には馴染みがあります。 ファイル構造 ファイルの役割 モジュールのサンプルコード 実行…

JavaScript:モジュール全体をオブジェクトとしてインポートする

MDNのドキュメントからモジュールについて勉強しました。モジュール全体をオブジェクトとしてインポートするとインポート文が短くなります。その方がモジュールを扱いやすくなります。 ファイル構造 ファイルの役割 モジュールのサンプルコード 実行結果 参…

JavaScript:インポート時の名前の変更(衝突回避)

MDNのドキュメントからモジュールについて勉強しました。複数のモジュールで同じ変数名、関数名を使っていても問題ありません。インポート時に名前を変更できるので、変数名、関数名の衝突を回避できます。 ファイル構造 ファイルの役割 モジュールのサンプ…

JavaScript:モジュールの基本

MDNのドキュメントからモジュールについて勉強しました。参考サイトの内容で充分に理解できましたが、この記事では簡易的なコードに置き換えて残します。まずは、ファイル構成やファイルの役割、モジュールの書き方について書きます。 ファイル構造 ファイル…

【JavaScript】モジュールのimport/export(3)

今回は、モジュールのインポートとエクスポートの特殊な書き方について見ていきます。具体的には、*(アスタリスク)を使った記述と再エクスポート、副作用のあるインポートの3つについてです。 事前準備 *でまとめてインポートする 再エクスポート 名前付きエ…

【JavaScript】モジュールのimport/export(2)

モジュールのインポートとエクスポートについて書きます。その中でもデフォルトインポート(default import)とデフォルトエクスポート(default export)の記述について書きます。 事前準備 モジュールのimport/export 変数のdefault import/default export 関…

【JavaScript】モジュールのimport/export(1)

モジュールのインポートとエクスポートについて書きます。その中でも名前付きインポート(named import)/名前付きエクスポート(named export)とエイリアスについて書きます。 事前準備 モジュールのimport/export named import/named export 複数の変数をimpo…

【JavaScript】モジュールの書き方

JavaScriptのモジュールは、ES2015で追加された仕組みです。今回は、モジュールの基本の書き方について勉強したことを書きます。クライアント側のJavaScriptでもモジュールが使えるようになり、便利になりました。 モジュールと名前空間 モジュールなしのJav…

Ajaxで外部データを取得し、テンプレートに読み込む

以前の記事(Ajaxで外部データを取得する)で、Ajaxを利用して外部データを取得するコードをご紹介しました。このコードでは、JavaScriptのコードの中にHTMLのコードが含まれていました。今回は、JavaScriptからHTMLを分離する例を書きます。 以前のコード:XML…

【jQuery】Ajaxで外部データを取得する

jQueryのAjaxを使って、外部データ(JSON、XML、HTML)を取得する方法を見ていきます。 JSONの取得 XML(RSS)の取得 HTMLの取得 まとめ 参考 JSONの取得 ex.)気象庁のサイトから東京都の天気予報のデータをJSON形式で取得 取得先:https://www.jma.go.jp/bosai/f…

【JavaScript】JSONデータの読み込み

外部サイトでJSONデータをJSONPとして公開している場合、そのデータを読み込んで利用することができます。 今回は、JSONデータの読み込みについて書きます。まず、ローカルフォルダにデータを用意して、それを読み込んでみます。次に、外部サイトにあるデー…

【JavaScript】必須パターン

JavaScriptのより良い書き方を知りたくなったので、「JavaScriptパターン ―優れたアプリケーションのための作法」を読みました。その内、本書で「必須パターン」と呼んでいるいる内容をメモとして残します。注意としては、約10年前に出版された本なので、内…

【JS中級者向け参考書】「改訂新版JavaScript本格入門」の感想

JavaScriptの入門書はたくさんありますが、より詳しい内容となるとなかなか見つからないでいました。色々なサイトを参考に、中級者向けの参考書を探したところ「JavaScript本格入門」にだとり着きました。 本の要約 学んだこと 構文のさらなる理解 組み込み…

JavaScriptでアニメーションする方法

この記事では、クラスの追加・削除をすることでアニメーションする方法について書きます。イベントと組み合わせて、インタラクティブなものを作ります。簡単にではありますが、JavaScriptを利用したアニメーションの導入としてご覧ください。 JavaScriptでク…

【JavaScript入門】JavaScriptの全体像について把握する

何かを理解するには、まず全体像を把握します。それから、一つ一つについて知っていくと理解しやすいです。私自身そうでしたが、JavaScriptを勉強すると決めたはいいものの、勉強内容が膨大で、何をどこまで勉強したらいいのか全く分かりませんでした。そこ…

【JavaScript入門】JavaScriptでできること

これからJavaScriptを始める方に向けて、JavaScriptで何ができるのかをご紹介します。JavaScriptは、クライアントとサーバの両方で使えます。そのため、クライアントとサーバについて簡単に触れます。 JavaScriptでできること クライアントとサーバ クライア…

» HTML入門のまとめはこちらです。