Acerの31.5インチ 4Kモニターを購入した!
お盆時期ですが普通に仕事です。
8月は忙しいので、休みは9月にまとめて取ることにしました。
念願の4Kモニター
さて、ついに家に4Kモニターを購入しました。
- 出版社/メーカー: 日本エイサー
- 発売日: 2018/04/11
- メディア: Personal Computers
- この商品を含むブログを見る
こちらがAmazonのタイムセールだったかな?で35,870円だったので人柱的なものも兼ねて購入。
家では27インチのWQHDを使っていて、特に困ってはいなかったのですが、会社のモニターが21.5インチFullHDで微妙に狭く、家のを持って行きたかったんですね。
すると、家のモニターが24インチFullHD一本になっちゃうのでちょうどいい感じの4Kがほしかったところでこの価格は良かったです。
こんな感じ、画像荒いけど(机の真上にある電気つけ忘れた)
以下、買うときに懸念してた部分と、結果どうだったかを書いていきます。
文字小さすぎない??
ちょっと小さめだけど、割と慣れるレベルかなぁと。1週間使ってみてだいぶ慣れました。
プログラムを書く時は、普段MacbookPro 13インチで書いてるときより、1段階フォントサイズを大きくして使っています。
これも、ショートカットキー一発なのでそこまで大変な作業ではありませんね。
文字が小さくて困るケースとしては、調べ物とTwitter見てる時ですけどまぁ慣れたかな・・・。
レイテンシは?
私はゲームをやるのでちょっとレイテンシを気にしてましたけど、やってるゲームがLeague Of Legendsなので、格ゲーと違ってそこまで気になる感じではなかったかなぁと。
そもそも、前の液晶もそこまで早いわけではなかったしな・・・。
やっぱし、モニター買えた瞬間ってゲームの解像度が変わったりマウスの移動距離が変わったりするので、このへんは慣れるまで時間がかかりそうです。
実際、この1週間のプレイは結構ひどかったなぁというイメージ。ちょっと多めにやらないと辛い。
画面の見え方は?
これはVAパネルで、前と同じなのですがプロファイルの問題か少し薄く見えています。ちょっと設定いじりたい感じ。
入力ソースの切り替えは?
MacbookProとWindowsマシーンを交互に使うケースがあるけども、このモニターは右下後ろ側に上から
- 十字キー
[スペース] - ボタン
- ボタン
- ボタン
[スペース] - 電源
って感じで配置されていて、特に下のスペースはよく、うっかり電源を切るって感じは無いです。
操作は基本的に一番上の十字キーを触って開始するので、割と直感的に設定変更できるなぁと思っています。
そもそも、Windowsマシーンが立ち上がってなければ結局Macがつながるのでそこまで困ってない系ではあります。
MacbookProとの接続
これはほんっっっとうにやらかして、結果ケーブルを3つ買う羽目になりました。(自分の調査不足ではあるんですが)
一言言えることとしては
黙ってDisplay Portケーブルで繋げ
ということです。これはMacOSの仕様っぽくて、HDMIだとver2.0に対応してようが、USB TypeC - HDMI2.0だろうがなんだろうが4K60Hzでは繋がらないっぽいんですよね。
なので、最終的にはUSB TypeC - DisplayPortケーブルを家に常備する方向になりました。
この過程で買ったUSB TypeC - HDMI2.0ケーブルは、会社に27インチWQHDモニターを持っていったときに使うことにします。
余談ですけど、USB TypeCはマジでいいですね、裏表考えなくていいところが。もっと普及してほしい。
まとめ
そんな感じで使ってますが、36,000円という価格を考えたら上等だと思います。
40インチ4Kモニターと悩んでた時期もあるのですが、レビュー読んでると流石にでかすぎるって意見が多くて、実際、現時点でも上の方を見るのはつらいからとりあえず32インチでよかったかなぁと思っています。
※40インチは一度試してみたいけど、最適化された椅子、机もセットな気がする
ということで、もし気になっている人がいたら一緒に人柱になると良いと思われますよ!!!!!!!!!!!!
Boostnoteが便利!!EvernoteともDropbox Paperともおさらば出来た!
先日、BoostnoteというOSSの紹介を見て試しにインストールしてみたところ、日頃仕事でメモを取っていた環境をすべてこちらに移すことができたので紹介します。
Boostnoteとは
ざっくりいうと、
- markdownでかけて
- タグを各ノートに設定できて
- code snipetも保存できて
- データはローカルに保存されて
- ついでに画像も、ローカルに保存される
みたいなメモツールです。
ある程度markdownも拡張されていて、
- [ ] task1
のように記述すると、チェックボックスが出てきて、そのMarkdown内での達成率も画面上に表示されます。
仕事でのメモ環境
働き始めてから4年ちょっと、会議でのメモ等々をどこにまとめていくかずーーーっと悩んでる状況でした。
はじめはSublimeText(当時、今はVSCode)普通のメモファイルを作成していて、各案件ごとのフォルダにまとめていたんですがこれが割とめんどくさいのと、たまにコードを貼りたいときに```でまとめることが出来なかったのが不満でした。
その後はEvernoteを試して一瞬でヤメて、会社的にはDropboxを契約していたので、Dropbox Paperも使ってみましたが、日本語入力がだいぶバギーだったので(今は結構治ってるかも)これもやめて・・・。
転職してからは諦めてEvernoteで可能な範囲で使っていたんですがいよいよ見つけたって感じですね。
おすすめの使い方
自分はGoogle Driveでファイルの共有をしているので、Boostnoteのストレージを、Google Drive上のディレクトリに設定しています。
これを行うことで、複数の端末で同じノートを扱うことができて、今はMacbook ProとThinkpad X1 Carbonを両方使っているため大変助かっています。
通常のMarkdown Editorだと、画像を簡単に貼れないのが困っていたのですが、このツール、D&Dでエディタ内に突っ込めるのがかなり良いです。
あとはエディターのThemeも変えられるのが良いです。
自分はDraculaに変更しました。Monokaiもありますね。
仕事でのメモ環境に困っている人は試してみて!
ということで、メモを取るとかの部分を困っててMarkdownがいいんだよねーー!!!って人は是非試してみてください。
ぜひ!!!
4年ぶりくらいに「ゆるい勉強会」を開催した
実は大学を卒業してすぐくらいに2回ほど、「ゆるい勉強会」と称して簡単な勉強会を 飲み屋で 開催しておりました。
その後、仕事が忙しくてずーっとできてなかったのですが、5月2週目くらいの水曜日(5/11 金)に「第3回 ゆるい勉強会」を開催、無事終えることができました。
ということで、どんな内容なのかとか、この間の会の振り返りとかをやっていきます。
完全にやらかしたんですが、一枚も写真撮ってないのが辛いです・・・。
あと、下書きに置きっぱで2週間ほど経った・・・!!!
どんな会
もともとのコンセプトは、【高校卒業して、みんなバラバラの分野研究したし、今は色々な仕事やってるんだし知見を共有しようぜ飲もうぜ】って感じです。
ただ、発表するってことに対してハードルを感じてほしくなかったので、あくまでテーマは自由です。
発表の形式も、「ゆるい」がちゃんと反映させるように、LT(Lightning Talk)で5分にしています。
この5分も別に厳密に計ってドラを鳴らすとかじゃなくて、超えてもいいし短くてもいいよってくらいゆるくしています。
この間の会で実際に話されたテーマ
- バスの地上乗務員の仕事とトラブル
- ロレックスという時計について
- eSportsについて
- 投資について
- MRについて
- パン工場の話について
- フリーランスについて
- 信託銀行について
- 森林組合について
- 雑談
といった感じでした。
資料は身内向けに公開(まだやってない・・・)する予定で、第4回も7月中頃開催します。
次は会議室→飲み屋の流れの予定
次は写真も撮ってレポートしよう:(
技術書典4でサークルチェック漏れした「Libraries of React」の電子版を買って読んだ感想
先日の技術書典4で購入漏れしていた「Libraries of React(れいな@底なし沼の魔女)」を読みました。 megablacklabel.booth.pm
たまたまフォローしていたので、Twitterを眺めていたら購入漏れに気づき、Boothで買いました。 やっぱし、電子版も出してくれると大変助かります。
本著は、作者様が知り得たReact.jsに関する知見のうち
- 流行りに沿ったコーディング
- ゼロコンフィグ・モジュールハンドラー
- 日本語情報の少ない良さげなモジュール
についてまとめてくれた同人誌です。
で、購入したら
了解です!当方、勉強始めたばっかで簡単な管理画面とFirebaseと連携したスケジュール管理アプリ、クイズアプリ作成中くらいなステータスなんであまり期待しないでくださいw
— Ricck/Riki (@Ricckn) 2018年4月26日
とあったので、書きなれないですが感想を書いてみます。
また、私のReact.jsについてのステータスは上にTweetにあるようなレベルで、初期の学習はUdemyの下記講座を利用しました。 www.udemy.com
1章 Stateless Functional Component(SFC)で可読性向上
Functional Componentについては、上記講座で学んだので、Stateを持つ必要がないComponentについてはすでに利用していました。 が、もしどこかのサイトで勉強して書いている人がいる場合、公式のドキュメントを読んでいないとこういう知識は漏れてしまうので、紹介されているのは助かります。
2章 より良くReactを使うテクニック
個人的にはこの章がすごく助かりました。 基本的には動画で学んだことや、ちょろちょろ見ているサンプルコードで知識を得ているくらいなので、この章にかかれている細かいテクニックなどを見落としがちなのが個人的にも課題だなぁと思っていたところです。
たとえば、「JSXのドット記法」なんかはFunctional Componentとして細かくファイル分割されている今の環境では一発で可読性が良くなりそうな知見だなぁと感じます。 reactjs.org
3章 recomposeでHOCsを扱う
Higher-Order Componentsという概念はこの章で初めて知りました。
(わからんこといっぱいあってすごく助かる・・・。)
「作成したComponentに処理を追加することができるラッパー」ということで、大分理解できたのですが、これはちょっと書いてみないと実感できないんだろうなぁという印象。
幾つか記事も合わせて調べてみましたが、Componentの巨大化を防いだり、再利用性を高めるという意味ですごく良いかもしれないですね。
実際どこかで使ってみたい。
とまぁここまで読んでみて、時代はやっぱしSFCで書くのを推奨しているんだなぁと思った次第。小さいアプリくらいだと余り困らないけど大規模になればなるほど困るのかな・・・?
ここは実感として持てるほど経験がつめていないので、なんとか理解できたらなぁと感じるところ。
4章 ゼロコンフィグ・モジュールハンドラー
今のところすでに組み込み終わった、オレオレ webpack.config.js
とか .eslintrc.js
とかでやっているのであまり恩恵はないのかなぁ?と思いました。
ただ、本著にもあるように
選択肢の多さで、コーディング以外のところで体力を使う辛い状況から「設定ファイルを0にして実際の開発に注力する」
の部分もあるように、開始初期はここでかなり躓いた記憶があるので、意義はすごくわかる。
自分みたいに趣味レベルで書いてるくらいだと、コンフィグをいじる機会があまりないので困ってなかったけど、ならむしろこっちでいいんじゃね?という気分はあります。
5章 開発時のお勧めモジュール
styled-componentについて
www.styled-components.com
これは使いたいなぁ・・・。
とにかく、React.jsはCSSをどう書くのが良いのかよくわかって無くて、かと言ってsassを普通に読み込ませるのなぁとおもっていたところ。これ以外も調べてなんかCSS書く方法は検討したい。
今のところは、Material-UIをメインで使ってるので底まで困ってないけど、独自に書きたいというのはそうそう遠くないミライに来る予定なので、準備します。
読み終えて
個人的に一番良かったのが、「一般的な技術書と比べてコンパクトにまとまっている」という部分で、Webの記事以上のまとまり具合、読みやすさで、普通に出版されているよりもコンパクトでライトというのが、すごく気に入ってます。
内容については、とても自分の現状にマッチしていると感じました。
なので上のTweetにもありますが、「とりあえず環境は組み終わった、書ける、いくつか書いてみた、けどベストプラクティスなんぞや」みたいな人にはいいんじゃないかなぁと。
ということで、React.js書いてて楽しいけど周りにあまり聞ける人がいなくてどう書いたら良いんだろ、もっと良い書き方がある気がするみたいに悩んでる人がいたらこちらの本買ってみてください。 megablacklabel.booth.pm
最後に、このような素敵な本を書いていただき、ありがとうございました!!!!!!!!!
現在の自分の技術スタックについて
誕生日が二日後に迫っていて、ついでに転職する時自分のまとまったスキルについてのリストがなくてだるかったので現時点のものをまとめておく。
※ 2018/04/19現在
そもそも
はじまりはMumbleサーバー
FEZっていう当時の神ゲーがあって、VCしたかったんですけどSkypeは重いわTSは音質悪いわってことでMumbleというVCツールを建てようとしたところから、それっぽいことが始まりました。
そこでXAMPPでWordPress動かしたりしてた、懐かしい・・・。
ということで以下本編。
言語
JavaScript
jQuery
- JavaScriptの勉強と言うか、そもそもの私のプログラム勉強スタートが、学校の授業でWebサイトを作るというところから始まっていて、その時「Light Box」をjQuery Pluginとして入れるところをやって、そこからTwitterAPI触るのにハマっていってという流れで結構の間お世話になった。
React.js
- ずっとjQueryで書いてたけど、カルマが溜まっていったのと作りたいアプリもあったことから勉強した。
- 簡単な管理アプリなんかはもうReact.js + (Node.js + MongoDB or Firebase)で作ってる
- React Nativeは勉強中。NativeBaseが良い。
Redux
- 使ってみたけど小規模なアプリで利用している為、そこまで恩恵は受けてない。Fluxの概念はなんとなくわかった。
Firebase
- ここにいれるか悩んだけど、使っててすごく良い、面白い。簡単に色々作れる。React.jsとの親和性が高い。
PHP
FuelPHP
Laravel
WordPress
- WebがメインなのではっぱしWordPressは触る機会が多かった。
- 自分のBlogもWordPressを利用中
- カスタムタクソノミーとかフォームとかをいじって、専用の入力ページを作ったり、テーマをカスタマイズしたり作ったりとかやった。
PHP Excel
Node.js
Express
Golang
Cシャープ
- なんか
#
が表示されない - ASP.NETの開発で。バックエンドはPostgreSQL
- Office365APIとの連携で、カレンダーアプリを開発
- 調べながらならできる。
HTML / CSS / SASS
- 普通に使える。
- mixinとかその辺もまぁ。
- 普通以上には使えない(絵を描くとか)
DB
MySQL
MongoDB
PostgreSQL
SQL Server
Firebase
- 一応ここにも
まぁDB系は必要に応じて書いてた感じ、すごい難しいSQLを書いたとかではないのでIFNULLなのかISNULLなのかみたいな差異は調べながらやってくみたいな。
サーバーアプリケーション系
Apache
- ずっと使ってたけど最近あまり使ってない。
- 仕事では結構使う
Nginx
- Dockerと組み合わせるようになってからもりもり使ってる。
- でも確かDockerでWordPressを配信する前から、静的ファイルのキャッシュのために利用していたような。
PHP-FPM
- Nginxにしてからは主にPHP-FPMを利用している。
インフラ
さくらのVPS
- 自分の環境は大体さくらのVPSを利用している。主にCentOS7
AWS
- ECっぽいサイトのときに一人で構築。
- ELBとEC2、RDSを組み合わせたシンプルなWebアプリを作成するのに利用
- 他にも、個人的にJavaのアプリを動かすためにEC2だけ契約して使ったことも有り。
Docker
- 結局、自分のVPS環境は中でDockerを動かして、アプリ単位で配置している。
- ローカル開発環境としては基本Dockerで組むようにしている為、主に公式Imageとdocker-composeを組み合わせることが多い(ちょっとカスタマイズすることは多い)
- オーケストラレーション系のツールは未経験、気になる。
- VPS環境はDockerをポンポン設置して、フロントにNginxを置くケースが多い
- Mastodonを入れるときに、初めてVPSに設置した記憶がある。
その他
Git
- 便利、手放せない
明日以降の目標
広めに
とりあえずもうちょっと深く知らないといけない分野が多い印象
今の会社はPHPがメインだけどそれ以外の仕事も多いのでそっちにもガンガン入っていきたい。
具体的には
- デザインパターン周り
- より低レベルのコンピューターサイエンスの知識
は拡充させていきたい。本とか読む
目下やりたい
React.jsが面白すぎるので趣味ではReact.jsを使ったアプリを書いていくと思う。Eslintがよくできてて、どっかで書いたけど大リーグボール養成ギブスっぽさが良い。
そんなわけでReact.jsで書いてるQuizアプリは早めに出したい。
React.jsからAsync, Awaitを使ってNode.jsのExpressで立てたAPIサーバーにアクセスしてMongoDBのデータをFetchする話
ちょっとしたツールを作っていて、普段使っているRDBではなく、MongoDBを使うべきだなぁってシーンが有ったのでNode.jsとMongoDBにReact.jsからアクセスした流れとかを書いていきます。
といっても、今回書こうと思っているのはReact.jsでAPIにアクセスするあたりの処理がメインなので、Node.js Express MongoDBあたりはサクッと紹介していこうかなぁと。
環境はDockerで構築したので、それっぽいものをGithubにPushしておきました。 github.com こんな感じの構成です
- Nginx
- MongoDB
- MongoExpress
- React.js
- Material-ui
- Webpack
Node.jsとExpressとMongoDBを使ったAPIサーバーの設定
APIの数が少なかったので、横着して簡単に書いてますが、以下の項に /expressDir/route/index.html
にべた書きしちゃってます。
const Mongo = require('mongodb'); const MongoClient = Mongo.MongoClient; // docker-composeを利用しているため、以下のようなURLを指定している // 同一のサーバーに立てるのであれば、localhostで良いはず const _url = 'mongodb://tm_mongodb:27017/feed'; router.get('/', (req, res, next) => { MongoClient.connect(_url, (err, client) => { const db = client.db('feed'); db.collection('feed', (err, collection) => { collection.find().sort({ 'feed.id_str': -1 }).toArray((err, docs) => { res.send(docs); }); }); }); });
こんな感じにすると、JavaScript側からGETで http://localhost:3000/
にアクセスすると、feedの一覧が取得できます。
なお、Node.jsはプロセスを立ち上げているとファイルの更新をしても処理が変更されないので、大抵は更新検知するプロセスからNode.jsを実行します。 今回利用したのはnodemonというものでしたが、これが自分のDocker環境でうまくファイル更新を検知してくれなかったのですが、以下のような設定を追加すると動いたので備忘録的に残しておきます。
困ってたこれ。docker-compose周りの設定が悪い可能性もあるけど、package.jsonに記述する以下のコードで動くようになった。
— Ricck/Riki (@Ricckn) 2018年4月9日
"scripts": {
"start": "nodemon --legacy-watch ./bin/www"
}, https://t.co/ZBcwG8Xlpf
package.json
のscripts部分にnodemonを絡めた実行コードを記述すると思うのですが、そこで --legacy-watch
パラメーターを追加してやるといい感じにやってくれます。
React.jsでAPIにアクセスする
React.jsでAjaxを使う場合、ちょっと前までは「ここだけjQuery使うのかよ、FetchAPIもまだ怪しいし」みたい話を聞いたことがあったのですが、現在は使いやすい物があるみたいです。 github.com 今回はこのsuperagentを利用しました。
非同期処理なのでasync awaitを使って書いてあります。
API関係のコードはすべて api.js
というファイルに纏めて記述します。
import request from 'superagent'; const url = 'http://localhost'; export const getAllFeed = async () => { const endPoint = url; try { const res = await request.get(endPoint); return res.body; } catch (error) { console.log(error); return {}; } };
呼び出す側はComponentが読み込まれた際に実行してもらいたいので、 componentDidMount()
内に記載します。
componentDidMount() { // すべてのFeedを取得 getAllFeed() .then((feed) => { this.setState({ feed }); }); }
以上がComponentが読み込まれた際、MongoDB側からFeedを取得して、React.jsでsetStateする部分の処理になります。
React.jsは勉強中で、それまではFirebaseを使ってデータを格納していたこともあり、Async, Await系の処理を書いたことがありませんでしたが、思ったよりも簡単にかけてスッキリするので良いです。
Firebaseはそれはそれですごく使いやすいのですが、Realtime Databaseが必要ではないときと、まぁ費用がかかりそうなときは今回作ったDockerファイルあたりを駆使して、MongoDBとExpressを使ってサクッとAPIサーバーを立ててもいいかもしれませんね。
React.jsのboilerplate
- React.js
- Material-ui
- Babel
- ES2016
- Sass
- Eslint
あたりを使ったReact.jsプロジェクト用のレポジトリを、周りの人向けに作ったので共有しておく。
色々コメントを書いてあるのと、まだまだ修正する可能性があるんだけど、もしとりあえず簡単なコードを読んでみたいって需要があったら使ってもらえればと思います。