フロントエンド

フロントエンドはユーザーに見える部分のことになります。

Web開発では、UXデザインやフロントエンジニアが大活躍します。また、会社によってはクライアントとの打ち合わせを直接行うこともあります。

HTMLとCSSを学び、JavaScriptを学ぶのが通例ですが、これに限ることはありません。

Webデザインやウェブアプリケーションに興味がある人は是非フロントエンドの道を進んでいきましょう。

コピペだけ！anime.jsでクールなスライドを作ろう

by
anime.js　スライダー

今日はanime.jsのライブラリを紹介します。このライブラリを使う事で複雑なアニメーションをJavaScriptを使ってよりシンプルに書くことができます。 anime.jsはオープンソースなのでソースコードをGitHubからも見ることができます。CodePenから実際のデモを見ることもできるので見てみてください。 今日の完成プロジェクトはこのようになります。 今日の環境 では、大体どのようなことができるかを理解できたところで早速、基本のコードを書いていきましょう。 プロジェクトの作成 今回はVanilla JavaScriptでプロジェクトを作成しますがビルドツールとしてViteを使います。 anime.jsのインストール では、npmを使ってanime.jsをインストールしましょう。 コードを書こう ではテキストエディタを開いてコードを書いていきます。 Bootstrapを使ってUIを作成したい場合はViteを使ったBootstrapの設定の仕方はこちらの記事を見てください。 では、index.htmlをこのように書いてみます。 次にmain.jsの中身を消して下記のように書いてみましょう。 そうすると、ブラウザがロードされたときに.btnクラスのHTML要素が右に動きましたね。 これが基本になります。 もし、クリックしたらボタンがアニメーションしたいときはこのようになります。 JavaScriptの基本に戻りましょう。 完成するとこのようになりますね。 画像スライダーを作る こちらを参考にしました。 index.htmlはこのようになります。 各gridクラスのdivタグ内に画像ファイルがあることに注目しましょう。 次に、styles.css（styles.scss）を書きます。 最後に、main.jsでスライダーのロジックを作成します。 init()関数でブラウザがDOMContentLoadedのイベントを実行したときにイベントをマウントさせます。 この中でスライダーやナビゲーションのHTML要素を格納し、クリックイベントを実装します。 画像にdelay:の要素を加えていることに注目してください。 完成したコードはこちら(GitHub)からどうぞ。

ViteとBootstrapで最速で開発しよう

by
ViteとBootstrapでセットアップ

今日は、JavaScriptでウェブ開発するにあたり、最速でコーディングに入れる環境を作ります。 現在のフロントエンド開発ではReactやVueや欠かせないですが、これを使わずにVanilla JavaScriptで開発をしたいときに有利です。 しかしnpmを使ってライブラリを管理したい場合に最適になります。 さらにBootstrapのセットアップの仕方も紹介するのでプロジェクトをセットアップしたのちにすぐにコーディングに取り掛かることができますね。 今日の環境 Viteとは ViteはVueの創生者Evan Youとそのチームが作った最新のビルドツールです。特徴としてはWebpack、Gulp、Parcelのバンドリングで使うパッケージがデベロップメント用のサーバーを起動する際（npm start)でかなり遅くなる原因を起こしていたものをすべて取り除きました。さらにコードの量が多くなるにつれ再度バンドルしなおすのでその分時間がかかっていました。 Viteの強みはその速さになります。もちろん、その引き換えにES6で書いたコードが対応していないブラウザではJavaScriptを変換してくれないので動かない可能性がある等の短所があります。 もし、ReactやVueを使いたい方はこちらの記事を参考にしてください。 Bootstrapとは Bootstrapはブートストラップといいます。 HTMLにBootstrapのクラスを入れることで魔法のようにHTMLにCSSが付けられることができます。 Bootstrapは有名なので使っておいて損はありませんね。 では早速プロジェクトの作成にかかります。 Viteのセットアップ では下記のコマンドでViteを使ってJavaScriptのプロジェクトをセットアップします。 では、cd asameshi（もしくは自身のプロジェクト名）に移動してnpm iのコマンドを実行します。 Bootstrapのセットアップ 次にBootstrapをインストールします。popperはBootstrapのドロップダウンやポップオーバー、ツールチップのポジションで使いますが、これらを使う予定がない場合はインストールしなくてOKです。 次にSaasをインストールします。 これで必要なライブラリはインストールできました。 プロジェクトのファイル構成 プロジェクトのルート直下のcounter.jsは削除してください。 次に下記のコマンドで必要なフォルダとファイルを作成します。 プロジェクトのファイル構成はこのようになります。 ※ルート直下のindex.htmlは削除することになります。 Viteのコンフィグ 先ほどのコマンドで作成したvite.config.jsファイルがテストサーバーの起動時に読み込まれるファイルになります。中身が空っぽなので、このファイルにコンフィグを書いていきます。 ここで注意しておきたいのがpathのインポートの仕方です。const path = require(‘path’)でも良いですが、package.jsonの”type”: “module”を削除する必要があります。ES6の書き方でimportを使う方がキレイだと思いますが個人の好みでどうぞ。 次に、先ほど作成したsrc/index.htmlに下記の様に書きます。デフォルトのルート直下のindex.htmlは削除してOKです。 src/index.html Bootstrapのインポート では下記のようにvite.config.jsを書きます。これでbootstrapをインポートします。 次にsrc/scss/styles.scssを開きます。 このようにbootstrapのCSSをインポートしましょう。 次に、Bootstrapで使うJavaScriptをインポートします。 src/js/main.jsに下記を追加しましょう。 もし、プラグインごとに別々にインポートしたい場合は下記のように書いてもOKです。 では、テスト用サーバーを起動するとBootstrapのCSSも読み込まれたことが確認できましたね！ 実際のコードはGitHubのリポから見てください。 お疲れ様でした。

