Just a feel good
ES6より登場したアロー関数。最初は短くかけてすごく便利だと思って使っていましたが、使っていくうちに間違いに気付きました。関数リテラルのシンタックスシュガー的な物をアロー関数だと思って使っていたからです。特にthisの使い方でハマることが多かったのでおさらいしたいと思います。アロー関数を正しく使えるよう検証をしていきます。 アロー関数の書き方 アロー関数は以下のように書きます。 アロー関数を使って […]
Javascriptのイベントは3つのフェーズにわかれています。今回はこの3つのフェーズについて触れつつ、簡単な解説をしたいと思います。 3つのイベントフェーズとは イベントフェーズは以下の3つに別れています。 キャプチャリングフェーズ ターゲットフェーズ バブリングフェーズ キャプチャリングフェーズ なんらかのイベントが発生した時にDOMツリーをたどってルート要素から発生要素を探しに […]
マウスイベントを改めて学習してみることにしました。マウスオーバーやマウスリーブイベントなど端的に学習することはあっても普段使わないイベントに対しての知識が偏りがあったのでことのついでに再学習します。以下マウスイベントの一覧です。 マウスイベント一覧 mouseenter マウスカーソルが要素に入り込んだ時 mouseleave マウスカーソルが要素から出た時 mousemove マウスカーソルが要 […]
Javascriptを使いページ全体と要素内の縦・横のスクロール量を取得する方法をJavascriptとjQueryもそれぞれまとめました。 縦スクロール Javascript 要素内のスクロール量を取得 スプレッド演算子を使いHTML collectionの展開したケースです。モダンブラウザで対応しています。 Javascript 要素内のスクロール量を取得 その2 for文での展開です。ieを […]
NodeJsのExpressを使ってMySQLのデータを扱えるようにしてみたいと思います。今回はExpress及びMySQLはインストールが完了している前提となります。インストールの方法が知りたい方は以下のリンクを参考にしてください。NodeJsのExpressを使ってみた件MySQLをインストールしてみた件 データベースを作成しよう 最初にデータベースを作成します。データベースの情報は以下のよう […]
データベースの作成 MySQLを使いローカルにデータベースを作成してみたいと思います。まずはMySQLを起動し、Root権限でログインしていきましょう。※起動時のバージョン番号はご自身の環境に合わせ適宜変更ください。 // 起動 brew services start mysql@5.7; // ログイン mysql --user=root --password; ‘mysql> […]
MySQLを起動してみよう MySQLの設定は起動時に行います。まずはMySQLを起動しまてみます。※バージョンはご自身の環境にインストールしているものを利用してください。 brew services start mysql@5.7 以下のメッセージが出てくると正常に起動できています。Successfully started `mysql@5.7` 次はパスワードの設定です。 Rootのパスワード […]
MySQLをインストールし、ローカル開発をしてみたいと思います。今回の開発環境はMacOSを使用するためパッケージ管理システムHomebrewを用いてインストールを進めたいと思います。※Homebrewはインストールされている前提です。以下のコマンドでインストールできます。 brew install mysql@5.7 インストールが完了したら、次はMySQLをコマンドラインで使えるようにパスを通 […]
ファイル更新が完了したタイミングで自動でサーバーが更新されるように設定したいと思います。npmのパッケージnodemonとbrowser-sync使用し設定を進めていきます。browser-syncはソースコードの変更を監視し変更があった場合にブラウザをリロード。nodemonはソースを監視して、自動でサーバーを再起動してくれるパッケージです。インストールのコードは以下になります。 npm ins […]
NodeJsのExpressを使い簡単なアプリケーションを作ってみたいと思います。Ruby on RailsやPHPと比べ、javascriptだけでバックエンドも対応できるのでフロントエンドエンジニアからするとすごく取り組みやすいフレームワークになっています。 Expressのインストール まずはアプリケーション用のフォルダを作ります。その後ターミナルを使い作成したフォルダに移動し、以下のコマン […]