Home

JavaScriptでクラスを実現する様々な方法

JavaScript の クラス について整理しておく。

JavaScript には class 構文があるがそれは単なるシンタックスシュガーであり、class を使わずともクラスを実現することができる。

...

GoogleスプレッドシートのGoogle Apps Script(GAS​)でハマったこと

*書き殴り気味の完全な個人的メモです。

1. フロントから GAS へのリクエストの投げ方 <Content-Type 別> #

GAS はプリフライトをさばくことはできない。

  • Content-Type application/json -> アウト
  • Content-Type x-www-form-urlencoded -> オーケー
  • Content-Type text/plain -> オーケー

1-1. Content-Type が application/json だと CORS でアウト #

const postReservation = async (name, email) => {
  const endPoint = 'https://script.google.com/macros/s/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/exec';
  const res = await fetch(endPoint, {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ name, email }),
  });
  if (res.ok) console.log('okです!'); // しかし残念ながらokになることはありません。
};

1-2. Content-Type が x-www-form-urlencoded だと オーケー #

const postReservation = async (name, email) => {
  const endPoint = 'https://script.google.com/macros/s/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/exec';
  const res = await fetch(endPoint, {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `name=${name}&email=${email}`,
  });
  if (res.ok) console.log('okです!'); // okですね。
};

1-3. Content-Type が text/plain でも オーケー #

const postReservation = async (name, email) => {
  const endPoint = 'https://script.google.com/macros/s/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/exec';
  const res = await fetch(endPoint, {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'text/plain',
    },
    body: `${name}&&&${email}`,
  });
  if (res.ok) console.log('okです!'); // okですね。
};

2. GAS でのフロントからのリクエストの受け取り方 <Content-Type 別> #

2-1. application/json の場合(ただし CORS に引っかかるので実質機能しない) #

const doPost = (e) => {
  const jsonString = e.postData.getDataAsString();
  const data = JSON.parse(jsonString);
  const { name, email } = data;
  // 以降処理は続く...
};

2-2. x-www-form-urlencoded の場合 #

const doPost = (e) => {
  const name = e.parameters['name'][0];
  const email = e.parameters['email'][0];
  // 以降処理は続く...
};

2-3. text/plain の場合 #

const doPost = (e) => {
  let text = e.postData.getDataAsString();
  const [name, email] = text.split('&&&'); // フロントからリクエスト送る時に区切り文字を何にしているかによります
  // 以降処理は続く...
};

3. GAS からフロントへのリクエストの返し方 #

GAS からのレスポンスは、成功だと 302 FOUND が返り、失敗だと 200 OK が返る。

...

ハーバード大学のCS50でコンピュータサイエンス入門

ハーバード大学が無償で公開してくれている「CS50’s Introduction to Computer Science」という動画講義に取り組みましたので、そちらの記録です。以降、本講座のことを「CS50x」と略します。(講義のページに「This is CS50x」と記載があるので、この略し方でたぶん合ってるはず。)

...

マウス・キーボード・ディスプレイを使用せず、SSHだけでラズベリーパイを使用する手順

前提 #

  1. ラズベリーパイのイメージが microSD カードに書き込まれている状態を開始地点とします
  2. PC に microSD カードがマウントできることが条件です
  3. Raspberry Pi 4 Model B を使用しています

* 2 について、PC に microSD の接続口がない場合も多いと思いますが、今回の方法だと PC から microSD に書き込みできることが必須なので、必要であれば SD カードリーダーを購入しましょう。(というか、microSD カードにラズパイのイメージを書き込んだのであれば、必然的に PC と microSD の接続環境は整っているはず?)

...

PCのパーツについてのお勉強 – メインメモリとVRAM、CPUとGPU

自作 PC を検討していた時のメモ(結局検討だけで終わりましたけど。でも良い勉強になりました。)

マザーボードのメモリとビデオカードのメモリについて #

  • マザーボードにはメモリを刺すわけだが、それとは別にビデオカードも自身のメモリを持っている。例えば、「GeForce RTX 2060」の場合、容量 6GB のメモリ。
  • マザーボードのメモリをメインメモリと呼び、ビデオカードのメモリを VRAM(Video RAM)と呼んだり、ビデオメモリと呼んだりする。
  • VRAM はその名の通りグラフィックの描画に特化したメモリ。
  • リアルタイムに描画処理し続ける場合、遅延を起こしてはいけない。
  • 描画に関するデータを一時的に保存しておくことで、GPU の処理タイミングに遅れることなくデータを提供するために登場したのが VRAM という存在。

