Node.js が require() で検索するパスのまとめ | まくまくNode.jsノート
require() によって Node.js がどのようにロードするモジュールを検索するかは、Node.js の Modules のドキュメント に詳しく説明されていますが、若干複雑なのでここでまとめておきます。 require の使い分け require でモジュールをロードするとき、多くは下記の 3 パターンのロード方法に分類できます。 // コアモジュール、あるいは node_modules にインストールしたパッケージのロード const crypto = require('crypto'); // ローカルモジュールのロード const myLocalModule = require('./path/to/myLocalModule'); // JSON ファイルのロード const jsonData = require('./path/to/data.json'); 簡単にまと
賢く使うBrowserify | 第1回 Browserifyとは
賢く使うBrowserify 第1回 Browserifyとは Browserifyを使うと、Node.jsのモジュールシステムをブラウザでも利用できるようになります。第1回目はBrowserifyがどのようにモジュールの依存を解決するのか、その方法と仕組みを解説します。 はじめに Browserify（ブラウザリファイ）はsubstack氏によって作られたNode.js製のツールです。 このツールはNode.jsのコアモジュールやnpmのモジュールをブラウザでも利用できるようにするというのが元々の目的でしたが、モジュール間の依存解決やファイルの結合を行うためのビルドツールとして使われることが多くなってきているようです。 本シリーズでは、Browserifyを使ったJavaScriptのモジュール管理について解説します。 JavaScriptでの依存関係の解決 まずは、なぜこのようなツール
Prettier 入門 ～ESLintとの違いを理解して併用する～ - Qiita
お知らせ（2021/05/26 追記） 以前はeslint --fixなどで ESLint を実行時に Prettier でコードを整形し、整形したコードに対して構文チェックが実行されるようにすることが推奨されていました。 ESLint で Prettier を実行するためには、ESLint の Plugin が必要でしたが、これを利用することが公式で推奨されなくなりました（詳細はこちら）。 そのため、記事を更新して Prettier と ESLint をそれぞれ実行させるような内容に変更しました（ついでに husky のバージョンも上げており、それに関する内容も更新しています）。 更新前のコードや記事は以下にありますので、必要に応じてご確認ください。 はじめに Prettier（v.2.3.0） に関しての備忘録です。 「Prettier の何が便利なのかよくわからない」 「ESLint
Prettierの導入方法 - フロントエンド開発で必須のコード整形ツール - ICS MEDIA
Prettierとは、Node.js上で動作するコードフォーマッターです。本記事ではPrettierの利点と使い方を紹介します。 コードフォーマッターの必要性 複数人で開発を行っている場合、各々が自由にコードを書いてしまうと、さまざまな書き方が混在し統一性のない読みづらいコードとなってしまいます。統一されていないコードは、可読性が低くメンテナンス性が悪くなり、ミスが発生する原因となることもあります。 コードフォーマッターを利用すると、自動的に決められたコードスタイルに整形してくれるため、開発者はコードスタイルを意識することなくコーディングに集中でき、可読性の高いコードを作成できます。 Prettierを導入する利点 コードフォーマッターは、WebStormやVisual Studio Codeなどのウェブ制作のエディターにも付属していますが、これらはユーザー環境に依存します。つまり、開発者
フロントエンド開発の３ステップ（npmことはじめ） - Qiita
スライド 当記事は以前勉強会でLTしたものです。 スライドは下記にあります。 フロントエンド覚えること多すぎ問題 モダンなフロントエンド開発で、入門記事を探そうとすると、 まずwebpackやTypeScript, Babelによるビルド環境構築から始まる記事が多くヒットします。 ですが、Node.jsの初心者がいきなり複数のツールを習得しようとすることが 挫折の原因になっていると感じています。 ですので、まずNode.jsをインストールした直後から、必ず使うことになる、 npmの機能をまず覚えておきましょう。 フロントエンド開発で覚えるべき３つのコマンド 以下の3つだけ覚えておきましょう。 npm init npm install npm run これだけ覚えれば、ひとまずフロントエンド開発を進めることができます。 完璧なワークフローを構築するのは、書いているアプリが大きくなってきてから
ChromeのデベロッパーツールでJSをデバッグする方法(2022年版) - ICS MEDIA
JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」（以下「デベロッパーツール」、「DevToolsデブ・ツールズ」という略称もあります）を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、順番に試しながら読み進めてください。 この記事で学べること デベロッパーツールの使い方 JavaScriptのブレークポイ
第1回 Node.jsとは | gihyo.jp
はじめに 本連載では、注目を集めるNode.jsを使って、Webアプリケーションを様々なクラウド環境で動かすことを最終目的にしています。Node.jsに触れたことがないJavaやPHPなど普段サーバサイドで開発されている方を主な対象として、まずNode.jsの概要から紹介していきます。 Node.jsとは Node.jsとは、ブラウザGoogle Chrome用に開発されたJavaScriptエンジンV8がサーバ上でプログラムを実行できるように、ファイルやネットワークI/Oなど多くの機能を追加したものです。軽量で効率よく多くのリクエストを処理するネットワークアプリケーションの構築ができるプラットフォームになっています。いわゆるサーバサイドJavaScriptの代名詞として注目を集めています。 Node.jsでは“軽量で効率良く”というのを実現するために次の2つのモデルを採用しています。
画像の保存を禁止する方法とその回避方法 - Qiita
Webサイトによっては掲載する画像を保存できないようにしなければいけない時があります。 今回は画像がダウンロードできないようにするための対策とその回避方法を紹介します。 回避方法に関しては既存のサイトでも使えるかもしれないので、悪用厳禁です！ また、ここに載っている方法は回避可能なので他の方法を検討しなければいけません。 個々の内容は昔からあるテクニックなので何番煎じな内容ですが、まとめ記事として残しておきます。 TL;DR フロントエンド: 透明の画像を被せる フロントエンド: 右クリックを禁止する フロントエンド: ドラッグを禁止する バックエンド: 画像のURLから直接アクセスできないようにする 環境 フロントエンドはChromeで確認しています。 バックエンドはnginx、Node.jsで確認しています。 OSはmacOS 10.13で確認しています。 透明の画像を被せる 保存され
JavaScriptの「&&」「||」について盛大に勘違いをしていた件 - Qiita
論理演算子「&&」「||」について JavaScriptの基本である論理演算子の && || について、 根本的に勘違いをしていたことに最近気付いたので自戒の意味を込めてここに記します。 論理演算子の使い道 1. お馴染みの使い道「条件処理」 JavaScriptには皆さんご存知の通り論理演算子&& ||が存在します。 それぞれ「AND」「OR」という意味で、条件処理の中で使うことが多い演算子です。 // aとbに0または1を足し続ける // aとbのどちらかが最大値に達すると終了 var a = 0, b = 0, max = 50; // 条件式その１ AND while (a < max && b < max) { // 0または1を足す a += Math.round(Math.random()); b += Math.round(Math.random()); console.l
初心者でも分かる！な、jQueryの「TOPへ戻るボタン」の作り方
ページをスクロールすると右下に出てくる「TOPへ戻るボタン」の作り方を、jQuery初心者にも分かるよう説明しています。
<script> タグに async / defer を付けた場合のタイミング - Qiita
HTML5 においては、<script> タグに、defer や async 属性を付与することで、これらの読込が HTML パースを妨害しないようにすることができます。これにより、サイトのメインコンテンツの読込がある程度高速化されます。 async にせよ defer にせよ、それほど詳細に動作を解説した記事が見つかりませんでしたので、本記事では、これらの動作について解説します。 イベントについて まずは、async と defer の挙動を理解するために重要な、2つのイベントについて理解しましょう。 両者とも、MDN に十分な情報があるため、本記事ではそれほど詳細には解説しません。 DOMContentLoaded HTML のパースが完了した直後に発火します。 MDN load HTML のパースが完了し、CSS や画像などのダウンロードと表示、JavaScript ファイルのダウン
WordPressの Contact Form 7 で確認ページを挟むためのjQueryプラグイン
WordPressの Contact Form 7 を強化するための非常に便利なjQuery プラグインが紹介されておりましたので、早速利用してみました。 このjQuery プラグインを利用することで、Contact Form 7 で設置したお問い合わせメールフォーム画面に「確認画面」を挟むことができます。 ※ページはリロードしませんので、正確には「確認フェーズ」を挟むイメージです。 設置はも簡単ですし、当ブログでも問題なく動作したので、jQuery で Contact Form 7 に確認画面を挟む方法について紹介させていただきます。 jquery.wpcf7.confirm.js のダウンロード 以下のページにアクセスし、ページ下部のリンクよりjavascript ファイルをダウンロードします。 jquery.wpcf7.confirm.js の設定 ダウンロードした jquery.w
Chrome拡張の開発方法まとめ その1：概念編 - Qiita
Chrome拡張の開発に必要な知識とかの覚書です。 この記事では開発の前に知っておくべきChrome拡張の全容について解説していきます。 「実際に開発しながら学ぶ」形式の解説記事は多く見られるのですが、概念についてちゃんとまとめてある記事は見当たらず、そこらへんの理解で結構苦労した覚えがあるので、そういった人達の手助けになればと思います。 対象 Chrome拡張が作りたい人 Javascriptがまあまあわかる人 Chrome拡張の各概念がいまいちわかってない人 概要 まずはChrome拡張の大まかな構造について説明します。 Chrome拡張はHTMLとCSSとJavascriptで作られています。 必要なhtml,css,jsファイルなどと後述のManifest Fileを一つのフォルダにまとめたものが一つの拡張機能のまとまりとなり、zipで圧縮してアップロードすることでストアで公開する
WordPress で CSS、JavaScript ファイルを読み込む正しい方法
July 10, 2014May 5, 2016WordPress で CSS、JavaScript ファイルを読み込む正しい方法Categories WordPress 誤った方法で行っている方を多く見かけますので説明します。 読み込むエリアにあわせて適切なフックを使用する wp_enqueue_scripts – サイト公開側に読み込む場合に使用するフックです。 login_enqueue_scripts – ログイン画面に読み込む場合に使用するフックです。 admin_enqueue_scripts – 管理画面に読み込む場合に使用するフックです。 上記フックは xxx_scripts という名前ですが、スクリプトだけでなくスタイルシートの読み込みにも使用されます。誤解を招き易い点なので注意してください。また、wp_print_scripts フック、wp_print_styles
ページ内移動（アンカー）、指定したURLへ移動｜window.locationオブジェクト｜JavaScript/DOM｜PHP & JavaScript Room
移動先となる場所には、<a name="アンカー名"></a>のように、a要素のname属性にアンカー名を指定します。 例えば、ページの先頭に<a name="pagetop"></a>と記述しておくと、ページの要所要所で <a href="#" onClick="location.hash='pagetop'; return false;">先頭へ</a> と記述したリンクをクリックすれば、ページの先頭へジャンプさせることができます。 このhashプロパティを使用せずに、<a href="#pagetop">先頭へ</a>と記述しても同様にページの先頭にジャンプさせることができます。 オブジェクト名windowは省略可。 サンプルを見る <a name="pagetop">-------------------------ページの先頭です-------------------------
やはり、お前らのJavaScriptでのリダイレクト実装は間違っている
一見簡単に見えるJavaScriptでのリダイレクト(URL転送)ですが、よく知られた方法にはある落とし穴があり、Googleアナリティクスで正常な解析が行えなくなります。どんな落とし穴があるかと、その回避策について解説します。 なお、こちらの記事は、 SEM Technology - Googleアナリティクスに悪影響を与えずにJavaScriptでリダイレクトする方法 と同じ内容となっています。 はじめに モバイルサイトとPCサイト間のリダイレクトであったり、URL変更に伴うリダイレクトにおいて, .htaccessなどを用いたサーバー側でのリダイレクトが技術上できず、JavaScriptを利用してリダイレクトしているケースをたまに見かけます。 こうしたサイトでは、見た目上は問題なく動作しているものの、実はGoogleアナリティクスなどを用いてアクセス解析を行うと致命的な問題点がみつか
とほほのCookie入門 - とほほのWWW入門
Cookieの概要 Cookie情報が保存されるファイル Cookieの実行例 Cookieの設定 Cookieの書き込み Cookie書き込みの例 Cookieの読み込み エンコードとデコード Cookieに関するQ&A Cookieの語源は何ですか？ Cookieで複数の値を設定するには？ Cookieを削除するには？ Cookieの有効期限を無期限にするには？ path=/ とすると、そのサーバー上のすべてのファイルに対して送信されるの？ Cookieをフォルダ単位ではなく、ファイル単位に設定することはできますか？ escape()でエンコードされたUnicodeをCGIでシフトJISにデコードするには？ Cookieの概要 Cookie とは、以下のようなことを実現するための機構です。 訪問者がそのページに何回訪れたか記録して表示する。 通常モード、フレームモードなど、訪問者の好み
関数から呼び出し元へ値を返す
関数の中で return 文を使用することで呼び出し元へ値を返すことができます。また必要なければ return 文を実行するときに戻り値を省略して呼び出し元へ処理を戻すこともできます。ここでは JavaScript にて関数から呼び出し元へ値を返す方法について解説します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Document: getElementById() メソッド - Web API | MDN
関数リファレンス/wp enqueue script - WordPress Codex 日本語版