活動の様子

フロントエンドってどうやって強くなるの？教えていまいまい！

By [imaimai] 30 March 2023

フロントエンドってどうやって強くなるの？教えていまいまい！

なんだかんだNUTMEGはフロント人材が少し不足しつつあります。 フロントエンドをこれから勉強する後輩に向けて書きました。

書け！慣れろ！以上

~ fin ~

くわしく

ごめんなさい

viewについて

人に見える箇所の実装をviewと言います。ザ・フロントな部分です。 これに関しては、しょうみプログラミングというよりはパズルゲームに近いです。

冗談ではなくて、テトリスやパズドラとあまり変わらず、書いて慣れるしかないと思います。逆に慣れたら脳死で書けます。

例えとしてヘッダーを考えてみます。

これはどういうDOMになるか考えてみましょう。 DOMはHTMLとかで見る下のような入れ子構造のことです。

<div>
    <p>test</p>
    <div>
        <p>hogehoge</p>
    </div>
</div>

ヘッダーをDOMにしたいので、ざっとそれぞれの要素をタグに置き換えて考えてみましょう。

赤枠がdivタグ、緑枠がpタグやらaタグです。 おそらく大体こんな感じになると思います。（勘） Portfolioをdivで囲むかどうかは任せます。ロゴなので、ロゴ画像などが追加されるのを想定してdivで囲んでいます。 これができたら、あとは書き起こすだけです。

<div>
    <div>
        <div>
            <p>Portfolio</p>
        </div>
        <div>
            <p>About</p>
            <p>Work</p>
            <p>Link</p>
        </div>
    </div>
</div>

上のコードの入れ子構造と、ヘッダーの図の入れ子構造が一致しているのがわかるでしょうか。これが僕がview部分をパズルゲームと言っている理由です。

実装したいviewのどの部分がどの塊になっているかを取られることができれば、自然とコードを書くことができます。

あとはCSSを当てるだけですが、これも慣れで、全体の内容を上下左右中央揃えにして、ロゴとメニューは端に寄せて、メニューは1remごとの隙間を開けたらそれっぽくなると思います。 大体はflexやgridが解決してくれます。

実際にコードに起こすと以下のページみたいになります。

https://codepen.io/imaimai17468/pen/GRXPyer

Viewに強くなる方法

ただひたすら書きまくること

  • パズドラと同じ、俺はできんけど

個人開発をしまくる

  • 自分で考えてコードを書く
  • CSSの沼に落ちて無限に苦しむといい

競プロをやる

  • アルゴリズムが身につくってだけじゃない
  • 自分の思考、文字をコードに落とし込む速度が段違いに上がる

Logicについて

「ViewとLogicを分離する」とよく言われるLogicくんです。 apiから受け取った値を処理したり、フォームなどで入力した値を処理したり、フロント側で処理する部分を指します。

フロントは一見人に見える部分を作るだけに思われがちですが、それらを描画するために必要な情報を、裏でapiから送受信して処理するのもフロントの仕事です。

フロントエンドはこいつが沼です。 これに比べればviewなんて赤ちゃんです。 ロジックになると途端に「プログラミングぽさ」が増します。

Logicの例を挙げます。

api処理

  • apiから受け取った値を、フロントで表示する形にコネコネして表示する
  • apiに送るために、formなどから得た情報を指定の形にして送信する
  • エラーハンドリング
    • 正常にget / postできたか、できなかった場合はどうするか

型定義

  • apiに送るデータが本当に指定の型になっているか
  • 表示したいデータの型がundefinedになり得ないか
    • なり得るならそのハンドリングはなされているか

Logicに強くなるには

プログラミングに慣れる

  • C言語、JavaScript、TypeScript、Python、なんでもいい
  • プログラミングの基礎文法の流れを知っていれば最低限何とかなる
  • 単純にプログラミングが好きなほどLogicは強い

Arrayのprototype関数を知る

  • TypeScriptのロジックは大抵map関数とかfilter関数とかが役にたつ
  • for文で10何行かかるコードが1行になることだってある

型について知る

  • そのデータはstringなのか、intなのか、booleanなのか
  • nullにしとくのか、undefinedじゃないか
  • 型定義で型安全に
  • 型推論で開発を安全に

競プロをやる

  • プログラミングの問題を解くことに慣れることができる
  • アルゴリズム知識は単純に強い
  • 「この実装したいな〜」からの本実装までが早くなる

HTML/CSS+JSの立ち位置について

僕はこの記事で、HTML/CSSは簡単だぜ〜な旨の文章を書いています。 ただ、簡単だからといって、これを飛ばしてReactやVueを触ることはお勧めしません。

