CSSからSass/SCSSへ変換！驚くべき5つの手順
※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。 (送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。) はじめに CSSとSass/SCSSに関する変換を理解し、実践することは、ウェブ開発の世界において非常に重要です。 この記事では、そんなCSSとSass/SCSSの基本から応用に至るまでの変換方法を、初心者から上級者まで理解できるように詳しく解説します。 実際のサンプルコードを交えながら、それぞれのコードがどのような働きをするのか、なぜそのような方法が採用されるのかについても深く掘り下げていきます。 このガイドを通じて、あなたのコーディングスキルはさらに向上し
Typescript環境で、ESLintとprettier入れてみた
なぜESLintとprettierを入れようと思ったか。 ・下記のtypescriptの本を読んでいた時に名前が出てきたのがきっかけ ・その後個人的に、Typescriptの勉強のため環境構築のやり方を調べていた際にも、色んなサイトで推奨されていて、ついでに入れてみようと思った ・自分の会社でもESLintとprettierはパッケージインストールされているがあまり使用したことはなかったので、余計に気になった ESLintとprettierとは？ ESlint JavaScriptのための静的検証ツール（コードを実行せずに解析を行うことができる） 構文エラーやコーディング規約を定義することができ、システム全体のコードの一貫性を維持することができる prettier 決めたルールに従い、ソースコードを適切に整形してくれるツール プロジェクトごとにルールを設定可能 実際に入れてみる バージョン
Configuration Languages | webpack
Webpack accepts configuration files written in multiple programming and data languages. The list of supported file extensions can be found in the node-interpret package. Using node-interpret, webpack can handle many different types of configuration files. TypeScriptTo write the webpack configuration in TypeScript, you would first install the necessary dependencies, i.e., TypeScript and the relevan
8年運用したJavaScriptでの開発を段階的にTypeScript移行していくためにやっていること | CyberAgent Developers Blog
CyberAgent Developers Advent Calendar 2021 – Adventar 16日目の記事です。 マッチングアプリ「タップル」のバックエンド開発を担当している上村です。 タップルで現在進行中のTypeScript移行について、取り組む事を決めたモチベーション、移行の進め方について紹介します。 目次 TypeScriptとは 開発現場の背景 なぜ今までTypeScript移行が進められなかったのか？ なぜTypeScriptへの移行を決断したか？ TypeScript移行を進めるにあたっての課題 TypeScript移行の方針 タップルでのTypeScript移行の実際の勧め方 実際にTypeScript移行を進めてみた結果 TypeScriptとは 公式サイトに「TypeScript is JavaScript with syntax for types.」
Can't resolve 'fs' - megutech
browser向けjsの環境構築中、環境によって変えたい値を.envで管理したいという事でdotenv-webpackをインストールしたのだが、bundle作成時にエラーが出てつまったので共有をしておく。 環境 Package Ver webpack 4.41.0 webpack-cli 3.3.9 webpack-dev-server 3.8.1 dotenv-webpack 1.7.0 経緯 他のプロジェクトでもdotenv-webpackをブラウザ向けに使っていたこともあり、特に何も考えずにdotenv-webpackをインストールしてビルドした。 $ npm install dotenv-webpack webpack.config.js const path = require('path'); const Dotenv = require('dotenv-webpack');
Parcel入門 - TypeScriptの導入方法 - ICS MEDIA
「TypeScript」とは、JavaScriptに「型」を指定できるオープンソースのプログラミング言語です。型によりプログラム実行前にエラーを見つけ出すことができるため、大規模なプロジェクトを安全に開発できます。Microsoft社製で、多くのフロントエンドエンジニアに採用されています。 TypeScriptのモダンなビルド環境を作るためにはwebpackやGulp.jsがよく使われていますが、設定ファイルが必要で学習コストは高めです。「TypeScriptのビルド環境がほしいだけなのに、なぜツールの設定に時間をとられるのか？」「TypeScriptを始めるときに苦労したくない」と思っている人も多いのではないでしょうか？ 「Parcelパーセル」というツールを使うと、独自の設定ファイルを使うことなくTypeScriptのモダンなビルド環境がわずか3ステップで作れます。 ▼ TypeScr
CDNから引っ張ったjqueryやlodashをtypescriptで使う - Qiita
はじめに TypeScriptは近年ますます重要視されている。またCDNを活用して自社サーバーの負荷を減らし、ページの表示速度を向上する手段としても重宝されている。 ただし、ライブラリそれぞれの特性の違い、webpackの環境の違いなどで、設定でつまずくことも多々ある。 設定の仕方 HTML まずはHTMLにタグを追加し、CDNからjQueryとLodashを引っ張ってくる。CDNは別にどこでも良いが、ここは例として、cdnjsを使う。 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.9/lodash.min.js"></scr
TypeScript + Node.js プロジェクトのはじめかた2020 - Qiita
TL;DR https://github.com/notakaos/typescript-node-base にアクセスして「Use this template」をクリックすると、以下の手順をベースとしたリポジトリが新規作成されます。 この記事の趣旨 以下の設定を適用した TypeScript + Node.js のプロジェクトを作成します。 項目 パッケージ
TypeScript + Node.jsプロジェクトにESLint + Prettierを導入する手順2020 - Qiita
TL;DR 完成形のソースコードはこちら↑ この記事の趣旨 TypeScript + Node.js プロジェクトのはじめかた2020 で作成したTypeScript + Node.jsのプロジェクトに ESLint / Pretiter / husky & lint-staged を導入する手順を紹介します。 今回導入するツールとバージョンは以下になります。 項目 バージョン
Node.jsの後悔から生まれた新しい実行環境・Deno入門 〜簡単なアプリケーション作成ハンズオン付き〜 | さくらのナレッジ
こんにちは！小田島です。ウェブ業界に来る前は手品業界で働いていました。最近は外出自粛で手品をやる機会がないので家でひたすら練習しています。 前回の記事「いまさら聞けないNode.js」は、「わかりやすい」「いい記事」「背景の説明が丁寧」といった好意的な反応が多くて安心しました。 「Denoについては後日記事を書きます」と前回宣言したので、今回はDenoについての入門記事を書きます。よろしくおねがいします！ 対象者 今回は、こんな人が対象です。 Denoって何？ Node.jsとどう違うの？ 全然触ったことないけど何か簡単で応用が効くものを作ってみたい 前回と違い、ハンズオンも含まれています。ぜひ読みながら実際に動かしてみてください。 Denoとは？ 前回同様に超ざっくりと説明すると、JavaScriptとTypeScriptの動作環境です。作者はNode.jsと同じライアン・ダールです。D
今あえてTypeScriptのビルド＆バンドルツールを探してみる | フューチャー技術ブログ
ちょっとしたフロントエンドの開発で、TypeScriptに最初から対応していて、簡単に使えるものは何かないかな、と調べてみたメモです。React/Vue/Angularの場合はそれぞれの初期化コマンドで何から何まで用意してくれます。Next.js、Nuxt.js、Gatsbyなども、これらのビルドのステップを簡略化するコマンドを提供しています。基本的にこれらのウェブフロントエンドを開発するときには、小規模・中規模ぐらいならあんまり気にしなくておまかせでもいいと思います。 今回は、それらのフレームワーク固有のビルドツールとは別に環境を作りたい人で、TypeScriptの環境が欲しい、ウェブの開発がしたい、という前提でいろいろ探してみました。 今回試してみたのは次の4つです。 Parcel Fusebox ncc Rome.js JavaScriptのビルドツールとはJavaScriptでビル
TypeScriptとJestではじめる AWS製サーバーレス REST API のユニットテスト・E2Eテスト #serverlessfukuoka #serverlessdays / Serverless testing using TypeScript and Jest
この発表では、サーバーレスアプリケーションのユニットテストとE2Eテストを書くときの考え方とその手段について述べます。テストについて議論するときは、アプリケーション設計についても述べなければなりません。 発表の中でまず、サーバーレスアプリケーションは、レイヤ・機能別にコードを分類できることを示しま…
Node.js徹底攻略 ─ ヤフーのノウハウに学ぶ、パフォーマンス劣化やコールバック地獄との戦い方｜ハイクラス転職・求人情報サイト AMBI（アンビ）
Node.js徹底攻略 ─ ヤフーのノウハウに学ぶ、パフォーマンス劣化やコールバック地獄との戦い方 Node.jsをうまく活用できている企業は、どのような方法でベストプラクティスを習得してきたのでしょうか。ヤフー株式会社でNode.jsの社内普及に務めてきた言語サポートチームに、同社の実施を紹介してもらいました。 Node.jsは「イベントループモデルで、ノンブロッキングI/Oを使用している」「問題発生時にHTTP/TCPやPOSIX APIなど低レイヤーの知識を求められる」といった特徴を持つ言語です。開発者が習得すべき技術領域が広いため、Node.jsらしい書き方の学習難易度は高いと言えます。 それでは、Node.jsをうまく活用できている企業は、どのような方法でNode.jsのベストプラクティスを習得してきたのでしょうか。ヤフー株式会社でNode.jsの社内普及に務めてきた言語サポート
React + TypeScriptのESLintルールをカスタマイズしたり、Airbnbのやつを導入するぞ。 | Ginpen.com
何もしないでそのままでも十分かもしれない。 先にまとめ 最近の react-scripts は ESLint を含んでいるので別途インストール不要 設定は .eslintrc.js を作成して extends: ['react-app'] する Airbnb のルール設定を使う場合はもうちょい頑張る 元々 create-react-app してない場合も同じ Airbnb ルール利用時の手順概要 ESLint 初期化 ESLint の設定を更新 コードを recommended な状態へ対応 想定環境 Node.js v10.16 react-scripts v3.1 TypeScript v3.5 ESLint v6.1 @typescript-eslint/eslint-plugin v1.13 React アプリの準備 create-react-app でテンプレートから作成します。
Node.jsでStreaming APIを使用したJSONの書き出し - Qiita
はじめに 本記事は，TwitterのStreaming APIを使用して，特定のワードが含まれたツイートを取得し，JSONで書き出すことを目的としています． node.jsを用いてStreaming APIを利用したツイートの取得，.json形式で保存というところまでを行います． 使用モジュール fs twit Twitter APIについて ツイートを取得するためにTwitter APIを利用するにあたって，大きく分けて二種類のAPIがあります． 一つはREST APIで，もう一つはStreaming APIです． REST API https://dev.twitter.com/rest/public Streaming API https://dev.twitter.com/streaming/overview REST APIが，こちらからリクエストを送ったタイミングで結果を返して
nodistでCouldn't resolve version spec %s: %s」みたいなエラーが出たときの対処法 - Lost Kitten
Windows用のnodeバージョン管理ツールにnodistというものがあります。 marcelklehr/nodist: Natural node.js and npm version manager for windows. これを使って開発をしていると次のようなエラーが出る場合があります。 Sorry, there's a problem with nodist. Couldn't resolve version spec %s: %s nodev7.2.0 Unexpected character in constraint nodev7.2.0: node Error: Couldn’t resolve version spec %s: %s · Issue #155 · marcelklehr/nodist これはこのコメントでも書かれているように、semver関連のバグのよう
TypeScript + TSLint + Prettier + Webpack環境を作成したときのメモ - Qiita
babelでいう.babelrcであるところのtsconfig.jsonで、コンパイルオプションを指定できます。 使っているTypeScriptのバージョンは2.8.3ですが、以下の記事がとても参考になりました。 tsconfig.json で指定できる全 compilerOptions をまとめた (TypeScript v2.5 版) 最終的に、tsconfig.jsonは以下のように設定しました。 { "compilerOptions": { "outDir": "./public/", "module": "commonjs", "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, "allowUnreachableCode": false, "a
最新版で学ぶwebpack 4入門 - BabelでES2017環境の構築(React, Three.js, jQueryのサンプル付き) - ICS MEDIA
最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略：ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules（impo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Node.js v12 を使い続けていたのはなぁぜなぁぜ？
@types/* を（あれば）まとめてインストール - Qiita
