読者です 読者をやめる 読者になる 読者になる

タクマ松下のブログ

情報科学科の学生が書く記録。フロントエンドとサーバサイド練習中!です!

ぼくの開発環境 Mac版

こんばんは.
開発環境という大層なものではないですが,
僕が気に入っているツール郡の紹介です.
Mac版です!
Windows版は後日書きます.

環境

ターミナル

iTerm2

デフォルトのターミナルがイマイチなのでこいつを使ってます.
普通のターミナルですが,キーコンフィグとか色とかいじるのが便利です.
PS1はこんな感じです.

PS1="\[\e[32m\]\u\$\[\e[m\] "

PS1とはbashの機能で,プロンプトの設定です.
ユーザー名がcs14095だとすると,

f:id:t-matsushita:20170421014509p:plain

こんな感じで見えます!
PS1の設定で色も付けています.

ちなみにテーマの色はmonokaiを少し自分でカスタムしてます.
あとは,lsのデフォルトが見にくいので'ls -G'をaliasしてます.

alias ls='ls -G'
alias ll='ls -hl'

他は大したことないです!

テキストエディタ

Emacs

みなさんご存知(?)Emacsです.
基本的にターミナルだけで作業が完成する場合はこれです.
こちらもカラーテーマとしてmonokaiのカスタムです.
設定ファイルの説明をすると1日が終わってしまうので,簡単な見た目だけ.

f:id:t-matsushita:20170421014935p:plain

WebStorm

IntelliJ様のWebStormです.
学生という身分を活かしてタダで使わせていただいてます.
本当にありがとうございますm(_ _)m
フロントエンドをいじるときはだいたいこれです.

理由は...LiveEdit!

f:id:t-matsushita:20170421015319p:plain

こんな設定をするとCSSでもHTMLでも変更した瞬間にブラウザに見た目を反映してくれます!
便利!
あ,キーバインドEmacsにしてます.

Xcode

Swift書くならこれ.
真っ黒にできないのは嫌いです!
IntelliJ製品っぽくできればいいのに...

MacDown

マークダウンを書けるアプリです.
プレビュー機能がついています!
普通のMarkDownエディタですが,見た目とアイコンが綺麗で気に入ってます.

CotEditor

サッと開いて見るときに使ってます.
軽いし文字コードの設定もすぐに変えられるし,
シンタックスハイライトがしっかりしてます.

SublimeText

最後に開いたのはいつか忘れましたが,
Cmd+Dを押すと幸せになれるし,カラースキーマが最初から綺麗です.
こいつのせいで僕の開発環境はMonokai色になりました.

ブラウザ

Chrome

LiveEditのデバッガーがこいつでしか動かない?
Chrome拡張機能としてLiveEditをいれてやるとWebStormと連携してくれます!
詳しくは書きませんが便利です.

その他

SnippetsLab

コードスニペットを保存しとくとこです.
デザインがいいです.
有料です...

Slack

なんか伝えたくなったら開いてます.

Evernote

なんか思いついたら開いてます.

おわりに

他にもいろいろありますが,疲れてきたのでこれくらいにします.
また追加版を書くかもしれません!
おやすみなさい...

Go言語でサーバサイドを練習する

Go言語でサーバサイド

僕はGo言語が割と好きで,Swiftが苦手とする分野はGoで代用してきました.
特にサーバサイドで何かするっていうときはGoを使用していたんですが,
いよいよウェブサービスを作りたいっていうときに何を参考にしようか迷っていたときに買った本の紹介です.

本!

Go言語によるWebアプリケーション開発

Go言語によるWebアプリケーション開発

何が載っている?

この本には,チャットアプリケーション,REST APIの作り方が載っています.
ライブラリの使用をしていたり,Goでのノウハウを紹介しながらも,車輪の再発明をしていないところに好感が持てます.
ゴルーチンやチャネルの実用的な使用法もありがたいです.

要求レベル

