はのフロントエンド入門 #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 の基礎を蔑ろにしていたため、なかなか体系立った学習が出来ていなかった時期がありました。
以下のような書籍で基礎的なところをざっと学んで、知っていることも多かったですが、読んだ後は今までピンとこなかったフレームワークの話などがすっと入ってくるようになりました。やっぱり基礎は重要。
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
- 作者: 山田祥寛
- 出版社/メーカー: 技術評論社
- 発売日: 2016/09/30
- メディア: 大型本
- この商品を含むブログを見る
React ときたら Redux に手を出したくなりますし、セットでよく出てくるものではあるのですが、個人的には Redux はすぐに手を出すものではないような気がしています。
生JS -> jQuery などの流れでもそうなのですが、必要最低限のものを一回試してみてからでないと、ライブラリの便利さ、必要性はなかなか理解できません。
結局のところ、「そのライブラリをいつどこで使いたいのか」がピンとこないと、なんかよく分からないものを触っている、という状態から抜け出しにくくなると思っています。
昨今のフロントエンドは変化が激しいです。よく使われる、流行りのライブラリも一瞬で変化していきます。が、その根底にあるのは基本的に HTML/CSS/JS です。
それらの基礎を固めた上で少しづつ React などのモダンなフロントエンド技術を少しづつ取り入れていくようにするのがいいんだろうな、と思います。
というまとまりのないポエム。
いつかもうちょっとちゃんと「自分がどうやってフロントエンドを学んだのか」を書きたい気持ち。
流行りの分割キーボード Helix を作った
FFTC#2開催レポ その7 合宿中にやったことまとめ
たぶんFFTCまとめ最後の記事です。開発合宿でやったこと、成果のまとめ。
これまでに書いた記事はこちら。
FFTC#2開催レポ その3 食事編 ふつかめ - はのちゃ爆発
FFTC#2開催レポ その4 食事編 みっかめ - はのちゃ爆発
FFTC#2開催レポ その6 お金編パート2 - はのちゃ爆発
続きを読む重度花粉症患者の私が使っている花粉対策アイテムを紹介する
タイトルの通り。
長いこと春の花粉症に苦しめられ続けている私ですが、最近多少容態が安定してきました。
そこで、今使っている薬と花粉対策グッズをまとめてみました。同じく花粉症で苦しんでいる皆様のお役に立てば幸いです。
※ 基本的にどれも継続的に服用しないと効果は出にくいのが多いです。イハダとコールタイジンぐらいが例外な気がします。
続きを読むFFTC#2開催レポ その6 お金編パート2
開発合宿記事6本目。お金の話第二弾。宿と食事編。だいぶ間が空いてしまいましたがやっていきます。
第1弾〜第5弾まではこちら。
FFTC#2開催レポ その3 食事編 ふつかめ - はのちゃ爆発
FFTC#2開催レポ その4 食事編 みっかめ - はのちゃ爆発
今回はお金の話第二弾、宿代食事代の話です。
続きを読む