- 1. indexOf(…)!==-1 じゃなくて includes() と書こうよ
- 2. only-allowを用いてプロジェクトでYarnの使用を強制する方法
- 3. 【JavaScript関数ドリル】 初級編 drop関数の実装
- 4. Firebase AuthなどJavaScriptでAPIセッション用のトークンを得ることについて
- 5. ブラウザ上の文章に蛍光ペンを使ってマークする
- 6. json-serverでstaticを指定してもプレビューのページを表示する
- 7. 【第2回】「みんなのポートフォリオまとめサイト」を作ります~REST API編~ 【Cover】成果物URL: https://minna.itsumen.com
- 8. VuePressにTailwind CSSを導入する方法
- 9. [メモ] JavaScript(ES2015)の基礎
- 10. javascript ２つの配列の平均値
- 11. [JavaScript] reduceは可読性が悪くループで置き換え可能なので使うべきではない
- 12. JavaScriptでいま何歳？
- 13. 開発体験を変える! Firefox DevTools Tips 7 - 1 選
- 14. 【React】コンポーネントとPropsについて解説してみた
- 15. Static Web Appsでは現状TimerTriggerは使えないっぽい
- 16. Vue.jsでクリックマップ風を作ってみた
- 17. fullcalendar V5 でデーターベースを絡めたサイトを構築その①（②は未定）
- 18. 【JavaScript関数ドリル】 初級編 compact関数の実装
- 19. 【JavaScript関数ドリル】 初級編 last関数の実装
- 20. 【JavaScript関数ドリル】 初級編 lastindex関数の実装
indexOf(…)!==-1 じゃなくて includes() と書こうよ
人のコードをレビューしてると、いろいろなコードに出会う。あっと驚くような勉強になるコードもあるけど、たいがいは困惑させられる。
配列の中にある要素があるかどうか確かめるのに
“`javascript
if (array.indexOf(‘hoge’) !== -1) {
…
}
“`とたくさん書いてあるんですが、「-1 **ではない**」と書かれて脳がねじれそうになるのは私だけではないはず。今どき IE 限定でもあるまいし、
“`javascript
if (array.includes(‘hoge’)) {
…
}
“`でいいじゃん？
Python 屋さんじゃないけど、コメントなくても一読してパッと意味がわかるコード書きましょうよ？お願い。
only-allowを用いてプロジェクトでYarnの使用を強制する方法
[only-allow]は、開発者がプロジェクトで特定のパッケージマネージャーを使用するように強制するツールです。この投稿では、`only-allow`を使って、パッケージマネージャであるYarnの利用を強制する方法を紹介します。
[only-allow]: https://www.npmjs.com/package/only-allow
> :bulb: 以前、[yarnを使うプロジェクトでnpm installを禁止する方法](https://qiita.com/suin/items/a7bf214f48eb9b2d9afc)という記事を投稿しましたが、これとは異なる方法です。
## 問題点
JavaScriptの標準的なパッケージマネージャーはNPMですが、YarnやPNPMなど、他にも有名なパッケージマネージャーもあります。
パッケージマネージャー間には、いくつかの非互換性があります。たとえば、NPMとYarnは、異なる方法でインストールされたパッケージのバージョンをロックします。 NPMはロック情報をpackage-lock.jsonに保存し、Yarnはyarn
【JavaScript関数ドリル】 初級編 drop関数の実装
## drop関数の課題内容
「課題内容」「解説動画」「解答例」を確認したい場合は、以下リンク先のページを参照。
## drop関数に取り組む前の状態
+ dropメソッドがどういった働きを持つか、イメージがつきにくと感じました。
## drop関数に取り組んだ後の状態
+ 第２引数で指定した数だけ、前から出力できます。
+ なお、指定なしの場合は先頭が出力されます。## drop関数の実装コード(答えを見る前)
+ dropメソッドの働きは理解していましたが、自力で実装できませんでした。
## drop関数の実装コード(答えを見た後)
実装完了しました?
“`js
function drop(array, size =1){
if (size===0) {
return […array];
}
if(array.length <= size){ return []; } const droppedArray = []; for(let i=
Firebase AuthなどJavaScriptでAPIセッション用のトークンを得ることについて
[ちょっとでもセキュリティに自信がないなら、 Firebase Authentication を検討しよう](https://mizchi.dev/202008172159-firebase-authentication)
（※ こちらの参照記事の内容自体に不備があるとか甘いとか指摘するものではないんですが、勝手に枕として使わせてもらいます）
上記記事は、Firebase Authenticationが提供するJavaScript APIを使ってJWTのトークンを取得し、自前のサーバにHTTPのヘッダで送りつけて検証をさせることで、認証の仕組みをセキュアかつかんたんに実現しよう、という内容です。
このようにJavaScriptのAPIでトークンを発行して自前バックエンドのAPI認証につかう方法は[Auth0のSDK](https://auth0.com/docs/libraries/auth0-single-page-app-sdk)などでも行われていますので、IDaaSをつかってSPAを開発する場合には一般的なのかもしれません。
話は変わりますが、SPAの開発に携わっている方
ブラウザ上の文章に蛍光ペンを使ってマークする
# デモ
次のCodePenの文章上をマウスを左クリックして、文字を選択してみてください。
選択した部分が黄色く残ります。See the Pen
マウス選択した文字をマークする by shigeru.nakajima (
json-serverでstaticを指定してもプレビューのページを表示する
## json-server
わたしは自分のことをxRアプリエンジニアだと思っていたのですが、最近はいろんなサーバをいっぱい立てています。
そのうちのモックサーバなんてjsonを返せればいいので[json-server](https://github.com/typicode/json-server)を使いました。> Get a full fake REST API with zero coding in less than 30 seconds (seriously)
が嘘じゃないすごいやつです。
あと、たのしい顔文字がいっぱい出力されます。## `–static`の罠
[http://localhost:3000](http://localhost:30
【第2回】「みんなのポートフォリオまとめサイト」を作ります~REST API編~ 【Cover】成果物URL: https://minna.itsumen.com
ワイ 「この記事のカバーです」
https://qiita.com/kiwatchi1991/items/58b53c5b4ddf8d6a7053## バックナンバー
[【第1回】「みんなのポートフォリオまとめサイト」を作ります~プロトタイプ作成編~][1]
[1]:https://qiita.com/yuzuru2/items/045678d3c580028c1d4f## 成果物
https://minna.itsumen.com## リポジトリ
### フロントエンド
https://github.com/yuzuru2/minna_frontend### バックエンド
https://github.com/yuzuru2/minna_backend## コレクション定義(テーブル定義)
ワイ 「今回は**NoSQL**の**MongoDB**を使ってます」
ワイ 「コレクションとは**RDB**でいう**テーブル**的なやつです」| RDB | MongoDB |
| —- | —- |
| スキーマ | データベース |
|
VuePressにTailwind CSSを導入する方法
## 最低限トップページをVuePressで表示させる
VuePressでトップページを表示させる手順は公式ドキュメントに沿って行ってください。
[VuePress 公式ドキュメント](https://v1.vuepress.vuejs.org/guide/getting-started.html)
この時点でのディレクトリ構成は以下の通りです。
“`
.
├── docs
│ ├── README.md
├── package.json
“`## Tailwind CSSの導入
手順は基本的にTailswind CSSの公式ドキュメントに記載された通りです。
[Tailwind CSS 公式ドキュメント](https://tailwindcss.com/docs/installation)
1. npm or yarnでTailwind CSSをインストールする
ルートディレクトリで以下コマンドを実行
“`
# Using npm
npm install tailwindcss# Using Yarn
yarn add tailwindcss
“
[メモ] JavaScript(ES2015)の基礎
# 始めに
JavaScriptについて勉強したときのメモです。
気になったところについてしか書いてないです。
実務でJavaScriptを使ったことのない人間が書いてるのでご注意。## 文(Statement)
末尾のセミコロン(;)は省略可能だけど、つけた方が良さそう。参考：[セミコロンをつけ忘れただけなのに…](https://qiita.com/riku-shiru/items/dce12248947f7f33aecc)
## 文字列リテラル
シングルクォート、ダブルクォートが使えるが特に違いは無い。文字列中にシングルクォート/ダブルクォートを含める場合は以下のような書き方ができる。“`javascript
let s1 = “シングルクォート(‘)”;
let s2 = ‘ダブルクォート(“)’;
“`## テンプレート文字列
文字列中に変数の値を簡単に含めることができる。
C#の[文字列補完](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/tokens/interpo
javascript ２つの配列の平均値
複数の数値が定義されている配列data1とdata2から「data1とdata2を合わせた平均値」と「平均値以上の数値」を表示するプログラムを作成する。
“`javascript
課題