Google Map APIを使ってカスタムマップを作成しよう

by
Google Map APIを使ってみる

今日はGoogle Map（グーグルマップ）のAPIを使ってカスタムマップを作成してみましょう！ワードプレスをお使いの方は簡単にプラグインを使って、カスタムマップを作成することができますね。同じことをマニュアルで行います。 これで不動産の物件を地図に表示したり、お店の位置情報を紹介することなどに使えたりすると思います。 完成したコードはGitHubから見てください。 注意 クレジットカードの登録なしでもAPIコールはかけられますが、Googleからのエラーのポップアップが表示されます。もし、一般ユーザー向けにAPIを使用したい場合は、アカウントの登録を完了してください。クレジットカードの登録が必要になります。 2023年の2月時点での参考料金表になります。 今日の環境 サンプルプロジェクトの確認 実際にコードを書く前にどのようなことができるのかデモで確認したい人はこの手順を追ってください。 GoogleマップのGitHubリポをクローンしてGoogleのデモGoogleマップを見てみます。GitとGitHubの使い方はこちらでも説明しています。 これでGoogleマップのデモが開くのでカスタムマーカーを使ったマップもこのように確認することができますね。 Playgroundというボタンをクリックするとコードを見ながら実際にどのように表示されるか試すことができます。 では、早速Google CloudからMAP APIのサービスを使っていきましょう！ JavaScriptのプロジェクト作成 では今日はViteを使ってプロジェクトを作成します。Viteはビルドツールで、ReactやVueのアプリケーションを使う際に使う事がほとんどですが、Vanilla JS（普通のJavaScript）でも使う事ができます。 ではコマンドプロンプト（もしくはターミナル）を開いて下記の様に入力していきます。 では、npm i （installのi）のコマンドでプロジェクトができたらテキストエディタを開きましょう。 また、デフォルトのページをテストサーバーで見たい際はnpm run devのコマンドで確認することができます。 viteで作成されたmain.jsがデフォルトのJavaScriptのエントリーポイントになります。 Google Map APIを作る では、コードに入る前にgoogle Cloudを使ってGoogle MapのAPIキーを作成します。まずは、googleクラウドのページにアクセスします。 右上の無料で利用開始をクリックします。 では、フォームを入力していきます。 では、次のページも完了させ登録を完了させてください。 次にコンソールのページが見れるのでそこから、プロジェクトの選択をクリックします。 次に、新しいプロジェクトをクリックします。 次に、プロジェクト名を適当に入れて、作成ボタンを押します。 プロジェクトが作成できたら、メイン画面の右上にプロジェクトを選択するリンクが表示されるのでそれをクリックします。 次にGoogle Cloudの左上のタブから①APIとサービス、②Google Map Platformの二つを探してピンしておきましょう。ピンはホバーしたときに表示される画びょうのアイコンでショートカットのように上部に持ってこられるので今後探す手間が省けます。 カスタムマップの作成 では、Google Cloudからカスタムマップを作成します。 Google Maps Platformからマップ管理を選択します。 次にCREATE　MAP　IDを選択します。 次に、マップの情報を入力します。 名前は、自分のプロジェクトを適当に入力します。説明も同じように適当に入れます。Map Typeはデスクトップで表示させたい場合は、JavaScriptを選択します。 下にあるRasterとVectorの選択はたデフォルトのRasterを選択します。Vectorでも良いですが、ブラウザによって対応していないものもあるので注意。 … Read more

