実務経験ほぼゼロでTypeScriptやNext.jsを扱う開発案件にアサインされた人のための備忘録 - Qiita
はじめに 筆者は2022年8月に株式会社ニジボックスに入社し、翌月の9月に現在のプロジェクトにアサインされました。 入社時はフロントエンドの実務経験はほぼゼロで、HTML/CSSやJSの基礎的な文法・ルールをスクールや独学で勉強していた程度の新人エンジニアでした。 そんな私がいきなりTypeScriptでNext.jsをガリガリ書くようなプロジェクトにアサインされ、困ったことや技術的につまずいたところを備忘録としてまとめていきたいと思います。 （読者の方が私と同じ轍を踏まなくて済むように、先輩方からいただいた解決策や私なりの解説を載せておきます） 対象読者 フロントエンド初心者、実務経験があまりない人 これからNext.jsやTypeScriptなどを扱う業務もしくは学習を始める人 前提 フロントエンドの実務経験が少ない筆者が、あくまで同じような技術レベルの方に向けて書いた記事です。 この
6歳娘「パパ、型による条件分岐はできないの？」 - Qiita
とある休日 娘「ねぇ、パパ！」 娘「switchやろ〜！」 ワイ「おお、ええで！娘ちゃん！」 ワイ「Switchやろう！」 ワイ「ほな、テレビをつけて・・・」 娘「テレビ？」 娘「何を言っているの、パパ？」 娘「TypeScriptのswitch文のことだよ？」 ワイ「ファッ！？」 switch文で何をしたいのか 娘「今ね、ショッピングサイトを構築してるところなの」 ワイ「ほうほう」 娘「それでね、手広く儲けようと思って」 ワイ「おお、ええやんか」 娘「個人ユーザーだけじゃなく、法人ユーザーも登録できるようにしようと思うの」 ワイ「なるほどな」 娘「言語はTypeScriptを使っているんだけど」 娘「ちょっと聞きたいことがあるの」 ワイ「おう、なんでも聞いてや」 あいさつ関数を作っている 娘「ショッピングサイトにログインしたときに・・・」 個人の場合 → 「無職 やめ太郎さん、こんにちは
【2021年最新】フロントエンジニア向けのアプリ開発4選(無料で学べる) - 渋谷で働く現役エンジニアが徹底解説
(こちらの記事は2021年8月に更新) ・ フロントエンジニアになるためにポートフォリを作成したい ・ 実務で使える技術を学びたい ・ お金をかけずクオリティーの高いアプリを開発してみたい この記事はそんな人に向けて書いています。 今回は、Twitterでもしばしば紹介している、『フロントエンジに向けのアプリ開発記事』を具体的な解説と共に、まとめました。 これから転職をする方や、インターンに応募する人が、ポートフォリオ制作をする上で、使えそうな記事だけを厳選し徹底解説をします。 ぜひこちらの記事で紹介したアプリを自分で手を動かして開発し、より実力を伸ばしてみてください。 基本的に『無料 × 技術力向上 × ポートフォリオ化』できそうなものだけを紹介します。 ✔︎ フロントエンジニア向けのアプリ開発4選 ・①【React×TypeScript】で簡単 TODOアプリ(Zenn) ・②【Rea
Google TypeScript Style Guide
// Good: choose between two options as appropriate (see below). import * as ng from '@angular/core'; import {Foo} from './foo'; // Only when needed: default imports. import Button from 'Button'; // Sometimes needed to import libraries for their side effects: import 'jasmine'; import '@polymer/paper-button'; Import paths TypeScript code must use paths to import other TypeScript code. Paths may be r
Next.js + NestJS + GraphQLで変化に追従するフロントエンドへ 〜 ショッピングクーポンの事例紹介
今回は、fragmentを活用するためにパターンCを採用しており、厳密には、以下のように方針を定めています。 SSR時のクエリ発行: ページコンポーネント単位 CSR時のクエリ発行: CSRが必要なコンポーネント単位 この際、取得したqueryの結果をどのようにfragmentへ変換するかというのがポイントです。 そこで、graphql-anywhereの filter メソッドを用いることで、クエリ結果をfragmentへ変換します。 以下は、簡略化されたクーポンページの実装例です。 type DetailPageProps = { // GraphQLクエリの結果 data: Query } const DetailPage: FunctionComponent<DetailPageProps> = ({ data }) => { // couponはGraphQLのCouponスキー
たった数分で環境構築が完了！TypeScriptでWebアプリケーション開発ができるフレームワーク「frourio」が本当に手軽だった。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
たった数分で環境構築が完了！TypeScriptでWebアプリケーション開発ができるフレームワーク「frourio」が本当に手軽だった。 こんにちは、エンジニアのづやです。 突然ですがエンジニアのみなさん、TypeScriptに触れた経験はありますか？ TypeScriptはGitHubが毎年発表しているランキングで今年4位に急上昇したくらい、もっともアツいプログラム言語の1つです。 出典：https://octoverse.github.com/ しかし、いざ試してみようと思っても、 フレームワークは何を使えば良い？ どうやって導入したら良い？ など、意外とハードルって高くないですか？ そこで「frourio（フルーリオ）」という画期的なフレームワークを見つけました。こういうのってある程度経験を積んだエンジニアでないと使いこなせない……というケースも多いですよね。 でもfrourioはそ
【旧版】りあクト！ TypeScriptで始めるつらくないReact開発 第2版 - くるみ割り書房 ft. React - BOOTH
⚠️ この本には最新の第3版が出ています。三部構成です。 ・ https://oukayuka.booth.pm/items/2368045 ・ https://oukayuka.booth.pm/items/2368019 ・ https://oukayuka.booth.pm/items/2367992 BOOTH 技術書カテゴリ（約 3,500 タイトル）にて現在ランキング 1 位！ 技術書典5 にて初頒布、その後もクチコミによって広がり続け、シリーズ累計売上 5,000 部を突破した React の本格的入門書。現場のエンジニアたちから絶大な支持を受け、Chatwork の 2020 年インターン用教材としても採用されました。 本書はほとんど全てのコードが TypeScript で書かれているのが大きな特徴です。React を使う際に必要となる言語の知識や関数型プログラミングの考え
【JS完全に理解した】JavaScript PrimerとプログラミングTypeScriptとレガシーフロントエンド安全改善ガイドを読んでみた - give IT a try
はじめに 僕は仕事でRuby on Railsを使ってWebアプリケーションを開発しているので、JavaScriptはそれなりに使えます。 ですが、サーバーサイドで使っているRubyに比べると、JavaScriptの習熟度はそれほど高くありません。 とくに、文法が一気にブラッシュアップされたES2015（ES6）以降の知識は「なんとなく把握はしているが、あくまでなんとなく」といった感じです。 また、最近よく名前を聞くようになったTypeScriptも「名前は知っているが使ったことはない」というのが現状です。 というわけで、「そろそろちゃんと勉強しておかないと」という思いから、以下の本を購入してみました。 JavaScript Primer 迷わないための入門書 (アスキードワンゴ) 作者:azu,Suguru Inatomi発売日: 2020/06/10メディア: Kindle版プログラミ
TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に｜ハイクラス転職・求人情報サイト AMBI（アンビ）
TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に JavaScriptプロジェクトでTypeScriptを導入する際には、“柔らかい”静的型付き言語とするのがおすすめです。藤吾郎（gfx）さんがまとめた「がんばらないTypeScript」のガイドラインです。 TypeScriptは、すべてのJavaScriptプロジェクトで採用する価値のある技術です。TypeScriptとこれに対応したエディタを導入することで、補完や型ベースの整合性のチェックにより、すべてのプロジェクトで生産性が上がります。またリファクタリングも容易になるので、長期あるいは大規模なプロジェクトでも品質を保ちやすくなります。 この記事では、TypeScriptについて最低限の知識とともに、サクッと（どちらかというと既存のプロジェクトに）導入するための
TypeScriptをお勧めしたい7つの理由 - Qiita
お勧めしたい理由 1 新しい文法を使っても古い環境で動作させることができる 私の場合、GoogleBotが認識できるJavaScriptが前提なので、おのずと使える機能はES5に制限される。その範囲ではclassすら使うことはできない。しかしTypeScriptを用いれば、classだろうが継承だろうがやりたい放題だ。事前にやるべきことは出力ターゲットの指定だけだ。 2 型チェックが強力で柔軟 変数に型を付けることができるので、ちょっとしたミスが起きにくくなる。TypeScriptの凄まじいところは、可能性のある型をすべて記述できることだ。送られてくるデータが「数値」、もしくは「文字列が入った配列」など、可能性を事細かに指定できる。さらにif文で型チェックを入れておくだけで、文法チェックの段階で型を確定してくれるのだ。わざわざキャストする必要もない。これはかなりヤバイ。 3 入力補完が利用
TypeScript Deep Dive 日本語版 | TypeScript Deep Dive 日本語版
出典: https://www.npmtrends.com/typescript TypeScriptはJavaScriptを拡張して作られたプログラミング言語です。トレンドが示すとおり、TypeScriptはJavaScriptに代わって第一に選択される言語になりました。TypeScriptが提供する静的型システムは、コードの保守性と可読性を大幅に向上させます。またブラウザ等の互換性を心配することなく、モダンで便利なJavaScriptの機能を利用できます。 TypeScript DeepDiveは初心者からベテランまで役立つオープンソースのドキュメントです。JavaScriptのモダンな機能からTypeScriptの様々な魔法に至るまで丁寧に説明されています。多くのコードサンプルがあり、具体的なTypeScriptの使い方を簡単に理解できます。TypeScript DeepDive日本
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
TypeScript導入で得られる「変えていく勇気」 / The courage to change by TypeScript - Speaker Deck
2018/9/1、GDG DevFest Tokyo 2018にて発表した資料です。
新規事業をひとりで作るノウハウ - 怠惰を求めて勤勉に行き着く
生存報告も兼ねて。 カリフォルニアに来てもう半年ぐらい経った感覚ですが、実はまだ4ヶ月ほどでした。非常に多くの素敵な方々との出会いがあり、妻も僕も子供もこの皆さまの助けがあってどうにか生きております。どう感謝してよいか言葉にできないほどです。 さて、ビジネス上の僕のミッションは次の3つです。 主に投資や連携目的の交渉（の技術面のサポート） 日本との連携 新規事業の開発 どれもなかなか難しいです。会ってアポぐらいなら応じてくれる会社も多いですが、投資や連携といってもバブル崩壊以後経済成長できていない我が国はもはや「商習慣だけめんどくさいのに今やカネも持ってないから相手にしてられない連中」というのは肌で感じます。ご存知の通り、サンフランシスコ・ベイエリアはIT企業会社員が年収5000万円もらうような場所です。なかなか同じ規模感で会話するのが難しいレベルに達しています。 こみこみという噂のNet
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
