はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2020/07/17: いくつか追記しました はじめに 私は、TechTrainでフロントエンドのメンターとして面談する中で「最近フロントエンドの勉強を始めました！」という方や、フロントエンドエンジニアを目指す学生と話す機会が何度もあります。 その中でよくある質問が 「フロントエンドの情報収集ってどうしてますか？」 です。 何度も質問を貰うので、気になる人は多いのかなと思います。 この記事では「私がどんな風に情報収集しているか」を紹介しようと思います。主に情報収集の流れと、どこからフロントエンドの情報を集めているかについてです。 情報収

はじめに Node.jsでCLI(Command Line Interface)を作りたくなることがあると思います。 そして、GitHubに公開されているCLIを見ると、色々なライブラリを組み組み合わせて便利なCLIを作っているようです。 この記事では、Node.jsでCLIをどう作るのか？そして、CLI開発を支える便利なライブラリを紹介します。 身の回りのCLI CLIの作り方を見る前に、普段の開発で触れているCLIを見てみましょう。 ESLint CLIには基本的に--helpオプションが用意されていますね。 npm ユーザーの入力を受け取る対話的なCLIも多いですね。 expo プレースホルダーがあることで入力する内容のイメージを伝えることができます。 stencil 様々な選択方法をユーザーに提供したり、分かりやすく色付けすることも可能です。 Node.jsでのCLIの作り方 それ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに Reactを中心としたフロントエンド開発において、以下のような構成を見かけることが多いと思います。 UIライブラリとしてReact 型のある言語としてTypeScript スタイル定義としてstyled-components コンポーネントの開発環境としてStorybook LinterとしてESLint FormatterとしてPrettier この記事では、各種ライブラリについて紹介したのち、それらを使う場合の環境構築についてハンズオン形式で説明します。 ※ アプリケーションを開発する際に必要になる設定が抜けていたので、追記しました。 各種ライブラリの紹介 まず、各ライブラリがどのようなものなのかを簡単に紹介します。 ライブラリの使い方などは公式ドキュメントなどを参照するようにしてください。 React ドキュメント ReactはUI(ボタンやフォームなど)コンポーネントを作

はじめに TypeScript Advent Calendarの初日ということで、TypeScriptの導入についての記事を書いてみました。 主に「いまReactを使っていて、TypeScriptも使ってみたい！」という方に向けた記事です。 最初にTypeScriptについて触れておくと、 TypeScriptは「型を持ったJavaScriptのスーパーセットです」 TypeScriptの公式サイト TypeScriptのリポジトリ Microsoftによって開発され、メンテナンスされているオープンソースのプログラミング言語 クラスベースのオブジェクト指向 型情報をもとに実行前にエラーを検出でき、コンパイルする事でJavaScriptのコードにトランスパイルされる ES2015移行で書かれたコードをES5にトランスパイルできる JSXをサポートしているので、Reactとも併用できる という