はのちゃ爆発

はのちゃが技術ネタとか日常のこととかを書いてます。

Ubuntu 18.04 LTS 上で rbenv を使って Ruby 2.3.6 を入れようとすると libssl-dev 周りでコケる

という現象が発生したので、その原因と解決策のメモ。 調べた感じ同じ現象でハマっている人はまだ居なさそうだった。

続きを読む

はのフロントエンド入門 #4 JS基礎 & ES6 編

久々の投稿です。フロントエンド入門その4、JS基礎とES6の話です。 React の話をするつもりでしたが、そもそもその前に JS そのものの話をしていなかったのでざっくりまとめます。

ES6のまとめ記事は色々あるので今更まとめ直すのもアレかと思いつつ、自分用の学習メモとして。

続きを読む

昨今のWebフロントエンドはきっとそんなに怖くない

というポエムです。

はのフロントエンド入門、次あたりから React とかに踏み込まないといけないっぽいのですが、 そこそこ気合い入れないと書ける気がしなかったのでちょっとポエミーなネタでお茶を濁します。

フロントエンドは怖いのか

かくいう私もフロントエンド怖かった一人です。弊社のフロントエンド勢がガチすぎて余計怖かったというのはある気がしますが…

そんな私も、今や(一応)弊社フロントエンドエンジニアの一員として日々JSと格闘する日々を送っています。半年でもそれなりに書けるようになった…はず。

で本題の「フロントエンドは怖いのか」なんですが、ここに来て、自分が何をどうやってフロントエンドエンジニアになったかを振り返ってみると、少なくとも

「フロントエンド始める前に思っていたほど怖いものではなかった」

と思います。

「怖い」とは

ていうかそもそも「フロントエンド怖い」って言った時の「怖い」って一体なんなんでしょう?

私が感じていた怖さは以下のようなものだった気がします。

  • 自分が知っている Web フロントエンド技術とモダンな Web フロントエンド技術が全く違うものに感じられて怖い
  • Node.js?サーバサイド?あれ、フロントエンドじゃないの?なにそれ怖い
  • React/Redux 使えないと人権なさそうで怖い
  • React ちょっと見てみたけど JSX が 気持ち悪い 怖い
  • Redux に至っては何してるのか全然理解できないし怖い
  • Webpack の設定とかよく分からない、 Babel?トランスパイル??
  • SPA ってよく出てくるけど結局上に出てきたようなものを使ってどうしろと?
  • React の公式チュートリアル
  • でもとりあえず jQuery はオワコンなんですよね?
  • CSS つらい、こわい。
  • フロントエンドってそもそもどこまでやるの、デザインセンスないから無理では?

などなど。なんかもっと色々あった気もする。

ざっくりまとめてしまうと「未知の世界すぎて怖い」というのが割としっくりくる気がします。

未知の世界、というだけであれば他の言語、フレームワークなども同じではあるのですが…

たとえばバックエンドの例として Ruby, Rails を考えてみると、 Rails は比較的やれること、やるべきことが分かりやすく、未知の世界なんだけど進むべき道は割とはっきり見える、という感じでしょうか。

他の言語も根幹はあんまり変わらない気がします。進むべき道がそれなりに見通しやすい、という意味で。(例外はあるかもしれませんが)

それに対してフロントエンドの場合、未知の世界であることは同じなのですが、見えている道が既にめちゃくちゃ分岐していて、どこからどう進めば良いのかが全然分からないから怖い、という感じ…だと私は思っています。

フロントエンドを始めたい、なんか React/Redux が流行りっぽい、Webpack はとりあえず使うよね、 ES6 で書かなきゃね、 TS もあるよ、 flow で型入れる? CSS Modules もないとね、 etcetc...

フロントエンドという言葉の指す範囲が広すぎるというのもありそうですが、最初に見える技術スタックの数が多すぎて進めなくなるのが恐怖感の根幹なような気がします。

