Corredor

ウェブ、プログラミングの勉強メモ。

TypeScript

Svelte ベースのフレームワーク「Sapper」を使ってみる・TypeScript + SCSS 対応する

昨日 Svelte を TypeScript + SCSS 対応したが、今度はこの Svelte をベースとしたフレームワーク「Sapper」を使ってみて、コイツも TypeScript + SCSS 化してみる。 Sapper • The next small thing in web development 成果物 Sapper プロジェクトを作成す…

Svelte + TypeScript + SCSS やってみる

公式で TypeScript サポートがアナウンスされていたので、ようやく Svelte を触る。 Svelte プロジェクトを作る TypeScript を扱えるようにする SCSS を扱えるようにする VSCode 拡張機能を入れる 成果物はコチラ Svelte プロジェクトを作る 以下の TypeScri…

Webpack 入門 その3:Babel による ECMAScript のトランスパイル・TypeScript のトランスパイル

Webpack を勉強しながら Browserslist の効果を確認するシリーズ企画第3弾。 今回は初めに ECMAScript を Babel でトランスパイルしつつ、Browserslist の効果を確認。さらにその後、TypeScript もトランスパイルできるようにしてみる。 使用するツールと適…

Vue 3・Vite を触ってみる

Vue 3.0 が RC (Release Candidate) になったらしいので触ってみる。 参考:Vue 3 is now in RC! · Issue #189 · vuejs/rfcs · GitHub … 公式のアナウンス Vue のバージョン紛らわしい Vue CLI ではなく Vite を使う 検証環境 プロジェクト雛形を用意する 雛…

Neo's Hatebu に利き手モード、アクセスキー、件数表示機能を付けた

自分だけが使っている、オレオレはてなブックマーク閲覧アプリの Neo's Hatebu。 neos21.hatenablog.com 久々に機能追加をしたので、紹介していなかった過去分と合わせて紹介する。コード全量は以下で確認できる。 github.com 利き手モード切り替え アクセス…

GitHub アカウントの全リポジトリ情報を一覧表示する Vue アプリ「List Repos」を作った

最近 Vue.js をちまちまイジってたので、簡単なアプリを作ってみた。その名も「List Repos」。 GitHub アカウント名を指定すると、そのユーザのリポジトリが一覧表になって表示されるモノで、簡単なテーブルソートもできるようになっている。 デモサイトは以…

Node.js で Git 操作。simple-git を使ってみた

Node.js プログラムの中で Git 操作をする必要が出た。そのようなライブラリはいくつかあるようだが、simple-git というライブラリが手っ取り早そうだったので紹介する。 simple-git - npm GitHub - steveukx/git-js: A light weight interface for running …

Node.js で排他制御。async-lock を使ってみた

Express サーバのとあるリクエストについて、同時にリクエストがあっても順に処理する必要が出た。すなわち、排他制御をかけ、同時に処理が行われないようにしたかったのだ。 それを実現してくれる async-lock というライブラリを見つけたので、使い方を紹介…

TypeORM のトランザクション処理を利用する

TypeScript ベースの O/R マッパー、TypeORM で実現できる、トランザクション処理を試してみる。 前提とする環境は、前回の記事で紹介した TypeORM + PostgreSQL 環境。 import { createConnection, getManager, getRepository } from 'typeorm'; import dbC…

TypeScript で ORM。TypeORM を使って PostgreSQL とやり取りしてみた

Node.js 上で使える O/R マッパーというと、以前 Sequelize というモノを紹介した。 neos21.hatenablog.com neos21.hatenablog.com コチラも MySQL や PostgreSQL など、色々な DB と接続できるマッパーだった。 今回見つけた TypeORM という O/R マッパーは…

Vue-CLI-Plugin-Express を使って Vue + Express スタックを実現する

Vue.js でアプリを作りつつ、同時にバックエンド API も作りたいな、と思うと、Nuxt.js を使って実装しちゃう方法がすぐ思いつくかもしれない。 Nuxt.js でバックもフロントもこれ一本 - Qiita しかし、 Vue CLI を使いたい API 側はそこまで大仰じゃなくて…

Express 4 はミドルウェア内で async が書けるが、ラッパー関数はあった方が良い

Express 4 系だと、次のように async が書けるようだ。 // async を使用 app.use('/', async (req, res) => { // await を使用 const result = await something( req.body.id ); res.send(result); }); ただし上のコードだと、await 部分でエラーが発生した…

TypeScript で Express サーバを実装するためのボイラープレートを作った

サーバサイド JS であれば、個人的には TypeScript がなくても書けるのだが、複数人で開発するとなると、型チェックを導入できた方が安全な実装になる。 ということで今回は、Express サーバを TypeScript で実装するためのボイラープレートプロジェクトを作…

Create React App + TypeScript + SCSS 環境を構築してみる

2016年に create-react-app 単体で試したことがあった。 neos21.hatenablog.com あれから3年半が経過。React がもてはやされていた中で「Angular はちょっと重たいよねー」「とはいえ React も難解になってきたよねー」とか言っていると Vue.js の手軽さで S…

ブラウザオンリーで動く「ねむいガチャ.js」を作った

ちょっと前に、Python ベースに MeCab で形態素解析を行い、「ねむい」という単語を「ねむくない」に変換したり、しなかったりする「ねむいガチャ」というプログラムを作って紹介した。 github.com MeCab を用意しないといけないので環境構築が手間だし、ウ…

遅ればせながら Parcel を使ってみた

Webpack のような設定ファイルを一切置かず、ES2015・SCSS などをトランスパイルできる Parcel というツールを使ってみた。 Parcel GitHub - parcel-bundler/parcel: Blazing fast, zero configuration web application bundler Node.js v10.7.0・npm v6.1.…