three.jsを使って360度動画をブラウザ上で再生してみる

by
ブラウザで360動画を再生しよう

今日は、three.jsを使って360度動画をブラウザ上で再生してみます。 さらにマウスを使ってカメラの方向を変えてみます。 今回使う360動画はmp4形式ですが、OggとWebM形式でもブラウザで再生できます。 完成イメージはこんな感じになります。 GitHubで完成したコードはこちらになります。 動画に使っている動画をそのまま再生すると下記の画像のように伸びたような状態になっています。 three.jsを使ってこれを球体に変換してあげます。 その球体の中央にカメラを置いて360度に見えるようにすることが今日の目的です。 今回はthree.jsのサンプルコードを参考にしています。 今日の環境 コードのクローン ではgitを使って完成したコードを自分の環境にクローン（コピー）しましょう。Gitの使い方はこの動画でも説明しています。 ブラウザでhttp://localhost:5173/にアクセスしても、このままだと何も表示されません。 まずは、自分の360度動画を用意してthree.js-360video直下にvideoフォルダを作成して、その中身sample_video.mp4の名称で動画を入れると動画が再生されます。 もし、ファイルパスや動画名を変えたい場合はindex.htmlの下記の行を変えましょう。 これで動画が再生できるようになりました。 コードの中身を理解 では、コードの中身を説明していきます。main.jsを参照してください。 まずはinit()関数です。 前回の記事でも説明したようにthree.jsに必要な要素を作成しinit（イニシャライズ）させます。 必要な要素はカメラ、シーン、物体：geometry（今回は球体　=　SphereGeometry）です。 ここで、球体のgeometryにたいして、videoテクスチャを使用して、360度動画を貼り付けています。 rendererはレンダラーといい、シーンをHTMLにレンダーする役目をします。 ここではHTMLの幅いっぱいにレンダーするように指示しています。 最後に下記のイベントリスナーを加えています。 ではこれらを見ていきます。 onWindowResize関数 onWindowResize()関数では、ブラウザの幅が変わるたびに360動画のサイズを変更するように指示する関数です。 ポインター操作 マウスを使ってカメラの方向を変えます。いわば視線を変える関数になります。 動画の再生 動画の再生は2つの関数からできています。 animateでrequestAnimationFrameとupdateを繰り返しています。 requestAnimationFrameはJavScriptのデフォルトで使えるメソッド（Windowsオブジェクト）になります。これでブラウザが動画をレンダーする際に、update()を繰り返すようにしています。 update関数で使う用語を説明します。 lon：Longitude（経度） lat：Latitude（緯度） phi：poles（極・極座標） theta：equator angle（赤道角） これで、マウスを使って目線を変えるときの位置情報を更新するようにしました。

three.jsを使ってみよう

by
three.js 使い方