レベルとしてはGoの基本構文がわかったくらいで読めると思います.
チャットアプリケーションの開発では,WebSocketを使用しているので,
予備知識として簡単なネットワークの知識があるといいですね.
それでも書籍内である程度説明してくれているので困ることは少ないと思います.

ここがよかった

ライブラリ

$ go get ~
でライブラリを使おう,とかいうこともちゃんと紹介してくれているので,
モダンな開発ができそうですね.

コード

コードは簡潔でかなり読みやすいです.
コードを読んでいて,ん?ってなったところはだいたい注意書きをしてくれてます.

その他

あとはレベルがいきなり上がらないところもいいです.
とりあえずコンパイルできたらOKだよ!みたいなことも言ってくれて,
わからないけど先に進みたいときに,ポジティブな一言がありがたいですね.

まとめ

Goの基本構文がわかった後,
サーバサイドをやりたいなら割とオススメ.

ツールの探し方、比較、良し悪しを決める

こんばんは。
新しい分野に挑戦するときのツール、迷いますよね。
最近フロントエンドに触れてみて、本当に日進月歩の世界なんだなと感じたので、
色々とツールを探したんですが、色々と困りました。
その時にどのツールを使うか決める際にしたことをまとめます。

グーグルトレンド

例えば、vue.jsとreact.js、どちらが人気なんでしょう?
ここでは、優れている、優れていないに関わらず、将来性がある方を選択したいものとします。

「vue.js」と「react.js」の比較

なんだかvueのほうが伸びてきていますね。
ここで注意がひとつ。
以下のようにすると結果が変わってしまいます。

「vue」と「react」の比較

なんかもうvue最強に見えますよね。
これでは正しい結果がとれたとは言えません。
正式名称でググトレるように気を付けましょう。

注意事項

人気のあるもの、将来性のあるものが自分にとって常に最善だとは限りません。
もっとも、Webの分野に関しては、ブラウザという環境そのものが変化してしまうのでその通りなのですが…
ツールというものが生き続けそうなものなら、自分に合ったものを探しましょう。
例えば、僕はこんな結果が出ていてもEmacsを使い続けます。
だってVimでしか出来ないことがあるなら、できるようにelispを書けばいいだけだし…

ちなみにEmacsを作ったゴスリング氏はこんなことを言っているそうです。

Known in the development world as the father of Java, Sun Microsystems' vice president and fellow James Gosling has urged coders to stop using the antiquated Emacs text editor and move to a more modern IDE like Sun's own open source NetBeans.

http://www.computerworld.com.au/article/207799/don_t_use_emacs_says_java_father/

要約すると、
Emacs使うのやめてモダンなIDE使えよw NetBeansとかさw
だそうです。
なんかこう、何も言えないですよね。
EmacsUNIXで動く最初のバージョンで実現したのは彼だそうですが、その後のすべてをつくったのが彼というわけではありません。
僕はIDEを使うこともありますが、Emacsをやめることはできなさそうですね。キーバインドEmacsライクにしてるし。
あと、NetBeansとか絶対使いたくないです。

グーグル検索

hoge vs fuga」でググる

「vs」を比較したいものでググります。
こんな日本語英語っぽいのでちゃんと結果でんの?って思いますよね。
stackoverflowなどで普通にネイティブの人が質問したり答えたりしているので大丈夫だと思います。(?)

まとめ

簡単なtipsでした。

  • ググトレ(グーグルトレンド)ろう。
  • フルネームでググトレろう。
  • 適当な英語でググろう。
  • NetBeansは使うな。

CSSが書けるようになってきてJavaScriptにも手を出した時の愚痴

最近CSSが書けるようになってきたのでjavascriptにも手を出し始めました。

個人で学習する際にブラウザで動いてもなあとか色々考えて、electronで遊ぶことにしました。

引っかかることが多すぎたので愚痴ります。

 

npm、webpack、babelなんなんだこいつら

パッケージマネージャっぽいのはわかりました。

んでwebpackとかいうのが流行ってるらしいので入れました。

babelをいれます。

vueをいれます。