import・export を利用している TypeScript コードを HTML 上で動作させる方法

前回の続き。TypeScript コード内で import や export を用いていると、デフォルトの設定ではブラウザ上でそのコードが利用できないことを話した。 neos21.hatenablog.com 今回はこの対応方法を紹介する。 なお、今回の目的は「TypeScript の素振り環境とし…

JavaScript のモジュール管理の仕組みをおさらいする:TypeScript をトランスパイルして HTML 上で利用するための前段

tsc を利用して TypeScript をトランスパイルする素振り環境を作ってみた。最初はコンソール上でコンパイルした JS ファイルを $ node example.js のように動かして満足していたのだが、コンパイルした JS ファイルを HTML で読み込んで動かそうとしたら、im…

Node.js や TypeScript で使える O/R マッパーライブラリを探してみたが、イマイチなので自前でやってみたり

最近、 Node-SQLite などを用いて Node.js スクリプトから DB を操作してみたり、 TypeScript で JSON データを受け取って DTO 的なクラスに突っ込んでみたり、 といったことをやっている。 Java でいう POJO なクラスを用意しておいて、MyBatis (古くは iBa…

Angular ライブラリを AoT コンパイルした上で Uglify する方法は?

速習TypeScript: altJSのデファクトスタンダートを素早く学ぶ! 速習シリーズ作者: 山田祥寛出版社/メーカー: WINGSプロジェクト発売日: 2017/06/21メディア: Kindle版この商品を含むブログを見る TypeScript実践プログラミング Programmer's SELECTION作者:…

TSLint v5.7.0 で指定できる全 rules をまとめた

TypeScript入門 クラスと型チェック機能を加えたJavaScriptの拡張言語作者: 川俣晶出版社/メーカー: 日経BP社発売日: 2014/06/04メディア: 単行本この商品を含むブログを見る TSLint v5.7.0 時点で指定できる、全ての Lint ルールをまとめた。Angular4 系で…

tsconfig.json で指定できる全 compilerOptions をまとめた (TypeScript v2.5 版)

TypeScript実践プログラミング【電子書籍】[ スティーブ・フェントン ]ジャンル: 本・雑誌・コミック > PC・システム開発 > インターネット・WEBデザイン > その他ショップ: 楽天Kobo電子書籍ストア価格: 3,456円 TypeScript v2.5 時点で指定できる、tsconfi…

cordova-plugin-bluetoothle を使って iOS 同士で Bluetooth 通信する Cordova アプリを作る : 6 モック化編

テスタブルJavaScript作者: Mark Ethan Trostler,牧野聡出版社/メーカー: オライリージャパン発売日: 2013/09/21メディア: 大型本この商品を含むブログ (2件) を見る 前回の続き。最終回。 neos21.hatenablog.com neos21.hatenablog.com neos21.hatenablog.c…

cordova-plugin-bluetoothle を使って iOS 同士で Bluetooth 通信する Cordova アプリを作る : 5 セントラル編 (後編)

HTML5とApache Cordovaで始めるハイブリッドアプリ開発 (CodeZine BOOKS)作者: 小林昌弘,山田祥寛出版社/メーカー: 翔泳社発売日: 2017/08/09メディア: オンデマンド (ペーパーバック)この商品を含むブログを見る 前回の続き。 neos21.hatenablog.com neos21…

cordova-plugin-bluetoothle を使って iOS 同士で Bluetooth 通信する Cordova アプリを作る : 4 セントラル編 (前編)

Bluetooth LE入門スマホにつながる低消費電力無線センサの開発をはじめよう作者: 鄭立出版社/メーカー: 秀和システム発売日: 2014/06/19メディア: 単行本この商品を含むブログ (3件) を見る 前回の続き。 neos21.hatenablog.com neos21.hatenablog.com neos2…

cordova-plugin-bluetoothle を使って iOS 同士で Bluetooth 通信する Cordova アプリを作る : 3 ペリフェラル編 (後編)

iOS×BLE Core Bluetoothプログラミング作者: 堤修一,松村礼央出版社/メーカー: ソシム発売日: 2015/03/23メディア: 単行本この商品を含むブログを見る 前回の続き。 neos21.hatenablog.com neos21.hatenablog.com 前回までで、ペリフェラル端末として動作す…

cordova-plugin-bluetoothle を使って iOS 同士で Bluetooth 通信する Cordova アプリを作る : 2 ペリフェラル編 (前編)

Bluetooth Low Energyをはじめよう (Make:PROJECTS)作者: Kevin Townsend,Carles Cufi,Akiba,Robert Davidson,水原文出版社/メーカー: オライリージャパン発売日: 2015/02/25メディア: 単行本(ソフトカバー)この商品を含むブログ (5件) を見る 前回の続き…

map や filter の際に console.log() しながら短くアロー関数を書く

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発作者: Ethan Brown,武舎広幸,武舎るみ出版社/メーカー: オライリージャパン発売日: 2017/01/20メディア: 単行本(ソフトカバー)この商品を含むブログを見る ES2015 で登場したアロー関数。慣れないう…

VSCode で Angular 開発する際に入れておくと良い拡張機能

はじめてのVisual Studio Code (I・O BOOKS)作者: 清水美樹出版社/メーカー: 工学社発売日: 2016/05/01メディア: 単行本この商品を含むブログを見る Angular4 系の開発をする時に VSCode に入れておくと良さげな拡張機能たちを紹介する。 Angular v4 TypeScr…

tsconfig.json を切り替えてビルドする方法

TypeScript実践プログラミング JavaScriptを使いやすくスケーラブルな言語 (Programmer’s selection) [ スティーブ・フェントン ]ジャンル: 本・雑誌・コミック > PC・システム開発 > その他ショップ: 楽天ブックス価格: 3,456円 TypeScript を使っている…