f@ctor

JavaScript関連のことを調べてみた2020年05月09日

JavaScript関連のことを調べてみた2020年05月09日
目次

【悲報】連休が終わる【Vue.js + Django REST frameworkで作るカレンダー】

## はじめに

ああ…長かった連休が終わる…。月曜から仕事なんて考えられない…。ずっとゴロゴロしてたい…。
　　

12連休が終わりに近づき、**絶望的な心境**の中、せめて次はいつ祝日がやってくるのかという**一筋の希望**を原動力にしないともう生きていけないという考えに至り、**あと何日で次の祝日がやってくるか表示できるカレンダー**を作成しました。
　　

今回はVue.jsとDjango REST framework(DRF)を使い、簡単なAPIを実装してみました。
　　
　　

## 完成版

以下の gifです。　※GitHubは[こちら](https://github.com/aloabtshk/django_calendar)
![ezgif.com-video-to-gif (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568173/629fd813-ec18-6ade-69ab-18ac9861dfd2.gif)

テーマは**「連休が終わるという悪夢」**です。

ボタン

元記事を表示

フォームを送信する前にブラウザの確認ダイアログを表示する(Vue編)

##やりたいこと
　”フォームを送信する前に確認をはさみたい” というのはよくあることだと思います。この記事では、Vueを導入しているプロジェクトのもとで、ブラウザの confirm()※確認ダイアログ を使ってそれを実現する場合にはどうすべきかを解説します。注意点として、フォームの送信は通常のブラウザからの送信であり、axiosは用いていないものとします。

##サンプル

エンジニアに転職したら在宅勤務になったのでポモドーロ タイマー作った　その１

# 記事の内容
　４月１日から地方でエンジニアとして転職をしたら、コロナの影響でさっそく在宅勤務になってしまい、ずっと座りっぱなしも身体に悪いなーと思ったので、勉強がてら「ポモドーロタイマー」を作った。その中で初心者の中の初心者が学んだことを整理していく。先輩方が軽くレビューしてくれたので、その記録も残しながら記します。

# 学習初期の状態
– 転職のために`Ruby`,`Rails`を少しかじった程度
– JSはこの４月に初めて学んだ

## 学習教材
– progate 2日くらい
– JavaScript 本格入門　２週間くらいかけて読んだ

## 今回学んだこと
– 作るときは他の人が読みやすく、変更しやすいように記述すること
– マジックナンバー
– 三項演算子
– `let`と`const`
– `アロー関数`

## 作成開始や
見た目はhtmlとCSS使ってチョロっと（めちゃくちゃ苦労して）作った。

### コードを書くのに命名規則とかあるんやな
まずは、時間の設定をして

“`javascript:timer.js
const WORK_TIME = 2

元記事を表示

【JavaScript】関数の戻り値について。値を戻す場合、真偽値を戻す場合

#【JavaScript】関数の戻り値について。値を戻す場合、真偽値を戻す場合

戻り値を理解すると、共通処理である関数を使うメリットが増えるので整理します。

##計算結果を返す戻り値
計算結果を返す関数の例。

const add=(number1,number2)=> {
return number1+number2;
}
console.log(add(1,2));

これを
・計算処理のadd関数
・addに引数を渡す定数sum
・省略記法(returnと{}の省略）
でさらに整理。

const add=(number1,number2)=> number1+number2;
const sum = add(1,2);
console.log(sum);

この場合、戻り値（return）の対象であるnumber1+number2は値を返している。
関数addは計算の共通処理を実行している。
実行結果は3となる。

##判定結果を返す戻り値
判定結果を返す関数の例。
returnにtrueとなる条件を書くことで

元記事を表示

[備忘録]JavaScritptでRange配列を作る

以下の結果はすべて同じになるので

“`js
console.log(
Array.from({ length: 10 }).map((_, index) => index)
);

console.log(
Array.from({ length: 10 }, (_, index) => index)
);

console.log(
[…Array(10).keys()]
);
“`

“`
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
“`

上記のどれかを使って以下のようなRange関数がつくれる。

“`js
function range(start, end) {
return Array.from({ length: end })
.map((_, index) => index + 1)
.filter((num) => num >= start && num <= end); }

元記事を表示

【JavaScript】function構文とアロー関数の違い、省略した書き方について

#【JavaScript】function構文とアロー関数の違い、省略した書き方について

function構文で書いた以下の記事を発展させ、アロー関数について整理します。

【JavaScript】関数、ローカルスコープ、グローバルスコープ、引数、戻り値
https://qiita.com/kuro_96/items/21e670aa10861d997f8a

##アロー関数を使うメリット
次の条件で省略が可能、コードがシンプルになる
　・引数が1つの場合：引数を囲む()を省略できる
　・引数がない場合：()だけ記載する
　・実行内容が1文である場合：{}を省略できる
　・多くの学習サイトでfunction構文からアロー関数への移行が進んでいる（情報が多い）

以上がfunction構文よりもアロー関数を使う理由です。

##function構文の関数の書き方（復習）

###関数を作る
constで関数の容れ物を作り、

const 関数名 = function(){
実行内容;
}

作った関数を呼び出すときは

関数名();

元記事を表示

【JavaScript】関数、ローカルスコープ、グローバルスコープ、引数、戻り値

関数について理解を整理しました。
アロー関数ではなく、function構文で説明しています。

##関数
処理をまとめたもの。
たとえるなら自動販売機、ツクールならコモンイベント。

関数を作る＝処理内容（商品）を登録しておく。
関数を呼ぶ＝ボタンを押して処理（商品）を取り出す。

###関数を作る、実行する

function 関数名(){
実行内容;
}
関数名();

—

function hello(){
console.log(“こんにちは”);
}
hello();//関数helloを実行

##ローカルスコープ
関数で定義された変数（var,let）は関数内でしか使用できない。

function hello(){
let name = “you”;
console.log(`スコープ内からこんにちは${name}さん`);
}
hello();
console.log(`スコープ外から、こんにちは${name}さん`);

元記事を表示

WebComponents でルーターを書いてみる。

History API があるんだから、WebComponents ベースで SPA 作ってるときはルーターは自前で書いちゃえばいいんじゃない？

ということで、約100行のシンプルなルーターを書いてみました。

* Lazy Loading
* Inner HTML

にも対応しています

# 例

“`index.html

  • Home
  • Sample image

    • 元記事を表示

    Vue.js　トランジション

    #Vue.js　トランジション

    前回の記事はこちら
    [Vue.js　コンポーネント](https://qiita.com/fumiya0414/items/84c677f256276aa99bf5)

    ##トランジションの基礎
    トランジションを使ってp要素をクリックすると
    フェードイン/アウトしながら表示/非表示を切り替えてみましょう。
    [jsfiddle](https://jsfiddle.net/)で実際に記述しながら読むことをおすすめします。

    “`html:index/html

    Hello Transition


    “`

    “`javascript:index.js
    var app = new Vue({
    el:’#app’,

    元記事を表示

    Vue.js　コンポーネント

    #Vue.js　コンポーネント

    前回の記事はこちら
    [Vue.js　フォーム入力バインディング
    ](https://qiita.com/fumiya0414/items/a5e1ef929095d6f011fc)

    ##コンポーネントとは
    ページを構成するUI部品で再利用可能なインスタンスです。

    HTMLベースのテンプレートとjavascriptで書かれたロジックで構成されます。

    コンポーネント使うメリットは以下です。

    ①再利用ができる

    ②メンテナンス性が高まる

    ##グローバル登録

    Helloと出力するコンポーネントを作成し複数回利用します。
    [jsfiddle](https://jsfiddle.net/)で実際に記述しながら読むことをおすすめします。

    “`html:index/html



    元記事を表示

    ESLint v7.0.0 の変更点まとめ

    前 [v6.8.0](https://qiita.com/mysticatea/items/cc40251136ce167a010b) | 次 (2020-05-22 JST)