React-Redux を試す - Qiita
Redux 用語 Action: 状態を変えるためのコマンド (コマンドパターン) Reducer: 古い State と Action から新しい State を作る関数 Store: action を受け取り Reducer を実行して State を返す。Store は reducer から作る。 store.dispatch(action) で store に action を送る。 createStore(reducer) を使って reducer から Store を生成する。 構成 もしかして他の react-redux プロジェクトでも使われるかも知れないのでディレクトリ構成を書く。 components: 見た目だけの静的な Representational Component (カスタム HTML タグ) を置く。 Component は props を受け取りタグを返
Print.js - Webで任意のコンテンツを印刷できます MOONGIFT
Webが苦手としているものの一つに印刷があります。Webサイトを印刷しようとしてデザインが崩れてしまった経験はないでしょうか。また、ごく一部だけ印刷したいのにそれもままなりません。 そこで使ってみたいのがPrint.jsです。印刷対象を細かく指定できるソフトウェアです。 Print.jsの使い方 一例です。PDFファイルを指定すると見ているHTMLと全く違うPDFが印刷できます。 <button type="button" onclick="printJS('docs/printjs.pdf')"> Print PDF </button> さらにフォームの印刷も。 <form method="post" action="#" id="printJS-form"> ... </form> <button type="button" onclick="printJS('printJS-form
どっかからデータ取得してきて表示するだけのやつ作りました - Qiita
概要 ある日 どっかからデータ取得してきて、表示するだけのやつ作る — こばしゅん (@ksyunnnn) 2017年5月20日 なので作りました！ドンッ https://codepen.io/ksyunnnn/pen/oWQjOM 成果物はたいしたことしてませんが、結果的に書いたコードや学んだ技術の共有というよりはそこに至った工程を残しておきたいと思います。 利用するAPIの選択 New York Timesに決めた The New York Times API - Live news headlines from The New York Times: https://t.co/gmey7YxXTC — こばしゅん (@ksyunnnn) 2017年5月20日 とりあえず、画像とタイトルとリンクが取得できるものを選びました。 画面設計＆どこまで作るか判断 Googleスプレッドシートで
フロントエンド開発ツールのまとめ - Qiita
フロントエンド開発に供するツールがたくさんあって位置づけがよくわからんので、整理してみた。 環境構築 Bootstrapping tool VirtualBox, Docker Vagrant, HashicorpのBox サーバOSの設定や仮想マシンによるサーバ立ち上げの自動化に関するツールのこと。VirtualBox とVagrantやDockerは直接仮想サーバを構築できるが、VagrantはVirtualBox とVagrantやDockerのラッパーであり、直接仮想サーバを構築することはできない。また、Vagrantはウェブ上からHashicorpに登録された仮想イメージを自動的にダウンロードし、VirtualBox とVagrantやDockerを自動操作して仮想サーバを構築することができる。 Configration Ansible, Ansible Galaxy サーバやミ
Kill Google AMP before it kills the web
Trust, independence, credibility – we've heard of those Open source insider There's been a good deal of ongoing discussion about Google AMP – Accelerated Mobile Pages. Quite a few high-profile web developers have this year weighted in with criticism and some, following a Google conference dedicated to AMP, have cautioned users about diving in with both feet. These, in my view, don’t go far enough
JavaScriptをもう一度学びたい人へ 演算子、条件文、関数の基礎をおさらい
この春、JavaScriptを始めた新人さんも。いつもコピペで済ませているデザイナーさんも。JavaScriptの演算子、条件文、関数の基礎をおさらい。 JavaScriptでクリエイティブなプログラミングに取り掛かる前に、しっかりと基礎を固めることはとても重要です。この記事では自分でプログラムを書けるようになるためにもっとも重要なJavaScriptの基礎を説明します。説明するのは、演算子、条件文、関数です。 始める前に、前提として基本的なJavaScriptの構文、コメント、データ型、変数への値の代入を理解してください。おぼつかないという人は『これなら絶対わかる！JavaScriptの変数と型の基礎をいまこそ理解する』を参照してください。 注：このガイドはJavaScriptおよびプログラミングのまったくの初心者を対象としています。そのため多くの概念はシンプルな方法で示し、strict
手軽にテキストシャッフル演出ができるJSライブラリ「shuffle-text」を公開 - ICS MEDIA
JavaScriptライブラリ「shuffle-text」を公開しました。shuffle-textはテキストシャッフル（文字列がランダムで切り替わる演出）の表現を行うためのライブラリです。SPA（シングル・ページ・アプリケーション）やゲーム・スペシャルコンテンツの演出に役立ちます。 たとえば、ウェブサイトでマウスカーソルが触れたときに次のような演出ができます。 JavaScriptライブラリはMITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントはすべてGitHubにて公開していますので参照ください。 shuffle-text: JavaScript Text Effect library. shuffle-text を使ってみよう 本記事では、JavaScriptライブラリを組み込み利用するまでの手順を解説します。以下のデモが今回作
Understanding WebAssembly text format - WebAssembly | MDN
To enable WebAssembly to be read and edited by humans, there is a textual representation of the Wasm binary format. This is an intermediate form designed to be exposed in text editors, browser developer tools, etc. This article explains how that text format works, in terms of the raw syntax, and how it is related to the underlying bytecode it represents — and the wrapper objects representing Wasm
UX向上の鍵！マイクロインタラクションにも使えるアニメーションプラグイン11選
モバイルアプリケーションはもちろん、Webサイトにおいてもアニメーションはエンゲージメントを高めるうえで強力なツールです。 jQueryが流行していたころはjQueryに標準で搭載されているアニメーションを使ったりjQueryプラグインを導入するのが一般的でしたが、現在ではjQueryをベースとしたものに限らず、さまざまなアニメーションプラグインが公開されています。 フルスクリーンで背景が動くアニメーションから小さなホバーエフェクトまで、アニメーションはいたるところで使われています。 今回は、フロントエンドエンジニアやWebデザイナーが知っておきたい、マイクロインタラクションにも使えるアニメーションプラグインをご紹介していきます。 プラグインのメリットは、簡潔に読み込みコードと設定を書き込むだけで、だれもが簡単に導入できる点です。 ぜひ、お気に入りのプラグインをピックアップしていきましょう
JSのデバッグにはconsole.log()ではなくNodeのデバッガーを使いなさい
JavaScriptのデバッグに苦労しているなら、Nodeのデバッガーを試してみてはどうでしょうか。Visual Studio Codeならさらに手軽です。 袋小路です！ 何時間も費やしていろいろ試してみたけれどもうまくいきません。コードをじっと吟味してもエラーになりそうなところはありません。2、3回ロジックを見直して、何度も実行しています。単体テストも助けにはならず、同じく失敗してしまいます。もはやどうしていいか分からず、虚空を見つめたくなります。ひとり闇の中にいるように感じて、だんだん腹が立ってきます。 こんなときの自然な反応は、コードの品質を落とし、邪魔なものを全部捨て去ることです。コードのあちこちにprintをちりばめて、なにかうまくいくことを祈るわけです。これでは暗闇で的を狙うようなもので、望み薄なことが分かるでしょう。 よくある話だと感じたのではないでしょうか。今までに数行以上
よく使うコードをgithubからダウンロードするコマンドラインツール - Qiita
自己紹介 じゅんじゅんと言うニックネームで、関西を拠点に活動しているフロントエンドエンジニアです。 HAL大阪3回生です。（2017/05/17現在） イベントや、勉強会に参加してるので是非お会いした際はお声掛けください！ よく使うコード、毎回書くのめんどくさい... よく使うコードとは、例えばReactを開発する際のwebpack.config.jsとかgulpfile.jsとか、環境系のコードが多いかもしれません。 このファイルは、だいたい雛形が決まっているし毎回0から書くのもアホらしいし、いちいち書き方覚えていないので、毎回自分の過去のコードをみてコピペして、今のプロジェクトのパスなどを最適化したりしていました。 しかし、なんせブラウザ立ち上げて、自分のgithub開いて。。。。など手順がめんどくさくなってきました。 コマンドラインで完結してほしい... ということで、作りました。ま
放置されがちなJavaScriptライブラリーをどうやって最新に保つのか？
古いjQueryを使い続けていませんか？忘れられがちなJavaScriptライブラリーを最新に保ち、セキュリティを高める方法を考えます。 最近、セキュリティ研究者の調査によって、13万3000のWebサイトが最新でないJavaScriptライブラリーを使用していること分かりました。調査結果は『Thou Shalt Not Depend on Me: Analysing the Use of Outdated JavaScript Libraries on the Web（Webサイトにおける最新でないJavaScriptの使用率に関する分析）』として、報告書にまとめられPDFで公開されています。決して楽しい読み物ではありません。対象のWebサイトのうちの37％が、直接的もしくは広告主のようなサードパーティサービスを通じて、安全ではないJavaScriptを読み込んでいました。 これを知って
Web Fundamentals — Google Developers
Google は、すべてのユーザーがあらゆるブラウザで利用できる、美しく、アクセスしやすく、高速で安全なウェブサイトを構築できるようサポートしています。このサイトには、Chrome チームのメンバーや、ウェブ開発のトピック（ユーザー補助、パフォーマンス、デザインなど）を専門とする外部のエキスパートが執筆した、その取り組みをサポートするコンテンツが掲載されています。 Web Platform Baseline では、ウェブ プラットフォームの機能に対するブラウザのサポートに関する情報を明確にし、現在プロジェクトで使用できるウェブ プラットフォームの機能について明確な情報を提供します。web.dev の記事で、使用されている機能がすべてベースラインの一部である場合、ブラウザの互換性レベルは信頼できます。
Railsで使う<% %>と<%= %>について - Qiita
どちらも、Railsを使うようになるとよく見るようになるものですが、HTMLやCSS、javascript、Ruby等を学んでいても出てこない(勉強を続けてるとだいたいどこかで見るでしょうが)ため、初見では「なんじゃ、これ？」となるでしょう。 これはhtml.erbのファイルで扱われるものです。 基本的にhtml.erbのファイルはviewsという見た目に関するファイルの格納されているディレクトリに入っていますが、<% %>も<%= %>もそれらにRubyの処理を施すためのものになります。 前者と後者の違いは、いざ作成した内容をブラウザに表示するとなった時に、その内容が目に見える形で出てくるか否か、ということです。 以下の例は<% %>で囲まれた内容の例になります。
react-native-dotenv で定数を環境ごとに切り替える - Qiita
開発中、環境によって API のエンドポイントの向き先や設定を変更して動作チェックしたい、ということがよくある。 しかしながら、ReactNative では、process.env に渡されるのが基本 process.env.NODE_ENV だけで、かつ内部で development か production に書き換えているため、適当な環境変数を外部から渡して挙動を変えることが、development or production しか行えない。 そのためのアプローチの一つとして react-native-config があり、それについての詳細は以下に解りやすくまとまっている。 React Native で development, staging, production など環境を切り替える ただ、react-native-config では、あくまでネイティブ側に埋め込み、JS 側
Sublime Textをもっと快適で便利にする、フロントエンドのWeb制作に役立つプラグインのまとめ
Sublime Textは快適で非常に使いやすいエディタですが、そのままの状態では最近の他のエディタに機能で劣っている面があります。 エディタとしての機能を強化し、HTML, CSS, JavaScriptのコーディング作業を快適にする便利なプラグインを紹介します。 Sublime Text 3 Plugins for Frontend Web Development キャプチャは、Sublime Text 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに基づき翻訳しています。 Sublime Textの管理系プラグイン Sublime Textの一般系プラグイン Sublime TextのJavaScript関連のプラグイン Sublime TextのHTMLとCSS関連のプラグイン Sublime Textのリンター関連のプラグイン Sublim
Redux Logging in Production - LogRocket Blog
LogRocket’s Galileo AI watches every session, surfacing impactful user struggle and key behavior patterns. One of the greatest strengths of Redux is debuggability — by logging actions and state during an app’s execution, developers can easily understand code errors, race conditions, network errors and other sources of bugs. In local development it is standard practice to use tools like redux-logge
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Railsでajaxを用いた簡単なインクリメンタルサーチを実装する - Qiita
移動しました - SmartHR Tech Blog
const {}とvarの違いとは・・・ - Qiita