それが簡単であることとなおざりにしていいことは別だからです。

HTML/CSS+JSの知識は、すべてのフロント知識の根底に紐づいています。 なので、これをやらずに先端的な技術を学ぶと、挫折する確率が高いです。

どの技術にしても、チェーンの繋がってない、関係性の薄い技術に急に触れようとすると、挫折率が高くなることを覚えておいてください。

といっても、最近の技術はチュートリアルが充実していて、初心者でも触れやすいようになっているので、とっかかり自体は掴みやすくなっています。

ですが、その技術をより深く潜ろうと思うほど、根底にあるHTML/CSS+JSについての知識量が露呈していきます。

軟弱な地盤に立派な家は立たないので、基礎知識を固めることはとても重要です。

もっと具体的に

CSSを使わず簡単にスタイルを記述する方法がいくつもあります。

  • TailwindCSS
  • MaterialUI
  • ChakraUI
  • Mantine

これらのライブラリは、<Card>とか<Button>とかのコンポーネントがあり、スタイルを書かなくてもおしゃれなUIを実装することができます。 (TailwindCSSはclassNameに記述するのでちょっと違う)

でも、それらをカスタマイズしたい時、結局はstyleを指定してあげなくてはいけません。 これらのライブラリにはあらかじめ、カスタマイズするために、CSS likeな書き方をするための方法があります。

例えば、中にある要素を縦に中央揃えで整列させたい時、TailwindCSSなら

<div className="flex flex-col items-center">
    <div>hoge</div>
    <div>huga</div>
</div>

MaterialUIなら

<Box sx={{dispaly: 'flex', flexDirection: 'column', alignItems: 'center'}}>
    <Box>hoge</Box>
    <Box>huga</Box>
</Box>

のようになります。 CSSに慣れていると1分足らずでかけますが、そうでないと普通に悩みます。 結局、先端的技術であってもCSSの知識は必要であることがわかります。

ちなみにゆめみのフロントエンドコーディングテストでは、CSSの知識を見るために、こういったCSS系のライブラリの使用を禁止されています。

誤解を生まないために

別に、HTML/CSS+JSもできないのに新しい技術を触るな！😠という訳では全くありません。新しい技術にたくさん触ることは重要ですし、いつまでも足踏みしている暇はないと思います。

基礎は大事だという単純な話だと捉えてください。

サービス開発でReactなんかを学びながら、暇な時に、ポートフォリオなんかをHTML/CSS+JSなんかで書いてみたりして、成長した頃に、それをReactなんかでリプレイスしてみてください。

最初にReactを触った時より基礎ができてきて、少しは書きやすくなってるんじゃないかなと思います。

フロントを怖いと思わないで

色々と難しいことをいってきましたが、フロントはそこまで怖いものじゃありません。基本的に結果は視覚的に現れますし、バックエンドより直感的に書けると思います。

それに、量子コンピュータやディープラーニングの最先端よりかは、よっぽど一般人でも挑戦しやすい技術でもあります。

たくさんの技術を学ぶことについて

学んで損のある技術はありません。

テストで点を取るために学んだ行列の回転が、ゲームの3D処理の原理と関わっていたり、Pythonが使えるからという理由で適当に採用したFastAPIに、実はSwaggerが標準搭載されているのを後から知ったり、どの技術がどれと繋がっているのかは、とても判断できません。

僕が今フロントエンド1つの技術に特化できているのは、その裏で何十もの技術を殺してきたからに他なりません。

フロントエンドはweb開発の基礎となる技術なので、ぜひ触れてみて欲しいなと思います。

これは技術以外にも言えます。思いつきで加入したバイト先が協賛企業になってくれたり、人やイベントでの繋がりだって何に発展するかわかりません。

NUTMEGという巨大な支援を背に、この先の１年というの短い間も、アクションを起こし続けていきたいなと思います。

おわりに

NUTMEGに入ったみんなは特急券を持っています。

成功の反対は何もしないことだって、好きな厳ついラッパーが言ってました。 技術に自分から触れることを恐れないでください。

金を稼げるレベルまではいけなくとも、何か1つアウトプット行くところまでは、ある程度の技術は独学でいけるものと思っています。

先輩から振られた技術やタスクだけじゃなく、気になった技術を積極的に触っていって欲しいなと思います。 そして、触れた経験から、こんなものが作れそうだな、活かせそうだなというアイデアを生み出して、個人制作なりNUTMEGのプロジェクトなりに落とし込んでくれたらなと思います。

以上、3000文字以上のポエムを読んでいただきありがとうございました。