二重否定「!!」の意味 以下はブラウザがCanvasをサポートしているかチェックしているソースである。 ・ソース元 http://tympanus.net/Development/InteractiveParticlesSlideshow/js/particlesSlideshow.js var canvas = document.createElement('canvas'); // Browser supports canvas? if(!!(capable)) { //省略 } else { console.error('Sorry, switch to a better browser to see this experiment.'); } function capable() { return canvas.getContext && canvas.getContext('2d

slice メソッド Array#slice() メソッドを使用すると、ある配列の部分配列（スライス）を取得することができます。 最初のパラメータで部分配列の最初のインデックスを指定し、2番目のパラメータで最後のインデックスを指定します（この要素自身は含まれません）。 2番目のパラメータを省略すると、末尾までの部分配列を作成します。 var a = [1, 2, 3, 4, 5]; var b = a.slice(0, 3); //=> [ 1, 2, 3 ] var c = a.slice(1, 4); //=> [ 2, 3, 4 ] var d = a.slice(3); //=> [ 4, 5 ]

filter() メソッドは反復処理メソッドです。指定された callbackFn 関数を配列の各要素に対して一度ずつ呼び出し、 callbackFn が真値を返したすべての要素からなる新しい配列を生成します。 callbackFn は値が代入されている配列の添字に対してのみ呼び出されます。 callbackFn は値が割り当てられている配列インデックスに対してのみ呼び出されます。疎配列の空のスロットに対しては呼び出されません。 filter() メソッドはコピーメソッドです。これは this を変更するのではなく、元の配列と同じ要素を格納したシャローコピーを返します。しかし、 callbackFn として指定された関数は配列を変更することができます。ただし、配列の長さは callbackFn を最初に呼び出す前に保存されることに注意してください。したがって、 callbackFn は、

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback slice() は Array インスタンスのメソッドで、配列の一部を start から end （end は含まれない）までの範囲で、選択した新しい配列オブジェクトにシャローコピーして返します。 ここで start と end はその配列に含まれる項目のインデックスを表します。元の配列は変更されません。

どんな本？ 機能ごとに解説している Vue.js 入門書です。これからはじめる方にも、すでに Vue.js をお使いの方にも、楽しんでいただける内容になっています。 しっかり学習できる！ Vue.js は直感的に使える機能が多く、雰囲気で使ってしまいがちです。どんなメリット＆デメリットがあるかも解説しているため、しっかりと学習できます。 「Vue.js が楽しい！」ウェブフロントエンド界隈でこの言葉を耳にすることが増えました。 フロントエンドを取り巻く技術の進化によって、フロントエンドの役割は増え、フレームワークもより身近なものになっています。 この本では「Vue.js ってなに？」「フレームワークってなに？」という基礎概念と導入からプロダクトに役立つ情報までを体系的に解説しています。 これから JavaScript のフレームワークを始める方にはもちろん、すでに Vue.js をお使いの

本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。初回となる今回は、簡単なサンプルを通して、Vue.jsとTypeScriptの概要と機能を紹介していきます。 はじめに Webフロントエンド開発の分野では、JavaScriptを利用して動的なWebページを構築できるライブラリーやフレームワークがいくつかあります。Googleが中心となって開発しているAngularやその前身であるAngularJS、Facebookが中心となって開発しているReactなどが有名です。 本連載で取り上げるVue.jsも、そのようなフレームワークの一つです。JavaScriptを利用して、データとWebページの内容を結び付けて（バインディングして）表示したり、Webページ

yarn runでローカルパッケージが実行できるのが便利でyarnをメインで使っています。 フリーランスで色々なプロジェクトに関わっていると、プロジェクトごとにモジュールのバージョンを揃えておいたほうが安全なので基本的にパッケージはプロジェクト配下(ローカル)にインストールする方が安全なのでyarnでローカルにモジュールをインストールしてyarn runでローカルパパッケージから実行する方法がたいへん便利です。 だた個人でやってるプロジェクトなら都度ローカルにインストールしておくとnode_modulesフォルダがHUUUUUUUGIになってしまう問題もあるのでよく使うものはグローバルにインストールしたほうが良さげな場合もあります。 で、yarnでグローバルにインストールする際に罠があったのでメモ yarnでグローバルにインストールする場合はglobalオプションを付ける場所に注意が必要！