なぜメインメモリではだめなのか

...

PCを構成するパーツについてのお勉強

自作 PC の作成を検討していた時のメモ。そもそもどんなパーツが必要で、それぞれどんな役割があるのかを知らなかったので。

マザーボード #

  • CPU とかグラボ(グラフィックボード)とかメモリを差し込むやつ。各パーツを接続するハブになる存在。
  • USB や HDMI のポートもここにあります。
  • マザーボードによって、対応している CPU やグラボが決まっている。
  • そのため、まずは CPU とグラボを決めて、それに対応しているマザーボードを探すという流れで決めます。
  • サイズの規格として、大きい方から ATX、MicroATX、Mini ITX といったものがある。
  • 大きい方が拡張性が高く、パーツの取り付けも簡単。だが場所をとる。
  • マザーボードのメーカーといえば「ASUS」「GIGABYTE」「ASRock」「MSI」など。
  • 一番名前を聞くのは ASUS でしょうね。4つ名前をあげたが、実はこれらすべて台湾企業。どんだけマザーボード好きなん。

その他詳しいことは下記を見るべし。

...

WEB・APサーバについて改めて整理する

(曖昧な理解のままやり過ごしてきた自分を反省しつつ、浅はかな知識の上塗りをするための記録です。)

以前は Ruby/Ruby on Rails をやっていた時期もあるのですが、最近は PHP/Laravel のお勉強をしていました。VPS に LAMP 環境を作る手順なんて記事も書いたのですが、Apache を入れて、MySQL を入れて、Laravel をデプロイすれば終わりでとても簡単ですね。

...

Dockerについて整理してみる

完全に自分のための整理用メモです。Docker について勉強する中で、特に疑問に思って調べた点について整理してみます。

Docker は Linux の上でしか動かない #

そもそも Docker の機能は、Linux の「namespace」や「cgroup」や「overlayfs」といった機能をうまいこと組み合わせて実現している。

...

ハーバード大学のCS50Wを視聴してみたので内容まとめ

2020 年はもうすぐに終わり、2021 年を迎えようとしています。いまさらここに記載するまでもなく、今年は色々なことが変わった一年でした。…というふうに来し方をしみじみと振り返る時間もこれまでほとんどなかったのですが、年末になりようやく一息つける時間ができたので今年の振り返りをしつつ、せっかく時間ができたので、いつか視聴しようと考えていた講義動画に取り組んだので記録です。

...

MacにPython環境を構築してDjangoでHello worldまでの流れ(Pyenv, Poetryを利用)

タイトルにある作業を今回実施しました。ただ、環境構築が一度完了してしまうと、同じことを再度実施する機会はそれほどないです。作業時にせっかく調べて理解したことも、同じ作業をする機会がないとだんだん記憶が抜けていき、次に環境構築をすることになったときにはまたゼロ知識の状態からスタート………では悲しいので、とりあえずこのブログにメモしておきます。

...

ConoHa VPSのCentOS8にLaravel & Apache & MySQL環境を構築する

自分用メモ。サーバに root ユーザでログインした時点からスタートとします。

今回は Laravel 環境を構築することを目的としていますが、純粋な PHP ファイルを動かすだけであれば、以前に投稿した 「ConoHa VPS の CentOS8 に LAMP 環境を構築する」 という記事をご参照ください。なお、本記事は上記記事をベースに作成しており、説明が重複しているところや、確認の意味合いが強い手順(=特に実行しなくとも環境構築作業に影響ないもの)に関しては、本記事では省略したりしています。

...

ConoHa VPSのCentOS8にLAMP環境を構築する

自分用メモです。ここでの LAMP 環境とは以下のことを意味しています。

  • Linux(CentOS8)
  • Apache(HTTP Server)
  • MySQL(DB)
  • PHP

ConoHa の VPS にログインした状態からスタートとします。ユーザは root を使用する想定です。

...

AWS EC2でHTTPS通信を行えるようになるまでのセッティング手順

