サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
衆院選
okakacacao.wpblog.jp
Node インターフェイスのプロパティ、Node.innerText と Node.textContent の違いについて検証します。 どちらも要素のテキスト部分を取得、更新するためのプロパティですが、細かい挙動が異なるため注意が必要です。 どのような違いがあるか 2つのプロパティの違いについて、MDN から引用します。 textContent の特徴 https://developer.mozilla.org/ja/docs/Web/API/Node/textContent 画面上に表示されていないテキストも取得する ブラウザごとの挙動の差異が小さい innerText の特徴 https://developer.mozilla.org/ja/docs/Web/API/Node/innerText 画面上に表示されているテキストのみを取得する ブラウザごとの挙動の差異が大きい 注意すべき
GitLab.com では、「Repository」などでファイルの中身を見ることができます。 このときファイルを開くとソースが表示されますが、HTML ファイルなどは「ソースではなくウェブページとして表示してほしい」というときがあるかもしれません。 そんなときには、これから紹介する GitLab Pages が役に立ちます。 GitLab Pages とは GitLab Pages は GitLab 上にウェブサイトを公開できるサービスで、次のような特徴があります。 プロジェクト、ユーザー、グループごとのサイトを作成できる 無料で利用できる httpsに対応している 静的なサイトを作成できる 静的サイトジェネレータを利用できる この記事では、プロジェクトのリポジトリをそのまま静的なウェブサイトとして公開する方法について紹介します。 使い方 使い方はもちろん公式サイトにも掲載されているので
前回の記事(Windows10 に nodist v0.8.7 をインストール)では、すでにインストールされていた Node.js のアンインストールと nodist のインストールを行いました。 これにより nodist で Node.js のバージョンを管理する環境を整えることができましたので、続編となるこの記事では、実際に nodist を使った Node.js, npm のバージョンの切り替え方法について紹介します。 関連記事 Windows10 に nodist v0.8.7 をインストール:Node.js のアンインストールと、nodist のインストールの方法を紹介します。 nodist v0.8.7 を使って Node.js, npm のバージョンを管理する:nodist の動作確認をかねて、Node.js, npm のインストール方法を紹介します。 Node.js, np
必要に応じて –save, –save-devなどのオプションを指定してください。 実装例 GitHubにもExampleが載っていますので、まずはそちらをお試しください。 基本形 GitHubのExampleでは使われていませんが、ブラウザ操作というのは非同期で行われるものなので、基本的にPromiseを使いながら実装していくとよいです。 例えば、GitHubのExampleをPromiseでラップすると次のようになります。 このとき、Promiseを返す関数の外でNightmareインスタンスを作成するのがコツです。 const Nightmare = require('nightmare'); const nightmare = Nightmare({ show: true }); const example = n => { return new Promise((resolve,
”abc”, “xxx@yyy.zzz” の部分にそれぞれ使いたいユーザー名、メールアドレスを入力してください。 C:\Users\(ユーザー名)\.gitconfig というファイルが作成され、そこにアカウント情報が記載されているはずです。 GitLab.com のアカウント作成 続いて、GitLab.com のアカウントを作成しましょう。 GitLab.com のログインページ(https://gitlab.com/users/sign_in)から登録することができます。 このとき、ユーザー名、メールアドレスは先ほど Git に登録したものと揃えておくと、スムーズに利用が開始できます。 なお、GitHub や Twitter のアカウントを使ったログインもできるようなのですが、今回は試していないので紹介できません。 情報を入力して「Register」ボタンを押すと、認証のメールが送られ
DOM 自体の変更をトリガーにスクリプトを実行したいとき、適切なイベントが無く、実装に苦労したことはないでしょうか。 onchange が使えそうですが、change イベントは input や select といったフォームアイテムにしか使えません。 私も、悩んだ末に setInterval を使って無理やり実装したことがあります。 しかし実は、MutationObserver を使うことで、DOM の変更を監視することができます。 監視できる変更には、次のようなものがあります。 ノードの属性の変更 ノードのテキストの変更 ノードの子孫テキストの変更 ノードの子孫ノードの属性の変更 ノードの子孫ノードの追加、削除 参考「MutationObserver – Web API インターフェイス | MDN」 https://developer.mozilla.org/ja/docs/Web/
最近 React で SPA ( Single Page Application ) を作る際に、Redux という言葉がよく出てきます。 Redux の入門記事を検索してみると、サンプルコードが載っている記事はたくさん見つけることができるのですが、そもそも Redux がどういうものなのか、という点について紹介している記事が少ないように感じたので、今回書いてみることにしました。そこでこの記事では、Redux とは一体何なのか、Redux で何ができるようになるのかという点について、整理していきたいと思います。 前提:SPA と 『状態』 まず SPA を作るうえで必ずポイントとなるのは、アプリケーションの『状態』をどう管理、把握するかということです。『状態』というのはアプリケーションが持っている情報のことで、例えばTODOリストのように何かの一覧を表示するアプリケーションであれば、 絞り
(前回:Windows10にnodist v0.8.0とNode.jsをインストール) 前回の続きとなりますが、gulp のインストールではなく、nodist をアンインストールして Node.js をインストールしなおすことから始めます。 インストールしなおした Node.js で npm を使用したときに下記のようなエラーが出ることがあるのですが、その解決法も最後に紹介します。 Error: EPERM: operation not permitted, mkdir 'C:\Program Files (x86)\Nodist' at Error (native)
Git インストーラをダウンロード Git の公式サイト(Git https://git-scm.com/)から、インストーラを入手します。 Git-2.8.4-64-bit.exe を入手しました。 Git をインストール インストーラを起動し、指示に従って進めていきます。 Select Destination Location インストールする場所の選択ですが、基本的にデフォルトのままで構いません。 Select Components インストールするコンポーネントの選択画面です。 Git の機能にかかわるところは全てチェックが入っているので、デフォルトのままで問題ありません。 Select Start Menu Folder スタートメニューに追加するフォルダの設定です。 Git の機能にはとくに影響しないので、これもデフォルトのままで問題ありません。 Adjusting your
業務でFLOCSSを採用することになったので、公式ドキュメントを読んでみました。 なお、筆者のCSS設計スキルは、OOCSS、SMACSS、BEMなどについて軽く勉強したことがある程度です。 ※続編を書きました:FLOCSS実践編 FLOCSSとは ドキュメント:https://github.com/hiloki/flocss OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案です。 既存のいろんな設計思想のいいとこどりをした設計思想になっています。 基本原則 まず、「レイヤー」という概念があります。 レイヤーには3種類あり、 Foundation レイヤー:reset.css の他、背景やフォントなど、基本的なスタイルを定義 Layout レイヤー:ヘッダー、フッターなど、レイアウト部分のスタイルを定義。ID による指定を
このページを最初にブックマークしてみませんか?
『okakacacao.wpblog.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く