怖そうで怖くない、ちょっとだけ怖いフロントエンド

という訳で、始める前は上記のような理由でめっちゃ怖かったフロントエンドですが、実際のところそこまで怯える必要はなかった、というのは記事の頭の方で言ったとおりです。

上述の通り、「道が見えないから怖い」のであって、ある程度道が見えさえすればあとはやるだけ。他の言語とあまり変わらず出来ます。

個人的には、

  • JavaScript 基礎をある程度ざっくりやる(EShoge とかは一旦おいといて)
  • その後 React or Vue, etc... 好きなフレームワークを使ってみる
  • 上記のライブラリを利用していくとそのうち Webpack とかが欲しくなってくる

という感じに、まずは基礎をある程度ちゃんとやるのが大切だと思っています。

自分の場合、 ES6 がどーの、クラスがどーのなどと言った雑な知識で JS の基礎を蔑ろにしていたため、なかなか体系立った学習が出来ていなかった時期がありました。

以下のような書籍で基礎的なところをざっと学んで、知っていることも多かったですが、読んだ後は今までピンとこなかったフレームワークの話などがすっと入ってくるようになりました。やっぱり基礎は重要。

React ときたら Redux に手を出したくなりますし、セットでよく出てくるものではあるのですが、個人的には Redux はすぐに手を出すものではないような気がしています。

生JS -> jQuery などの流れでもそうなのですが、必要最低限のものを一回試してみてからでないと、ライブラリの便利さ、必要性はなかなか理解できません。

結局のところ、「そのライブラリをいつどこで使いたいのか」がピンとこないと、なんかよく分からないものを触っている、という状態から抜け出しにくくなると思っています。

昨今のフロントエンドは変化が激しいです。よく使われる、流行りのライブラリも一瞬で変化していきます。が、その根底にあるのは基本的に HTML/CSS/JS です。

それらの基礎を固めた上で少しづつ React などのモダンなフロントエンド技術を少しづつ取り入れていくようにするのがいいんだろうな、と思います。


というまとまりのないポエム。

いつかもうちょっとちゃんと「自分がどうやってフロントエンドを学んだのか」を書きたい気持ち。

株式会社はてなに入社しました

株式会社はてなに入社しました

株式会社はてなに入社しました - hitode909の日記

流行りの分割キーボード Helix を作った

Helix はいいぞ。

最近自作キーボードという文化が急激に世間に広まってきているようで、いろいろなところでキーボードを自作した人、キーボード自作本を購入する人を見かけるようになりました。

そんな今熱い自作キーボード界でも特にアツいのが "Helix" です。

今日はそんな Helix をGB(Group Buy, 共同購入)し、実際に組み立ててみました。

Helix の公式ウェブページ(?)はこちら。

yushakobo.jp

続きを読む

FFTC#2開催レポ その7 合宿中にやったことまとめ

たぶんFFTCまとめ最後の記事です。開発合宿でやったこと、成果のまとめ。

これまでに書いた記事はこちら。

FFTC#2開催レポ その1 宿編 - はのちゃ爆発

FFTC#2開催レポ その2 食事編 - はのちゃ爆発

FFTC#2開催レポ その3 食事編 ふつかめ - はのちゃ爆発

FFTC#2開催レポ その4 食事編 みっかめ - はのちゃ爆発

FFTC#2開催レポ その5 お金編 - はのちゃ爆発

FFTC#2開催レポ その6 お金編パート2 - はのちゃ爆発

続きを読む

重度花粉症患者の私が使っている花粉対策アイテムを紹介する

タイトルの通り。

長いこと春の花粉症に苦しめられ続けている私ですが、最近多少容態が安定してきました。

そこで、今使っている薬と花粉対策グッズをまとめてみました。同じく花粉症で苦しんでいる皆様のお役に立てば幸いです。

※ 基本的にどれも継続的に服用しないと効果は出にくいのが多いです。イハダとコールタイジンぐらいが例外な気がします。

続きを読む