今日はJavaScriptライブラリで３Dオブジェクトを使う事ができるthree.jsを紹介します。 今回は基本としてオブジェクトを作成するところまで説明したいと思います。 環境 three.jsをインストール では、公式ドキュメンテーションに沿ってライブラリをインストールしましょう。 ついでにgsapのライブラリもインストールします。 これはブラウザに関係なくJavaScriptのアニメーションを動かしてくれるヘルパーになります。 Viteを使わなくても良いですが、お勧めなのでVanilla JSでもViteを使ってプロジェクトを作成してみましょう。 これでブラウザからデフォルトのぺージが見れるようになりました。 three.jsを始める前に three.jsでは３Dのオブジェクトが使えます。という事はそれに合わせて３Dを出力するための情報が必要になるわけですね。 必要な情報は： ①シーン（scene）：風景。three.jsに何をどこにレンダーするか決めます。 ②キャラクター：モノや、キャラのオブジェクト ③ライト：光の方向や強さなどを調整します。 ④カメラ（camera）：対象物に向けます。デフォルトでは、対象物と同じ位置なので離してあげます。 ⑤レンダラー（renderer）：シーンをHTMLにレンダーしてくれます。 では、下記の例が基本の例です。 これでHTMLに球体が表示されました。 キャラクター それぞれのメソッドに入れる引数で各パラメータを変えることができます。 上記の例では、SphereGeometry()で球体を呼び出しています。公式ドキュメンテーションでパラメータを変えながら実物をビジュアル化して確認することができます。 キャラクター（物体）のコードの例をおさらいします。 SphereGeometryの部分で形を指定します。 他にBoxGeometry（四角・箱型）や、ConeGeometry（コーン、三角の角）の形までいろいろあります。 このSphereGeometry( 15, 32, 16 )のコンストラクタの使い方を説明します。 今回はSphereGeometry（球体）で説明します。デフォルト値や入る値はそれぞれの形で変わるので参考までに理解して、応用してください。 radius — 半径（デフォルトで１）widthSegments — 水平のラインの数（最小値３、デフォルトで３２）多いほどなめらかになります。heightSegments — 垂直のラインの数（最小値２、デフォルトで１６）多いほどなめらかになります。phiStart — （水平のスタートする角度、デフォルトで０） 他に、phiLength、thetaStart、thetaLengthなども指定できますが、省きます。 素材 では、形（シェイプ）を決めたところでその素材（マテリアル）を決めます。これにより、光の反射の仕方やテクスチャ（感触）が変わってきます。 例としてMeshNormalMaterialを使うとこのように書けます。 このマテリアルはベクター素材をRGBカラーに変換してくれます。 素材の種類だけでもこんなにあります。 さらに各素材で指定できるパラメータがあるので必要に応じて確認してください。 これで、シェイプ（形）とマテリアル（素材）を合わせて物体を作成してシーンに追加します。 ライト 次にライトを見てみます。ライトの設定で、先ほど作成した対象物の見え方が変わってきます。 例えば、HemisphereLightを使うとこのように見えます。 このHemisphereLightは上空から照らすライトなのでこのような影が生成されます。 他に、AmbientLightを使うとこのようにグローバルに対象物を照らすライトが全体を明るくしてくれます。 AmbientLightだけだと方向の概念がないために、３Dのように見えませんね。 … Read more

ReactのuseMemoを理解する

by
useMemo-React

ReactのStame Managementのシリーズでは、useStateを使った簡単な状態管理、useReducerを使った複雑な状態管理の仕方を学びました。 今日はその続きとして、React HookのuseMemoの使い方を紹介します。 これはVueのフレームワークを使ったことがある方ならweatch()メソッドと同じになると理解してもらってOKです。 では、前回行ったreuceメソッドを利用した例を見ていきます。 まずは、こちらのコードを見てください。 ここでnumbers配列の数字の合計値をブラウザに表示しているようにしています。ここで感がれられる問題があります。もし、数字の入っている配列が膨大な数である場合、コンポーネントがレンダーされるたびにreduceの関数が実行されてコンポーネントのレンダーに時間がかかることが想定されます。 そこでuseMemoを使って、dependency（依存するデータ）を教えてあげることができます。 この場合でいうと、numbersの配列が変わらない限り答えは同じになるのでそれを教えてあげるわけです。 useMemoはそこまで難しいコンセプトではないので今日はこれくらいで。

ReactのuseReducerを理解する

by
reactのuseReducerを理解する

