JavaScript
JavaScriptのスライダーのコードの書き方
JavaScriptのスライダーのコードの書き方を紹介します。 スライダーのデモ See the Pen スライダー by Sosak (@Sosak2021) on CodePen. JavaScriptのスライダーの…
ARCHIVE
月: 2021年3月
JavaScript
マップアプリが簡単につくれるジオロケーションAPI【leafletjs】の使い方
マップアプリが簡単につくれるジオロケーションAPIの使い方を紹介します。 今回はleafletというJavaScriptの外部ライブラリです。 オープンソースの無料で使うことができます。 https://leafletj…
JavaScript
JavaScriptでnpmを利用するメリットと使い始めるために必要な知識
JavaScriptでnpmを利用するメリットと使い始めるために必要な基本的な知識をまとめました。 npmはなぜ必要なのでしょうか？ npmを使うと、とても簡単にscriptタグなどを利用することができるようになります。…
Git
Gitとは? Gitの基礎知識と具体的な使い方
Git とは Gitとはバージョン管理システムのことです。 バージョン管理するメリットは、 どのファイルの何を 誰が いつ 何のために 変更したかを残すことができます。 最新のファイル状況がわかるのは、もちろん、複数人で…
JavaScript
JavaScriptのオブジェクト指向プログラミング(OOP)とは?
JavaScriptのオブジェクト指向プログラミングについての基礎知識をまとめました。 まずは、オブジェクト指向プログラミングとは何かについて、理解を深めた上で、JavaScript特有の点を理解していきましょう。 オブ…
JavaScript
モダンなJavaScript開発の流れと必ず必要になるモジュールについて
モダンなJavaScript開発がどのように行われているのかについてまとめました。 モダンなJavaScript開発の流れ 近年では、一つのjsファイルに記述するのではなく、モジュールごとにファイルを分けて開発を進めます…
JavaScript
JavaScriptのES6のクラス(class)キーワードの使い方と具体例
ES6のクラス(class)キーワードの使い方と具体例を紹介します。 ES6のクラス(class)とConstructor関数の書き方の違い クラスキーワードは、Constructor関数と背景で起こっていることは全く同…
JavaScript
JavaScriptのスクリプトの非同期読み込み(async, defer)の基礎知識
JavaScriptのスクリプトの非同期読み込み(async, defer)の基礎知識をまとめました。 JavaScriptの非同期読み込み(async, defer)の基礎知識 通常の書き方 通常の書き方は、bodyタ…
JavaScript
JavaScriptのプロトタイプ継承の具体例(.prototypeと__proto__)
JavaScriptのプロトタイプ継承の具体例を紹介します。 Constructor関数についてはこちらの記事を参照ください。 JavaScriptでclass属性とstyle属性を操作する方法まとめ JavaScrip…
JavaScript
【JavaScript】Babelの使い方とトランスパイルとポリフィルの違いについて
JavaScriptのモダンな開発に欠かせないBabelの使い方と、Babelが行うトランスパイルとポリフィルの違いについてまとめました。 Babelの使い方 いまだ多くの人が古いブラウザを使用しています。 そのようなブ…
JavaScript
JavaScriptにおけるリーダブルコードについて
JavaScriptにおけるリーダブルコードとはいったいどんな点に気をつければいいのかについてまとめました。 リーダブルコードについて JavaScriptにおけるリーダブルコードとは、次のようなコードのことです。 他人…
JavaScript
JavaScriptのWebアプリケーション設計とMVCモデルについて
JavaScriptのWebアプリケーション設計について、基礎的な部分をまとめました。 また、Webアプリケーション設計の考えが、どのようにMVCモデルに関係しているのかを説明します。 優れたWebアプリケーション設計に…
Git
Gitのマージの使い方とコンフリクトの解決方法
Gitのマージの使い方とコンフリクトの解決方法についてまとめました。 マージの使い方 git merge 取り込みたいブランチ名 git merge 取り込みたいリモート名/ブランチ名 ex. git merge ori…
Git
GItで変更を統合するときに履歴を整えられるリベース(rebase)の使い方
GItで変更を統合するときに履歴を整えられるリベース(rebase)の使い方をまとめました。 リベース(rebase) リベース(rebase)とは、変更を統合するときに履歴をきれいに整えることです。 rebaseは、親…
Git
Gitのタグ付けのやり方ーコミットを参照しやすくする
コミットを参照しやすくするためのGitのタグ付けのやり方をまとめました。 タグ付け タグ付けは、コミットを参照しやすくするために、コミットに名前（タグ）をつけることです。 リリースした日付などリリースしたポイントによく利…
Git
Gitの初期設定と.gitignoreファイルについて
gitの初期設定 まず最初に行う設定 gitとGitHubをつなげる ターミナルで次のように名前とメールアドレスを登録します。 git config --global user.name "GitHubに登録した名前" …
Git
Gitの基本コマンドの使い方について
gitの基本コマンドについてまとめました。 gitの基本コマンド ステージに追加する git add git add フォルダ名 git add -A git add . のコマンドを実行すると、ステージングエリアに追…
JavaScript
JavaScriptのIntersectionObserverAPIでスティッキーナビを実装する方法
JavaScriptのIntersectionObserverでスティッキーナビゲーションを実装する方法を紹介します。 window.addEventListenerのscrollよりもパフォーマンスが改善されるメリット…
JavaScript
JavaScriptライブラリを使わずに【scrollReveal】ふわっと表示させる
JavaScriptのIntersectionObserverAPIを使って、ライブラリを使わずにscrollRevealのようなふわっと表示させる方法を紹介します。 IntersectionObserverAPIでふわ…
JavaScript
JavaScriptのLazyLoadのプログラム (画像の遅延読み込み)
LazyLoad (画像の遅延読み込み)は、パフォーマンスに大きく貢献するエフェクトです。 lazy-loadのJavaScriptプログラムの書き方を紹介します。 JavaScriptのLazyLoadのプログラム H…
JavaScript
JavaScriptのConstructor関数の基本的な使い方
JavaScriptのConstructor関数の基本的な使い方を紹介します。 Constructor関数とインスタンス Constructor（コンストラクター)関数とは、新しくオブジェクトを作成するための雛形となる関…
JavaScript
JavaScriptのObject.create()でプロトタイプ継承する方法
JavaScriptのObject.create()でプロトタイプ継承する方法についてまとめました。 JavaScriptのObject.create()でプロトタイプ継承する方法 Object.create()はプロト…
JavaScript
JavaScriptのカプセル化に関わるパブリッククラスフィールド
JavaScriptのカプセル化に関わる、パブリッククラスフィールドについて基礎的な部分をまとめました。 まだ、ステージ3のため、ブラウザの対応状況次第で使えなくなることもあります。 パブリッククラスフィールドの8つのフ…
JavaScript
同期(Synchronous)と非同期(Asynchronous)とAJAXとWeb APIについて
JavaScriptの同期(Synchronous)と非同期(Asynchronous)とAJAXとWeb APIについて、基礎的な部分をまとめました。 同期(Synchronous)と非同期(Asynchronous)…
JavaScript
クライアントサーバモデル=HTTPリクエスト/レスポンスモデルについて
クライアントサーバモデル=HTTPリクエスト/レスポンスモデルについて基礎的な部分をまとめました。 クライアントサーバモデル=HTTPリクエスト/レスポンスモデルについて クライアント（ユーザー）が、インターネット上で検…
JavaScript
JavaScriptのconcurrency model(同時実行モデル)非同期処理について
JavaScriptのconcurrency model(同時実行モデル)について、 コールスタックで処理できる実行コンテキストは一つずつにも関わらず、非同期の処理について簡単にまとめました。 JavaScriptのco…
JavaScript
npmを利用する際に知っておくべき最低限のコマンドライン
npmを利用するには、ターミナルを利用する必要があります。 コマンドラインはたくさんありますが、npmを利用するために知っておくべき最低限のコマンドラインは20種類もありません。 まずはそれらを使えるようになっておきまし…
JavaScript
JavaScirptバンドラー【Parcel】の基本的な使い方
JavaScirptバンドラー【Parcel】の基本的な使い方をまとめました。 JavaScirptバンドラー【Parcel】の基本的な使い方 Parcel(parcel-bundler)はnpmで入手できるビルドツール…