【TypeScript】Promise.allで頑張る - Kuzunoha-NEのブログ
こんばんは。今回はPromise.allを使ってみます。MongoDBも使います。 developer.mozilla.org 記載の通り、配列に入ったPromiseを全部解決するまで待つという動きが出来るようになります。 Promise.allを使わないやりかた import {MongoClient, MongoClientOptions} from "mongodb"; const uri:string = "mongodb://127.0.0.1:27017" const options:MongoClientOptions = {useUnifiedTopology:true,useNewUrlParser:true} const client = new MongoClient(uri,options); const dbName = "__test__"; const col
【TypeScript】Puppeteerで言語を固定できるみたい - Kuzunoha-NEのブログ
こんばんは、葛の葉です。 今回は疲れているので省エネです。 起こったこと PuppeteerでE2Eテストをやっててヘッドレスだとテストが通らないのに、ヘッドレスをやめるとテストが通るという現象がおきました。そしてそれはタイトルの文字が正しく表示されるかどうかをテストするものでした。 ヘッドレスとそうでないのの違いがよくわからず、しばらく詰んでおりました。 原因は 原因はPuppeteerの言語を固定していなかったからでした👀ブラウザに設定された言語によって英語と日本語とが変わる仕様にしていたので、正とする日本語のタイトル文が表示されてなくてパスしていなかったわけですね。 ヘッドレスモードをオフにすると、不思議なことに日本語で固定されてました。osに依存したりするのかな？ こうした 言語を日本語で固定しました。 import { launch } from "puppeteer"; (a
【TypeScript】URLパラメータからJSを実行する - Kuzunoha-NEのブログ
こんばんは、葛の葉です。 今回はURLからjsを起動してみます。悪用厳禁ってやつですね。 こんなイメージ hogehogeというパラメータに渡したデータをhtml上に表示するようなWebサーバーを作ります。今回もnodeの基礎的なライブラリであるhttpを使います。また、htmlパラメータを出力するために、urlモジュールのparseも使用します。 nodejs.org nodejs.org import http from 'http'; import { parse } from 'url' const server = http.createServer(); server.on('request', (req:http.IncomingMessage, res:http.ServerResponse) => { const hogehoge = parse(req.url || "
【Vue.js】ちょっとVueを触っている - Kuzunoha-NEのブログ
こんばんは、葛の葉です。 Vue.jsの本を読んでちょっと勉強中です。結構楽しいですね。個人開発のWebアプリケーションを作ろうと思っているのですが、Vueでこさえることが出来たらなぁと思ってます。 ちょっとしたFizzBuzzのゲームを作る。 ランダムで出力される3つの数字の合計がFizzBuzzで言うところの何に当たるかを当てるゲームをつくります。1時間で完成。 github.com 算出プロパティ Vueを勉強していてちょっと聞き慣れない言葉だと思ったのが算出プロパティというものです。 ## script.js 8 - 12 lines computed: { result: function () { return this.questions.one + this.questions.two + this.questions.three; } }, computedというVueの
【TypeScript】CookieとSessionとSessionIDを使ったログイン情報の保持 - Kuzunoha-NEのブログ
こんばんは、葛の葉です。 今回はCookieとSessionとSessionIDを使ったログイン情報の保持を実施します。 前述 普段我々が使用しているWebページでは、ログインを必要とするページが多いかと思います。ログインに一回成功するとその成功したログイン状態というステータスになり、ちょっとした時間は改めてログインをする必要がありません。しかし、Httpはステートレスであり、状態を保持するということが出来ません。そのため、どこかにその情報を保存しておくのですが、今回はそのうち、SessionIDを使った方法を記載してみます。 今回のソースコード github.com Cookieとは WebサーバーがWebブラウザにデータを送り、ブラウザがその値を保持します。それをCookieといいます。CookieはWebブラウザの機能の一部であり、Cookieを使えないWebブラウザもあることでしょ
【TypeScript】TypeScriptでBasic認証をやってみる - Kuzunoha-NEのブログ
こんばんは、葛の葉です。 今回はBasic認証をやってみます。 Basic認証とは Basic認証とはHttpに搭載されている認証方法の一つになります。Httpヘッダーに認証のためのユーザー情報とパスワード情報をBase64にて暗号化して送付します。その値をサーバーが受け取って認証をすることが出来ます。 サーバーは対象となるページのヘッダーにWWW-Authenticateをつけることで、Basic認証にすることができます。クライアントは該当するページにアクセスした時、サーバーは401のステータスコードで返します。認証が成功すれば成功したページをステータスコード200で返します。401のステータスを受け取った時、クライアントは認証用の入力フォームを出力し、ユーザー名とパスワードをユーザーに入力させます。入力フォームを出力する機能はブラウザの機能です（ブラウザによっては出来ないものもあるとい
【Typescript】PuppeteerとJestでE2Eテストを作る - Kuzunoha-NEのブログ
こんばんは葛の葉です。 最近はPuppeteerとテストコードを使用しE2Eテストを書いています。今回はそのことについて記載してきたいと思います。 今回のソースコードはこちら github.com E2Eテストとは E2EテストとはEnd to End Testのことで、WebブラウザなどのUIを介してユーザーが実際に操作するような動きをテスト項目とし、それを自動で評価させるような仕組みを指します。例えばログイン画面などで認証情報を正しく入力した場合の画面遷移がきちんと成功しているか否か、あるいは失敗した場合は認証が失敗している旨のメッセージが表示されているか、といった部分をテストします。 E2Eテストの良いところは既存の機能を保証してくれるところになります。新しい機能を追加すると、その機能が影響して既存の機能が動かなくなることがあります。また、ライブラリや実行環境が変更、更新となった場合
【JavaScript】非同期処理とTryCatch - Kuzunoha-NEのブログ
こんにちは、葛の葉です。 JavaScriptにおける非同期処理とtry catch文についてみてみましょう。一般的に、try文内で発生したErrorはcatch文に移動します。 try { throw new Error('Test Error'); console.log('hogehoge'); } catch (error) { console.log('piyopiyo'); } // piyopiyo そのエラーを検知したとき、catch文にジャンプします。ご多分の通り、throwを使うことでエラーを発生することが出来ます。すなわち、try文内において、throw文以下の命令は絶対に呼び出されることはありません。VSCodeにおいても3行目であるconsole.log('hogehoge')は到達できないと表示されます。 到達できないコードの検出 では以下のような非同期処理にお
【TypeScript】Webpackでフロントにnpmモジュールを使う - Kuzunoha-NEのブログ
こんばんは、葛の葉です。 今回はWebpackを使います。 Webpackとは Webpackとはざっくり説明すると、複数のJavascriptをまとめて一つにしてくれるものです。これを使用することでnpm経由でインストールしてきたモジュールをフロントで使用することができます。 webpack.js.org インストールします npm i --save-devを使ってwebpackをインストールをします。またwebpackはver4.0なのでwebpack-cliというものもインストールします。ver3.0以下の場合はwebpack-cliはいらないみたい。 npm i --save-dev webpack webpack-cli また、今回はTypescriptを使いたいのでwebpack用のモジュールを使います。 www.npmjs.com npm i --save-dev types
【TypeScript】PostgreSQLとExpressをつなぐ - Kuzunoha-NEのブログ
こんばんは、葛の葉です。 今回はPostgreSQLとExpressを繋いでみましょう。 諸々のバージョン postgres (docker) postgres:11.5-alpine node (docker) 8.16.1-alpine pg(npm package) 7.12.1 データベースの情報 今回はPostgresを使用します。Herokuでも使えると思います。 hostname = postgres user = postgres password = example databaseName = demo tableName = posts uri = postgres://postgres:example@postgres:5432/demo テーブルの中身 demo=# select * from posts; id | title | text | name ---
【JavaScript】プリントデバッグあれこれ - Kuzunoha-NEのブログ
葛の葉です。 JavaScriptでプリントデバッグあれこれのことを書きます。 とりあえずみて class Piyo { constructor(num, str){ this.num = num * 3; this.str = str; this.test = ["唐揚げ", "焼き芋", "醤油指し"] } } const Test1 = "hogehoge"; const Test2 = {message: "this is message", fruits: "orange", memos:["abc", "def", "ghi"]}; const Test3 = new Piyo(4, "zircon"); console.log('---log---'); console.log(Test1); console.log(Test2); console.log(Test3); /
【JavaScript】SocketIOで通信しよう - Kuzunoha-NEのブログ
こんばんは葛の葉です。 今回はSocketIOでJavaScriptとPythonを通信してみます。 JavaScript側（サーバー側） 前回のWebAPIの記事の際はJavaScriptがクライアント側でしたが、今回はサーバー側に回ります。 SocketIOで通信をする場合、Httpでの通信を確立しないと行けないようです。デフォルトのHttpサーバーとなるhttpモジュールとルーティング機能を持つexpressモジュールと主役のsocket.ioモジュールが必要になります。 npm install --save express npm install --save socketio ソースコードは以下のようになります。 # soc.ts import * as http from "http"; import * as express from "express"; import *
【JavaScript】.addElementListenerを使った関数の呼び出し - Kuzunoha-NEのブログ
葛の葉です。 Javascirptを現在、勉強しております。 さて、今回はhtmlの要素がclickされたときにjavascriptの関数を呼び出す方法を記載します。 まずボタンを作る 以下のようにbuttonを配置します。 <!--test.html--> <!DOCTYPE html> <html lang="ja"> <header> <title>TestTitle</title> </header> <body> <button type="button" id="testButton">こんにちは</button> </body> </html> 押しても反応しないボタン onclickという手 <script>内にaleart()関数を呼び出す関数を作る。 <script> function onAleart(){ alert('アラートだよ！') } </script> t
【Javascript】querySelectorAllでDomをとるかねぇ - Kuzunoha-NEのブログ
こんばんは葛の葉です。 今回はdocument.querySelectorAll()をつかってDomをとります。 下記のようにhtml内でpiyopiyoクラスの要素が複数あります。 <!DOCTYPE html> <html lang="ja"> <body> <div class="hogehoge"> <div class="piyopiyo"> <p>大腸菌がしゃっくりする</p> </div> <div class="piyopiyo"> <b>ほんど</b> </div> </div> <script src="./test.js"></script> </body> </html> 上記のHTMLのスクリーンショット const piyopiyos = document.querySelectorAll('.hogehoge .piyopiyo'); console.log(
【Node.js】WebAPIを受け取ってみる。 - Kuzunoha-NEのブログ
こんばんは葛の葉です。 さて、簡単なWebAPIを作成し、Javascriptで値を受け取るようにしてみます。 pythonでWebAPIをつくる # app.py from flask import Flask, request, jsonify app = Flask(__name__) @app.route('/') def index(): data = { 'status': 'ok', 'message': 'Hello' } return jsonify(data) @app.route('/test') def test(): if request.args.get('name'): name = request.args.get('name') else: name = 'Nanashi' data = { 'status': 'ok', 'message': f'Hel
【TypeScript】抽象クラスの作成 - Kuzunoha-NEのブログ
こんばんは、葛の葉です。 今回は抽象クラスを作ってみます。 前回のインターフェイスをパクります。 kuzunoha-ne.hateblo.jp 動物という抽象クラスを作る classを作る際の雛形を作る。共通部分を作る部分としてはインターフェイスと似ているようだけど、内部的な処理を書く場合は抽象クラス、外部へ値を渡すものをインターフェイスにするのが基本的らしい。 // Abstracts.ts export abstract class Animal { constructor( public foot: number, public length: number, public tail: boolean, public say: string, ) { } public growth(): void { this.foot = this.foot * 3; this.length =
【TypeScript】interfaceを作る - Kuzunoha-NEのブログ
こんばんは、葛の葉です。 今回はTypeScriptでinterfaceオブジェクトを作ってみます。 生物に対し足の数と全長メンバー+成長というメソッド 犬というクラスとカエルというクラスを作る。 それぞれ、footというメンバーとlengthというメンバー,そしてgrowthというインスタンスメソッドを持つものとします。 AnimalInterface // animalinterface export interface AnimalInterface { foot: number; length: number; growth(): void; }; ここでは宣言だけして、内容物は何も書きません。インターフェイスとはそのようなものです。 tsc animalinterface.ts とコンパイルをします。 インターフェイスを使ってみる。 // objects.ts import {
【TypeScript】mochaとchaiでユニットテストする - Kuzunoha-NEのブログ
こんばんは、葛の葉です。 前回からTypeScriptを使っています。 kuzunoha-ne.hateblo.jp 今回はTypeScriptでUnittestを行いたいと思います。 フォルダ構成 ├── src │ └── fizzbuzz.ts └── test └── fizzbuzz.test.ts FizzBuzzをつくる srcディレクトリ内でfizzbuzz.tsという名前のプログラムを作成します。 export class Numbers { fizz: number = 3; buzz: number = 5; fizzbuzz: number = this.fizz * this.buzz; } export class FizzBuzz { public function: string; check(params: number) { if (params % 1
【TypeScript】列挙型をTypeScriptで使う - Kuzunoha-NEのブログ
こんばんは、葛の葉です。 現在、TypeScriptを勉強しています。 Enumesをちょっとだけ勉強しました。 ディレクトリ構成 ├── app │ └── enum.ts └── enum.html enum.html /*./app/enum.tsじゃないよ*/ <script src="./app/enum.js"></script> TypeScriptを書く app/enum.tsをいじる。 enum Hoge { foo, bar, hoge, piyo, fuga } let tmp = Hoge.foo console.log(tmp) tsc app/enum.tsとしてjsにビルドします。そうするとapp/enum.jsが出来上がります。 app/enum.js var Hoge; (function (Hoge) { Hoge[Hoge["foo"] = 0] =
Three.jsでWebGLのコンテンツを作成してみる(1) - chirotec’s blog
Three.js 今回はThree.jsを触ってみます。 three.js - Javascript 3D library ブラウザで3DのCGを動かすといえばWebGLですが、OpenGLやDirectXのような細かい処理を書くのは結構大変です。それを手軽扱いやすくしたJavaScriptのライブラリのひとつがThree.jsです。 最低限、ブラウザとテキストエディタだけあれば3Dのプログラムが書けてしまいます。 （もちろんbracketsなどのhtmlエディタを使った方が書きやすいです。） 3Dプログラムがどのように動いているか、基礎部分の勉強にもなると思います。 Three.jsの読み込み まず、HTML5のhtmlファイルを用意し、Three.jsを読み込ませます。 ダウンロードしてくるのも有りですが、CDNから読み込むと楽です。 headに <script src="https:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
