Nuxt.js + TypeScriptで新規プロジェクト作成 - OPTiM TECH BLOG
自己紹介 はじめまして、今年3月に中途入社しましたAI/IoTサービス開発部のIoTサービス開発ユニットの下村です。現在、OPTiM IoTでフロントエンド開発をしております。 今回は、そのOPTiM IoTで取り入れたNuxt.js + TypeScriptの新規プロジェクト作成についてご紹介致します。 目次 自己紹介 目次 はじめに 新規プロジェクトの作成 ディレクトリ構成を変更する store環境構築 コンポーネントからstoreを呼び出す まとめ はじめに OPTiM IoTプロダクトでは、Nuxt.js及びTypeScriptを初めて触るメンバーがほとんどでしたが、そんな中Nuxt.jsとTypeScriptで開発を進めるに至った経緯についてご説明します。 そもそもNuxt.jsとは、Vue.jsをベースとしたフレームワークです。 Nuxt.jsの特徴の一つとしてあげられる、ペー
「Angular」「React」「Vue」の3大フレームワークに集約 ICSの代表が教える「フロントエンド技術」のトレンド
「キャッチアップしておきたいウェブ制作の最前線」というテーマで、Vue.jsなどJavaScriptを駆使したユーザーインターフェイスの開発を主に担当してきた池田泰延氏が、Webのフロント周りの近年の技術的な動向を解説します。前半はフロントエンド技術のトレンドについて。 スピーカー自己紹介、『JavaScript コードレシピ集』を出版 池田泰延 氏（以下、池田）：みなさんよろしくお願いします。ICSの話として、私と鹿野の2名で発表します。HTMLとかCSSとかJavaScriptとか、フロントエンドまわりの最新を説明していきたいと思います。では始めていきましょう！ ます自己紹介します。ICSの池田と言います。株式会社ICSの代表をやっています。これはオフィスの写真でして、南麻布にあるのですが、こんなところで仕事をやっています。今はこの状況下なので、会社にはほとんど誰も行っていませんが、こ
ReactやAngular、VueなどでComponentのスタイリング時に抑えておきたいこと
なんとなく自分の中で言語化しておきたかったので、整理も兼ねて記載しておきます🙆🏻♂️ 普段仕事で様々なAngular、またはReactのコンポーネントを作ったりメンバーから出るPRを読む中で、コンポーネントのスタイルはどういうふうに当てるのが破綻しにくいんだろうと考えていました🤔 Angularは良くも悪くも一つのComponentが結構おっきくなりがちだったのでそこまで意識しなかったですが、Reactは何なら分割しないと気持ち悪いとすら思えるくらいにコンポーネントを分割しやすいです。 コンポーネントを分割することは各ファイルごとに把握すべき事柄が減るので基本的にはいいことだと思っていますが、スタイリングについては意識しないと破綻してしまうなーと思っています。 （もちろん、スタイリングに限らず意識しないと破滅するんだけど、今回はスタイルについての話です） スタイルの破綻っていうのは
WASMとRustはVue.js/React.jsを打倒するのか？ - JSへの侵略の歴史
はじめに 「Typescriptの次はRustかもしれない」という記事がバズってるのを見かけました。 なかなか面白くて、PAとしてのWASMとRustを比較している記事です。ちょうど最近「レガシーおじさん、SPAを始めてみた。そして限界を知る」でも書いた通り最近SPAに手を出してみたのですが、いろいろやろうとするとSSRのためのBackend for Frontend (BFF)等が必要になるとわかり「これJSでやる必要なくない？」とも感じていたのでちょうど良かったです。 こういうのを見るとRIAやGWTのように似たアプローチで廃れた技術や、登場が早すぎたMeteor、今も頑張ってるMSのBlazorなど色々頭をよぎります。といわけで歴史を俯瞰する意味でHTML + JavaScriptとそれ以外の技術のせめぎ合いの歴史やMSのBlazorやRustのyewなどWebassemblyを使う
レガシーおじさん、SPAを始めてみた。そして限界を知る
はじめに 最近、Webの記事を見てるとReactだVue.jsばかりが上がっていてJSPやERBの話をしてる人は誰もいません。jQueryの記事ももちろん見ない。 つまり、Webだけ見る限りではほとんどの人がSPAを使ってるように見えます。 私はWeb界隈には居るもののどちらかというとバックエンド寄り、もっというとそもそもWebとか関係ない領域を見る事が多いので、ちょっとキャッチアップを兼ねていくつかの個人プロダクトにVue.jsを採用してみました。 jQueryくらいで頭が止まってたので。サーバサイドもマイクロサービスでAPI化が進んでるのでフロントもそれに合った技術を選ばないとですしね。 というわけで、今回はその中で得た知見というか、従来型のサーバサイドでのWeb開発をしていた人の視点でVue.jsをキャッチアップする流れで書いていきたいと思います。 まあ最終的な結論は正直「これすごく
Webpackの入門書
Webpack入門書です。 ReactやVueでプロジェクトを立ち上げてしまえば、Webpackは設定済みのままプロジェクトが作成されますので、Webpackについては全く知らずに使っているという方も多いのではないでしょうか。 Webpackはちゃんと使うことでBundleサイズの削減、ひいてはパフォーマンスの向上が期待できます。 今回はそこまで踏み込んだ内容ではありませんが、Webpackについての最低限ここまで知っていればいいだろうという知識を集約しました。 Webpackの公式サイトは日本語に対応していないので、こちらに目を通していただければWebpackについての基本を抑えることができます。
サーバーサイドエンジニアがじっくり学ぶVue.jsチュートリアル【2. Introduction】 | DevelopersIO
こんにちは。DA事業本部の春田です。 普段の業務では全く扱わないフロントエンドの世界に飛び込んでみたいと思います。最近3系が登場しましたがまだ情報が少ないので、2系のチュートリアルを進めていきます。サンドウィッチマンでいう「ちょっと何言ってるかわからない」ポイントは、その都度調べていきます。英語版の公式ドキュメントがベースです。 今回はIntroduction編です。 Vue.js とは？ Vue.jsは、ユーザーインターフェース（UI）を構築するためのプログレッシブ・フレームワークです。 Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. このモノシリックなフレームワークが何を指しているかといえば、例えばAngular.jsです。モノシリ
Svelteとは？Reactの比較 / TypeScriptと Sassの導入方法｜sumi｜note
Svelteとは最近フロントエンドの技術で、ReactやVue.jsに変わって注目を集めているのが Svelte です。下記のような特徴があります。 ・仮想DOMがない ・ファイル拡張子.svelteになる ・svelteファイルに記述されたstyleはスコープ付きになる ・Store管理も内包している（ReduxやVuexのようにインストールしなくてよい） Svelteは何が良いのか？ Vue.js やReactと違って仮想DOMがありません。ビルド時に純粋なJavaScriptにコンパイルして表示します。つまりSvelteはコンパイラーです。 そもそも仮想DOMのメリットとして、アプリ全体を再レンダリングせず、変更箇所（実際のDOMと仮想DOMの差分）もしくは Contextでトリガーされたとき を検知して、局所的にレンダリングすることで高速化を図っています。 Svelteの公式ブログ
最新版TypeScript+webpack 5の環境構築まとめ(React, Three.jsのサンプル付き) - ICS MEDIA
TypeScriptはMicrosoftが開発するプログラミング言語です。JavaScriptのスーパーセットという位置づけで、静的型付けなど強力な言語機能を備えています。TypeScriptは高度なウェブアプリケーションの開発で使われることが多く、Google社内の標準言語として2017年に採用されるなど、注目が高まっています（参考記事『Google社内の標準言語としてTypeScriptが承認される － Publickey』）。 ▲TypeScriptの公式サイト TypeScriptはコンパイラによってJavaScriptのコードが得られますが、TypeScriptのコンパイラにはECMAScript Modules（ES Modules = importやexport文のこと）をまとめる機能が提供されていません。そのため、ES ModulesのJSファイルをまとめるモジュールバンド
マイクロサービスを作るのに、nuxt.jsが最高だった話 - Qiita
Vueでキャンペーンサイトを作った話を自社の記事で投稿してしまい、同じネタを使おうとしたら、二重投稿禁止というのを知らなくて、焦りました。 似たような投稿するのもあれなので、なんか違う話題も書きます。 nuxt.js+expressのvue-cliテンプレートを使って、api+SSRのシングルページアプリケーション構成のマイクロサービスを作っています。 ちっちゃいページ+ちっちゃいAPIを使うとすごくいい感じにマイクロサービスを作ることができました。その良さを今回は語ります。 重要なものが最初から簡単に用意できる webpackの設定は自分でローダーを設定すると柔軟に設定する代わりに割と手間が増えます。 特にVueでお決まりのアプリケーションを作りたいときに、下の要件は欲しいでしょう。 シングルファイルフォーマットでの開発(vue-loaderの設定) linterの実行 シングルページで
Firebase Hostingに静的サイトをデプロイする手順のメモ - Qiita
概要 この記事はFirebase Hostingを使用して静的サイトをデプロイする手順を確認したメモです。 記事の前半はシンプルなデモサイト(index.htmlファイル1つだけ)をデプロイする手順、後半はVue.jsアプリケーションのひな型をデプロイする手順になります。 Hostingを利用するにはFirebaseにプロジェクトを作成する必要がありますが、プロジェクトの作成手順は省略し作成済みの前提で進めます。 環境 Windows 10 Professional Node.js 6.11.5 Firabase CLI 3.18.4 参考 Firebase Hosting Hostingを利用するための事前準備 firebase-toolsのインストール プロジェクトの初期化やデプロイに使用するfirebase-toolsというコマンドラインツールをインストールします。
非エンジニアのためのJavaScriptフレームワークとの付き合い方
JavaScript 2018.10.15 komatsu どうも、フロントエンドエンジニアの小松です。 エンジニアブログなのに非エンジニア向けの記事になり恐縮ですが、最近社内で 『このプロジェクトはJSフレームワークを導入した方がいいの？』 『どのフレームワークがオススメなの？』 『そもそもどんなときに必要なの？』 的なやり取りをする機会が増えたので、エンジニア目線でそこらへんの認識を記事にしてみようかと思います。 あくまでエンジニアでない方々にわかりやすく伝えるために相当乱暴な表現をしてますが、 ギークでジェントルマンなエンジニアな方々はどうぞ見過ごしてやってください… まず「JavaScriptフレームワーク」ってなに 「JavaScriptフレームワーク」と聞いて真っ先に何を思い浮かべましたか？ 先に個人的見解になりますが、2018~2019年を生きる皆さんはReact/Vue/A
３大JavaScriptフレームワークを比較。Angular/React/Vueの特徴を徹底レビュー！ | モナカプレス
ReactがVirtualDOMという概念を生み出して以来、Webアプリやハイブリッドアプリの開発トレンドが一気に変わってきました。それまでのHTML/JavaScript/CSSをMVCによって分割する方法から、「関心の分離」と言う考え方に変わりつつあります。関心の分離とは Wikipediaによれば「プログラムを関心（何をしたいのか）毎に分離された構成要素で構築する」ことです。画面、コード、デザインという技術で分離させるのではなく、ログインする、商品を表示する、注文すると言った機能（関心）ごとにロジックを分離する考え方です。これは Web Components にも関連する考え方になります。 Angular/React/Vueはいずれもこの関心の分離に基づいて作られています。各機能をミニマムにまとめ、それらを組み合わせて一つのシステムを構築します。各機能がコンポーネント単位に集約される
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js を vue-cli を使ってシンプルにはじめてみる - Qiita