前回の記事ではReactのuseStateの正しい使い方を説明しました。 今回はReact Hooksのうちの一つであるuseReducerの使い方を説明します。 reducerとは まずは、JavaScriptのreduceメソッドについておさらいしましょう。 reduceは英語で減らすという意味ですね。イメージとして、配列の複数データを操作して１つの値に減らすためのメソッドであると考えてください。 useReducerも同じようにState（状態）を管理できるメソッドになります。 配列の数字をループして加算したい場合はこのようにできます。 これで、ブラウザに合計の60が表示されました。 同じことをreduceメソッドを使って行ってみます。 reduceメソッドは２つのパラメータを受け取ります。 最初のパラメータは関数で、2つ目が初期値（スタートポイント）になります。 これで同じように合計値の60がブラウザに表示されました。 reduce()関数の最初に使う関数では①accumulatorと②currentValueがパラメータとして使えます。 accumulatorはaccumulate(蓄積する)という意味です。つまり、今までの数値を累積（足した）値になります。いわば、前回までの累積値といえます。 2番目に来るcurrentValueは現在の値です。このようにreduceメソッドでは前回までの累積値と現在の値をどうするか、指示することができます。 今回の場合は単純に配列の前回の値（０番目）と現在地（１番目）を足すという指示をしています。 その次に配列の前回の値（０と１番目の累積値）と現在地（２番目）を足す。これを繰り返しているだけです。 これでreduceメソッドの使い方が理解できましたね。 useReducer ReactのuseReducerは基本はこのようになります。 useReducerからは２つの値が返ってきます。それを慣例的にstateと、dispatchと名称を付けて取っておきます。 useReducerがreturn返す値 state：現在の状態。最初のレンダーでは、初期値のinitialArg、もしくはinit(initialArg)が返ってきます。 dispatch：どのようにコンポーネントを再レンダーし、stateを更新するか指示する関数 useReducer関数の引数について reducer：reducerでは、stateがどのようにアップデートされたいのか指示することができます。 initialArg：デフォルト値（データタイプに指定はありません。） init?：オプショナルの引数です。もしinitialArgに何かしらの関数を実行したい場合はここで指示できます。その場合はinit(initialArg)になります。もし空の場合は、initialArgはデフォルト値として渡されます。 useReducerの実例 では下記の実例を見てみましょう。 このようにinputへの入力と同時にstate.nameの状態が更新されコンポーネントが再度レンダーされました。 inputに入力されれるたびにonChangeのdispatchが発火されpayload（データ）が更新されます。dispatchはuseReducerのstateを更新する役目があるので、コンポーネントが更新されたわけですね。 次に、ボタンを作成して、state.namesにnameのデータを追加していきましょう。 …のスプレッド構文を使って、配列に現在のstateを残したまま、新しいデータを追加しています。 これで、データの入力時に今までのデータを付けるので”追加”できるようになります。 このようにuseReducerを使うことで複雑なstate（状態）の管理が可能になります。

ReactのuseStateを徹底的に理解する

by
ReactのuseStateを理解する