はじめに 今回はFlyCode氏が紹介していた、Reactを学ぶ上で知っておくべきJavaScriptの基本概念を紹介します。 具体的なJavaScriptでのコード解説と、Reactではそれがどのように使われるのかを紹介します。 この記事の対象者 JavaScriptのよく使う基本文法を学びたい人 Reactの初心者から中級者 この記事の目標 React開発でよく使われるJavaScriptの文法や処理を理解する JavaScriptの基礎文法 本記事では下記の7つをピックアップして紹介します 三項演算子 分割代入 スプレッド構文 配列操作 アロー関数 非同期処理(Async/Await/Promise) APIコール 三項演算子 三項演算子はMDNでは下記のように解説されています。 条件 (三項) 演算子は JavaScript では唯一の、3 つのオペランドをとる演算子です。 三項演

こんにちは！kossyです！ さて、今回はaxiosのinterceptorsを使って、HTTPリクエストの際に処理を挟む方法を検証してみたいと思います。 環境 Vue 3.0.5 Vue CLI 4.5.9 npm 6.14.8 node 14.15.0 axios 0.21.1 TypeScript 3.9.7 方法 リクエストの際にTokenをRequestHeaderに仕込みたいとします。 簡易的な例としては、以下になると思います。 import axios from 'axios' axios.interceptors.request.use(config => { config.headers = { 'access-token': localStorage.getItem('access-token') } return config }) ローカルストレージに認証トークンが

はじめにフロントエンドでの開発中、API がデプロイされていない状況でも、API 通信の挙動を確認したい！ そんな状況は開発を行っている中でよく遭遇します。 特に新規開発では、フロントエンドとバックエンド同時に開発が進むことが多いため、フロント側で動作確認したい API がまだ開発中...というパターンが多いです。 そこで、そんな時に手軽にローカルで API の挙動が確認できるモックサーバーの作り方と使い方を今回紹介していきます。 環境構築json-server という Node.js のパッケージを使用するため、Node.js をインストールする必要があります。 json-server は手軽に REST API のモックサーバーを作ることのできるパッケージです。 https://github.com/typicode/json-server 基本的な GET メソッドの REST AP

Vue.jsのプロジェクトにVue Routerを後から導入する Vue.jsのプロジェクトをVue CLIで作成した後にVue Routerを導入する方法です。 下記のコマンドで、導入することができます。 $ npm install vue-router@4 実行すると、下記のようにインストールが完了します。 $ npm install vue-router@4 added 23 packages, and audited 24 packages in 7s 1 package is looking for funding run `npm fund` for details found 0 vulnerabilities インストールが完了すると、package.jsonに追加されていることが確認できます。 { "name": "first-app", "version": "0.1.

Vue.jsとは Vue.js（ビュージェイエス）は、インタラクティブなUIを構築するためのJavaScriptライブラリです。Webサイト内のウィジェットや管理画面のダッシュボードといったビュー（view）層に特化しています。設計の特徴としてMVVMパターンに影響を受けています。 Vue.jsは2013年にEvan You氏の個人プロジェクトとして開始、2014年2月にバージョン0.8が正式に公開されます。その後いくつかのリリースを経て、2015年4月にLaravelへの標準搭載決定を機に一気に知名度があがりました。2015年10月に1.0が、2016年10月1日（日本時間）に2.0がリリースされ現在に至ります。 Vue.jsの主な特徴には以下のものがあります。これらによって短期間で実用的なアプリケーションを作成できるため人気を集めています。 シンプルなAPIやHTMLベースの平易なテン

チームでフロントの開発する時に node のバージョンが異なっているとインストールされるパッケージのバージョンとか依存とかで面倒なことになる可能性があるので揃えておくのが良いと思っています。 〇〇のバージョンをインストールしてください。とお願いしても確実性がないので極力仕組みで解決したい。 node.js のバージョンを管理できる nodenv の導入 追記 node.js のバージョン管理を Volta に乗り換えました nodenv の導入方法 homebrew で anyenv をインストールして anyenv 経由で nodenv をインストールします $ brew install anyenv $ echo 'eval "$(anyenv init -)"' >> ~/.zshrc $ anyenv init $ exec $SHELL -l # nodenv のインストール $