※ この記事は2021年6月21日に行われた「進化するフロントエンド2021 − 4プロダクトから学ぶSPA/PWAの技術と実践−」の登壇を文字起こししたものになります noteのフロントエンドの歴史 ではまず自己紹介をさせていただきます。フロントエンドエンジニアの山形と申します。よろしくお願いします。 去年の3月に入社したので、noteには1年3ヶ月くらいいます。趣味でコーヒーの焙煎とかやっています。 今回はnoteが抱えているフロントエンドの課題をどう解決していったのかを話していきたいと思います。 最初にnoteが今までどうやって実装されていたのか、その歴史を説明していきます。 初期のnoteはRuby on Railsのアセット上に構築されたSPAサイトで、フロントはAngularJSとCoffeeScriptで書かれていました。 この構成はかなりの問題を含んでいました。 1つ目はS
You can count on this guide to always be recent. We update it after every major change in React. It was last updated after the 17.0 release. Before you begin, please note that this is a beginner-friendly guide that covers the concepts I classify as fundamentals for working with React. It is not a complete guide to React but rather a complete introduction. At the end of this guide, I list a few nex
ほんの数行でも、自分のコードが世界を変えられる！ Webサービスに魅せられた20代で技術的に諦めなかったこと - Findy Engineer Lab - ファインディエンジニアラボ
エンジニア組織をそれほどアピールしていなかったプレスリリース配信サービスのPR TIMESで、2021年4月に開発者ブログが立ち上がりました。同月にCTOに就任した金子達哉（@catatsuy）さんによる改善の決意により始まったブログは、現在まで順調に多くのエンジニアによって更新されています。 金子さんは、ピクシブやメルカリといったWebのサービスでインフラからアプリケーション開発まで担当し、サービスの常時HTTPS化といったプロジェクトも手掛け、キャリア8年の若さで執行役員CTOに就任しています。セミナーやブログでのアウトプット、ISUCONの成果や出題といった活動でも知られる金子さんに、どのようなマインドセットでエンジニアとしての20代を歩んできたのかを聞きました。 スペシャリストでもマネジメントでもないCTOの仕事 分からないモヤモヤを解消するためインフラを経験する 自分が書いたコー
この記事は？ ReactのSSRの理解を深めるために自前で実装してみました。 せっかくなのでその記録を記事にまとめました。 ※ App Router以前のPage Routerの内容です。 ReactRouterを使って複数ページのSSRをしている新しい日本語記事がなかったというのも記事化の理由の一つです。 この記事のソースコードはこちらです。 技術スタック フロントエンド React.js (v17) React-Router (v6) TypeScript Webpack バックエンド Express 作ったもの 初回リクエスト時 サーバーサイドレンダリング(SSR)してたHTMLをクライアントに返却。 サーバーから受け取ったHTMLにクライアントサイドでイベントリスナーを設定(hydrate) ページ遷移時 新しいページで必要な情報をクライアント側からWEB APIを叩いて取得。 ク
こんにちは。倉内です。 WebサイトやWebサービスの開発に欠かせないJavaScriptは、人気も高く習得したいと考えている方も多いのではないでしょうか。エンジニアへの就職活動をしている学生や、未経験からエンジニアになろうという方にとっても、JavaScriptは習得しておきたい言語の1つです。 動的なWebページの作成といったフロントエンドで用いられるのはもちろん、Node.jsに代表されるようにサーバサイドプログラミングでも存在感を増しています。また、jQueryやReact、Vue.jsなどフレームワークも豊富です。 初めて学ぶプログラミング言語としてJavaScriptを選ぶ方も多いと思いますので、今回は基本・基礎を学びたい初心者の方へ向けたコンテンツから、しっかり学びを深めたい中上級者向けのものまで、JavaScriptを学びたいすべての方へ向けて、学習コンテンツと書籍をご紹介
【感想】『りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版』【Ⅲ. React応用編】： #りあクト でよりディープにReact入門 - Rのつく財団入り口
りあクト！ 技術同人誌のりあクト！、【Ⅲ. React応用編】の読書記録と感想です。 りあクト！ 【Ⅲ. React応用編】 第10章 React におけるルーティング 第11章 Redux でグローバルな状態を扱う 第12章 React は非同期処理とどう戦ってきたか 第13章 Suspense でデータ取得の宣言的 UI を実現する まとめ：IIIでさらにディープにReactの神髄に触れられる本 関係書籍など oukayuka.booth.pm 【Ⅲ. React応用編】 大変革であるReact Hooks登場を受けて第3部では副作用処理をテーマとし、公式でもこれからリリースでまだ実験的な機能のSuspenseを扱った応用編の話となっています。 りあクト！【Ⅲ. React応用編】 第10章 React におけるルーティング 10-1. SPA におけるルーティングとは サーバーサイド
NestJS を使って最速リリースを目指している話 - ROBOT PAYMENT TECH-BLOG
こんにちは。ROBOT PAYMENTでエンジニアをやっております 牧野です。 今回は新規プロダクトの立ち上げに伴い開発言語からインフラ設計まで0→1でサービスリリースするのに必要な技術選定を行いました。 その際の選定理由や、実際に開発を進めていて得た所感などを書いてみたいと思います。 私は主にバックエンド（フロントエンド以外）を中心に技術選定を行っためそちらを中心に書かせていただきます。 チーム規模 選定技術 TypeScript NestJS GraphQL PostgreSQL AWS App Runner まとめ チーム規模 バックエンドエンジニア2人 フロントエンドエンジニア1人 PM 1人 デザイナー1人 上記を１チームとして最短距離でリリースすべくスクラム開発を行なっています。 既存の請求管理ロボ開発においては、厳密ではないですがコンテナ運用や監視ツール、CICDなど機能開発
Web アプリケーション開発において TypeScript で型付けをして、 React, Vue, Angular などのフレームワークでビューを作り、 Webpack でバンドルする、という構成が当たり前のようになってから久しいですね。 フロントエンドアプリケーションの設計は洗練され、我々はまあまあ安全かつ開発しやすい環境でアプリケーションを作れるようになりました。 ところでみなさんはその開発環境の構築にどれだけのコストをかけていますか？ 新規プロダクトを作るたびに最適な Webpack の設定ファイルを作るために苦心して、気づけばその肉体にゴリゴリのウェブパッ筋を宿していませんか？ 賢い人はスターターボイラープレート的なものを自分で用意しているかもしれません。 だけどそれも頻繁な依存ライブラリのアップデートに合わせるために常にメンテナンスが必要となります。カビの生えないボイラープレー
GitHub - supertokens/supertokens-core: Open source alternative to Auth0 / Firebase Auth / AWS Cognito
Add secure login and session management to your apps. SDKs available for popular languages and front-end frameworks e.g. Node.js, Go, Python, React.js, React Native, Vanilla JS, etc. Supertokens architecture is optimized to add secure authentication for your users without compromising on user and developer experience Three building blocks of SuperTokens architecture Frontend SDK: Manages session t
こんにちは！ 株式会社ココナラの法律相談事業部でWebエンジニアをしている 原井 です。 ココナラ法律相談 と ココナラエージェント という2つのプロダクトのWebフロントエンド・バックエンド開発を担当しています。 この記事は、フロントエンド開発に使うUIコンポーネントライブラリの技術選定をするシーンでのお話です。 私たちが何を課題に感じていたのか、どう考えて Radix UI と Stitches の採用に至ったのか、採用してみてどうだったのかをご紹介します。 UIコンポーネントを開発していて思うこと 世の中にはUIコンポーネント集とでも呼ぶべき便利なライブラリがたくさん公開されています。 例えば以下のようなものがあり、他にも把握しきれないほどあると思います。 MUI (Material UI) Ant Design Chakra UI Vuetify これらのUIコンポーネントライブラ
さまざまなヤフーの独自技術や業界の最先端テクノロジーに触れ、関西圏のクリエイターの成長を目的とした「Mix Leap Study」。テーマは、「React とその仲間たち」です。 登壇するのは、OptinMailPFを運用・開発するエンジニアの西仲幸太氏。内容は、家計簿アプリをReact Nativeを駆使して作成したことについて。今回は、特にReduxとFirebaseについて詳しく説明しました。関連資料はこちら。 家計簿アプリ制作の理由 西仲幸太氏：僕からは『React Nativeで家計簿アプリを作って得たもの』について共有します。 まず自己紹介を。西仲幸太と言います。担当プロダクトはメール配信管理プラットフォームというバリバリのバックエンドです。好きな言語はJavaScriptで、今回の話にも出てくるReact.jsやNode.jsをTypeScriptで書くのにハマっています。
この記事は？ 著者はReactを軸に開発をおこなってきたが、仕事の関係でVueをやることになって「emit」周りの理解が難しく、調べてもなかなかわかりづらかったので改めて記事にすることにした。 対象読者 ・Vueのemitを使う理由がわからない人 ・Vue3•TSでのemitを使い方を知りたい人 Vueの基礎(復習) この記事では以下のようなことがわかることは前提にしています。 ・ref/reactive 値が監視され、変更が検知される状態のことをリアクティブといい、refはプリミティブな値をリアクティブにし、reactiveはObjectの値をリアクティブした変数を作る。 ・props Vueでは親から個コンポーネントにpropsを経由して情報を渡す。 ・v-model Vueではデータの変更とViewが同期する双方向バインディングを提供しており、v-modelを使って変数と入力フォーム
![[Vue3/TypeScript対応] emitで理解するVue.jsの本質](https://cdn-ak-scissors.b.st-hatena.com/image/square/89b6e3406eace09e0fe7d97ed190f9b1b96becc3/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--8Bl-onYk--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BVue3%25252FTypeScript%2525E5%2525AF%2525BE%2525E5%2525BF%25259C%25255D%252520emit%2525E3%252581%2525A7%2525E7%252590%252586%2525E8%2525A7%2525A3%2525E3%252581%252599%2525E3%252582%25258BVue.js%2525E3%252581%2525AE%2525E6%25259C%2525AC%2525E8%2525B3%2525AA%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Ario_dev%252Cx_203%252Cy_98%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2MxNWNjNmU2MjcuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_72%2Fog-base.png)
話題の「Recoil」を使ってTodoアプリ作ってみた with TypeScript - Qiita
はじめに Facebook公式から新しいステート管理のためのライブラリが公開されました。 その名もRecoilです。 特徴としては ミニマム Hooksではお馴染みのuseStateと同じようなAPI パフォーマンス問題が解決できる(Viewの再レンダリングを抑える) が挙げられるかと思います。 早速Todoアプリを作ってみましょう。 環境構築 $ npx create-react-app todo-recoil --typescript $ cd todo-recoil $ yarn add recoil 型定義しておく 意気揚々とTSで始めようとしましたが、型定義ファイルは2020/05/15 10時現在は無いようです。 ですが、TS supportがIssueで上がっていて、既に予定しているようです。 有志が型定義ファイルを作ってくださったみたいなので、今回はとりあえずそれを利用させ
はじめに こんにちは。Magic Momentでエンジニアをしている伊藤です。 いつもはMagic MomentのプロダクトであるMagic Moment Playbookの開発に携わっています。 元々はGo言語エンジニアとしてMagic Moment Playbookのバックエンド開発に参加し始めました。 ですが、今回フロントエンドエンジニアとしてフロント側の開発に参加することとなりました。 Go言語を使っていたエンジニアがReactを使い始めて驚いたこと、理解しづらかった部分などを書いていこうと思います。 これからフロントをやってみたいと思うバックエンドエンジニアの方の参考になれば幸いです。 そもそもReact.jsとは Magic Moment PlaybookのフロントエンドはReact.jsを使って構築されていますが、そもそもReactとはなんなのでしょうか。 ReactはFac
Follow on FacebookThis is a comprehensive tutorial on Monorepos in JavaScript/TypeScript --- which is using state of the art tools for these kind of architectures in frontend applications. You will learn about the following topics from this tutorial: What is a monorepo?How to structure a monorepo architecture?How to create a monorepo?Which tools to use for a monorepo?How to perform versioning in a
技術力を底上げする、Sansanの社内勉強会補助制度 - Sansan Tech Blog
Sansan事業部プロダクト開発部の基盤チームに所属する佐藤です。Sansanでは社員が自発的に開催する社内勉強会で会社からの支援を受けることができ、月に50種類以上の勉強会が開催されています*1。各勉強会は単発のものもありますが、週に1回、1～2ヶ月継続して開催されているものが多く、中には1年半以上続いている勉強会もあります。 今回は、社内勉強会を支える制度「Geek Seek Workshop」について紹介しつつ、社内で行われている勉強会から分野や目的の異なるものをピックアップして紹介し、Sansan社内の勉強会の雰囲気や参加によるメリットを参加者の立場から多面的に伝えたいと思います。人事制度に携わる人間ではありませんが、制度を用いた社内の技術力向上のアイデアの種になれれば嬉しいです。 Geek Seek Workshop 1人あたり1000円の補助が出る 申請のハードルが低いから開催
サイバーエージェントメディア事業部のメンバーが、Flutter・Kotlin Multiplatform を中心に、開発の中でのTipsを紹介する「Flutter × Kotlin Multiplatform by CyberAgent #1」。ここで伊藤氏が『読解Flutter Hooks』をテーマに登壇。Hooksの動きについて紹介します。 Hooksの動きを理解する Kyohei Ito氏：「読解Flutter Hooks」というタイトルで、発表します。簡単に自己紹介です。伊藤恭平と言います。GitHubやTwitterでは、KyoheiG3という名前で活動しています。主にiOSのアプリの開発をやっていますが、だいたい4、5ヶ月くらい前からFlutterをやり始めました。 今日の内容ですが、Hooksの使い方などはやらずに、Hooksの動きを理解するところを目標にしようかと思っていま
チャート描画ライブラリ『Plotly』をPythonで試す：インストール＆環境設定編 | DevelopersIO
データアナリティクス事業本部 サービスソリューション部 サービス開発部のしんやです。 ここまで色々な可視化におけるツールやサービスを個人的に触ってきましたが、何らかの言語でサクッとデータを可視化出来るライブラリとかないものかなーと思っていたところ、『Plotly』というプロダクトの存在を知りました。ザッと内容を確認してみたところとっつき易さと表現の幅の広さが良い感じっぽいぞ！ということで個人的にこのプロダクトを触っていってみようと思います。 ? Announcing Plotly.js 2.0! - Graphing Library / Plotly.js - Plotly Community Forum Webブラウザ上でグラフを描画できる「Plotly.js 2.0」がリリース：CodeZine（コードジン） 目次 Plotly 概要 Plotlyとは Dashとは 環境構築 導入環境
Snowpack vs. webpack: A build tool comparison - LogRocket Blog
LogRocket’s Galileo AI watches every session, surfacing impactful user struggle and key behavior patterns. Editor’s note: This post was updated on 14 March 2022 to include information relevant to Snowpack v3 and webpack v5. Few tools have been as central and important to the JavaScript ecosystem as webpack. Launched in 2012, the JavaScript module bundler has been a cornerstone of modern JavaScript
ブログを作りながら学ぶ、Next.jsの便利な5つのコンポーネント（Link、Image、Head、Script、レイアウト）
この連載では、現在注目のWebホスティングサービス「Vercel」をご紹介します。本記事から2回にわたって、「Next.js」の便利な9つの機能をご紹介します。今回は、「Linkコンポーネント」「Imageコンポーネント」「Headコンポーネント」「Scriptコンポーネント」「レイアウトコンポーネント」の5つのコンポーネントを紹介します。 はじめに 前回はNext.jsアプリケーションをVercelにデプロイする方法や、一緒に活用する利点などを紹介しました。今回から2回にわたって、Next.jsの便利な機能を紹介しながら、簡単なブログを表示するアプリを作成していきます。 この記事は既になんらかのプログラミング言語やWebフレームワークを学習した経験がある人向けに書いています。サンプルコードを提供しますので、サンプルコードを実際に動かしていただくことでより理解が深まると考えています。 自身
Announcing Sandpack 2.0 and a Node.js runtime for any browser - CodeSandbox
Today, we are announcing Sandpack 2.0, which introduces Nodebox—a fast Node.js runtime that allows you to run server-side code in any browser. One year ago, we introduced Sandpack, an open-source in-browser bundler that allows you to run live running code examples on your website. We couldn’t have made a better decision. We knew how powerful Sandpack is (it's the bundler that powers CodeSandbox it
【2024年版】JavaScriptのおすすめライブラリ＆フレームワーク40選 JavaScriptのライブラリやフレームワークを使うことで、幅広い特徴と機能により、ウェブサイトやアプリケーションの開発が容易になります。これを可能にしているのが、JavaScriptの動的で柔軟であるという特性でしょう。2020年に実施されたStackOverflowの調査によると、JavaScriptは回答者の67.7%が使用しており、最もよく使われているプログラミング言語として記録を更新（8年目）しています。 その汎用性の高さから、バックエンドとフロントエンド両方の開発やテストに利用できます。その結果、さまざまな目的に対応する数多くのJavaScriptライブラリやフレームワークを見つけることができます。それゆえに、プロジェクトでどれを利用すべきかと迷ってしまうこともあるでしょう。 しかし、心配はご無用
この記事でできるもの デモ https://react-pokemon-app-c3d8a.firebaseapp.com/ ※画像は非表示にしています ソースコード https://github.com/hato-taka/pokemon-app はじめに この記事の目的は React開発の楽しさを伝えることです！ 詳しい内部のロジックには触れていません。 楽しく学んでもらうために、PokeAPIというポケモンデータを集めたAPIを使用します。 https://pokeapi.co/ この記事を作成するにあたり下記２つの動画を参照しました。 【Reactアプリ開発】3種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座 Build Pokemon App Using React Js |Pokemon Api |2022 記事の対象者 Reactの
Yash Tiwari for Coursesity Posted on Jun 13, 2021 • Updated on Mar 23, 2023 React is a JavaScript library that lets you create a prime UI for both mobile and web applications. It integrates seamlessly with other JavaScript frameworks and libraries and includes small, reusable pieces of code, called components. Due to their high modularity, React component libraries not only optimize UI development
React with Typescript
At present react js has been a very popular library to build beautiful and scalable user interfaces. Today I would like to build a demo react project with typescript. Project setup We would like to use the create-react-app environment built by facebook developer team to create our project. Our project will have a form to add favorite tv series and show the list. It will be a single page website. A
最も月単価の高いプログラミング言語は何か。IT人材の紹介事業を行うレバテック（東京都渋谷区）が2月13日に発表したランキングによると、1位は「Go」（平均月単価88万円／最高単価130万円）だった。2位には「Ruby」（平均月単価87万円／最高単価150万円）、3位には「Swift」（平均月単価86万円／最高単価200万円）が入った。 Goは米Googleが開発したプログラミング言語。レバテックは「動作が軽く、扱えるデータ量も多いためブロックチェーンや広告、ゲームなどスピードが求められる分野のサービス開発でよく使われている」と解説。スピーディーな開発を行いたい企業を中心に導入が進み、今後も需要は伸びていくのではないかと予想している。 2位のRubyは、短期間で開発ができるため、スタートアップ企業などのWebサービスを迅速に立ち上げたい企業でよく使われているという。案件数は安定して多いが、R
コードと向き合い組織と向き合い自分と向き合うこと (あるいはノハナからLayerXへ転職のご報告)｜Yuki Takeichi
インターネットにあこがれた何も知らない若者が東京に出てきてWebベンチャーに飛び込みもがきながら仕事をして経験したこと。思わぬ形でCTOになり、手探りでプロダクトと向き合い、ソフトウェアアーキテクチャと向き合い、組織と向き合い、人と向き合い、最後は自分と向き合う必要があることに気がついた。そして今は社会の大きな変化を感じ、今チャレンジしたい領域に思い切って飛び込んだ。 tl;dr こんにちは。エンジニアの武市融紀と申します。これまで株式会社ノハナでCTOをしておりましたが、この度1月末付で退職し3月1日にLayerXに入社しました。今日はこの場をお借りして少しだけ僕のこれまでのキャリアと今考えていることについて書こうと思います。 Webアプリケーションとインターネットに熱中した学生時代キャリアの始まりは、小4のとき家にISDN回線が引かれたことでした。HTMLとJavaScriptの本を買
はじめに VSCodeでのコーディング時にスニペットを使っている方はどれくらい居るのでしょうか。恐らくほとんどはプリセットに備わっているものか、適当な拡張機能をインストールしていると思われます。 自作する機能もありますが、少し前までは必要性を感じていませんでした。 できるだけ共通の環境に慣れておきたい 多数派に合わせておきたい タイピングとコーディングの能力があれば、少し構文が長くても苦痛ではない しかし、定型的に書くコードが決まっても手間が変わらないことに面倒臭さを感じていました。 そこで考えを改めてスニペットを作り込んしたら作業効率が飛躍的に上がりました。 なぜスニペットを自作した方がいいのか これ以降はJavaScript, TypeScript, React.jsの前提とします。 他言語の場合は当てはまらない可能性があります。 1. 拡張機能は網羅されていない かなりダウンロードさ
「Offersエージェント」では、業界で活躍するプロフェッショナルがあなたの転職を徹底サポート。CxO経験者を含む現役エンジニア・デザイナー・プロダクトマネージャーが在籍し、職種に特化した専門的なアドバイスをご提供・非公開求人の紹介も可能です。 →【かんたん30秒】無料登録で転職相談する ▲イベント登壇時の写真 これまで本業の傍ら、フロントエンドの副業を複数受けてきました。今回はその経験から得られたものや、これから副業を検討される方に向けての注意点を紹介します。 まず私が副業を始めた理由は2つ。家賃を副業の収入でまかなえるようにすることと、本業では経験できないことに挑戦してスキルアップを図りたいと思ってのことでした。 副業を始めようと思った当時、私はクライアントワークをメインとしているWeb制作会社に所属していました。クライアントワーク自体は楽しかったのですが、納品して終わりという業務を
UIT meetup vol.7 で発表した内容です！ https://uit.connpass.com/event/138084/ ↓の記事の内容が大筋になっています！ Webでどこまで遊べるか試してみた https://qiita.com/Leonardo-mbc/items/3c365836acfd71a55185 React ライフサイクルの demo https://youtu.be/VXeuXkEJ76U requestAnimationFrame の demo https://youtu.be/40NbLRaTT6M
ヘッドレスCMSの全体観を掴む | ヘッドレスCMSの本質
コンテンツ管理システムの歴史 なぜ、このような新しい性質を持つコンテンツ管理システム（CMS）が求められるようになったのでしょうか。その理由を知るためには、CMSの歴史と時代背景について知ることが一番の近道になります。 1990年代中頃: CMSの誕生 1990年にWorld Wide Webが登場してから、しばらくの間、WebサイトはHTMLの手動編集によってのみ管理されていました。しかし、次第にWebサイトの規模や複雑性が増していき、手作業でのコンテンツ管理が困難になります。 そして、1990年代中頃、HTMLの手動編集によるWebサイト運営の非効率を解消するためのソリューションとして、最初のCMSが登場します。この時、多くの企業が自作のカスタムCMSを作り、いくつかのエンタープライズ向けCMSも登場しました。 2000年代初頭: オープソース化による急速な普及 2000年代前半になる
プログラミングを学ぶにあたって詰まったことと、そこから学んだこと - 我が名はなんとか菜である！
mizchi.hatenablog.com みんなも何に詰まったか、書いてみてください わかりました。 プログラミング歴 12歳 簡単にホームページを作れるみたいなサービスを使っていた僕は、なんかとりあえずサイトを賑やかにしたくて色々探していたら「ホームページの背景に雪を降らす」というやつがあり、そのときに出てきた JavaScript というものは一体なんぞや？というところから JavaScript というプログラミング言語を知った。で、プログラミング言語を使いこなすとゲームが作れると聞いて、ゲームばっかりやっていたクソガキの僕は、早速ブロック崩しの作り方を解説しているサイトを見ながら見様見真似で作った。完成はしなかった。（理由は後述） 挫折したあと、こんなものを見つけて、あ、これも JavaScript じゃん、ということで手を出してみたりもした。これは一応動いた。 nico.ms 中
HTMLの属性にディレクティブを指定してリアクティブな動作を実装できるJavaScriptフレームワーク・「Alpine.js」
Alpine.jsはHTMLの属性にディレクティブを指定してリアクティブな動作を実装できるJavaScriptフレームワークです vue.jsやreact.jsといったフレームワークのリアクティブ且つ宣言的な性質を低コストで提供してくれる、というもの 開発者はTailwind.cssのJS版のようなもの、と説明しています Alpine.jsでは13のディレクティブと、5のマジックプロパティと呼ばれるものを使う事が出来ます。Vue.jsとほぼ同じ機能を使える、という認識で良いと思います <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.10.1/dist/alpine.js" defer></script>↑ まずはスクリプトを読みこみます 試しに何か作ってみましょう <div x-data="{selected:null
BOXIL SaaSのフロントエンドをモノリポ構成 + Reactで仕切り直した話 - SMARTCAMP Engineer Blog
こんにちは!! スマートキャンプでエンジニアをしている吉永(@__GGEasy)です！ 自己紹介記事はこちら 前回の記事はこちら 私は現在、スマートキャンプの主力サービスであるBOXIL SaaSの開発にフロントエンド、バックエンド問わず携わっています。 今回は、弊社で新規サービスとしてリリースしたBOXIL SaaS質問箱(以下SaaS質問箱)にて、React.js(以下React)を私の主導で採用しました。 この記事では、フロントエンド整備に至った経緯や、今後のBOXIL SaaSにおけるフロントエンドの技術的な展望についてお話します。 BOXIL SaaSのフロントエンドで抱えていた課題感 さまざまな技術が同居している Vue + Atomic Designでの課題 構成変更の検討 どのようにフロントエンド構成を整備したのか SaaS質問箱のフロントエンド技術選定 React + T
iOSエンジニア歴も早5年目となりました。 その経験を活かして、iOSアプリのテスト自動化サービス「SmartQA」を作りました！ 今回の開発では、Firebaseが大活躍してくれました。 SmartQAをリリースする上で、AppiumやFirebaseの技術的な知見をここに残せたらと思います。 概要 SmartQA - E2Eテスト自動化をノーコードで ビルドをアップロードするだけで、ブラウザ上で簡単にテストの自動化ができます。 UIが変わってしまった場合でも、要素探索を自動で修復してくれます。 複数端末対応しているので、「iPhone SEやiPadだとクラッシュしてしまった」なんてことも検知できます。 現在はiOSアプリのみ対応しております。 私について 10歳の頃にアセンブリに出会ったのがきっかけで、プログラミングの世界にのめり込みました。 どんなプログラムも足し算・引き算・比較・
デザインチーム内でJavaScript勉強会を開催した話 - 弁護士ドットコム株式会社 Creators’ blog
こんにちは。弁護士ドットコム デザイン部の林（@taka_piya ）です。普段は弁護士向けの業務システムのデザインをしています。 10月から3月まで週1回、デザイン部内でJavaScript勉強会を開催しました。この記事ではその具体的な内容と成果、振り返り、頂いたフィードバックをご紹介します。ぜひ社内勉強会のネタに！ JavaScript勉強会をはじめたきっかけ （1）作るプロトタイプの幅が広がる （2）漏れのないUI設計ができるようになる 勉強会の内容 基礎編 基本を一歩ずつ学ぶ 身近なお題を取り入れた演習をやる 周辺知識にも触れる 応用編 （１）Vue.jsの基本を学ぶ （2）作りたいミニアプリを構想から実装まで一人で作る 成果発表会 みんなのミニアプリを紹介 どのような成果が生まれたか 改善点 想定した期間より長くなってしまった 途中からレベル差が生まれてしまった 双方向のコミュニ
April 25, 2022 Four Eras of JavaScript Frameworks April 25, 2022 I started coding primarily in JavaScript back in 2012. I had built a PHP app for a local business from the ground up, a basic CMS and website, and they decided that they wanted to rewrite it and add a bunch of features. The manager of the project wanted me to use .NET, partially because it’s what he knew, but also because he wanted i
今お世話になっているスタートアップの会社さんで、フロントエンドのVue2アプリケーションをマイクロフロントエンド化しました。 今後、Vue.jsを取り巻く環境が急激に変わった場合を想定し、React.jsもしくはVue3にアップデートしていくために、マイクロフロントエンドアーキテクチャを採用しました。 圧倒的な速度で進化していくフロントエンドのツールおよびライブラリ、これら全てにキャッチアップをして、技術的負債を取り除いていくためには、すでにマイクロフロントエンド以外の選択肢を除いてないと思います。 今回紹介するicestarkを実際に使ってみた上で、より多くの人にこのicestarkを知ってほしい！と思ったので、まとめてみました。 ハンズオン記事はこちら: 更新履歴 Whyマイクロフロントエンド 今回はVue2.XからVue3.xのアップデートを漸進的に行うための決断でしたが、そもそもな
JSer.info #488 - TypeScript 3.9がリリースされました。 Announcing TypeScript 3.9 | TypeScript Promise.allの型推論がされています。 また3.9 β時点では導入される予定だったawaitedは問題が見つかったため、3.9時点では導入されないことになりました。 その他にはビルドパフォーマンスの改善、Type Errorとなることを期待する// @ts-expect-errorコメントの追加などが行われています。 JSへとコード変換における非互換な変更として、クラスのGetter/Setterをenumerable: trueに変換するのではなく、enumerable: falseに変換する変更が含まれています。 これは、ECMAScriptの仕様で定義されているのと同じ挙動で、Babelも同様の挙動です。 Type
はじめに 昨日今日と JSConf JP 2019 に参加してきたので、聴講したセッションの内容を紹介します。 本記事は Recruit Engineers Advent Calendar 2019 1日目の記事です。 JSConf JP 2019 とは JSConf JP は世界的な JavaScript Conference である JSConf の日本開催です。昨年まで日本Node.jsアソシエーションがNode学園祭として開催していた大規模JavaScript イベントが、Node.js に限らず JavaScript に関する内容のお祭りとして変化を遂げ、今年からJSConf JP となった形です。今年は、2019年11月30日、12月1日の二日間で開催されました。リクルートテクノロジーズは、イベントのプラチナスポンサーの１つです。 以下、公式ページからの引用です。 jsconf
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js + SvelteによるnoteのフロントエンドApp分割｜note株式会社
React.js Tutorial: The Complete React Introduction
React.jsのSSRをTypeScriptで自前で実装してみた
【初心者〜中上級者向け】JavaScriptの学習サービスと書籍27選 - paiza times
Snowpack で実現する未来のフロントエンド開発 - Qiita
ヘッドレスUIコンポーネントでいこう -- Radix UI + Stitches がいい感じ
「React Native」「Expo」「Firestore」でアプリ開発を高速に バックエンドエンジニアが家計簿アプリを作ってみた
[Vue3/TypeScript対応] emitで理解するVue.jsの本質
GoエンジニアがReactにチャレンジして驚いた5つのこと
Monorepos in JavaScript & TypeScript
Flutter Hooksで開発を便利に iOSアプリエンジニアが語る活用術
【2024年版】JavaScriptのおすすめライブラリ＆フレームワーク40選
【初学者歓迎🔰】 Reactでつくるポケモン図鑑📖 - Qiita
React Libraries To Use In 2023: 17 Top Picks
月単価の高いプログラミング言語ランキング 2位は「Ruby」で87万円、1位は？ レバテック調べ
【React】爆速コーディングが捗る自作スニペットのすすめ
Vue.js を使った副業のリアル。スタートアップでの働き方と注意点 | Offers Magazine
React.js と動くもの、鳴るもの
【NoCode】5年目iOSエンジニアが、アプリのE2Eテスト自動化サービスを作った話 - Qiita
pzuraq | Four Eras of JavaScript Frameworks
マイクロフロントエンドフレームワークicestarkが最高すぎる件
2020-05-18のJS: TypeScript 3.9、Deno 1.0、Playwright 1.0
JSConf JP 2019 参加報告 - とろろこんぶろぐ