node-fetchやtwitterモジュールの説明は割愛して、ハマったポイントのみ。 結論 こんな感じでうまくいった。 const twitter = require("twitter") const fetch = require("node-fetch") class FetchImgAndTweet{ static async tweet(text, url, tokenKey, tokenSecret) { const client = new twitter({ consumer_key: "XXX", consumer_secret: "XXX", access_token_key: tokenKey, access_token_secret: tokenSecret, }) const imgData = await FetchImgAndTweet.fetchImg(url) const imgId = await FetchImgAndTweet.uploadImg(client, imgData) await FetchImgAndTweet.update(client, text, imgId) } static async fetchImg(url) { const res = await fetch(url) //画像が返ってくる if (!res.ok) throw new Error("画像が正常に取得できませんでした") const blob = await res.arrayBuffer() return Buffer.from(blob) } static async uploadImg(client, img) { const media = await client.post("media/upload", { media: img }) return media.media_id_string } static async update(client, text, imgId) { const status = { status: text, media_ids: imgId } const res = await client.post("statuses/update", status) return true } } はまりポイント 画像のデータ形式がblobやarrayBufferだとうまくいかない。fetchしてきた画像をres.arrayBuffer()でarrayBufferに変換し、更にBuffer.from()でBufferに変換する。これをしないとtwitterモジュールくんがヘソを曲げて大変だった。

はじめに 俺の考えた結果 開発環境 環境作っていくよーん 番外編 まとめ 参考文献 俺の考えた結果 野暮用でReactをやりたくなって環境構築を思い立ったところ、いろいろなNodeの環境構築法があることを知った。nodebrewやらanyenv入れてnodenv入れてとか、、、。npmとかyarnとか、、、 私が個人的にpyenv + pipenvでPythonの環境を作っていることもあり、できるだけ似たようなもので整えたかった。 個人的に納得のいく環境構築ができたので、備忘録として残しておく。参考になるかは分からんが、、、 開発環境 macOS Catalina 環境作っていくよーん nodenvがpyenvとなんか親戚的な関係らしいので、nodenvを使っていこうと思うが、調べるとanyenv入れてやる方法がとても出てくる。しかし、pyenvはもうダイレクトにbrewから入れてるのでその方法はなんとなく気持ち悪い、、、。よし、nodenvもbrewから直接入れよう！！ brew install nodenv よし、パスを通そう、私のMacはzshなので.zprofileに書いていく。調べると.zshrcで書いてる人も結構いる、、、。どっちがいいかはよくわかっていない。誰か教えてください。 ~/.zprofile # 適当に追記 # nodenv export PATH="$HOME/.nodenv/bin:$PATH" eval "$(nodenv init -)" もうこれで環境構築大体終わったも同然。あとはpyenv的な感じでnodenvに使いたいversionを入れていく。installできるversionを確認するには、こうやってやるっぽい。やっぱりpyenvと似てて使いやすい nodenv install --list 今回は、なんとなく15.13.0を入れていく。インストールするには以下の方法で、入れたあとはrehashした方がいいらしい nodenv install 15.13.0 nodenv rehash これで入ってるか確認してみる。 nodenv versions 自分が入れたものが出てきたらOK! 複数のversionを入れてglobal, localでversionを管理することができる。とっても便利。 よし、早速Reactの環境を作っていこう。 任意のディレクトリを作って移動 mkdir test cd test 試しにnodeコマンド使ってみよう、適当なファイルに書いてみて実行してみる sample.js console.log('Hello!'); 作成したら以下のコマンドで実行 node sample.js Hello!が出たら成功です！！ よし、Reactやってみよう。Reactの公式によるとnpmではなくnpxで作るのがいいっぽい。 npx create-react-app sample そうするとsampleってディレクトリができてるはず。 cd sample npm start これでなんとReact動いちゃうんですよ。 まあReact以外もできないと意味がないですよね。express入れてみよう。 cd .. mkdir sample2 cd sample2 このsample2のディレクトリにexpress入れていこう、まずはnpm initでnpm環境を初期化、その後にnpm installでexpressを入れていく。 npm init npm install express これだけ！！これでexpressがこのディレクトリに入っちゃった。 追加したいパッケージはnpm installで入れていくことができる。 番外編 番外編って言っていいのか分からないが、npmとは別にyarnってやつもある。 どちらもNodeのパッケージマネージャーだが、デフォルのままだとyarnは使えない。yarnの方がインストールが早く、セキュリティが高い。こんなの入れるしかないでしょ！ってことで入れていきます！！ まず、.nodenv/pluginsと言う場所にyarnを入れていくのだが、デフォルトだとないこともある。ってことで作成していく、確認してある場合は必要はない。 mkdir -p "$(nodenv root)/plugins" そうしたら、そのディレクトリに git clone https://github.com/pine/nodenv-yarn-install.git を実行し入れていく。これでyarnを入れる準備が整った。しかしこれでは準備が整っただけでまだ入っていないので、一度installしたversionをuninstallしてinstallしていく。 nodenv uninstall 15.13.0 nodenv install 15.13.0 これで自動的にyarnが入っていく。 一応確認する方法は、 which yarn これで入っていればOK! これでyarnでもNode開発することができる！ まとめ いかがだったでしょうか。自分に向けた備忘録だったので、走り書きで拙い文章だったのですがお役に立てれば幸いです。もっといい方法とかあるかもしれないので、調べ次第追記しようかな、、、気が向けば。。。 参考文献 https://qiita.com/ttokdev/items/3547587b0494dd624901 https://qiita.com/Hai-dozo/items/90b852ac29b79a7ea02b https://ja.reactjs.org/docs/create-a-new-react-app.html

目的 Node.jsを利用する機会が増えてきたが、会社のパソコンはセキュリティ上インストーラーを利用して自由にソフトをインストールすることが出来ない。 その為、インストーラを利用せずにNode.jsを構築する必要がある。 方法を調べたのでその内容を簡単に以下に纏める。 手順 node.jsのZipをダウンロードする ＜ダウンロードサイト＞ https://nodejs.org/ja/download/ ここでは現時点(2021/04/12)での最新のLTS「v14.16.1」を利用することとする。 適当なフォルダにダウンロードしたzipを展開する ここでは、「C:\00_myspace\node-v14.16.1-win-x64」に展開するものとする コマンドプロンプトを起動して、フォルダを関係変数パスに設定する set PATH="C:\00_myspace\node-v14.16.1-win-x64";%PATH% 展開したフォルダに移動する cd C:\00_myspace\node-v14.16.1-win-x64 reactをインストールする npm install -g create-react-app 引き続きコマンドプロンプト上でreactプロジェクトを作成する create-react-app testreact 作成したフォルダへ遷移する cd testreact サーバーを起動する npm start これで構築は完了

はじめに React/TypeScript/Next.js/Material-ui のプロジェクトテンプレートがあれば便利かなと思ったので作ってみました。 あと、手順をまとめれば5分で出来ると思ったのでやってみました。 いってみよう。 完成形はこれ 環境 % sw_vers ProductName: Mac OS X ProductVersion: 10.15.7 # Catalinaさん BuildVersion: 19H2 % brew -v Homebrew 3.0.11 % nodebrew -v nodebrew 1.0.1 % node -v v14.16.1 % yarn -v 1.22.10 開始 1． Next.js/TypeScript プロジェクトの作成 1-1． 開発用のディレクトリ作るよ（ご自由にどうぞ） mkdir ~/Development 1-2． ディレクトリ移動するよ cd ~/Development 1-3． Next.js/TypeScript プロジェクトの雛形を作るよ yarn create next-app react-sample-app --example with-typescript ここまでですでに3分半経過してます。yarn(^q^) 1-4． ディレクトリ移動するよ cd react-sample-app 1-5． sample-app ディレクトリの中身はこうなってるよ . ├── .git # ギットさん ├── components # UIコンポーネント置き場 ├── interfaces # 共有インターフェース置き場 ├── node_modules # このプロジェクトで利用するモジュール達 ├── pages # サイトページ置き場 ├── utils # 共通関数などなど置き場 ├── .gitignore # イグノアさん ├── README.md # リードミーさん ├── next-env.d.ts # Next.jsタイプがTypeScriptコンパイラによって確実に取得されるようにします。ですって ├── package.json # このプロジェクトで利用するモジュールを管理するやつ1 ├── tsconfig.json # TypeScriptの設定ファイル └── yarn.lock # このプロジェクトで利用するモジュールを管理するやつ2 1-6． 動かしてみるよ yarn run dev 1-7． http://localhost:3000/ にアクセスしてみるよ （これを触ってソース見るだけで勉強になるよ） 1-8． 停止するよ control + c 2． Material-UI を使うよ Material-UI を Next.js の SSR に対応させてくよ 2-1． Material-UI をインストールするよ yarn add @material-ui/core @material-ui/icons 2-2． theme.ts を作成するよ, ソースはこちらを参照 vi components/theme.ts 2-3． _app.tsx を作成するよ, ソースはこちらを参照 vi pages/_app.tsx 2-4． _document.tsx を作成するよ, ソースはこちらを参照 vi pages/_document.tsx ドロワー付きヘッダーを作成するよ 2-5． components/Layout.tsx を修正するよ, ソースはこちらを参照 vi components/Layout.tsx 3． 起動, Finish!! yarn run dev 結果発表 敗因 我が家のネットワークが遅かったぁ(^q^) でも少ない手順でここまで出来るのは便利ですね 最後に ソースはご自由にお使いください

10 Trending projects on GitHub for web developers - 9th April 2021 にて紹介されていたものをお試しした記録。 導入 npm install --save-dev kolorist お試し kolorist_test.js import { red, cyan, blue, yellow, white, magenta, green, bgYellow, bgWhite, bold } from 'kolorist'; console.log(red(`Error: カラリストで色付きエラー ${cyan('kolorist_test.js')}.`)); console.log(blue('あお')); console.log(magenta('マゼンタ')); console.log(yellow('イエロー')); console.log(green(bold('グリーン'))); console.log(bgYellow(white('背景イエロー'))); console.log(bgWhite(red('背景白'))); node kolorist_test.mjs でお試し。 出力結果 余談 本論と全く関係ないが mjs というものは何なのかは以下。