おぉ、モダンな開発環境がもうできたではないか。

いざビルド!

 

 

あれ?

設定を書かなきゃいけないのか、webpackは面倒だな(色々と歴史があるのでこれが良い管理法なのはわかります)

バベル?javascriptを知らない俺がjavascriptを見分けられるわけがなかった。

びゅー、動いてくれない。

パスの設定が間違ってる…あーめんどくさい!

 

まじめな感想

はい、フロントエンドを少し漁ってみた感想なんですが、テンプレート化することが多すぎると思いました。

nodeやらwebpack、vueとかやりたいことはわかるんですが、それらが組み合わさるととんでもない学習コストになりますね。

あと、electronが入るともう初心者には訳がわかりません。

もっとこう、pod!あとはクラスでモデル化!みたいな勢いがあると助かります。

 

まとめ

js初心者がelectronでモダンぽく開発しようとすると死ぬ。

javascript統一化するか、webくんもっと進化してくれ。

 

CSS書いたことなかった僕が最近やったこと

背景

  • 俺のデザインがださすぎる
  • 作ったものを共有する方法を増やしたい

まずはスクラッチから

いきなりCSSフレームワークに頼ってしまうと後から後悔すると思います。
フレームワークは万能ではないので、見た目をカスタマイズしたい人はCSSを書けないとまずそうです。
デザインなんかどうでも良い人はフレームワークを使ってください。
後で後悔すると思います。
とりあえずこの本を読んで勉強しました。
この本ではフレームワークは一切出てきません。
CSSの基本とまではいきませんが、プログラミング言語を学んだことがある人なら、
いい感じに頭を使いながら処理できるはずです。

いやでも同じものは書きたくない

本を読んで自信が出たのでフレームワークを使います。
色々見たんですが、所謂大手は性に合いませんでした。
クソデカファイル君が僕は許せません。

ということでいくつか候補を出しました。

  • Skeleton
  • Bulma
  • Semantic UI

Skeleton君はすごいシンプルです。
シンプルすぎてたまに困ります。

Bulmaのファーストインプレッションは悪かったです。

Semantic UI君は大手です。
でもまぁまぁ気に入りました。
理由は後述です。

ぼくはfixed navが使いたいんだ!

ナビゲーションメニュー、いいですよね。
スクロールして付いてくるとすごい便利です。
ページのトップにスクロールとかは嫌いです。
普通にバーがついてくればいいだろぼけ

Skeletonにはナビゲーションメニューがありません。
でも公式にはあります。しかも付いてきます。
でもフレームワークとしては使えません。
作った人はたぶんこれくらいサラっと作れるだろ、感覚だったんでしょう。
いい迷惑なので早く追加してほしいです。
でもシンプルで書き方としては一番好きかもしれません。

Bulmaにはナビゲーションメニューがありました!
でも付いてきません。
置き去りです。
fixedでgithubのリポを検索してみたらプルリクがありましたが、
色々困ってそうです…
しばらく待ちましょう。

Semantic UIには付いてくるナビゲーションメニューがあります。
しかも結構いじれます。

結局何を選ぼう

一つに絞る必要はありませんよね。
とりあえずトップぽいページを作るときにはBulmaかSemanticが気に入りました。
でも画像を混ぜた紹介ページをサクっと作るならSkeletonがいいです。
総合的にはBulmaがよさそうです。でも色が付いてるのがむかつきます。
背景画像をつっこみにくいのも微妙です。

条件別に分けてみましょう。

  • Fixedなナビゲーションが使いたい

   Semanticかちょっと待ってBulma

  • 画像つっこみたい

   SemanticかSkeleton、Skeletonのほうが個人的に好き

  • シンプルでいいんです

   Skeleton

いやBootstrapでいいだろ

よくねぇよ!どのサイトも同じデザインに見えるんだよ!


進路の話

進路

2回ほど「御社」「御社」うるさい人になりきってきたのですが、
最終的に大学院に進学することにしました。
どうでもいいですけど、DoctorよりMasterのほうが響きはかっこ良いと思います。