Reactを学び始めてからSPA（シングルページアプリケーション）の良さが理解できたところでState Management（状態管理）を学んでいる方、useStateが理解できない方、このコンセプトを理解することは、コンポーネントのレンダーにもかかわる重要な部分になります。 Reduxなどのライブラリを使う前にも理解しておきたいです。 State Management State Managementはデータを管理するフロントエンド側のデータ倉庫のようなものです。これらはReact Hookの機能のうちのひとつです。React Hook（フック）はコンポーネントがマウント（読み込み）されたときにフック（実装）される機能と考えてください。 では実際にReactアプリを作成してコードを書きながらStateManagementを理解していきましょう。Reactのプロジェクトの作成の仕方はこちらの記事を読んでください。 まずは、メインのコンポーネントになるsrc/App.jsxの中身を削除して下記のように記述しましょう。 useState()はreactのデフォルトで使えるStateManagementのメソッドになります。これをインポートして App()のコンポーネント内に定義しましょう。const [count, setCount] でuseStateメソッドの最初の値（データになる部分）をcountという名称にしました。 2番目の値useState[1]にあたる部分は、とsetCountという変数名にしました。慣習として２つ目に来るsetterはsetで始まる名称を付けることが通常になります。setterというのはstate（状態）が変わることを指示をする関数になります。 これで<div>内の{count}の部分がデフォルトの10として表示されます。 ではこの１０に１の数字を足す関数を作ってみましょう。 まずは悪い例を紹介します。 ※これは悪い例です。 このボタンをクリックすると、addOne関数が発火されますが何も起きません。。。コンソールを見てみると下記の様なエラーが出ました。 constは再代入できない変数なのでエラーが出ました。 ではこのconst [count, setCount] = useState(10);をletに変えるとどうなるでしょうか？ 。。。。。。 。。。。 何も起きません。 しかもエラーも出ません。 なぜでしょうか。 にletを使って変数の値が変えられたとしてもReact側では、state（状態）が変化されたことが察知されていないからです。 ReactのState Managementの推奨ルールとして、constを使う事が定義されています。それは、Reactがコンポーネントを再レンダーした際に新しい値をconstの変数に読み込むことになるからです。それ以外の時に変数が変わってしまってもReactは理解することができません。ですのでその問題を防ぐためにもconstを使うことをお勧めします。 状態の変化を理解する では状態の変化を理解するために、同じ問題を別のコードで再現してみます。 オリジナルのnewNumはそのまま32と表示されますが、上書きした方のmyNumは０に変更されたものが表示されました。 オブジェクトの場合 オブジェクトを上書きした場合は、元のオブジェクトまで変更されてしまいました。 これは、JavaScriptの特徴でプリミティブのデータ（String、Number、Booleanなど）の場合はデータのコピーを返し、Array（配列）やオブジェクトの場合はReference（参照）できるデータを返します。つまり、オリジナルのデータという事になります。 このコンセプトを理解することが重要になります。 ではすべてオブジェクトにしてしまえばよいのでは？ そう思って、下記の様にオブジェクトにしたところ、Reactがcountの状態が変わったことを察知できなかったので実際にデータが変わったとしてもRe-render（画面の更新）が行われませんでした。 このようにコンソールには正しくcountの値が更新されていますが、Reactではレンダーされません。 そういう事なので、useState()のsetterを使ってuseState()で設定した値を更新すること必須であることが分かりました。 これは、useStateのsetterを使わないとReactがState Managementで管理しているデータの変化を察知できず、コンポーネントの再レンダーができないからです。 Setterを使ってstateを更新する では今までに学習したことをもとに、useStateについてくるSetter（useStateの2番目にあるメソッド）を使ってcountを更新します。 これでボタンを押したときに関数が変わり、Reactが最新の状態に合わせてレンダー（読み込み）してくれました。 prevStateを使った状態管理で解決できること 前回までに記載した現在の状態を操作するsetCount(count + … Read more

ReactでMaterial UI（MUI）を使ってみよう

by
ReactでマテリアルUIを使ってみよう

Material UI（MUI）はフランスの会社でReactをはじめとしたUIデザインのライブラリを提供しています。日本だとユニクロがマテリアルUIを使っているようです。 このUIデザインではGoogleのマテリアルデザインというデザイン言語（テーマ）をもとに洗練されたUIを作ることができます。 今日はReactにMaterial UIをインストールして使う方法を紹介していきます。オープンソースでコードをGitHubで見ることもできます。 Reactのプロジェクトをスタート 今回はViteを使ってReactを始めます。詳しいViteの使い方はこちらの記事を参照してください。今日はReactのプロジェクトを始めるために必要なコマンドだけ紹介していきます。 react >= 17.0.0 でreact-dom >= 17.0.0 以降のバージョンを使用することが前提です。 ではcdのコマンドでReactのプロジェクトフォルダに移動して、npmを使ってライブラリをインストールします。 Material UIをインストール では下記のコマンドでMaterial UIをインストールしていきます。 Material UIはデフォルトでEmotionというスタイルエンジンを使っています。詳しい使い方は後から説明します。これでJavaScriptでCSSスタイルの記述ができるようになったとだけ理解しておきましょう。 似た方法で、styled-componentsのライブラリを使ってスタイリングを記述する方法もあります。今回は省きます。 Robotoフォントのインストール Material UIはデフォルトでRobotoフォントを使用します。 こちらもインストールしておきましょう。もしインストールではなくCDNでフォントを使用したい場合は飛ばしてください。 フォントのCSSのインポートはこのように記述しましょう。 CDNでフォントを使用したい場合 GoogleのCDNで提供されているフォントを使用したい場合は<head>タグ内に下記を記述します。 アイコン 次にマテリアルUIで使用するアイコンをインストールします。 もし、インストールではなくCDNでアイコンを表示したい場合は下記の様に<head/>タグ内にリンクを記載しましょう。 Material UIを使ってみよう では、早速テキストエディタを開いてMaterialUIのボタンを使ってみましょう。 コンポーネントのインポートはimport Button from “@mui/material/Button”;を使用してください。これで、<Button/>コンポーネントが使用できるようになりました。 実際にnpm run devのコマンドで開発用のウェブサーバーを起動するとこのようにボタンができたことが確認できます。 レスポンシブmetaタグ Material UIはモバイルファーストのコンポーネントになります。ですのでPCでスケールアップする際にCSSのMedia Queryを使ってデザインを変えるようにしていきます。 すべてのデバイスで正しくレンダリングされるように<head>タグ内に下記の行を追加しておきましょう。 例としてスライダーもコピペで使えるようになりました。 テーマカラーとスタイリング 次にCSSのカスタムの仕方を見てみます。 各コンポーネントにsxというpropsを流すことができます。これでカスタムスタイリングを設定することができます。 下記の例を見てください。 このようにsxにカスタムしたいCSSを指示していることが分かります。 更に、ThemeProviderを使うことでテーマカラーを変更することができます。これはオプショナルなのでカスタマイズしたいときには使う事もできます。 基本はこれくらいです。 … Read more

console.logだけではないconsoleの使い方

by
consoleメソッド

フロントエンド開発にあたりconsole.log()は黄金のツールです。しかし、このconsoleオブジェクトにはもっと使えるメソッドがあります。正しく、そして効率よくデバッグを行うためにこのconsoleについて調べていきましょう。 console.logの問題 console.logだけを使っているとコードがconsole.logだらけになり、どのコードを実行しているのかわからなくなり、読みづらくなってしまいます。今日はconsoleで使える９の方法を紹介していきます！ console.table console.tableは表形式でデータを表示してくれるので読みやすいデータを出力することが可能になります。 これを実行すると下記のようにテーブルで結果が返ってきました。 console.group console.groupとconsole.groupEndを使ってネスト化されたアコーディオンでグループになったデータを表示できます。これで階層の違うデータを操作しながら確認することができますね。 このようにクリックしてデータをトグルできるようになりました。 console.time console.timeとconsole.timeEndで指定したコードブロックが実行されるまでの時間を計算することができます。 特にパフォーマンスの検証をする際に使えます。 今回はポケモンAPIのデータ取得にかかった時間をミリ秒で表示してみました。 このようにconsole.time()とconsole.timeEnd()内のストリングが同じ名前になっている部分を計算してくれます。 console.assert assertは断言するという意味になります。つまり、常にtrueになると想定する状況を構築しておきます。もし、指定した状況がtrueでない場合に記述しておいたメッセージを表示することができます。コードが正しく実行されているか確認するために、バグをいち早くキャッチするために有効になります。 この場合は、resuletが50で返ってくる想定として、5で返ってきたためにメッセージが表示されました。 もちろん、result ===5にすると関数が正しく作動していると検証されるのでコンソールには何も表示されなくなります。 console.logのスタイリング soncole.log()で表示させる内容をCSSでスタイリングすることができます。 このようにボールドで、赤文字のテキストが表示されました。 console.trace console.traceはスタックトレースをアウトプットしてくれます。コードが複雑になり、実行される順番を確認したいときに便利になります。 このように、関数bar()を実行した際に発火されたfoo()がどこから呼び出されたか理解することができます。 console.dir console.dirは、オブジェクトを階層ごとで表示することができます。もしオブジェクトをコンソールからみたい場合はこの方法が有効的です。 このようにトグルできるオブジェクトが表示されました。 console.count console.countメソッドでは、指定したコードが何回実行されたのかトラッキングすることができます。 このように、foo(‘hello’)が2回実行されたことが確認できますね。 console.clear console.clearを実行するとコンソールに表示されるデータがクリア（削除）されます。もし、デバッグのアウトプットが多くて対象のものにフォーカスしたい場合は使ってみるものありですね。 このように、clearされたことが表示されて、その後に新しくコンソールを使うことができます。 まとめ console.log()だけでない、consoleの使い方を９つ紹介いたしました。知らないもので今日から使えるものはありましたでしょうか？ 是非、活用してみてください。