なんでReactじゃないのかって?Riotの方が好きだからですよ。 つくったもの Simple Calendar シンプルなカレンダーです。 (注: この記事は「カレンダーの作り方」、ではなく「Riot.js+Redux+Immutable.jsで開発する際のもろもろについて」です。カレンダーのソースコードはリンク先のHTMLをご覧ください) 環境 Riot.js: 3.0.1 Immutable.js: 3.8.1 Redux: 3.6.0 概要 StoreをImmutable.js+Reduxで作り、ViewはRiot.js、ActionやActionCreatorは自前で作りました。 StateをImmutableにする意味 Reduxでは、一貫してStateは変わりますが、Stateが指すもの自身は変更されません。 ReduxにおいてStateはActionが起きたときのみ変更され
webpack 4 の optimization.splitChunks の使い方、使い所 〜廃止された CommonsChunkPlugin から移行する〜JavaScriptwebpack はじめに 先日リリースされたwebpack 4でCommonsChunkPluginは廃止されました(CommonsChunkPluginの解説はこちら)。 その代わりとした追加されたoptimization.splitChunksの基本的な使い方、使い所に関しての記事です。 optimization.splitChunksを利用すればサイトパフォーマンスの改善(詳細は後述)ができるため、利用する機会が多い設定(機能)です。 解説に利用しているコードの最終形態はGitHub上にあります。 hira777/webpack-split-chunks-example webpackを理解していることを前提
はじめに 近年徐々に複雑になるwebフロントエンドの状態管理の仕組みとして、ReactやVue.jsといったwebフロントエンドフレームワークのお供にReduxやVuexと言ったライブラリを組み合わせて使うことが多いと思います。 それら二つのライブラリは、Elmという高品質webフロントエンド構築のための関数型AltJSが用いているThe Elm Architectureと呼ばれるアーキテクチャに影響を受けて作られました。 追記: ReduxとElmの時系列はReduxの方が先であり、しかしながら状態のimmutableなどは影響を受けていることから、 現在の形のReduxはElmに影響を受けている所がある。 という表現が正しかったようです。 コメントありがとうございます。 参考 Vuexとは何か?|Vuex reduxjs / redux Elmの型システムや見た目は非常にリーダブルであ
HTML5 においては、<script> タグに、defer や async 属性を付与することで、これらの読込が HTML パースを妨害しないようにすることができます。これにより、サイトのメインコンテンツの読込がある程度高速化されます。 async にせよ defer にせよ、それほど詳細に動作を解説した記事が見つかりませんでしたので、本記事では、これらの動作について解説します。 イベントについて まずは、async と defer の挙動を理解するために重要な、2つのイベントについて理解しましょう。 両者とも、MDN に十分な情報があるため、本記事ではそれほど詳細には解説しません。 DOMContentLoaded HTML のパースが完了した直後に発火します。 MDN load HTML のパースが完了し、CSS や画像などのダウンロードと表示、JavaScript ファイルのダウン
Web Speech API for WPの音声入力の性能をチェックします ↓いやもういきなりすごいと思いますけど↓ WordPress で直接音声入力できるプラグインを見つけたから早速試してみたけど変換制度これ見た通り半端なくないっすかこれはものすごいですね革命的なプラグインだと思うんですけど致命的な欠点も一つだったという残念な結果があるので評価をきちんとまとめてお伝えします 緑の枠で囲った文章が、音声入力で打った文字です(変換してません) WordPress のプラグインです プラグイン検索して新規追加画面で WebSpeechAPI for WP と検索してください インストールします 新規記事↓ なんか追加されてますね~! Interim sentence(暫定の文章) マイクを設定したうえで、ステータスでスタートを押します するとポップアップが。(グーグルクロームです) 許可しま
tipThis guide extends the example provided in Getting Started. Please make sure you are at least familiar with the example provided there and the Output Management chapter. Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and
モジュールバンドラーwebpack(ウェブパック)はJavaScriptだけでなくCSSもバンドルできるツールです。タスクランナーGulpで対応していたことの多くはwebpackで置き換えが可能。JavaScriptエンジニアだけでなく、CSSコーダーにも利用が拡大しているのではないでしょうか? 前回の記事「webpackにスタイルシートを取り込む方法」ではCSS・Sassとwebpackの連携方法について解説しました。今回は応用としてCSSフレームワークのBootstrap 5をwebpackで利用する方法を解説します。最小構成と、応用構成の二通りについて説明します。 ▲Bootstrapの公式サイト ※この記事は2023年3月現在最新のBootstrap 5、webpack 5、Node.js 19で解説しています。 Bootstrap とは BootstrapとはもとはTwitter
最近JavaScript関連の開発で採用が進んでいる「webpack」は、JavaScriptファイルの変換や結合といった操作をコマンド1つで実行できるツールだ。本記事では、webpackとは何かという基本的な概念から導入方法、実際の利用例などを紹介する。 モジュール管理機構の不足や未サポート機能の問題をツールで解決する「webpack」 今日のWeb開発においてJavaScriptの利用は避けることができないが、JavaScriptのソースコードをどのように管理・デプロイすべきかという問題に対しては、まだ決定的な解決策が生まれていない状況が続いている。その根本的な原因の1つには、最近までJavaScriptにおいて普遍的に利用できるモジュール管理システムが存在しなかったことがある。 一般的なプログラミング言語では、大規模なプログラムを実装する際に作業性やメンテナンス性を高めるためプログラ
項目が多かったので疲れた。。どの項目を有効にしたのかも記載した。 以下の項目はよく分かりませんでした。。 label-position label-undefined no-any Lintオプションの意味 align 縦方向の揃え方 "parameters" 関数定義の仮引数の開始位置が揃っていること → 無効 ``` // これはNG export function createPostSettings(url: string, urlParameters: any, query: any, dataParams: any, options: JQueryAjaxSettings): JQueryAjaxSettings { ``` ``` // これはOK export function createPostSettings(url:string, urlParameters:any
Gutenbergで導入されたブロックは、WordPressの投稿編集体験を根底から覆すものであり、それはとくに投稿画面に多くのメタボックスを作成していたカスタムフィールド製造業者に打撃を与えた。これまで投稿本文(多くの場合は消されている)+メタボックスというレイアウトだったものが、すべてブロックの並びとしてブロックエディターに統合されてしまったからである。 では、これまでメタボックスを作成していた人々はどうなるのかというと、JavaScript(React + ESNext)での開発に移行していくことになる。Capital Pでもこれまで何度かに渡ってその手法をお伝えしてきた。 しかしながら、TypeScriptで敗北することはおろか、それ以前のJavaScriptに敗北してしまってなかなかGutenbergに移行できていない人は多いのではないだろうか。そんな悩みは万国共通のようで、PH
はじめに Vue.jsを使用したアプリケーションでのWeb API呼び出しのデザインパターンについて調べてみました。 しかし検索して出てくるチュートリアルやサンプルは、コンポーネント内でaxiosをインスタンス化していたり、Vuexの中でaxiosを使用するというサンプルがほとんどでした。 しかし実際のプロダクトでこれをしてしまうと コンポーネント内でAPIアクセスの直書きによって単体テストが困難に Vuex(actions)の肥大化(使い回さない処理はStoreに記述しないほうがいいとする文献もある) API通信部分をPureJSでモジュール化しても依存度がイマイチ下がらない(コンポーネントでモジュールをインポートするため)。 などなど問題になることが多そうでした。 ある日、Jorge氏が投稿した「Vue API calls in a smart way」という記事にたどり着きました。
はじめに これはVue.js #2 Advent Calendar 2017の16日目の記事です ぼくの前日は ykhirao - Qiitaさん、Vue.jsでv-forをネストする - Qiitaでした 本記事はぼくがWebの初心者なだけなので、そこまで初心者向けではないかもしれません 追記:2018/11/30 2017/12/27に@altさん、 2017/12/18, 2018/09/05に@khskさん 2018/10/22に@tryforthさん、 2018/11/29に@masalennonさんから修正を頂きました ありがとうございます!😊 ぼくのバックエンド ぼくがどれくらいWeb初心者かをざっくりと説明すると今までの仕事の9割はiOSで1割はAndroidです。そのうちNativeアプリ率は100%で、JSを使用した回数は0回です そんな中お客さんのWebサイトのリニ
IPA(独立行政法人情報処理推進機構、理事長:藤江 一正)は、IPAに届け出られる「DOM Based XSS」の脆弱性に関する届出が2012年後半から増加していることを踏まえ、それらの情報を分析して当該脆弱性の概要や対策のポイントをまとめた技術レポート(IPAテクニカルウォッチ 第13回)を公開しました。 IPAに多くの届出があるクロスサイト・スクリプティング(XSS)の脆弱性ですが、2012年第1四半期から第3四半期の期間では合計38件だった「DOM Based XSS」と呼ばれるタイプのクロスサイト・スクリプティングの脆弱性の届出が、第4四半期だけで92件(第3四半期までの件数比約2.4倍増)と急増しました。 一般にクロスサイト・スクリプティングは、サーバ側のプログラムに作り込まれてしまう脆弱性ですが、「DOM Based XSS」と呼ばれるクロスサイト・スクリプティングの脆弱性は、
はじめに この記事でQiitaデビュー?ですが、文書書くの下手くそなので、読みにくかったらすみません。 JavaScriptとjQueryで個人的に作りたかったマネーカウンター(コインカウンター)を題材に、仕事と趣味半々で作ってました。でも複雑怪奇になったのでVue.jsを使えば多分楽になると思って、移植しました。 なお、PWAとして まねかん と、 Cordovaでラッピングして Androidアプリ「まねかん」 がありますので、参考まで。 ソースは GitHub においてあります。 「まねかん」制作のアイデア 個人的にとある集会の会計をやっていて、小銭勘定を常に行う必要があったので、Excelで計算してたのですが、必ず手元にExcelがあるわけがないので、スマホアプリを作ろうと考えました。大元のExcelはこんな感じ。 ただし、スマホアプリを一から設計するだけの余裕と技量が無いので、W
どーも、8ビットエンジニアです。 今更感はいなめませんが、まとめます。 対象者 ・これからVue.jsを勉強する人 ・Vue.jsに興味がある人 ・npm or yarn をある程度理解している人 機能側 1. vue-chartjs vue-chartjsはvueのChart.jsのラッパーです。 再利用可能なチャートコンポーネントを簡単に作成できます。 デモ 公式ドキュメント 2. vue-fa Vue.js で使用するアイコンですね。 FontAwesome5 を使用しています。 公式ドキュメント 3. vee-validate vee-validateは、入力を検証してエラーを表示することを可能にする、Vue.js用のテンプレートベースの検証フレームワークです。 テンプレートベースであるため、値が変更された時にどの種類のバリデータを使用するべきかを入力ごとに指定するだけで済みます。
Written by Cody Lindley Sponsored by Frontend Masters, advancing your skills with in-depth, modern front-end engineering courses Download: PDF | epub Overview: This is a guide that everyone can use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019. It is s
簡単にTypeScriptでVuex入門をしたかったのでTodoリストを作ってみました。 (※pageの記載はtsですが、ストアはjsで実装しています) この記事で伝えること pages/index.vueでのストアの呼び出し方 JavaScriptとTypeScriptの比較 この記事で伝えないこと 環境構築 TypeScriptでのストアの書き方 Vuexの解説 ①ストアを作成(JavaScript) 下記リンクを参考にストアを作っていきます * Vuex ストア - Nuxt.js ディレクトリ構成 pages index.vue(TypeScriptでのtodoリスト) todos.vue(JavaScriptでのtodoリスト) store(ストアはJS・TS共に共通) index.js todos.js export const mutations = { add(state,
画像処理で遊びたいな、と思い立ったので、 以前PythonとOpenCVで作成した画像線画化スクリプトを Node.jsで作成しなおしてみました。 blog.honjala.net OpenCVはPythonと使うのがやはり一番使いやすいのですが、 Javascript用APIも提供されているので、 Webページ上のJavascriptやNode.jsからでも利用することができます。 docs.opencv.org しかし試してみるとNode.jsから生でOpenCV.jsを使うのはcanvasを利用することを 前提にしていたりしてなかなか手強く、うまくいかなかったので、 「opencv4nodejs」というライブラリを使うことにしました。 www.npmjs.com こちらはOpenCVの関数をNode.jsからいい感じで使えるようにしてくれていて、 Pythonで書いた処理をNode.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く