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をインストールしてみた件 データベースを作成しよう 最初にデータベースを作成します。データベースの情報は以下のよう […]
ファイル更新が完了したタイミングで自動でサーバーが更新されるように設定したいと思います。npmのパッケージnodemonとbrowser-sync使用し設定を進めていきます。browser-syncはソースコードの変更を監視し変更があった場合にブラウザをリロード。nodemonはソースを監視して、自動でサーバーを再起動してくれるパッケージです。インストールのコードは以下になります。 npm ins […]
NodeJsのExpressを使い簡単なアプリケーションを作ってみたいと思います。Ruby on RailsやPHPと比べ、javascriptだけでバックエンドも対応できるのでフロントエンドエンジニアからするとすごく取り組みやすいフレームワークになっています。 Expressのインストール まずはアプリケーション用のフォルダを作ります。その後ターミナルを使い作成したフォルダに移動し、以下のコマン […]
さて前回まででヘッダーの作成が完了しました。次はコンテンツ部分です。まずはTodo.vue、Task.vueの二つに共通するソート機能のボタン部分と、リストのタイトル部分をを作っていきます。 共通パーツをコンポーネント化する Todo.vue、Task.vue共通のソート機能をヘッダー下部に作っていきます。App.vueに直接書き込んでも良いのですが、この先違う画面の開発でソート機能のない画面を作 […]
今回はコンポーネントの親である、App.vueファイルでヘッダーとフッターのカスタマイズをしてみたいと思います。 ヘッダーの修正 ヘッダー部のリンクの変更とCSSを調整したいと思います。変更するファイルはrouter.jsとApp.vue。また、新規タスク登録用ページTask.vueの新規作成です。 まずはTask.vueを作成してしまいましょう。 Task.vueの作成 Task.vueに関して […]
前回はインストールしたファイルをどのように描画しているか順をおって説明しました。今回はTODOリストをつくって行けるようにいじってみたいと思います。 Todo.vueファイルを作る まずはTodo.vueファイルを作りルーターに渡していきたいと思います。まずは新規ファイルを作成し、そこに最低限の記述だけ先にしていきます。 // Todo.vue<template> <div class […]