自分の覚え書き用のメモです。手順だけでなく用語の理解など気になった点も含めて記録しています。

なお、本記事は下記の前提で記載しています。といってもたいした前提ではないので、自分の環境に応じて適宜読み替えていただければ大丈夫です。

...

VPSでNode.jsとExpress.jsでHello Worldする

手順をまとめています。すぐに終わります。

(想定環境)サーバ:CentOS 8.2 / ローカル:macOS

1.Node.js(と npm)をインストールする #

サーバにログインしていて、root ユーザを使っているものとして進めます。

...

three.jsって、WebGLって、OpenGLなに?

先日、three.js に触れる機会があったのですが(three.js の表面をさっと撫でた程度の、本当にほんの少し)、そもそもこれってどうやって動いているの?などと調べたらいろいろな用語が出てきてよく分からなくなったので整理します。

...

Railsで開発した3つのアプリを振り返る

前置き #

このブログで7月頭にプログラミング習得に取り組む旨の記事を投稿して以来、学習を進めてきました。その中で Rails でのアプリ開発を行っていたのですが、今回で Rails の学習は一時休憩にします。そのため、ここで一区切りとしてこれまでに開発したアプリを振り返ります。

...

Rails6にUIkitを導入する手順

短い内容になりますが、覚書として導入手順をまとめておきます。

UIkit とは #

A lightweight and modular front-end framework for developing fast and powerful web interfaces.

UIkit(公式ページより)

…だそうです。という雑な紹介だと怒られそうなので補足すると、UIkit は CSS フレームワークです。要するに Bootstrap と同じ括りです。

...

お名前ドットコムからネームサーバを変更せずにConoHa WING(レンタルサーバ)でドメインをSSL設定し利用する

お名前ドットコムでドメインを取得していて、ネームサーバもお名前ドットコムのまま運用したい。しかし ConoHa の公式ページを見ると、「ドメインのネームサーバーを ConoHa のネームサーバーに設定する必要がある」といった説明がある。でも実際そんなことはなかったので記録。

...

VPSでサブドメインを適用し、複数のRailsアプリを運用する(CentOS 8.2 / Nginx)

CentOS(8.2)と Nginx の環境を前提としています。本記事の作業開始時点は、すで Rails アプリを1つデプロイしてあり、ドメインの適用、Certbot を利用した SSL 化も終わっている状態です。例えば、https://example.com にアクセスすると、デプロイ済の Rails アプリが表示されるようになっている状態を想定しています。

...

ConoHa VPS(CentOS 8.2)に Rails 6 + PostgreSQL + Nginx + Unicorn + Capistrano でデプロイする

前置き #

初デプロイ時に相当苦労し、調べに調べてなんとかデプロイ完了まで漕ぎ着けました(デプロイするのに数日間…)。作業中は手順を逐一記録しており、それらをデプロイ完了後に改めて整理したのが本記事の手順です。本手順を作成した後で一度 VPS を削除し、改めてゼロから本手順に通りに作業したところ、無事にデプロイができました。そのため、ある程度信頼できる手順になっているのではないかと思います。なおローカル環境については Mac でターミナルを使用して作業を進めています。

...

ソフトウェア・アップデートしたらrails newがエラーになった話

ちょっとしたメモです。事象発生からエラー解消までの記録。

何もやっていないのに、突然 rails new がエラーに #

昨日までは何の不都合もなく実行できていた rails new が、なぜか今日は突然エラーに。昨日から何も変わったことはやっていないのになぜ?…と思いましたが、当然そんなことはなく。

...

Rails6にjQueryとBootstrapを導入する手順

かなり手間取ったので振り返り用にメモ。同じように導入が上手くいかずに苦しんでいる方への手助けになればと。

この記事でやろうとしていること:Rails6 に Yarn で(Webpacker 用に)jQuery と Bootstrap をインストールして、アプリ上で使えるようにする。

...

Ruby on Rails 6 ローカルインストール手順(Bundler / mac)

作業途中にエラーが出るなどして手間取ったので、手順を記録しておきます。同じ症状で悩んでいる方がこの記事を見つけ、作業の一助になれば幸いです。

なお、タイトルにもある通り、この記事は Bundler の bundle install で mac のローカル環境に Rails をインストールするための手順です。

...