Nuxtjsでgenerate時に、公開しているページのtitleとurlのリストを作成する

**※力技での解決法です。絶対もっと良い方法があるはず。**

発端としては、
>フロントのNuxt側でデータを受け取るだけでなく、
>外部に渡せるページ情報を書き出せないか？

と思ったこと。

ググったけど、あまり情報が見当たらず、
「そもそもこの発想自体がズレてるのでは？」と思えてきたが、
とりあえず作ってみた。

内容としてはシンプルに、
“nuxt generate“で生成された
distの中のhtmlファイル群をスクレイピングすること。

まずはささっとモジュール作成。

“`generate-pages-info.js
const {resolve} = require(‘path’)
const {readFileSync, writeFileSync} = require(‘fs’)
const requireContext = require(‘require-context’);

module.exports = async function () {
const {rootDir, generate: {dir: generateDir}} = th

Node.jsについて超ミニマムに解説してみる

#超ミニマムシリーズとは
様々な事柄に関して超短く解説するシリーズです。
これを読んであなたの興味が沸き、その飽くことのない知識欲を満たすことを願っています。

#Node.jsとは
「**サーバー側で実行されるJavaScript**」
プログラミング言語と言語処理系については➡[プログラミング言語と言語処理系について超ミニマムに解説してみる](https://qiita.com/jack1-2-3/items/541bc0c2c3106ac73d83)

#chromeの言語処理系とNode.jsの言語処理系は同じ！？
chromeの言語処理系であるJSエンジンは**V8**です。
ただ実は、Node.jsの言語処理系も**V8**なんです！あれ？じゃぁブラウザと同じじゃん！と思いますよね？
ただ、前述したように「**Node.jsはサーバー側で実行される**」というとこがポイントです！
ブラウザはユーザーが立ち上げないとコードが実行されませんが、Node.jsはサーバーに常に存在しているのでコードをいつでも実行できます。

#おまけ(ブラウザのJSエンジン(言語処理系)との違い)

ReactからBlocklyを使ってみた

Qiita初投稿です。ReactでBlocklyエディタを表示させるまでの手順を紹介します。
使用環境はこんな感じ。

“`
$ npm -v
6.14.8
$ create-react-app –version
3.4.1
“`

# 1. create-react-appする
Reactプロジェクトの作成にはcreate-react-appを使用しました。

“`
$ create-react-app blockly-react
(省略)
Happy hacking!
“`

とりあえずちゃんと作成できているかテスト

“`
$ cd blockly-react
$ npm start
“`

自動的にブラウザが開いて以下の画面が出ていればOKです。

# 2. Blocklyのイン

【JavaScript】ドット記法・ブラケット記法について

JavaScriptにはオブジェクトのプロパティにアクセスする方法が2種類あります。
使い方や違いを理解できたのでメモしたいと思います。

#ドット記法
“ .（ドット）“を使ってプロパティにアクセスする記法です。

“`js
const obj = {};
obj.name = ‘taka’; // objのプロパティをセット
obj.hello = function(){
console.log(`Hello,${this.name}`);
}

