Javascript

プログラミング

Reactで表現するUIモーションデザイン【マウス & タッチパネルジェスチャー】

以下記事の続きとなります。 Reactで表現するUIモーションデザイン【モーションスタイリング】 前回の記事でモーションスタイリングによりどのような表現が可能になるのかについて学びました。 これまでの記事ではどちらかといえば、モーションの役割は単純に動いているものをみるだけの「動画(アニメーション)」に近かったものが、今回からユーザーの入力を受け付ける事により「インターフェイスとしての機能」の役割を持つようになります。 車でいうところの「アクセル」「ブレーキ」「ハンドル」などの機能を動作...
プログラミング

Reactで表現するUIモーションデザイン【モーションスタイリング】

以下記事の続きとなります。 Reactで表現するUIモーションデザイン【デュレーション & イージング】 前回の記事でモーションの速度・変動率を調整するデュレーションとイージングについて学びました。 今回は引き続きreact-springを使用しながら、CSSのスタイリングを動的に変更することでどのようなモーション表現ができるか検証を行っていきます。 モーションスタイリング手法 ここで紹介しているのは基本的な動きですが、組み合わせで複雑なモーションを実現することもできます。 ...
プログラミング

Reactで表現するUIモーションデザイン【デュレーション & イージング】

近年UIの表現方法の進化によって、単純にUIのレイアウトや配色・大きさが整っていてわかりやすいだけでなく、モーション(アニメーション・マイクロインタラクション)によるユーザーサポートがUX向上に大きな影響を与えるようになってきました。 Webやアプリは単に「閲覧する」だけでなく「使うための道具」として、より物理的に存在する道具と同等に高度な機能を求められているということだと思います。 その一方でUIモーションはユーザーのUXを著しく害する要因にもなっており、「不用意にモーション(アニメーション)...
プログラミング

React Native & Expo デバッグ方法いろいろ

私がシステム開発(環境整備)をする上でもっとも重要視しているのが「デバッグ」です。 プログラミングを始めたばかりのころはデバッグの重要性を知らず、 エラーやバグの原因が特定できずなんども挫折してしまった経験があります。 ただ、その重要性を知っていても、未経験の言語だったりフレームワークだったりすると設定が意外と難しかったり、ベストプラクティスが決まっておらず案外はまってしまったりするのではないでしょうか。 今回はReact Native + Expo + Typescriptでのアプリの開発を通...
プログラミング

ReactJSによるフロントエンド開発

私は普段reactJSというライブラリを使いwebアプリケーションの開発を行っています。様々な機能を実装するなかで react楽しい! react最高! なんて思っているのですが、reactの何が良いのか自分でもはっきりわかってないとこ...
プログラミング

サーバサイドjavascript実行環境Nodejsとは

javascriptはフロントエンドで使用する言語というイメージが強いのですが、nodejsなどのプラットホームを使用することによりjavaやrubyのようにサーバサイドのプログラミングも可能になります。今トレンドになっているSPA(シ...
プログラミング

Webでもスマホでも
どこでも使えるJavascriptの基本

javascript Logo by W3C javascriptとは世界で最も多く使われているプログラミング言語です。javascriptはwebサイトでもスマホアプリでも、デバイスを選ばず開発が進められる万能な言語だからで...
タイトルとURLをコピーしました