[B! フロントエンド] yoheiMのブックマーク

[フロントエンド] Reduxの考え方をシンプルに理解しよう（入門記事） - YoheiM .NET

こんにちは、@yoheiMuneです。 Reduxという考え方は、React、Vue、Swift、Kotlin、とクライアントアプリ界隈で非常に流行っています。今日はその考え方をシンプルに学びたいと思い、ライブラリを使わずにReduxとは何かを説明したいと思います。目次この記事の目的この記事では、Reduxを初めて学ぶ人や、一度は触れたけど挫折した人向けに、Reduxとはどのようなものかを解説しています。僕自身、いろいろな案件でReduxを使っていますが、少しもやっとしたところもあり、整理したいなと思い執筆しました。 Reduxはデータを扱うための考え方の1つです。Reduxという考え方を実現したライブラリが存在します（reduxやreact-reduxなど）。ただ、考え方を学ぶ上でライブラリを使うとわかりづらい点があります。ライブラリの中でいい感じに処理してくれる（=処理が隠蔽され

yoheiM 2019/12/09

[Redux] 入門記事

フロントエンド

リンク

[フロントエンド] IE11の場合に、bodyタグに「ie11」というCSSクラスを付与するJavaScript実装 - YoheiM .NET

yoheiM 2019/03/27

ie11判定のjavascript

フロントエンド

リンク

[フロントエンド] iframeの背景を透過させる2つのポイント - YoheiM .NET

こんにちは、@yoheiMuneです。今日はiframe表示で、iframeの背景を透過させる方法について、ブログを書きたいと思います。 iframeの背景は透過する 2019年時点の最近のブラウザであれば、特に何もしなくてもiframeの背景は透過しますが、「あれ、透過しないな〜」と思った時に確認すべき2つのポイントをお伝えします。 iframeの背景を透過させるには具体的には、以下の2つの設定を確認します。読み込むHTMLファイルの、htmlタグの背景を透過させる。読み込むHTMLファイルの、bodyタグの背景を透過させる。以前は「iframeタグにallowtransparency="true"属性を指定する」という対応もあったようですが、ChromeやIE11など主要ブラウザは、その指定がなくても背景が透過するようです。動作サンプル以下は、iframeの背景を透過させ

yoheiM 2019/02/27

iframeの背景を透過させる

フロントエンド

リンク

[Javascript] 任意の文字列で、レンダリングに必要な横幅を計算する - YoheiM .NET

yoheiM 2018/12/10

文字列の横幅を計算する

リンク

[フロントエンド] fetchAPIで画像(バイナリーデータ)を取得する - YoheiM .NET

