- 1. 「絶好調」「好調」「普通」「不調」「絶不調」を顔判定！
- 2. 【学習記録㉒】Vuexのactionsを用いて非同期処理を実装する！
- 3. 【学習記録㉑】Vuexを用いて各コンポーネント間でデータを受け渡す。
- 4. 【学習記録⑳】Scroll Behavior関数を用いて遷移先の特定の項目へスクロールする。
- 5. 【学習記録⑲】名前付きルートを用いてページ遷移を行う。
- 6. 【学習記録⑱】$routerを用いてページ遷移を行う！
- 7. 【学習記録⑰】childrenオプションを用いてネストしたルートを設定する。
- 8. 【学習記録⑯】router-linkタグを用いてページの切り替えを行う方法。
- 9. 【JavaScript】関数とオブジェクト⑲ Symbol
- 10. 【サイト高速化】ページ表示速度を向上させる「lazysizes.js」の使い方
- 11. 顔からラグビー部かサッカー部かを判断する
- 12. React axiosを使用して画像ファイルをAPI送信したい
- 13. 型推論入門
- 14. 「とりあえずプログラミングを始めたいけれど、何の言語を勉強すれば良いか分からない」に答える ~~JavaScriptから勉強し始めた方が良いと思う理由~~
- 15. RxJSのswicthMapを動かしてみる
- 16. はじめてのJavaScript⑱ 「関数の演習」
- 17. apexchartsでデータが無いときに任意のテキストを表示する
- 18. 【Vue.js】v-else-if
- 19. はじめてのJavaScript⑰ 「Functionコンストラクタ」
- 20. ウェブサイト用の17の無料ツールチップライブラリ
「絶好調」「好調」「普通」「不調」「絶不調」を顔判定！
##今日の体調を顔で判定してくれる！
出社時、上司に「顔疲れているよ、大丈夫？」とか、「疲れてそうだね」とか顔で決めつけられるシーンとかよくありますよね？店舗で勤務している時も従業員に、「店長大丈夫？最近寝てないでしょう？」「店長顔が老けた」とか言われることが多々ありました。
自分では、「結構寝てるのに」とか「疲れてないんだけどなぁ」とか感じるシーンがよくありました。
自分で見る顔と他者から見た時の顔の印象って大きく違うという事ですね！##そんな課題を解決する仕組みを開発
自分の顔の状態を確認できる仕組み。
「絶好調」「好調」「普通」「不調」「絶不調」と顔で認証してくれる。
また、状態に合わせたコメントも見れる仕組み。
「絶好調」:ガンガン攻めてこう！
「好調」:そこそこ攻めよ！
「普通」:平常心
「不調」:今日は、やめとけ！顔が疲れてる！
「絶不調」:早急にレッドブルを！人と顔を合わせない方がいい！##成果物
①codepenを張る
②写真も載せる##開発環境
・[TeachableMachine](https://teachablemachine.withgoogl
【学習記録㉒】Vuexのactionsを用いて非同期処理を実装する！
# はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回は`actions`を用いて非同期の処理を実装します。## actionsとmutations
[前回の記事](https://qiita.com/Ooooooomin_365/items/37b2e9752f781a855ee2)では`mutations`を用いて`state`へアクセスしていましたが、mutationsでは非同期の処理を書くことはできません。[Mutations Must Be Synchronous](https://next.vuex.vuejs.org/guide/mutations.html#mutations-must-be-synchronous)
非同期の処理を書くためには`actions`で非同期の処理を書きます。`actions`は`mutations`へ処理をcommit(委託)することで状態を変更しています。
## 実際にactionsへ非同期処理を書いてみる
今回は前回の記事で作成した「ボタンをクリックしたら数字がカウントア
【学習記録㉑】Vuexを用いて各コンポーネント間でデータを受け渡す。
# はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回は`Vuex`を用いて各コンポーネント間でデータを受け渡す内容について記載していきます。## Vuex
今までは各コンポーネント間でデータを渡す際は`props`や`$emit`を用いてデータを受け渡してきました。
もちろん、それらの方法でも問題ないのですが、コンポーネントが深い木構造になってくると何度も`$emit`を利用したりするなど、管理がかなり大変になります。`Vuex`ライブラリを用いると、深い木構造になっていても一発でデータを取得することが出来たりと、とても楽になります。
※`Vuex`はあくまで大規模用の際に便利というものであり、コンポーネントを多数使わないような小規模のアプリの場合は無理に用いなくても大丈夫です。### Vuexのインストール
現在僕が利用しているVue.jsのバージョンが3のため、Vuexはバージョン4をインストールします。
インストールは以下の公式ドキュメントに沿って行いました。“`console
npm install vu
【学習記録⑳】Scroll Behavior関数を用いて遷移先の特定の項目へスクロールする。
# はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回は特定のページへ遷移後、指定された位置までスクロールする処理の実装について記載します。
通常、URLの後ろなどに`#example`等付けてリクエストを送ると、その要素を持つ位置まで自動でスクロールが走ります。
しかしながら`Vue Router`ではその機能が動かないように制御されており、実際にその機能を実現する際は専用の処理を書く必要があります。## Scroll Behavior関数
特定のページへ遷移後、指定された位置までスクロールする処理を実装するためには`Scroll Behavior関数`を用いる必要があります。https://next.router.vuejs.org/guide/advanced/scroll-behavior.html
使い方としては以下のようにルーティング設定を行っているファイル内で`scrollBehavior関数`を宣言し、専用の処理を書いていきます。
“`js:router.js
const router = create
【学習記録⑲】名前付きルートを用いてページ遷移を行う。
# はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
[前回の記事](https://qiita.com/Ooooooomin_365/items/1d1ac361df543af7c87a)にて`$router`を用いてページ遷移を行う方法について記載しましたが、今回はその中でも以前`path`ルートで遷移したのに対して`name`ルートを用いてページ遷移を行っていこうと思います。## 名前付きルート
`path`ルートが直接URLを書くものだったのに対し、`名前付きルート`はルート設定ファイルにて対象のルートへ名前を付けた後、その値を用いることで同様の機能を作成できます。
以下のように`router.js`でルート設定を行っている部分で名前を付けた後…“`js:router.js
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: ‘/Morning/:detail
【学習記録⑱】$routerを用いてページ遷移を行う！
# はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
[前々回の記事](https://qiita.com/Ooooooomin_365/items/f655e714223e9d654120)にて、`router-link`を用いてページ遷移する方法について記載しましたが、今回は`$router`を用いてページ遷移を行う方法について記載します。なお、以下の公式ドキュメントによると`router-link`の動作の中身が`$router`とのことなので、両者での挙動の違い等はないようです。
https://next.router.vuejs.org/guide/essentials/navigation.html#navigate-to-a-different-location
## サンプルコード
上記のドキュメントを参考に、`$router`を用いてページ遷移を行ってみます。
今回は「朝食ボタン」「詳細ボタン」をクリックすると、それぞれのページに遷移するという内容にします。“`vue:App.vue
【学習記録⑰】childrenオプションを用いてネストしたルートを設定する。
# はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回はVue Routerにて、`children`オプションを用いてネストしたルートが正しく認識されるように設定していこうと思います。## ネストしたルート
[前々回の記事](https://qiita.com/Ooooooomin_365/items/7b29806171d7b220ba6f#%E3%83%AB%E3%83%BC%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E8%A8%AD%E5%AE%9A)にて、ルートファイルの設定を行いました。
しかしながら、上記の設定のみでは対象の`path`以降、例えば`/test`ルートをセットしていた場合は`/test/1`や`/test/details`などのそれに続くpathに対応ができません。
その対応を行うのが今回の記事で記載する`children`オプションです。## childrenオプション
childrenオプションの使い方は以下のように対象の親p
【学習記録⑯】router-linkタグを用いてページの切り替えを行う方法。
# はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回は`router-link`タグを用いてページの切り替えを行う方法について記載していきます。## router-linkタグ
router-linkタグを利用することで、特定のページへ遷移することが可能になります。
通常別のページへ遷移する際は``タグを利用します。
しかしながら`router-link`はaタグとは動きが少し異なり、一つのhtmlファイル内で表示を切り替える、いわゆるSPA（シングルページアプリケーション）の動きを可能にします。https://next.router.vuejs.org/api/
## 実際に動作を見てみる
今回は`朝の挨拶`と`昼の挨拶`を`router-link`タグを用いて切り替えてみます。
以下ではrouter-linkタグのpropsの`to`と`active-class`を使用しています。**to** → 遷移先
**active-class** → 現在ページの際に指定されているclass名が付与される“
【JavaScript】関数とオブジェクト⑲ Symbol
#はじめに
Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。
前回の記事
https://qiita.com/nao0725/items/fdbfb7935863f2aa1fe3
#目的
* 関数とオブジェクトについての理解を深める
#本題
###1.SymbolSymbolとはプロパティの重複を避けるために必ず一意の値を返す関数
####例1
Symbolの使い方
“`js
// Symbolを定義
// コンストラクター関数とは違い、new演算子を使わない
const a = Symbol();
// Symbol()と出力される
console.log(a);
// 文字列や数値も引数として渡せる
const b = Symbol(“hello”);
// Symbol(hello)と出力される
console.log(b);
// 例えば同じ値を別な変数に入れると
const c = Symbol(
【サイト高速化】ページ表示速度を向上させる「lazysizes.js」の使い方
# lazysizes.jsとは
アクセス時にブラウザの表示領域外の画像の遅延読み込みをするライブラリです。
特に画像が多いページでは表示速度に大きく差が出るので、使用をおすすめします。※画像の遅延読み込みとは
ブラウザの表示領域の画像のみを読み込み、領域外の画像は読み込み待ち状態となることです。# lazysizes.jsを使用するメリット
#### ユーザビリティの向上
ページ表示速度を向上させることでユーザーにストレスなく、Webサイトを閲覧してもらえるので、ユーザビリティの向上に繋がります。#### SEO対策
Googleによりページ表示速度を向上させることはSEO上有効とされています。# 使用方法
#### 1.ファイルを読み込む
GitHubから「lazysizes.js」または「lazysizes.min.js」をダウンロードしてhtmlのhead内で読み込みます。
※「lazysizes.min.js」はファイルサイズを縮小した圧縮版です。https://github.com/aFarkas/lazysizes
“`html
顔からラグビー部かサッカー部かを判断する
#自分の顔からラグビー部かサッカー部かを判断してくれるAIをつくりました
早速ですが、こちら使ってみてください。
https://codepen.io/naokiuc/full/vYJWwZN
あなたはラグビー部でしたか？
それともサッカー部？#昔のラグビー部
皆さん、ラグビーにどんなイメージがありますか？いまでこそメジャーとなったラグビー。
日本代表の試合が当たり前のようにテレビで放送されますし、ラグビーの試合がニュースで取り上げられるのも当たり前となりました。
ラグビーがこんなに注目されるようになったきっかけは2015年のW杯で日本が南アフリカに勝ってからです。
当時はジャイアントキリングとして世界でも大々的に取り上げられ、一部ネット上ではこれがどれくらいすごいかの大喜利となり「
React axiosを使用して画像ファイルをAPI送信したい
#目的
Reactで画像などのファイルデータをAPIに送信する方法をまとめてみました。
以下の方に、参考になれば幸いです。
・Reactの画像ファイルの送り方がわからない。
・axiosを使用して送信したい。今回は、画像ファイルと文字ファイルを同時に送っています。
#導入
axiosライブラリを使用する準備をします。“`react:ターミナル
npm install axios
“`#画像ファイルの送信方法
以下のコードで送信することができた。“`react:send,js
import React from ‘react’;
import { useState } from ‘react’;
import axios from ‘axios’;function Send() {
const [title,setTitle] = useState();
const [image,setImage] = useState();const handleSubmit = () => {
const file = new FormD
型推論入門
型推論はなにもわからないけど、とりあえず動くものが書けたので備忘録です。
200行ちょっとですので、型推論の雰囲気を知るのにちょうど良いかもしれません。“`JavaScript
‘use strict’// 便利関数
const print = (…a) => console.log(…a)
const str = o => JSON.stringify(o, null, ‘ ‘)
const eq = (x, y) => str(x) === str(y)
const fail = (msg, o) => { throw new Error(msg + ‘ ‘ + str(o)) }
const until = (f, g) => {
const l = []
while (f()) {
l.push(g())
}
return l
}// ソースコードをトークン毎に分解し、丸括弧毎に配列へ変換
// 処理イメージ: (def add a b (+ a b)) -> [“def” “add” “a” “b” [“+” “a” “b”]]
「とりあえずプログラミングを始めたいけれど、何の言語を勉強すれば良いか分からない」に答える ~~JavaScriptから勉強し始めた方が良いと思う理由~~
こんにちは、エンジニアのうるです。
今回はタイトルにあるように「**とりあえずプログラミングを初めてみたいけれど、どの言語から始めれば良いのか分からない…**」「**プログラミングをやってみたいが開発環境の構築が難しくて、前に進まない…**」という方に向けて自分なりの見解を示そうと思います。**※作りたいものがない or 勉強したい言語や技術は無いけど、プログラミングをやってみたいという方向けです。**
プログラミング界隈では「作りたいものがあるわけではない…」「とりあえず、少しやってみたい！」に対する**プログラミングの敷居が個人的には少し高い気がします**。
自身も独学で勉強していた頃は、「何の言語をした方がいいのか…」と思ってた時期がありました。
しかし、この疑問に対する既存の主な回答は「**作りたいものから逆算すれば良い**」というものかと思います。これが少しばかり雑な感じがする（プログラミングに対する敷居を上げている気がします。。）ので、そういう方にこちらを読んでいただければと思います。
# 自分の回答はJavaScript
「とりあえずプログラミ
RxJSのswicthMapを動かしてみる
# switchmapとは
switchMapとはoperatorの一つです。
ただし挙動が特殊です。しかも日本語の資料がほとんどインターネット上にないのでわかる範囲で挙動をまとめてみました。
ちなみに私の場合はAngularのプロジェクト内でRxJSを使っています。
**※素人が書いているので間違っているところがあれば指摘していただけると助かります**# 動かしてみる
switchMapを一言でいうと受け取ったObservableが持っている値を下流に流すoperatorです。
とりあえず今回書いたコードを以下に転記します。“`src\app\app.component.html
“`“`src\app\app.component.html
ngAfterViewInit() {
let element = document.getElementById(‘rxjsSample’);// クリックイベント時に1を流すObservableを作成
はじめてのJavaScript⑱ 「関数の演習」
#目次
[1.はじめに](https://qiita.com/Stack_up_Rising/items/d25ded4432e037084341#1-%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB
)
[2.演習内容](https://qiita.com/Stack_up_Rising/items/d25ded4432e037084341#2-%E6%BC%94%E7%BF%92%E5%86%85%E5%AE%B9
)
[3.演習の条件](https://qiita.com/Stack_up_Rising/items/d25ded4432e037084341#3-%E6%BC%94%E7%BF%92%E3%81%AE%E6%9D%A1%E4%BB%B6
)
[4.実践](https://qiita.com/Stack_up_Rising/items/d25ded4432e037084341#4-%E5%AE%9F%E8%B7%B5
)
[5.おわりに](https://qiita.com/Stack_up_Rising/items/d25ded4432e03
apexchartsでデータが無いときに任意のテキストを表示する
#はじめに
react-apexchartsを用いてグラフの描画を行っています。
データが無いときに、「まだデータがありません」というテキストを表示させるのに少し手間取ったのでメモします。#option: noDataを使う
データが無いときのテキストの指定には、`noData`というoptionを使います。
以下は円グラフをReactで表示させるときの例です。
グラフの代わりに「データがありません」のテキストを表示できます。“`PieCharts.js
import React from ‘react’;
import Chart from ‘react-apexcharts’;const PieCharts = (props) => {
const [options, setOptions] = useState({
labels: [‘A’, ‘B’, ‘C’, ‘D’],
colors: [‘#FADE03′,’#33691E’, ‘#0D47A0’, ‘#B71C1C’],
noData: {
【Vue.js】v-else-if
#はじめに
こんにちは！
今回は【Vue.js】v-else-ifについてアウトプットしていきます！#v-else-ifとは
`v-if`→`v-else-if`→`v-else`といった感じで使われます。
`v-if`でない時は`v-else-if`が表示される。そうでもない時は`v-else`というイメージです。
Javascriptでいうところの`else if`に相当します。#書き方・解説
例題として信号機の色の示す意味を出力するプログラムを書いていきます。“`HTML:HTML
Stop
Caution
Go
Not red/yellow/blue
“`
“`Vue.js
var app = new Vue({
el: “#app”,
はじめてのJavaScript⑰ 「Functionコンストラクタ」
#目次
[1.はじめに](https://qiita.com/Stack_up_Rising/items/0b3c1246da8138c477f1#1-%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB
)
[2.概要](https://qiita.com/Stack_up_Rising/items/0b3c1246da8138c477f1#2-%E6%A6%82%E8%A6%81
)
[3.構文](https://qiita.com/Stack_up_Rising/items/0b3c1246da8138c477f1#3-%E6%A7%8B%E6%96%87
)
[4.内容は](https://qiita.com/Stack_up_Rising/items/0b3c1246da8138c477f1#4-%E4%BE%8B%E9%A1%8C
)
[5.おわりに](https://qiita.com/Stack_up_Rising/items/0b3c1246da8138c477f1#5-%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB
)
ウェブサイト用の17の無料ツールチップライブラリ
今日は、多くの便利な機能を備えたWebページ用のHTML CSSJavascriptで機能的なツールチップを作成するのに役立つライブラリを学習します。
#ツールチップとは何ですか？
ツールチップは、ユーザーがWebページ内のオブジェクトにカーソルを合わせたときに詳細に注釈を付けるのに役立つ要素です。 私の意見では、それはサイトの新しいユーザーがその追加情報を通して機能を明確に理解するのを助けるでしょう。 通常はタグのtitle属性のように見えますが、ツールチップライブラリを使用すると、美しいツールチップを簡単に設計して、サイトに機能を追加できます。#Tippy.js
Tippy.jsは、ツールチップを簡単に作成できる強力なライブラリです。 ツールチップテーマの設定、ツールチップのネスト、表示位置の変更など、ツールチップ機能をHTMLオブジェクトに拡張する柔軟性があります。 また、非常に簡単で、npm、yardを介してインストールすることも、CDNを使用して直接使用することもできます。 HTMLページ（reactサポートライブラリも利用可能）。 また、Webサイトに適用可能な場合にプ
