こちらの記事は、Indrek Lasn 氏により2019年 10月に公開された『 Here Are 6 Front-End Challenges to Code 』の和訳です。
本記事は原著者から許可を得た上で記事を公開しています。
著者Twitter https://twitter.com/lasnindrek
フロントエンドの開発はストレスが多く難しい作業ですが、練習すれば技術をマスターすることができます。
自ら進んで鍛錬と努力をすれば、フロントエンド開発の場面で問題を解決することのエキスパートとなることができるでしょう。
優れたフロントエンド開発者になるために効果的な方法の１つは、単純にできるだけ多くの課題に取り組み、解決することです。
フロントエンド開発の達人になるために、今日から解き始めることができる6つの課題を紹介します。
ではさっそく、実装すべき６つの課題はこちら。
1. クレジットカードフォーム
スムーズで見た目の良いマイクロインタラクションを持つ、クレジットカードフォームです。
数値の書式設定やバリデーション、そしてクレジットカード種別の自動検出機能があります。
Vue.jsで書かれており、また完全にレスポンシブです。
ここで実際に見ることできます。
クレジットカードフォーム — https://github.com/muhammederdem/credit-card-form
この課題の解決を通して学べること
フォーム処理とバリデーション
イベントリスナーの処理（たとえば、フォームの値が変更されると、クレジットカードに変更後の値が表示されます。）
ページ上の要素（特にフォームに重なるクレジットカード）の表示および配置方法の理解
2. 一から作る棒グラフ
棒グラフは、カテゴリデータを、それらが表す値に比例した高さまたは長さの長方形の棒で表します。
棒グラフは縦または横にプロットできます。縦棒グラフ は折れ線グラフと呼ばれることもあります。
*(原文)A vertical bar chart is sometimes called a line graph.
この課題の解決を通して学べること
構造化されたわかりやすい方法でデータを表示する
オプション：
<canvas>要素の使用方法と、<canvas>要素を使った画面要素の描画方法
ここで、年ごとの世界人口のデータを見ることができます。
3. Twitterハートアニメーション
2016年頃、Twitterはツイートのいいねのためにこの素晴らしいアニメーションを導入しました。
2019年の今でも、まだイケてるので、自分で作成してみませんか？
Twitterのツイートのいいねアニメーション
この課題の解決を通して学べること
keyframesCSS属性の仕組みHTML要素の操作およびアニメーション方法
JavaScript、HTML、およびCSSの組み合わせ方
4.検索機能を持ったGitHubリポジトリ
特に凄いことはありません。GitHubのリポジトリは、基本的には見た目を良くした、ただのリストの一種です。
すべきことは、リポジトリを表示し、ユーザーがリポジトリをフィルタリングできるようにすることです。
公式のGitHub APIを使用して、ユーザーごとにリポジトリを取得します。
GitHubプロファイルページ — https://github.com/indreklasn
この課題の解決を通して学べること
APIからデータを取得する方法
APIからのデータを表示する方法
各検索に関連するデータをフィルタリングして表示する方法
オプション：もし課題に取り組みたい場合は、GraphQLで作られたv4 APIを使用してください。
GraphQLを学びたい場合は、私の以前の記事を参照してみてください。
5. Redditのようなチャットルーム
チャットルームは、簡単で楽しく使用できるため、コミュニケーション手段として人気です。
しかし、現代のチャットルームを実際に可能にしているのは何でしょうか？WebSocketsです！
この課題の解決を通して学べること
WebSocketの使い方と、リアルタイムな通信およびデータ更新方法
ユーザーのアクセス許可レベルの仕組み（たとえば、チャットチャンネルの所有者は
admin権限を持ち、ルーム内の他のユーザーはuser権限を持ちます。）フォームのバリデーションと処理—メッセージを送信するためのチャットボックスは
input要素であることを忘れないでください。さまざまなチャットルームの作成および参加方法
ダイレクトメッセージとその仕組み。ユーザーは他のユーザーとプライベートに会話できます。基本的には、2人のユーザー間にWebSocket接続を確立する必要があります。
6.ストライプナビゲーション
このナビゲーションのユニークな点は、コンテンツに合わせて形を変えてポップオーバーコンテナです。
従来の新規のポップオーバーを完全に開閉する動作とは対照的に、エレガントに形状が変化します。
ストライプナビゲーション
この課題の解決を通して学べること
CSSアニメーションと画面遷移を組み合わせる方法
コンテンツをクロスフェードし、ホバーされている要素に
activeクラスを適用します最初は自分で試してみてください。ただ、もし助けが必要な場合は、ステップバイステップのガイドが載っているこの投稿を確認してください。
まとめ
読んでくれてありがとうございます。-コーディングしたくなるような面白いものが見つかったなら幸いです。
コーディングが上手になるのに近道はないということを覚えておいてください。
作業に取り掛かり、そしてできるだけ多くのものを作ってコーディングスキルを高めてください。
もし面白いものが見つからなかった場合は、下記の投稿にさらにもっとアイデアが載っているので確認してみてください。
The Secret to Being a Top Developer Is Building Things! Here’s a List of Fun Apps to Build!
The Best Front-End Hacking Cheatsheets — All in One Place
関連記事
180日でWeb開発者になる方法(コンピューターサイエンスの学位なしで)
翻訳協力
Original Author: Indrek Lasn
Thank you for letting us share your knowledge!
この記事は以下の方々のご協力により公開する事が出来ました。
改めて感謝致します。
選定担当: yumika tomita
翻訳担当: @satosansato3
監査担当: @nyorochan
公開担当: asuma yamada
ご意見・ご感想をお待ちしております
今回の記事は、いかがだったでしょうか？
・こうしたら良かった、もっとこうして欲しい、こうした方が良いのではないか
・こういったところが良かった
などなど、率直なご意見を募集しております。
いただいたお声は、今後の記事の質向上に役立たせていただきますので、お気軽にコメント欄へ投稿ください。
みなさまのメッセージをお待ちしております。