- 0.1. NextJSのapiでサーバー側からリダイレクトをさせたい時
- 0.2. 湯婆婆言語作ってみた
- 0.3. コピペで簡単！爆速でtailwindcssをNode.jsに導入する方法について
- 0.4. webpack v5がリリースされた現状まとめ
- 0.5. 子供用の学習アプリケーションを作る(2) アニメーション編
- 0.6. obnize × LINE bot で近づいたらLED＆LINEでお知らせ
- 0.7. 飲みに誘いにくい人が使う、飲みお誘いLINE Botの「用途に合わせた宛先設定部分」
- 0.8. javascriptで文字列を分解して配列化メモ
- 0.9. 多言語からみるマルチコアの活かし方
- 0.10. 変数のスコープを間違えてたメモ
- 0.11. Create-react-appのindex.htmlで条件分岐してmetaタグなどを入れる
- 1.
- 1.1. BookShelfアノテーションで複数取得する方法で迷ったのでアウトプットする。
- 1.2. セミコロンのつけ忘れを、JSはどこまで許してくれるのかを試してみた
- 1.3. [eleventy] addWatchTarget で指定したパスをウォッチしてくれない
- 1.4. ブラウザから外部プログラムを起動するサーバー
- 1.5. Electronでタスク管理アプリ作ってみた
- 1.6. Alexaでアカウントリンクをせずに自前のWebサイトとアカウント連携する ※特定のケースのみ
- 1.7. 【Node.js】 Dockerを用いてNode.js Express MySQLの環境を構築するまでの道のり
- 1.8. LTS版ではないNode.jsを使用することによるAngularのng serveエラー(仮説)
- 1.9. [React]コンポーネントを作るときに他からコピーしてくる作業を自動化するCLIツールを作る
NextJSのapiでサーバー側からリダイレクトをさせたい時
– `page/api`配下で処理を書いてそれを`fetch`した時に、処理内容に応じてクライアント側でリダイレクト処理をさせたい時`res.redirect(‘/’)`と書いても`status: 307`が帰ってくるだけでクライアント側はリダイレクトされません。
– クライアント側のリダイレクトをさせたい時はクライアント側でrouter処理を書きましょう。“`js:src/api/*
export deafult (req, res) => {
res.status(307)
}
“`“`jsx:src/pages/*
import Router from ‘next/router’() => {
if(code == 307){
Router.push(‘/’)
}
}
“`node弱いのでもっといいやり方あったら教えてください。。。
湯婆婆言語作ってみた
#湯婆婆言語作ってみた
Qiitaで湯婆婆のセリフをいかに短く実装するかブームらしいので自作言語を作って
実装した話です
ソースコードはここにのってます
https://github.com/riya81/yubaうぷ主の環境
– macOS Big Sur 11.0.1
– Node 12.16.3手順
1. 自作言語の構文を考える
2. トランスパイル先の言語を決める
3. ファイルを読みこむ
4. トランスパイラを作る
5. トランスパイラをビルドする手順は僕の他の記事に詳しく書かれているので省きます
この記事のソースコードを少し変えただけです
https://qiita.com/riya81/items/b1d5261205d13e4740cb#コマンド
“`shell
y “名前”;
“`これだけで湯婆婆を実装できます
この機能しかないです#まとめ
まとめることなんかほぼ無いうっすい記事ですが以上
湯婆婆言語を作った話でした
コピペで簡単！爆速でtailwindcssをNode.jsに導入する方法について
# はじめに
皆さんはどのCSSフレームワークを使われていますか？有名どころは、Twitter社が作った[BootStrap](https://getbootstrap.com/2.3.2/)でしょうか。
Bootstrapの大きな欠点は、どこかで見たようなサイトに仕上がり、
デザインにオリジナリティが出すことが難しくなります。そんな中でおすすめしたいのが、今回取り上げる**[Tailwind](https://tailwindcss.com/)**です。
この記事では、Node.jsでtailwindcssを導入する方法をご紹介いたします。
## 今回使用するモジュール
今回使用したモジュールは以下の通りです。
今回採用したテンプレートエンジンは**ejs**となります。
また、ルーティング処理等はすべて**express**を用いています。“`json:package.json
“autoprefixer”: “^10.0.1”,
“ejs”: “^3.1.5”,
“express”: “^4.17.1”,
“postcss”: “^8.1.6”,
“postc
webpack v5がリリースされた現状まとめ
# プロダクションで使うのはまだ早い(11月時点
webpack v5のリリースは行われましたが、まだバグが多くありwebpackで使用するloaderやpluginは対応が全然追いついていません。
[webpack v5系のIssues](https://github.com/webpack/webpack/issues?q=is%3Aissue+is%3Aopen+label%3Awebpack-5) を眺めると多くの問題があることがわかります。
プライベートでwebpack v5にアップデートを試みたところ全部壊れました。大変危険です、webpack v5 を使用するのは 数ヶ月ほど待ったほうが良いと思います。
# 周辺ツールの現状
webpackを使用するにあたって特に重要な webpack-dev-server と webpack-cli の現状は以下のとおりです。
## webpack-dev-server
webpack-dev-server は webpack v5対応がまだリリースされてないので、動かないケースが何点かあります。
– [webpack
子供用の学習アプリケーションを作る(2) アニメーション編
# はじめに
以前作成したアプリの続きをしていきます。
[参考: 子供用の学習アプリケーションを作る(1)](https://qiita.com/yoshii0110/items/ba2bf4023c4a6caf3431)今回は、コンテンツの選択画面にアニメーションを導入し、選択後の詳細画面を作成したので、その実装について記事にしていこうと思います。
# 動作
まずは、動作を見ていただければと思います。
# 実装
## 構成
構成は以下のようになっています。“`
❯ pwd
/Users/yoshitaka.koitabashi/Desktop/iLearn/src/components~/Desktop/iLearn/src/components
❯ tree .
.
├── a
obnize × LINE bot で近づいたらLED＆LINEでお知らせ
#自己紹介
大学時代C言語を学んでから十数年以来のプログラミングを始めています。
本業はweb制作で、ホームページとLINE連携の需要がとても多く、LINEbotに興味を持ちました。
今回も練習した事のメモです。#やったこと
obnizeの超音波測距センサーで100cm以内に近づくとフルカラーLED WS2811で指定した色が光る。
さらにはLINE botに近づいた事を知らせます。#obnizeの超音波距離センサーで近づくとLEDが光る
という部分の動作確認です。“`
const obniz = new Obniz(‘obnizID’);
“`obnizIDを書き換えます。
“`
const Obniz = require(‘obniz’);
const obniz = new Obniz(‘obnizID’);obniz.onconnect = async() => {
// 超音波測距センサを利用
const hcsr04 = obniz.wired(‘HC-SR04’, { gnd: 11, echo: 10, trigger: 9,
飲みに誘いにくい人が使う、飲みお誘いLINE Botの「用途に合わせた宛先設定部分」
#リモートが続いてふさぎ込んでしまう人を救いたい
コロナの影響でリモートでお仕事をすることが増えて、
よほどオープンにぐいぐい誘える人でない限り、人を飲みに誘うのも気がひけてしまう。（私もその一人です）
今、会社に入った新人の子たちなど、顔も知らない社員の人がいっぱいいる。__なかなかつながりが広がらない__のが課題です。
だけど飲みたい。___（言わずもがな対策は必須で）___
__そんなときに会社の人たちを飲みに誘うサービスをLINE Botで作っています。__
その１機能がこれです。まだDBへの接続などはやってなくて出し分けの部分のみ。
なんでLINE Botを使ったかというと、
シャイな人でも使えて、利点として__大体の人が使っている。どこでもメッセージを送れる。__
といったとこ
javascriptで文字列を分解して配列化メモ
#書き方
分割対象の文字列.split(区切りに使用する文字列)#今回の場合
LINEから受け取ったメッセージ「飲みに行きたい 名前」なので、“`javascript
const message_arr = event.message.text.split(“ ”)
“`
全角スペースかな。全角スペースを入れていないときは、配列の2個目の要素は「undefined」になる。
多言語からみるマルチコアの活かし方
# 多言語からみるマルチコアの活かし方
# はじめに
近年では1つのCPUに複数のコアが搭載されたマルチコアが一般的になっています。
しかし、現状のプログラミング言語ではエンジニアが意識せずにマルチコアをしたプログラムを作ることは難しいです。
そこで、様々な言語から見たマルチコアの活かし方について説明していきます。# プロセスとスレッド
プロセスとは1つ１つのアプリケーションといった実行中のプログラムのことで、スレッドは CPU利用の単位です。プロセスは次のように1つ以上のスレッドを持っており、CPUのコア数分だけスレッドを処理することができます。(また、近年では[SMT](https://ja.wikipedia.org/wiki/%E5%90%8C%E6%99%82%E3%83%9E%E3%83%AB%E3%83%81%E3%82%B9%E3%83%AC%E3%83%83%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0)という技術によって1つの物理コアで2スレッドといった複数のスレッドを処理することができます。2コア4スレッドみたいなやつです)
Create-react-appのindex.htmlで条件分岐してmetaタグなどを入れる
#Create-react-appで環境毎にhtmlタグを変えたい時のメモ
本番環境と開発環境でmetaタグを変えたかった(開発環境にnoindexを入れたかった)ので、調べてみたらejsのテンプレートに対応してるみたいです。
参考：[Conditional content in index.html](https://github.com/facebook/create-react-app/issues/3112)
##ejsの文法
参考：[ejs.co](https://ejs.co/)
とりあえず<% %>で囲った中はjs書いていいみたいです。変数をそのまま出力するときは<%=何でしょうか。今後使う時が来たら調べてみます。 ```ejs:index.html <% if (user) { %>
<%= user.name %>
<% } %>
“`##結論
自分は下記metaタグ入れたかっただけなので、結論こう書きました。環境変数とかもよく分かってないのでもっとちゃんとしたやり方あるかもしれないです。
ビルド時に本番環境サイトはREAC
BookShelfアノテーションで複数取得する方法で迷ったのでアウトプットする。
#はじめに
BookShelfを使ったデータの取り込みで、データベースの依存関係が複数ある場合の
クエリ取得方法で迷ったので、やった内容をアウトプットする。
その為、説明等は適当な部分多い。作成していたアプリは、ルーム毎にユーザとメッセージを保存する。
メッセージ交換用アプリ#Bookshelfとは
Node.jsとかで使えるデータベースに対して、データを取得できる便利な道具です。##アノテーションについて
DBのテーブル同士を関連づけて取得できるものになります。~~~
var Room = Bookshelf.Model.extend({
tableName: ‘rooms’,
hasTimestamps: true,
messages: function() {
return this.hasMany(Message);
}
});
~~~アノテーションに当たる部分
* hasMany : 一対多（Roomテーブルの1行に紐づくMessageテーブルの行は多数あるって意味）
* belongsTo : 一対一(M
セミコロンのつけ忘れを、JSはどこまで許してくれるのかを試してみた
# はじめに
IT初心者の私ですが、普段はJavaScript, Node.js（以下JS）を使った開発をしています。
ここ数日、Javaを学び直そうとしているのですが、とにかくセミコロンをつけ忘れてはコンパイラに怒られています。「JSなら実行してくれるのに・・」
**むしろ逆にJavaScriptがセミコロンのつけ忘れに寛容すぎるのでは？**
そのような背景もあり、JavaScriptがどこまでセミコロンのつけ忘れを許してくれるのかを、簡単に検証してみました。
# この記事でわかること
– JSだとOKだけどJava先生は怒る状態はどういうものか
– JSが怒らないセミコロンのつけ忘れのギリギリのライン# 実行環境
– Java : paiza.io (openjdk version “15” 2020-09-15)
– JS : paiza.io(Node.js v12.18.3)# Javaで怒られたソースコード
まずこちらがJava学習中に怒られた案件です。
“`Java
import java.util.*;
import java.util.
[eleventy] addWatchTarget で指定したパスをウォッチしてくれない
config ファイルの名前を `.eleventy.js` いがいにするとこの現象がおきます。バグ？
ブラウザから外部プログラムを起動するサーバー
## 概要
ブラウザから外部プログラムを起動することはブラウザ単体では(拡張機能を使っても)出来ないので、node.jsで外部プログラムを起動するサーバーを作ってみた。
クエリ文字列でコマンドを渡すのでブックマーク機能を使えば簡単なランチャーにもなります。ただし、アイコンはデフォルトのままなので、変えたいなら[拡張機能を使う必要があります。](https://outkura.com/916.html/)
## ソース
“`Executer.js
var http = require(‘http’);
var url = require(‘url’);
var proc = require(‘child_process’);//コマンドラインからポート番号の設定、デフォルトは8888
var port = 8888
if(process.argv.length > 2) {
port = process.argv[2];
}//ヘッダHTMLの出力
var header = function(res, title) {
res.write(`
Electronでタスク管理アプリ作ってみた
#本記事について
こんにちは。あかいです。
この記事は、勉強を兼ねてElectronでタスク管理アプリを作成した際の備忘録です。
環境構築はすでに記事が出回っているので、作成までの検討事項を簡単にまとめます。
なお、簡単のため、アプリはローカルに閉じるものとし、Exe化までは行いません。以下の内容を載せています。
・Electron概要
・検討までの流れ
・ソースの一部の解説
→タスク名変更時の処理の流れ
→ドラッグ&ドロップの処理の流れ
→データ保存の処理の流れ
・ソース全体#作成物
まず、今回作成したのは以下です。よくあるKanbanboardをイメージしています。
初心者なので、できるだけシンプルな構成となるよう1ページにしています。
 という機能を使うことで、「Alexaに紐付いているAmazonアカウント」と「自前で運用しているサイトの会員アカウント」を紐付け、Alexaからそのサイトに対して注文処理をかけたりすることができます。
しかしアカウントリンクをするためには、Alexaとの会話の途中で**一回スキルを終了**して、スマホ等からアカウントリンクのための`OAuthログイン`をしてもらわなければならず、ユーザーの離脱につながってしまいます。
Dockerfile:
アプリケーション用(node.js)コンテナを作るためのfileapp.env:
mysqlとの接続設定を記載したファイルdocker-compose.yml:
node.jsコンテナとmysqlコンテナを管理するymlsrc:
アプリケーション本体##アプリケーション用のコンテナを作成する
まずはアプリケーション用の仮コンテナを作成し、アプリの雛形を作成する。そのアプリの雛形はホスト側にマウントしておき、その雛形を利用してdocker-composeを作成していく。nodeDocker配下に
docker-compose.ymlを作成“`docker-compose.yml
v
LTS版ではないNode.jsを使用することによるAngularのng serveエラー(仮説)
# 背景
先日Macを購入し、MacでAngularの環境構築していたところ、ng serveの実行エラーで3日ほどハマりました。このエラーは結局解決したのですが解決方法に確証はありません。ですが、同じ原因で詰まっている人がいるかもしれないと思ったため、チェックポイントの一つとして僕が陥ったエラー原因の仮説をここに残します。# 環境 (エラー解決前)
* Mac (Version 10.15.7)
* Node.js (15.0.1)
* Angular CLI (11.0.1)# 発生したエラー
上記環境でng serveコマンドを打ったところ以下のエラーが出力されました。“`ERROR.txt
ERROR in ./src/app/shared/theme/styles.scss (./node_modules/css-
loader/dist/cjs.js??ref–13-1!./node_modules/postcss-loader/src??
embedded!./node_modules/resolve-url-loader??ref–13-
3!./n
[React]コンポーネントを作るときに他からコピーしてくる作業を自動化するCLIツールを作る
# TL;DR
Reactでコンポーネントを新しく作るとき、Storybookやテストも作成するのであれば、ディレクトリを作成してから、
`index.ts`, `Component.tsx` `Component.stories.tsx` `Component.spec.tsx`
と4ファイルくらい作成することになると思いますが、
毎回これらを手動で作成して、他のコンポーネントからimport文とかをコピーしてくるのは面倒なので、CLIツールを作成して、コマンド一発で出来るようにします。コードは[こちら](https://github.com/tachibanayu24/react-ts-atomicdesign-boilerplate/blob/main/tools/create-component.js)
# 作ったもの
## ディレクトリ構成
AtomicDesign想定です。
“`
.
├── package.json
├── src
│ └── components
│ └── atoms
│ └── Button
│