こんにちは、@yoheiMuneです。「fetchを用いたAjax通信を行う」で紹介したfetchAPIについて、バイナリデータを扱う実装をブログに書きたいと思います。目次どのような場面で使うのかフロントエンドをReact / Vue / Angular などSPA（Single Page Application）で構成している場合に、サーバーAPIがバイナリーデータを返却する時に使います。例えば、サーバーAPIがPDFを返却したり、QRコード(=画像)を生成して返却する場合には、Ajax通信でバイナリーデータを扱う必要があります。 fetch APIでバイナリーデータを扱う具体的には以下のように実装します。 (async () => { async function getImage() { // 送信先のURL. const url = '/image/001.jpg' //

yoheiM 2018/09/07

fetchAPIでバイナリデータ

フロントエンド

リンク

[Javascript] 検索ハイライトを、正規表現で実装する - YoheiM .NET

こんにちは、@yoheiMuneです。最近、JavaScriptで検索を行い該当箇所をハイライトする実装を行う機会がありました。そのハイライト処理について、ブログにも書いておきたいなと思います。目次 JavaScriptで検索ハイライトを実装する正規表現を利用して実装し、ハイライト箇所を<span class="search-highlight"></span>で囲うような実装にしています。 /** * 検索結果で該当箇所を黄色でハイライトする. * @params query - 検索キーワード * @params body - 検索対象の文章 */ function highlightSearchResult(query, body) { const regexp = new RegExp(`(${query})`, 'gi') // ①、② body = body.replac

yoheiM 2018/08/03

[Javascript] 検索ハイライトを正規表現で実装する。

フロントエンド

リンク

[フロントエンド] 文章の文末を省略するためCSS実装を3つ（1行の場合と、複数行の場合） - YoheiM .NET

こんにちは、@yoheiMuneです。今日はCSSを用いて、文章の末尾を省略する方法を、ブログに書きたいと思います。目次文章が1行の場合の文末省略 1行の文章の文末を省略するには、CSSのtext-overflow: ellipsis;を使います。実際にはwidth、overflow、white-spaceのプロパティも合わせて指定します。 <p class="oneline-ellipsis">おはよう、こんにちは、さようなら、おやすみなさい。</p> <style> .oneline-ellipsis { /* 1. 横幅を指定する */ width : 200px; /* 2. はみ出した場合に、hiddenにする */ overflow: hidden; /* 3. 自動的な折り返しはしない */ white-space: nowrap; /* 4. 省略表現を指定する *

yoheiM 2018/07/12

文末を省略するためのCSS実装

フロントエンド

リンク

[フロントエンド] React.jsのclassNameに、複数のクラスを簡単に指定する（Classnames利用） - YoheiM .NET

yoheiM 2018/07/02

[React] Classnamesの利用

フロントエンド

リンク

[フロントエンド] 指定文字数で、ランダムな文字列を作成するちっちゃな実装 - YoheiM .NET

yoheiM 2018/05/30

ランダムな文字列を生成

フロントエンド

リンク

[フロントエンド] WebStormで、自動保存の機能を無効化する - YoheiM .NET

yoheiM 2018/05/28

WebStormで自動保存を無効化する設定

フロントエンド

リンク

[フロントエンド] ReactRouter(v4)で、ログインチェック付きのルーティングを行う - YoheiM .NET

こんにちは、@yoheiMuneです。今日はReact Routerを用いたルーティングにおいて、ページ遷移時にログインチェックを行う方法をブログに書きたいと思います。目次対象のバージョン React Routerはv4以上が対象です。何がしたいのか React.jsでアプリケーションを作成した場合に、ルーティングはReact Routerで行うことがほとんどではないでしょうか。管理画面やマイページなどのログインが必要なページを開発している場合、画面遷移時にログインチェックを行いたいという要件は良くあります。そして、ログイン済みの場合にのみそのページを表示、未ログインならログインページにリダイレクトしたい、といった振る舞いを実装する場面があります。それをReact Routerでどのように実現するのか、についてブログを書きたいと思います。また、他のブログでは同期的なログインチェ

yoheiM 2018/05/09

React Router でログインチェック付きの遷移

フロントエンド

リンク

[フロントエンド] PWA勉強会で使ったスライドを公開します - YoheiM .NET

yoheiM 2018/04/25

PWAについてのLT資料

フロントエンド

リンク

[フロントエンド] create-react-appのビルド結果で、js/cssを相対パスで読み込みたい - YoheiM .NET

こんにちは、@yoheiMuneです。今日は、create-react-appで作ったReactアプリケーションについての話です。ビルド結果のJavaScriptやCSSをindex.htmlから相対パスで読み込む方法について、ブログに書きたいと思います。目次何が問題か Githubページを使うと、簡単に無料でページを公開できます。しかしその場合には、JSファイルやCSSファイルを絶対パスではなく相対パスで読み込む必要があります。  <script type="text/javascript" src="/static/js/main.29a8746a.js">  <script type="text/javascript" src="./static/js/main.29a8746a.js"> create-r

yoheiM 2018/04/24

reactのビルド結果で相対パス

フロントエンド

リンク

[フロントエンド] React.jsで行のスワイプを実装する（Hammer.js利用） - YoheiM .NET

こんにちは、@yoheiMuneです。 React.jsで、ネイティブのような行スワイプ処理を実装したので、ブログに残したいと思います。目次今回のサンプルコード GithubのyoheiMune/react-hammer-drag-sampleに置いてあります。適宜ご参照ください。何をしたいのか以下のテーブルビューのようなUIの場合に、指でグググと動かして行をスワイプしたい。それをReact.jsで実現したいというお話です。デモはこちら Hammer.jsについてスマホ向けのWebページで、スワイプやピンチなどの指によるジェスチャーを扱いたい場合には、Hammer.jsが便利です。Angular.jsにも採用されていて、かなりの人気なライブラリです。 React.jsにおける指ジェスチャーもHammer.jsを使うと、お手軽に実装することができます。 npmインストール Rea

yoheiM 2018/04/23

[React] Hammer.jsの利用

フロントエンド

リンク

[フロントエンド] React.jsで、onClickイベントを親要素に伝播させない方法 - YoheiM .NET

こんにちは、@yoheiMuneです。 React.jsでイベントバブリングを抑止する方法を、ブログに書きたいと思います。目次何が問題かイベントバブリングを抑止しないと、クリックされた要素の親の要素のClickイベントまで発火してしまいます。例えば、ul -> liの親子関係のあるDOMがあるとします。 class Greeting extends React.Component { onClickUl(e) { console.log('<ul> was clicked.') } onClickLi(e) { console.log('<li> was clicked.') } render() { return ( <ul onClick={this.onClickUl}> <li onClick={this.onClickLi}>Good morning.</li> <li

yoheiM 2018/04/20

React.jsでイベントバブリングを抑止

フロントエンド

リンク

[フロントエンド] サイトがhttp/2で配信しているかを確認する方法（2つ） - YoheiM .NET

こんにちは、@yoheiMuneです。サクラのレンタルサーバーもhttp2に対応したようです。今日は、Webサービスがhttp/2で配信しているかを確認する方法を、ブログに書きたいと思います。目次 http/2とは何か http/2は、現在主流で使われているhttpの次世代バージョンです。次世代バージョンと言いつつも、既にかなりのサイトで利用されています。接続方法や転送方法などの変更があり、既存のhttpよりも高速に配信することが可能です。 http/2の内容は「HTTP/2 入門 - Yahoo! JAPAN Tech Blog」などをご確認ください。 http/2配信を確認する方法 Chromeブラウザを使うことで簡単に、対象サイトがhttp/2で配信しているかを確認することができます。確認方法として2つ紹介します。 Chrome拡張でhttp/2を確認する「HTTP/2 and

yoheiM 2018/04/13

http2対応の確認方法

フロントエンド

リンク

[フロントエンド] React Routerで、子要素でもhistory.pushを使いたい（withRouterの利用） - YoheiM .NET

こんにちは、@yoheiMuneです。 React.jsの任意のコンポーネントから、React Routerのmatch、location、historyを使えるようにする方法を、ブログに書きたいと思います。目次対象のバージョン React Routerのバージョンは、v4以降が対象です。v3以前とはかなり違うので、対象バージョンにご注意ください。何が問題か例えば、以下のルーティングがあるとします。 import React, { Component } from 'react' import { BrowserRouter as Router, Route, Switch } from "react-router-dom" import Thread from './Thread' import Todo from './Todo' class AppRouter extends

yoheiM 2018/04/13

[React] 子要素でもReactRouterを使いたい

フロントエンド

リンク

[フロントエンド] React.jsで、onClick時に任意の値を渡す - YoheiM .NET

こんにちは、@yoheiMuneです。 Reactでの開発は学ぶことが多く楽しいです。今日は、onClick時に任意の値を渡すための実装方法を、ブログに書きたいと思います。目次何がしたいのか ReactでonClickを実装する際に、eventオブジェクトではなくて、任意の値を受け取りたい場合があります。 // onClickでは、例えば商品IDを受け取りたい. onClick(productId) { console.log)(productId + 'を購入するよ！'); } これを実現する方法について説明します。 onClickの関数に任意の値を渡す任意の値を渡すためには、bind関数を使います。具体的には以下のように指定します。 <div onClick={this.onClick.bind(this, "渡したい値")}></div> bindの第1引数にはonClick関

yoheiM 2018/04/12

[React] onClickで任意の値を渡す

フロントエンド

リンク

[フロントエンド] React.jsのJSXで条件分岐を表現する方法（5つ） - YoheiM .NET

こんにちは、@yoheiMuneです。 Reactのお仕事をやっていて、日々試行錯誤してます。JSX内で条件分岐を表現する方法についてブログに書きたいと思います。目次何がしたいのか HTMLを出力するrenderメソッドで、この条件ならこのUI、別の条件なら別のUIを出したい、ということは良くあると思います。それをReact.jsではどのように表現するのかについて、ブログにまとめておきたいと思います。 JSX内で条件分岐を表現する5つの方法よく使われる手法として、5つあります。状況に応じて必要なものを使えたら良いと思います。方法1：即時関数を使う JSX内で即時関数を書き、その中で条件分岐を表現できます。 class Hello extends React.Component { render() { let isMorning = true return ( <div> {(()