console.log(obj.name); // taka
obj.hello(); // Hello,taka
“`
オブジェクトとプロパティを“`.（ドット）“`で繋げることで、値の取得やメソッド実行ができます。

#ブラケット記法
[ ]（ブラケット）を使ってプロパティにアクセスする方法です。

“`js
const obj = {};
obj[‘name’] = ‘taka’; // objのプロパティをセット
obj[‘hello’] = function(){
console.log(`He

ユーザー認証の導入

#ユーザー認証の導入
##Basic認証
HTTP通信の規格に備え付けられている、ユーザー認証の仕組みのこと
#RailsアプリケーションにBasic認証を導入
“`java:app/controllers/application_controller.rb
class ApplicationController < ActionController::Base before_action :basic_auth (省略) private def basic_auth authenticate_or_request_with_http_basic do |username, password| username == 'admin' && passwo

Three.jsで遊んでみた – 球面と回転

ふと、サッカーボールの立体図形をプログラムで算出させて描いてみたいと思いたったが、恐ろしくムズカシイ。。
原点から延びる半直線に直交する平面上に正多角形を描けるようになればなんか進みそうな気がしたので、球面上で色々やってみました。

# 回転対象とする点の軌道円

マウスでドラッグ操作すると視点を動かせます。（PC環境でないと動かせなさそう。）
R,G,B(赤、緑、青)の順で、x軸,y軸,z軸です。

非同期のパターン(プロミスって？？)

# はじめに
非同期パターンのプロミスについて、自分なりにまとめてみることにしました。

## プロミスとは
プロミスを簡単に説明するなら、「**非同期処理の結果の値(失敗も含む)を表現するオブジェクト**」です。

## プロミスの動作
1. 非同期処理をする、ある関数(Function A)があった時、このFunction Aを呼び出すとPromiseを返します。
2. このPromiseは、非同期処理が完了(**fulfilled**) or 非同期処理が失敗(**rejected**)のどっちかが起きることは保証されています。
3. このPromiseがfulfilled/rejectedが起きていない場合は、非同期処理が完了していない(**pending**)の状態となります。

## プロミスの状態まとめ
つまり、プロミスは３つの状態があります。

1. 非同期処理が完了(**fulfilled**)
2. 非同期処理が失敗(**rejected**)
3. 非同期処理が完了していない(**pending**)

## プロミス使用パターン
**Promise.then([

【Vue.js】データの変化にて、Vue.jsをやってると必ず疑問に思うこと。

今回は、算出プロパティと、監視プロパティについて、何が違うのかまとめてみたいと思います。

# computedとwatchの違い

いずれも、コンポーネントのデータの中身に変化があった時に発動するものだが、**その動作に違いがある**

| プロパティ | データに変化があった時 |
|:-:|:-:|:-:|
| computed | データの中身を変化させたものを表現できる |
| watch | データの中身を変える以外の何らかの処理を発動する |

# 算出プロパティ　computed

“`javascript:
let vm = new Vue({
el: ‘#app’,

data: {
newItem: ”,
todos: [
{ title: ‘task1’, isDone: false },
{ title: ‘task2’, isDone: false },
{ title: ‘task3’, isDone: false },
]
},

computed: {

Gatsby.jsのサイトにNetlifyのformsを導入する

シンプルなお問い合わせフォームをGatsby.jsの静的サイトに導入してみました。

“`html

名前

メール

Alpine.jsでTODO

## 概要
遅ればせながらAlpine.jsというものの存在を知ったので触りがてらTODOサンプルアプリを作ってみました。

## 完成

## コード
“`html:index.html

Alpine.js TODO

全プログラミング言語の用語整理

##言語自体の整理

### 1. 動的型付けのプログラミング言語
プログラムでは様々な「型」を扱います。例えば、文字列値と整数値と少数値は異なる型です。この他にも様々な型があり、プログラムにミスがあって異なった型を指定しまう事でエラーを発生させることがあります。

動的型付けのプログラミング言語の場合はプログラムを実行時に型検査を行います。厳格なエラーを対処しなくてもプログラムは動作するので初心者には学びやすい言語が多くなっています。しかしその反面、非常に分かりにくい不具合を作り込んでしまう可能性もあります。

| 言語名 | F-S | | Initial release | 起源 |
| —- | —- | —- | —- | —- |
| JavaScript | FS | HTML と合わせて使用して動きのある WEB ページを開発するために使用 | 1995 |
| Ruby | FS | 日本人により開発された。可読性を重視した構文 | 1995 |
| Python | FS | 最近で

JavaScript ファイル拡張子チェック

# ライブラリを使わない拡張子チェック

“`allowExtension.js
const allowExtensions = ‘.(jpeg|jpg|png|bmp|gif)$’; // 許可する拡張子
const onChangePicture = (e) => {
if (e.target.files[0]) { // ファイル存在チェック
if (!e.target.files[0].name.match(allowExtensions)) { // 許可する拡張子以外の場合
alert(‘拡張子が jpeg, jpg, png, bmp, gif 以外のファイルはアップロードできません。’);
return; // 処理を中断
}
}
“`

参考ページ
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match

jestでimport文を使うには

## 環境
・jest ^26.5.3
・babel-jest　^26.6.0
・@babel/core ^7.7.5
・@babel/preset-env　^7.7.6

“`json:babelrc
{
“presets”: [
“@babel/preset-react”,
[“@babel/preset-env”, {
“targets”: {
“node”: “current”,
“ie”:11,
“safari”:9
},
“useBuiltIns”: “usage”,
“corejs”: 3,
“modules”: false
}],
],
“`

babelrcの初期設定がこんな感じになっています。

## なぜimport/exportが使えないのか

上記設定のままだと、`jest`でimport/export(es6)文を実行することはできません。
jestでは require系のcommonjsしか使えないためです。

document.write を使わずに script タグにタイムスタンプを埋め込む

キャッシュさせないようにするために、以下のように書いたら怒られました。

“`index.html

```
document.write って非推奨だったんですね。。

だいぶ不細工だと思いますが、以下のように書いて対処しました。

```index.html

```

※ 初学者です。間違いや、もっと簡単にできる方法があれば教えてください。

###追記：###
他の記法を教えていただきました。

```index.html