これは5年かけて JavaScript の技術スタックの間をうろつき、無駄な時間を過ごし、迷い、そしてなんとかローンチにこぎつけた体験の記録です。 自己紹介 初めまして。私は小さなモバイルアプリ開発会社を運営しているエンジニアです。 プログラミングを始めたのと同じくらいのときから、趣味で作曲活動をしています。 今日の作曲は DAW と呼ばれる大型のソフトウェアを利用することがスタンダードになっています。しかしたくさんのプラグインをマシンにインストールしなければならないことや、すぐに立ち上がる作曲ソフトが無いことにフラストレーションを覚え、軽量な MIDI シーケンサーアプリを好んで使っていました。 しかしそれらの多くは Windows2000 の時代から存在し、アップデートされず、その上 Windows 10 以降 MIDI の再生はまともにサポートされなくなりました。 その問題を解決する
Tiobe indexを眺めながら、C#とVBが入っていてMicrosoftは強いなーと思ったのだけど、よくみると他の言語もMicrosoftの影響力すごいのではとなったので調べてみた。 https://www.tiobe.com/tiobe-index/ Python 例えば1位のPythonにMicrosoftはかなり力をいれている。象徴的なのが、Pythonのオリジナル開発者の入社 C/C++ Windows上でのC/C++コンパイラではMS C/C++が圧倒的シェアであるし、C++の標準化団体にMicrosoftはGold Memberとして参加している。 https://isocpp.org/about Java 4位のJavaに関してもかなりリソースは割いているわけですが、全体の影響度としてそこまで大きくはないですね。 昨日のブログにも書いたようにOpenJDKビルドを出してい
2022年4月、Deno に以下のバグが報告されました。 fetch API を使って 300KB ぐらいあるファイルをアップロードすると、一定確率でアップロードされたファイルが壊れるというバグの報告です。 報告者によれば、1.20.6 まではバグは発生しておらず、1.21.0 から発生するようになったという事です。1.20.6 の次のリリースが 1.21.0 なので、パッチバージョン1個分まで、バグの発生時期が特定されている状態です。 fetch 周りは自分はほぼ実装していないので「担当範囲ではない」感覚だったので、普通にスルーしていました。 自分に限らず、Deno Land コアチームの誰もこの issue にピンと来る人が居なかったようで、stale ボット (数ヶ月進捗の無い issue を自動的にクローズしようとするボット) に2回もクローズされかけていました。Deno の st
TypeScriptの世界を知る 前書き Node.jsエコシステムを体験しよう TypeScriptの書き方 変数 プリミティブ型 複合型 基本的な構文 基本的な型付け 関数 その他の組み込み型・関数 クラス 非同期処理 例外処理 モジュール console.logによるログ出力 中級のテクニック ジェネリクス 関数型指向のプログラミング クラス上級編 リアクティブ 高度なテクニック 環境ごとのTips（共通環境・ブラウザ以外） ソフトウェア開発の環境を考える 基本の環境構築 ライブラリ開発のための環境設定 CLIツール・ウェブサーバー作成のための環境設定 CI（継続的インテグレーション）環境の構築 成果物のデプロイ 使用ライブラリのバージョン管理 環境ごとのTips（ブラウザ環境） ブラウザ環境 ブラウザ関連の組み込み型 Reactの環境構築 create-react-appによる環境
Webフロントエンドの開発効率を高く保つための考え方
これまでいろんな現場でWebフロントエンド開発をしてきて、メンテナンスしやすく効率の高いWebフロントエンド開発をする上で重要になる考えが自分なりにまとまってきたので記事にしてみます。 Worse is Betterという考え方 自分が見てきた中でWebフロントエンドの開発効率が落ちてしまう一番の要因は、きれいで理論的には優れているアーキテクチャを構築しようとしてそれ自体がもたらす複雑性を支えきれないというパターンです。 少し前にフロントエンドにClean Architecture（以下CA、あの同心円の図を指すのは誤用に近いですがここではそれに乗ります）を導入する記事が流行ったと思いますがあんな感じです。ああいったクラスベースでDIが重要となる設計手法はサーバーサイドのJavaでSpringを使うのとは違ってReactがサポートしているものではないため、CAの実現自体に高い設計スキルが必
2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2020年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は現在のスター数ではなく、『2020年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年の総合ランキング1位はVue.jsです。 以下は2020年のランキング、2020 JavaScript Rising Starsの日本語訳です。 JavaScript ライジングスター 2020 5回目のJavaScript ライジングスターにようこそ！ こ
こんにちは、よしこです。 株式会社ナレッジワーク というスタートアップで、2020年4月の創業時から一人目のフロントエンドエンジニアをしています。 初期に考えて組み上げたスタックで1年半ほど開発・運用してみて、なかなか快適に日々開発ができているので 新規開発のプロダクト立ち上げ時にどのようにフロントエンドを構築したのか？ 立ち上げから1年以上開発・運用を続けてきた今、それらの選択はどうだったのか？ を記事にして振り返り、公開したいなと思いました。 （プロダクトの内容はステルスで進めていてあまり対外的な発信ができないので、かわりに技術的なところはどんどんオープンにしていきたいなという気持ちがあります） いろいろな項目ごとに振り返りたいので、この記事は各項目を横断するindexとして項目ごとの概要を簡単に説明し、深堀りは項目ごとに追って詳細な記事を書いていく予定です！ 前提 プロダクトとしての
Qiita Conference 2023 Autumun での発表資料です 発表時間の見積もりが下手で後半全然説明できませんでした、すみません！ 実際のプロダクト開発ではどうすればいいのか? というケースは以下のスライドを参照してください。 (本スライドは、こちらのプロダクト開発の経験をベースに基礎を再整理したものになります) https://speakerdeck.com/naoya/typescript-niyoru-graphql-batukuendokai-fa-75b3dab7-90a8-4169-a4dc-d1e7410b9dbd
nodejsを例に解説します。nodejsでは環境変数はprocess.env.環境変数名でとりだせます。また、開発環境・テスト環境・本番環境をそれぞれNODE_ENVという環境変数にdevelopment test productionと入れる文化があります。 アプリケーションコードに自分が今いる環境(開発|ステージング|本番)を意識させない これはつまり、コード内で環境識別変数(今回で言うところのNODE_ENV)によってif分岐を作らないという意味です。各環境にどのような設定が入るかはアプリケーションコード外にその種類分作成しましょう！ bad if(開発環境){ const logger = new Logger({ level: 'debug' }); } else if (ステージング環境){ const logger = new Logger({ level: 'info }
自分も教える事が多いので、読み手にどういう風に学んでほしいか、自分がどういう風に伝えるべきか、という視点で読んだ。 1章・イントロダクション そもそもTypeScript とはなにかみたいな話。 コンパイルエラーが出ている状態ではプログラムが完成したとは言えません。 力強い コンパイルエラーをただ避けるのではなく、利用する気持ち で TypeScript プログラミングに臨みましょう。 初心者に型違反の向き合い方を諭す話。IDEの補助になるとか。 TS年表で取り上げてるのが特徴的。exactOptionalProperty を取り上げてたり。 TSの型はランタイムに影響しない、という話を何度も解説している。これは初心者の誤解がとても多いので、必要だと思う。何度いっても、伝わって欲しい人に伝わらないのだが… enum や namespace については意図的に解説しない。過去のTS独自路線だ
とある休日 娘「ねぇ、パパ！」 娘「switchやろ〜！」 ワイ「おお、ええで！娘ちゃん！」 ワイ「Switchやろう！」 ワイ「ほな、テレビをつけて・・・」 娘「テレビ？」 娘「何を言っているの、パパ？」 娘「TypeScriptのswitch文のことだよ？」 ワイ「ファッ！？」 switch文で何をしたいのか 娘「今ね、ショッピングサイトを構築してるところなの」 ワイ「ほうほう」 娘「それでね、手広く儲けようと思って」 ワイ「おお、ええやんか」 娘「個人ユーザーだけじゃなく、法人ユーザーも登録できるようにしようと思うの」 ワイ「なるほどな」 娘「言語はTypeScriptを使っているんだけど」 娘「ちょっと聞きたいことがあるの」 ワイ「おう、なんでも聞いてや」 あいさつ関数を作っている 娘「ショッピングサイトにログインしたときに・・・」 個人の場合 → 「無職 やめ太郎さん、こんにちは
2021年秋ごろ、副業のような形で Next.js による新規フロントエンド開発のお手伝いをさせていただくことになりました。プライベートの空き時間でフロントエンドの学習をし、今はひとまず開発できるようになってきた気がするので、これまで学んできたことをご紹介します。 基本の TypeScript, React, Next.js だけでなく、GraphQL の周辺ツールやテストについても学習しました。 これまで 当時、Web 系の受託開発会社にて主に Ruby on Rails でバックエンドの開発をしていました。TypeScript, React は学生の頃から趣味で書いていました。 テストは、Rails での開発なら RSpec や Capybara で書いていましたが、JS ではほぼやったことがありませんでした。GraphQL は全くの未経験でした。 やったこと React チュートリア
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 | フューチャー技術ブログ
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript（TypeScriptではなく） + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、
Published on July 28, 2020 Stefan on Mastodon Reading time: 10 minutes More on TypeScript, React, Preact This list is a collection of component patterns for React when working with TypeScript. See them as an extension to the TypeScript + React Guide that deals with overall concepts and types. This list has been heavily inspired by chantastic’s original React patterns list. Contrary to chantastic’s
2冊目も公開中なのでみてください！ https://zenn.dev/tatta/books/4e993c596e7dc9 TypeScriptを使いはじめて1年になるので、バックエンドのWebアプリを設計するときに気を付けていることをまとめました。（※社内勉強会用資料の公開版です。） TypeScriptについては、Next.jsを中心にフロントエンドに関する公開情報が豊富です。一方でバックエンドに関する公開情報が少ないと感じています。（かくいう私もNext.jsからTypeScriptデビューしたわけですが） TypeScript * GraphQL という構成は仕事・趣味で採用されている方も多いのではないでしょうか？ 私もその1人です。私のような方のためにも、バックエンドの設計プラクティスについてまとめようと思い筆を取りました。 本書がこれから始める読者にとっては教科書のようになり、
プロジェクトで使われている技術と ESModule の状況について UIT では、 SPA 開発のプロジェクトにおいて Vue.js と React が多く利用されており、既存の多くは Babel を利用した JavaScript で、新規のプロジェクトでは TypeScript を利用して開発が行われています。 FYI: 【LINE DEV DAY 2019 番外編】UIT Front-end Tooling Survey 2019 技術選定は勿論、プロジェクトにおける細かなコーディングルールについては、プロジェクトのコードオーナーに委ねられており、プロジェクトごとに裁量を持った意思決定を行っています。 その上で、私が携わるプロジェクトにおいては、 default export を可能な限り避けるように心がけています。 import 側の裁量で対象を自由に命名できてしまう 今回は「『Da
gRPCがフロントエンド通信の第一の選択肢になる時代がやってきたかも？ | フューチャー技術ブログ
Go 1.19が8/2に早々にリリースされました。個人的にはGo 1.19よりも楽しみだったのが、サービス間通信とIDL（インタフェース記述言語）連載の中でご紹介したgRPCのGo実装の新星、Connectのアップデートでした。そしてそれはやってきました。 詳しい内容は↑の記事を見ていただくとして、Connectがその開発元ブログの紹介記事で宣言していたのが次の2つのことでした。 Go 1.19が出たらconnect-goは1.0にして以後後方互換性を守るよ connect-webを出すよ 前者はまだ0.3だったのですが、connect-webはリリースされました。歴史のあるフロントエンドのコードジェネレータはTypeScript対応が後付けだったりするのですが、TypeScriptがファーストシチズンかつ、ネイティブというコードジェネレータなので、開発はかなりやりやすくなることが期待され
注意 この記事は 2020 年 09 月 24 日現在、古い情報となりました。 eslint-plugin-prettier の利用は非推奨であると公式がアナウンスを出しています。 そのことについては Prettier と ESLint の組み合わせの公式推奨が変わった にてまとめましたので、こちらもご覧ください。 また eslint-plugin-prettier は公式推奨ではなくなりましたが、それは Editor などの外部環境の進化によるものでこのプラグイン自体に何か問題が起きたわけではありません。 そして eslint-plugin-prettier を利用した設定方法、特に eslint-plugin-prettier と eslint-config-prettier が何を解決していたかを知らないと、prettier-eslint が何をどう解決したかを理解できないはずなので
eslint-plugin-prettier 時代の設定をずっと使っていたので、重い腰を上げてアップデートした作業メモ。 背景 Prettier 公式ドキュメントによれば、現在 eslint-plugin-prettier は以下の問題があるとして推奨していない。 エディタが真っ赤になる（人間が気にする必要のない問題なのに！） 直接実行するより遅い（同様に prettier-eslint も遅い） ESLint と Prettier の間に間接レイヤーを追加するので、壊れやすい なるほど正しい。 一方、別々に実行することで以下のような問題も出てくるので、解決していく。 CLI とエディタを個別に設定する必要がある エディタで ESLint と Prettier の協調動作が必要 CLI (npm scripts) で ESLint と Prettier の対象ファイルが別管理になる 上記の
はじめに 自分は2021年に新卒でweb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は実務でNext.jsプロジェクトにテストを導入することになり「React-Testing-Library」と「Jest」について改めて学び直したのでその内容を紹介します。 はじめに「React-Testing-Library」と「Jest」の概要を説明しその上で具体的なテストコードを何パターンか書いていきます。 この記事の対象者 フロントエンドのテストの概要を知りたい人 React-Testing-LibraryとJestについて知りたい人 具体的なテストの書き方を学びたい人 なお本記事では、React-Testing-Libraryの具体的な書き方についてをメインにしている
現代のWebアプリケーションエンジニアとして最低限の常識TODO - shimobayashiパブリック
古代のWebアプリケーションエンジニアなので、現代との差分を身に付けていくぞ！ 個人的なスキルセットの差分を埋めるためのものなので、誰にでもマッチするものではありません。 習うより慣れろの精神で、読んで終わりじゃなくて手を動かします。 コンテナ化 x done.icon The Twelve-Factor App （日本語訳） done.icon What is Amazon Elastic Container Service? - Amazon Elastic Container Service 機械翻訳がひどかったので英語版をGoogle翻訳で読むほうがマシそう メニュー1階層目だけ全部読んで、気になるところがあれば深堀りする ↑で物足りなかったらKubernetes完全ガイド 第2版 impress top gearシリーズ | 青山真也 | 工学 | Kindleストア | Ama
トランスパイラ「Babel」の開発チーム、「何百万人にも使われているのに、なぜ私たちの資金は尽きようとしているのか？」。資金難により寄付を訴え
トランスパイラ「Babel」の開発チーム、「何百万人にも使われているのに、なぜ私たちの資金は尽きようとしているのか？」。資金難により寄付を訴え 「Babel」は、JavaScriptコンパイラもしくはトランスパイラの代表的なツールとして知られており、FacebookやSpotify、Slack、MongoDBなどさまざまな企業や開発現場で使われています。 そのBabelの開発チームが資金難になっていることを、開発の中心となっているコアチームがブログ「Babel is used by millions, so why are we running out of money?」（Babelは何百万人にも使われているのに、なぜ私たちの資金は尽きようとしているのか？」で明らかにしています。 Babelとは、ECMAScript 15以降のいわゆるモダンなJavaScriptの構文や機能を活用して書
TypeScriptは、JavaScriptでも大規模なアプリケーションを開発しやすくすることを目的に開発されたプログラミング言語です。 確かにJavaScriptは元々、大規模な開発を想定した設計ではありませんでした。それでも、JavaScript自体が進化して、大規模開発に対応してゆけば良かったはずです。しかし、実際はそううまくは行きませんでした。代わりに、大規模開発の一部はTypeScriptが引き受けることになったのです。 なぜ、そうなったのでしょうか？その答えはJavaScriptの歴史にあります。TypeScriptが必要な発明で、そして、今もなお必要とされている理由が見えてきます。それでは、TypeScript誕生以前の歴史をひも解いていきましょう。 1990年代JavaScriptの誕生JavaScript誕生以前は、簡単なフォームのバリデーションをするのも、サーバーサ
2019年頭より少しずつ書いていたTypeScriptの教育コンテンツをクリエイティブ・コモンズ4.0の表示 - 継承 （CC BY-SA 4.0）で公開します。といっても完成版ではなく、アーリーアクセス版のような品質であることをご了承ください。 仕事ですぐに使えるTypeScript Web版に加えてPDF版もダウンロード可能です。 そもそもこの資料を書き始めたきっかけですが、フューチャーのようなB2Bな会社であっても、最近はフロントエンドの比重が高まっているところから出発しています。僕もフューチャーに転職後からReactでがっつり1年以上の案件をやったり、半年ぐらいのAngular案件をやったりしています。会社としてはVue.jsを推しています。グループ会社の東京カレンダーはReactを使っていたりもします。要件に合わせていろいろですね。B2B2Cな案件も多いですし、お客様の求めるUX
Reactのコンポーネント周りの用語を整理する
React のコンポーネント周りの用語ってごっちゃごちゃになった経験はありませんか? 友人と話すときなどはなんとなくのニュアンスで伝わるので気にしていなかったのですが、型注釈つけるときやコードリーディングするときに言葉の定義がわからなくなって何回も調べるといったことをよくやるのでこれを機に整理しようと思います。 本記事では JSX 以外にも createElement 記法の知識も要するので、自信がない方は公式やどうして JSX を使ってもエラーにならないのか？をご覧ください。 ここでは React のドキュメント JSX Elements Components TypeScript の型定義 JSX.Element ReactElement DetailedReactHTMLElement DOMElement FunctionComponent Component ReactNode
「私の手順」というサービスを作りました
手順共有サービス「私の手順」を作りました。 本記事では背景から開発の流れ、技術選定などを記載していきます。 背景 ほとんどの行動には手順があるかと思います。最初にこれをやって、次にあれをやって、最後にこれをやる。 テキストコミュニケーションで以下のような説明をしたことがある方は多いのではないでしょうか。 仕事に限らず、料理はもちろん、サウナのルーティンも1つの手順です。 そんな手順をいい感じに共有できないかと思い、本サービスを作りました。 以下、詳細について説明していきます。 デザイン Figmaを使ってデザインを作っていきました。 コードをいきなり書き始めてもよいのですが、最終形を決めてから進めていきたいと思い、作りました。 技術選定 言語: TypeScript フロントエンド: Next.js バックエンド: Next.jsのAPI Routes インフラ: Cloud Run DB
機能改善だけでなく、非推奨になった機能も多いですね。 2015年〜 ES2015の正式リリース前 2015年6月まではES2015が正式リリースされていなかったため、Reactのコンポーネントの作成にはReact.createClassが使われていました。 React独自のクラスコンポーネントを生成する機能です。 var Component = React.createClass({ render: function() { return ReactDOM.tagName({options, "Hello"}) } }); React.renderComponent( Component(null), document.getElementById("root") ) 2016年〜 クラスコンポーネントの時代 Reactバージョン15.0.0からはReact.createClassはほとん
Next.js + Electron を使えばめちゃくちゃ簡単にデスクトップアプリを作れるという記事です。 デスクトップアプリケーションをWeb技術で作成するElectronを、むちゃくちゃ久々にやってみたら、とても簡単になっていた React のフレームワークである Next.js もバージョン9.xになってから劇的に良くなり続けていて、どんどん触りやすくなっています ちなみに Next.js は非公式な日本語翻訳が進んでいるようです。 9割くらい翻訳が完了しているようですが、気になる方は、このサイトの「翻訳プロジェクトについて」をご覧ください。 セットアップする # npmの場合 $ npx create-next-app --example with-electron-typescript hoge $ cd hoge $ npm run build $ npm run start
ゆめみのフロントエンドコーディング試験の題材で React の勉強をしました - Mitsuyuki.Shiiba
ちょっと前にツイッターで見かけた、ゆめみのフロントエンドコーディング試験 フロントエンドコーディング試験 「RESAS API を使用して、都道府県別の総人口推移グラフを表示するSPAを作る」っていうお題 React の勉強をするのにちょうどいい題材だなぁって思ったのでやってみた。課題を公開してるってことは「やってみてもいいよ」ってことかなと思ってるんだけど、もし違ったら GitHub のリポジトリーを private にするので連絡ください 1週間でやらないといけないところを2ヶ月近くやってるし、コミットログも特に何も考えずにポイポイ書いたから、全然だめなんだけど、でも、色々勉強になったので、とてもよかった。楽しかったー！ つくったもの こんな感じ これでおわりにするー pic.twitter.com/K8zhrRUp54— Mitsuyuki Shiiba (@bufferings)
Copilot をオープンベータ直後から長く使っていて、また補助的に ChatGPT も使いながらコードを書いていて、なんとなくコツがわかるようになってきた。 自分は生成モデルのことは表面的な理解しかしてない。雑にバックプロパゲーションの実装の写経したり、Transformer の解説とかは読んだが、にわかの域を出ていない。 あくまで利用者として生成モデルから吸い出したプラクティスになる。 基本的に TypeScript と Rust での経験が元になっているが、他の言語にも適用できる話ではあると思う。自分は TypeScript はかなり得意だが、 Rust はあんまり書けるわけではなく、Rust の学習で ChatGPT を頼ろうとして失敗しているというステージ。 Copilot / ChatGPT とどう付き合うか まず、前提として ChatGPT も Copilot も、コード生成
データ取得で try...catch しない理由
try { const data = await fetchSomething(); // 正常系レスポンスの処理 } catch (err) { if (isAxiosError(err)) { // 異常系レスポンスの処理 } } 動機はつぎの 3 つです。 データ取得も宣言的に書きたいから データ取得に関係ない例外も catch してしまうから HttpError の集計に不便だから データ取得も宣言的に書きたいから 要約すると、データ取得時は常にこのように書きたい、という話です。useSWR・useQuery や apollo/client でお馴染みのインターフェイスです。 const { data, err, status } = await fetchSomething(); if (data) // 正常系レスポンスの処理 if (err) // 異常系レスポンスの処理
こちらの記事は、2019年7月に公開された Indrek Lasn 氏による『 2020 and Beyond Programming Trend Predictions 』の和訳になります。 本記事は著者の許可を得て掲載しています。 Thank you for letting us share your knowledge! 著者に何かメッセージがある方は Twitter までご連絡ください。 また本記事は転載であり、本記事はこちらになります。 はじめに 2020年は、もうすぐそこです。 2020年はSFの世界のように聞こえますが、そろそろ新しい世界のドアをノックする時期になっています。 すぐそこまで来ている未来のプログラミングの世界に興味をお持ちの方は、この文章をこのまま読み続けて下さい。 これから述べることは、間違っているかもしれませんが、私が将来起こると考えていることです。 未来を
SIerの輪廻から解脱するための技術｜はまあ
モチベーション最近「SIer界の輪廻からどうやって解脱したらいいですか？」 という話をちょくちょく耳にすることが増えた。 それに対する"解答"というわけではないのだけど、輪廻からの解脱を目指すにあたり、どんな要素技術を学ぶべきかについてはある程度指針を示せると思ったので今回は、選ぶべき技術と、その理由について解説していきます。 SIer界で輪廻転生を繰り返したい人はジャバ言語のラムダ式を禁止にすべきか議論するほうが大事だと思うので、こんな記事にクソリプする前にさっさと帰って、どうぞ。 TypeScript解脱への第一歩は、なにはともあれTypeScriptだろう。 正直、この言語だけ覚えておけば、FaaS(Lambda, Cloud Functions)も書けるし、ReactによるSPAとか、なんならReact Nativeでアプリも書けるし、モダンな開発環境に必要なスキルセットがすべてま
Typescriptの次はRustかもしれない
Introduction Rustを学び始めたのは多分今年の3月くらい。 なぜ急にRustに興味を持ったのかは後述しますが、半年ほどRustをいじくりまわしてみて、まだまだ学び途中でもRustの素晴らしさを語らずにはいられず、記事を書くことにしました。 Rustは「Cの正当な後継」なんてよく言われますが、WebエンジニアからみてもRustは本当に素晴らしいってことが少しでも伝わればいいなと思います。 RustとTypescript 「なぜRustとTypescript？」って思う方は多いと思うので、順に話していきたいと思います。 2020年のフロントエンドの流行 まず2020年今日時点のフロントエンドについて雑に書くと React・Vueが主流 Typescriptがデファクト、babelなどでトランスパイルは言わずもがな サーバーサイドもNodeで書くならTypescript Jest、
今やTypeScriptはウェブアプリ開発時に最初に検討される言語となっているが、開発が始まった2010年頃は、まだオープンソースに恐れを抱いていたMicrosoft文化のなかで、ゆっくりと歩を進めていく必要があった。 TypeScriptの共同創案者であり、デンマークのソフトウェアエンジニアであるとともにMicrosoftのテクニカルフェローも務めているAnders Hejlsberg氏は米ZDNetに対して、Steve Ballmer氏が同社の最高経営責任者（CEO）だった2010年に、JavaScript開発者の心をつかむ唯一の道はオープンソース戦略だという決断をチームが下した際のことを語ってくれた。 Ballmer氏は2001年に、LinuxがMicrosoftの知的財産すべてを脅かす「ガン」だと発言しており、Microsoftの幹部らは2010年時点でも、オープンソースが依然とし
iOS NativeからReact Native に乗り換えた Shopify の話聞いてきた - tomoima525's blog
"最も使われているサービスのひとつを iOS Native から React Native に作り変えた" というアナウンスメントを出し話題となった Shopify で、まさにその内容を扱った React Native の meetup があり、参加してきたので内容と所感をまとめました。 React Native is the Future of Mobile at Shopify 発表内容 検証/導入フェーズ 技術スタック React Native がもたらした効果 途中でやめたこと 追加で登壇者に聞いたこと その他の発表 React Native for Web @twitter その他もろもろ React Native is the Future of Mobile at Shopify React Native で書き換えた話はしばらく前にアナウンスしていたのですが、Shopify
JavaScript で頻出する undefined と null について語ります。 言語仕様上の違い JavaScript (ECMAScript) において、仕様上 undefined と null は当然ながら明確に区別されています。いくつか言語仕様上の扱いについて挙げてみます。 比較 厳密な比較演算子 === において undefined と null は区別されます。ゆるい比較演算子 == においては両者は区別されません（仕様 7.2.14）。 console.log(undefined === null); // false console.log(undefined == null); // true 他の falsy な値（false とみなされる値）との比較は、ゆるい比較演算子であっても区別されます（仕様 同上）。 console.log(undefined == fa
Zennを支える技術とサービス構成
Zennという技術情報共有サービスを作りました。有益な知見をシェアした開発者が、その見返りを得られるようなサービスにしたいと思います。気合いを入れつつも、時間をたっぷりかけて地道に育てていきます。 このページでは、Zennを支えている技術やサービスを紹介します。 フロントエンド Next.js フロントエンドにはNext.js（React）を使っています。開発当初はNuxt.jsを使っていたのですが、TypeScriptとの相性を考えてNext.jsへ移行しました。 技術情報共有サービスなので、主要な流入元はいずれ検索エンジンに落ち着くと予想しています。そのため、検索エンジンにインデックスしてもらいたいページはサーバーサイドレンダリング（SSR）しています。 動的コンテンツもキャッシュ Next.js 9.4からIncremental Static Regenerationという最高の機能
ここのところ雑にWebサービスをリリースする機会が減って最近はFlutterでネイティブアプリばかり書いてるのでWebの最新に追いつけてない。 最近の流行りのWebサービス開発について自分の必要そうな範囲でちょっと調べてみる。 自分の場合、フロントエンドはTypeScript+(Vue or Nuxt)でやって、サーバーサイドはRailsで書いちゃうことがまだ多い。 これでもなんとかなるけど、もうどうせならJSで一気通貫でフロントエンドとサーバーサイドを書ければ楽なのにと思いつつある。 パッと思いつくのはTypeScriptでフロントエンドをNext,Nuxtあたりでやって、バックエンドAPIをexpressとかサーバーレスAPIを適当に書くとかだけど、今だともっと良い方法ありそう。 本当はDartでサーバーサイド、FlutterでwebまでいければDart統一時代になって願ったり叶ったり
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5年かけて作ったウェブアプリを Hacker News に投稿し、最初の1ドルを得た話
プログラミング言語へのMicrosoftの影響力がヤバい - きしだのHatena
Deno のめっちゃ難しいバグを修正した - Qiita
Reactの環境構築 — 仕事ですぐに使えるTypeScript ドキュメント
JavaScript ベスト・オブ・ザ・イヤー 2020 - Qiita
2020年に立ち上げたWebフロントエンド構成の振り返り
Excel操作をJavaScriptで記録 ～Microsoft、“Office Scripts”をパブリックプレビュー／「OneDrive for Business」で共有も可能。企業向けの“Office 365”へ順次展開
関数型プログラミングと型システムのメンタルモデル
webアプリ開発における環境変数まわりのベストプラクティス
プロを目指す人のためのTypeScript 本の感想 #ブルーベリー本
6歳娘「パパ、型による条件分岐はできないの？」 - Qiita
バックエンドエンジニアが Next.js でモダンなフロントエンド開発を始めるにあたり学習したこと
TypeScript + React: Component patterns
TypeScript * GraphQLのバックエンド設計プラクティス
なぜ default export を使うべきではないのか？
ESLint と Prettier の共存設定とその根拠について
ESLint, Prettier, VS Code, npm scripts の設定: 2021春
【入門】フロントエンドのテスト手法まとめ - Qiita
TypeScript誕生の背景 | TypeScript入門『サバイバルTypeScript』
TypeScript教育用コンテンツ公開のお知らせ | フューチャー技術ブログ
React今昔物語 - ICS MEDIA
Next.js + Electron がとても簡単になっていた
AI 時代のコードの書き方, あるいは Copilot に優しくするプロンプターになる方法
2020年以降のプログラミング技術のトレンド予想 - Qiita
マイクロソフト発のオープンソース言語「TypeScript」、生みの親が語る開発当初や背景
JavaScript の undefined と null を完全に理解する
最近のモダンなWebサービス開発の構成について調べるメモ