身体

身体の方は限界を迎えているようで、インフル・失神・風邪のコンボを決めました。
おかげでAmazonプライムビデオが何件か消化できました。

趣味を増やそう

最近(ここ数年)ギターが上達しないのでドラムを買いました。
今流行りの電子ドラムです。
Amazonのセールで3万くらいで買いました。
母親曰く「カンガルーと象となんかがダンスしてる」みたいにうるさいそうです。
迷惑がられるので僕は毎日ギターを続けることにしました。
ギターが上達しそうですね。

ごはん

ごはんを食べています。図1を参照。

f:id:t-matsushita:20170404215446j:plain
図1: ごはんの図

個人的に勉強したいこととか勉強しなきゃならないことがありました。
ここ1か月で3万円ほど買ってみたんですが、割と消化できました。
また紹介します。

新幹線内で倒れて救急車で搬送されました

筆者の体事情

持病についてです。
たぶんあんまり関係ないです。

  • 先天性股関節脱臼
  • 慢性腎炎

直近の活動状況

覚えてる限り書きます。
週2でバイトがありましたが恐らくこれのせいじゃないです。

~1か月前

今思うと全然きつくなかったです。

  • 大学の実験で週1の徹夜
  • 睡眠時間は6~8程度

~3週間前

一番休んでた時期です。

  • 基本的に睡眠時間8時間以上
  • たまに5時間睡眠でゼミへ

~1週間前

ここが一番きつかったです。
睡眠時間はまばらで、徹夜と丸一日睡眠なんてのを繰り返したりしました。

  • 基本睡眠時間2~4時間
  • 起きている時間はほぼ活動
  • 1日あたり2時間程度の休息時間

~昨日まで

まぁまぁ休んだ気がします。
なぜかよく覚えていません。

  • 睡眠時間4時間
  • 色々やっていた気がする(?)

昨日(倒れた当日)

3時間寝て静岡から東京に新幹線で向かいました。
行きの新幹線が停電で止まったのを覚えています。
東京に着いてからは面接を受けて、カラオケに行って、
渋谷で2時間ほど歩いたり遊んだりしました。
そこから17時くらいに新幹線に乗りました。

倒れたとき

新幹線に品川から乗りました。ここから静岡に帰ります。
面接が終わって緊張が解けたのか、疲れがどっと溢れてきました。
足が痛かったんですが、新幹線で座れなかったので、辛いなぁと思っていると、
急に全身が気持ち悪くなってきて、破壊衝動に駆られました。
何かを蹴り飛ばしたいのと、とにかくトイレに行きたいのと、頭が重いのと、
まぁ一言で表すと気持ち悪かったです。
平常時からこの状態まで30秒もありませんでした。
そのあとは気が付いたら周りに人がたくさん集まっていました。

目が覚めた後

目が覚めてからはだいぶ意識がはっきりしていましたが、声があんまり出ませんでした。
いつもの半分以下くらいの声の大きさです。
立ったり座ったり、目で追いかけたり、身体の動きには全く異常はありませんでした。
救急隊の人がめちゃくちゃ優しかったです。
新幹線に看護師さんがいたらしくて、その人が回復体位にしてくれました。

何がいけなかったのか

医者曰く緊張が解けたときに安心して失神したらしいです。
いえ、心当たりがあります。
どう考えても睡眠不足です。
徹夜と丸一日睡眠を交互に繰り返したり、寝ないで活動したりするのはやめましょう。
少なくとも1日6時間は寝たほうがいいです。

まとめ

ちゃんと寝よう。
倒れた時に頭を打ったせいで若干フラフラしますが、他は元気です。
各位、心配をおかけして申し訳なかったです。
新幹線乗客の方、助けてくれた方、救急隊、車掌、お医者様、両親、
色々な方に迷惑をかけました。
20分倒れるだけでこの有様です。
本当に申し訳なかったです。
疲労で倒れるなど馬鹿馬鹿しいのでちゃんと寝たほうがいいですね。