Chrome 111 の View Transitions API でリッチなページ間トランジションを実現する
Chrome 111 は CSS の色関数 や 三角関数の追加 など、目を引く更新が多いですが、中でも View Transitions API は、Web アプリの UX 向上という観点で、高いポテンシャルを秘めた API です。 この記事では、この View Transitions API について、実装例・実用例を交えて概説します。 View Transitions API とは View Transitions API は、『画面の更新前後の異なる DOM 要素間のトランジションを、簡素な記述で実現』 する API です。 PC および Android の Chrome 111 以上、または Edge 111 以上 で使用できます。 つまりどういうこと？ モバイルのネイティブ App には、以下のように、 『ページ遷移が発生したとき、同じ要素がページをまたいで移動する』 ような、リ
「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！｜ハイクラス転職・求人情報サイト AMBI（アンビ）
ハイクラス求人TOPIT記事一覧「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！ 「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！ エンジニアHubでは2019年に「がんばらないTypeScript」を紹介しました。JavaScriptに静的型付けなどを提供するTypeScriptは、今では実プロジェクトに採用されるプログラミング言語になっています。そこで現実的なTypeScriptの設定を、藤吾郎（gfx）さんに解説してもらいました。 2021年の現在、TypeScriptの価値はますます広く認められるところとなり、多くのJavaScriptプロジェクトがTypeScriptで開発されるようになってきました。またT
Flicking
Flicking is fully written in Typescript, and every classes, properties, and events are correctly typed and exported.
"添付ファイルのパスワードは別途送付します"へ対抗するために公開鍵暗号化ツールを作った - Qiita
「添付ファイルのパスワードは別途送付します」 皆さんも、添付されたZIPファイルと共に、どこかで一度はこの文面を見たことがあると思います。 そして、この行為が無意味であるという事もまた、ご存じかと思います。 しかし、日本の特に大手企業では古い習慣や責任逃れとして、未だに使われ続けているのが現状です。 そして、そのような事を続けている企業ではもれなく、クラウドストレージサービスの使用も制限されているのがお約束です。 今回は、そんな脳死古い思考を引き摺った環境でも、安全でなるべく簡単にファイル転送を行えるアプリケーションを作ってみました。 なぜ無意味なのか まず初めに、そもそも何故「パスワードを別のメールで送付」が無意味なのかをまとめてみます。 セキュリティ強度 ZIP標準仕様書 6.0 Traditional PKWARE Encryption 6.0.1 The following inf
JavaScript での時刻操作に Moment.js ではなく Day.js を利用し続けている理由
JavaScript での時刻操作に Moment.js ではなく Day.js を利用し続けている理由2020/09/21 昨日、拙作の Nuxt.js プラグインである @nuxtjs/dayjs の v1.2.0 をリリースしました。 このプラグイン自体は2019年3月に開発をはじめて、おおよそ一年半ほど管理してるのですが、それ以前から JavaScript での時刻操作では Day.js を使ってきました。 Moment.js のプロジェクト終了が告知され、時刻操作ライブラリに注目が集まっていることなので、今一度 Day.js の採用理由についてまとめてみます。 Day.js について iamkun によって開発されている時刻操作のライブラリです。Moment や date-fns などは Organization によって管理されていますが、時刻操作ライブラリとしては珍しく個人に
Angular Routerメモ - blog
（Angular v.4.3.6を利用） 参考 リンクを設定したい 通常 パラメータがついたリンク アンカー(#)がついたリンク アクティブなリンクにクラスを設定したい ts内で遷移の制御をしたい 通常 パラメータをつける アンカー(#)をつける クエリを保存して遷移したい 参考 コンポーネント内でパラメータを取得したい Observableで取得 route.snapshotから取得 特定のRouteに紐付けないパラメータを利用したい 前回のURLを取得したい アプリ初期時に処理を追加したい 参考 Routerのナビゲーションイベントを確認したい その他 コンポーネントの再利用について知りたい カスタマイズしたい 参考 RouterとActivatedRouteについて知りたい その他 複数のRouteを表示したい 「遷移前に認証チェックをしたい」「遷移前に未保存のデータがあるか確認をし
TypeScript で書く React コンポーネントを基礎から理解する - Qiita
この記事は Recruit Engineers Advent Calendar 2019 の 23日目の記事です。 TypeScript のプロジェクトで React コンポーネントを書いていると、コンパイラに怒られることがたびたびあります。ネット上にあるサンプルコンポーネントが JavaScript で書かれていると、プロジェクトにもってきたときにコンパイルできないということはよくあるんじゃないでしょうか。any でコンパイラを黙らせることもできますが、せっかく TypeScript を使っているので、安全に解決したいよねってことでこのような記事を書きました。 型定義は @types/react@16.9.17 にしたがっています。目次をみて、この程度のことはもう知っているよという方は react-typescript-cheatsheet をみてください。React + TypeScr
JavaScriptの配列操作に役立つ13のヒントとトリック - Qiita
以下はDuomly ( Webサイト / Twitter )による記事、13 useful JavaScript array tips and tricks you should knowの日本語訳です。 Duomlyはプログラミング学習コースを提供しているWebサイトです。 ただランディングページにたいしたことが書いてないので、詳細はよくわかりません。 ここはもう少し書いておいてほしいところ。 13 useful JavaScript array tips and tricks you should know 配列はJavaScriptで最も一般的な概念のひとつであり、内部に格納されたデータを操作する手段は多数存在します。 配列はJavaScriptの最も基本的なトピックであり、プログラミング学習パスの最初に学習するものだという前提のうえで、この記事ではあなたが知らないかもしれない、しか
JavaScriptのソース内で環境依存の値を切り替える - Qiita
はじめに Reactのアプリケーションの開発の際、環境ごとに値を切り替える必要があったので、その時採用した方法をまとめたものです。 方法 いくつか方法はありますが、今回は以下の方法を採用しました。 環境毎に切り替える値をまとめたファイルを各環境毎に作成する webpackでビルドする際に、環境変数からどの環境向けのビルドかを取得して、読み込むファイルを切り替える 切り替える方法はwebpackのarias機能を利用しています。 動作環境 $ npm --version 6.4.1 $ node --version v10.13.0 使用したライブラリのバージョン React: 16.6.1 webpack: 4.25.1 Node.jsでの環境変数 Node.jsでは環境変数はprocess.envで使用できます。 実装例 ここではAPIサーバのURLを例にしています。 ディレクトリ構造は
Fetch APIでネットワークエラーも含めてエラーハンドリングする - Qiita
Fetch API をラップした fetchWithErrorHandling を作る fetch APIを使うにあたって、ネットワークエラーなどのハンドリングを考えると少しエラーハンドリングの順序を工夫しないといけない。結論から言うと、以下のようなコードにすることで例えばChromeの ERR_CONNECTION_REFUSED も含めて拾うことができる。 const handleErrors = (res) => { if (res.ok) { return res; } switch (res.status) { case 400: throw Error('INVALID_TOKEN'); case 401: throw Error('UNAUTHORIZED'); case 500: throw Error('INTERNAL_SERVER_ERROR'); case 502:
Webpackを使ってReact, Sass, es2015の開発環境を構築してみる - Qiita
webpack.config.jsの作成 プロジェクトのルートディレクトリで touch webpack.config.js webpack configを編集していきます。 ここでは1系と2系の違いだけを書いていきます。 const path = require('path'); const webpack = require('webpack'); module.exports = { context: path.join(__dirname, 'src'), entry: { bundle: './index.js' }, output: { path: path.join(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [ { loader: 'babel-loader', test: /\.js[x]?$
axiosのヘッダーにtokenを埋め込んで常時使えるようにする | hirozak
axiosを使っていて、リクエストのヘッダーに常時トークンを保持させたい時があるのでその時の便利な設定ファイルを書きました。 axiosはこちら どのような時有効か 例えば、React Native⇄Railsでアプリを作っていて、ログインユーザーの認証はトークンベースで行う時。（Railsでdevise token auth使ってたりする時） この場合ログインユーザーがサーバ側にリクエストをする時ヘッダーにトークンを持たせると思います。 デフォルトのaxiosをそのまま使えば毎回のリクエストのヘッダーに埋め込む必要があるのでこれを常時埋め込んだ状態にしてそれを使おうって話。 interceptorsを使う コードはこちら。 //axios.js import axios from "axios"; import authTokens from "./authTokens"; const
webpack4対応webpack-dev-serverの主要な設定オプション(CLI,webpack.config.js)の意味と挙動 - Qiita
webpack4対応webpack-dev-serverの主要な設定オプション(CLI,webpack.config.js)の意味と挙動JavaScriptNode.jswebpackwebpack-dev-server 概要 Webpack 4を利用した開発に便利な webpack-dev-server の設定メモです。 webpack-dev-serverのソースコードと公式wiki、公式Docを参考に実動確認した結果を書きます。 HMR等オートリロード系の設定(--hotとかとか--inlineとか)やよく使いそうなCLIオプションなど理解しておくためのメモです。 環境 本投稿で使っている環境は以下の通り。 webpack-dev-server:3.1.7 webpack:4.17.1 webpack-cli:3.1.0 webpack-dev-server とは webpack-d
面倒なJavaScriptコードのとりまとめがこれ1つで可能に、「webpack」入門 | さくらのナレッジ
最近JavaScript関連の開発で採用が進んでいる「webpack」は、JavaScriptファイルの変換や結合といった操作をコマンド1つで実行できるツールだ。本記事では、webpackとは何かという基本的な概念から導入方法、実際の利用例などを紹介する。 モジュール管理機構の不足や未サポート機能の問題をツールで解決する「webpack」 今日のWeb開発においてJavaScriptの利用は避けることができないが、JavaScriptのソースコードをどのように管理・デプロイすべきかという問題に対しては、まだ決定的な解決策が生まれていない状況が続いている。その根本的な原因の1つには、最近までJavaScriptにおいて普遍的に利用できるモジュール管理システムが存在しなかったことがある。 一般的なプログラミング言語では、大規模なプログラムを実装する際に作業性やメンテナンス性を高めるためプログラ
webpackのTree Shakingを理解して不要なコードがバンドルされるのを防ぐ - Qiita
はじめに webpack の Tree Shaking に関する備忘録です。以下を目的とした記事になります。 Tree Shaking とは何か、なぜ Tree Shaking をするのかを理解する webpack を利用して Tree Shaking するためにはどうすれば良いのかを理解する Tree Shaking 以外の「デッドコードをバンドルさせない」ための手段を理解する 解説に利用しているコードの最終形態は GitHub 上にあります（hira777/webpack-tree-shaking-example）。 webpack を理解していることを前提とした記事ですので、基礎知識を習得したい方は webpack 4 入門をご覧ください。 Tree Shaking とは webpack などでファイルをバンドルする際に、デッドコード（利用されていない不要なコード）を除去してファイル
コワクナイヨ TypeScript - static typing reloaded -
WebXRでポートフォリオを作ろう/Let's make your portfolio with WebXR!
私が async/await、promise をちゃんと理解するまでのステップ１，２，３ - Qiita
これは何？ javascript の async/await を使いこなすために必要な事柄について、私なりに説明したものです。 書いてあること ステップ１）await 使えば待ってくれる 必要最小限の async/await、及び、エラーの catch の話 ステップ２）promise というもの promise の中には「正常データ = resolve」と「エラー = reject」のいずれかを保管できるという話 どうすれば、promise から、正常データ(resolve)を取り出せるか？ どうすれば、promise から、エラー(reject)を取り出せるか？ Promise.all の話 ステップ３）promiseを作る方法 callbackスタイルの関数を、promiseスタイルとして使う方法 setTimeout() を promiseスタイルにする async で promi
なんとなくで理解しないWebpackのCSS周辺 - Qiita
CSS in JSに夢を見たが、なかなか一筋縄では行かなかったので1、webpackにおけるCSSと本気で向き合ってみた。 しかしまだ理解が甘いところがあったのでloader, pluginまわりの関係性を整理した。 （前置き）webpackの基礎情報 css関連の本題にはいる前に、webpackの基礎を再確認する。 Webpackの特徴 webpackの特徴的な事項として、CSSや画像など、javascriptでないデータも基本的に全てをjavascriptで扱ってしまう、という事が挙げられる。 同等の対抗として挙げられるbrowserifyやrollupは、あくまでも「javascriptのmodule解決」にフォーカスしているのに対して、webpackは全く違う方向を向いている loaderとpluginの違い 結構あやふやに扱っていたが、上記のwebpackの基本部分を明確にして考
【JavaScript基礎】Fetch APIの基礎 - KDE BLOG
これまでFetch APIをなんとなくで使っていてちゃんと理解できていなかったので、改めて調べ直して使い方を理解していこうと思います。 Fetch API概要 対応ブラウザ 構文 第一引数（input） 第二引数（init） 戻り値 基本的なリクエスト＆レスポンスの取得 fetch() から返されるPromiseは404でもrejectされない Response オブジェクト プロパティ メソッド Response オブジェクトが得られるタイミング まとめ 参考 Fetch API概要 そもそもFetch（フェッチ）とはなんなんでしょうか？ フェッチとは、取りに行く、取ってくる、持ってくる、連れてくる、来させる、呼び出す、引き出す、惹きつける、などの意味を持つ英単語。ITの分野では機器やプログラムなどが特定の場所からデータなどを読み出す動作のことを指すことが多い。 (フェッチとは - IT
Parcel入門 - TypeScriptの導入方法 - ICS MEDIA
「TypeScript」とは、JavaScriptに「型」を指定できるオープンソースのプログラミング言語です。型によりプログラム実行前にエラーを見つけ出すことができるため、大規模なプロジェクトを安全に開発できます。Microsoft社製で、多くのフロントエンドエンジニアに採用されています。 TypeScriptのモダンなビルド環境を作るためにはwebpackやGulp.jsがよく使われていますが、設定ファイルが必要で学習コストは高めです。「TypeScriptのビルド環境がほしいだけなのに、なぜツールの設定に時間をとられるのか？」「TypeScriptを始めるときに苦労したくない」と思っている人も多いのではないでしょうか？ 「Parcelパーセル」というツールを使うと、独自の設定ファイルを使うことなくTypeScriptのモダンなビルド環境がわずか3ステップで作れます。 ▼ TypeScr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
