自サイトのリンク切れを見つけるスクリプト(SPA対応版) - Qiita
自サイトのリンク切れを網羅的に見つける ユーザコンテンツや外部リンクを直接参照している場合などに問題となるのがリンク切れです。 外部リンク切れ(404エラー)はサイトの評価を下げる直接の原因にはならないといわれていますが、 【SEO】外部サイトへのリンク切れは検索エンジンからの評価を下げない リンク切れがあることでユーザ体験を阻害させ、離脱に繋がります。 簡易的に見つけるには次のようなW3Cでも用意されてはいます。 W3C Link Checkcer が、サイト全体から見つけるにはサイト全体のリンクを総チェックする必要があります。 書いてみた スクレイピングライブラリで有名なpuppetterを使用して自サイトをスクレイピングしてみます。 aタグとimgタグを対象とします。 puppeteerでレンダリングを実行完了してから、urlチェックするため、SPAなサイトでも対応可能です。 sit
最近のNode.jsプロジェクトのだいたいテンプレ - Qiita
サンプルプロジェクト 要素 Typescript ts-node koajs koa-router tslint (standard) mocha, chai log4js config 説明 TypeScriptで書いて、tscはせずにts-nodeでそのまま動かしている。 ts-nodeだとサーバーなどは起動頻度が低くていいけど、コマンド実行系が遅くてめんどくさいのでtscするように変更。 Webまわりはkoajsを使っている。expressに差し替えても問題ない。 tslintはtslint-config-standardを使っているけどこのへんは好み。 DBは含めてないが、mongooseやsequelizeなどその都度好きなのを使う。 index.tsとserver.tsを分けているのはAPIのテストを 走らせるため。
FlowtypeとTypeScriptにおけるHOC(またはrecomposeの)型付けについて
型付け地獄へようこそ 個人的にはここ2, 3年ほどJavaScriptの型付けとしてFlow(Flowtype) をメインで扱ってきていたのですが、いよいよTypeScriptもバージョン3になり型の表現力も増し、さらにBabelでもうまくいけるようになったのを見てきたので、TypeScriptもちらほらやってきています。 しかしながら、主にReactの開発でTypeScriptを使っていますが、Flowtypeと比べてどうも腑に落ちない点が多々あります。その一つがHOCの型付けの際の型推論です。 まずは普通のpresentational (dumb) component。描画要素およびハンドラをプロパティで受け取るだけ。 import * as React from 'react'; export type CompProps = { title: string, count: numb
Django×Electron でデスクトップアプリ開発はできないの？ - Qiita
はじめに Django Electron Django とは、「PythonでWebアプリを開発する際に使うWebフレームワーク」です。 Electron とは、「Web技術でデスクトップアプリを作ることができるエンジン」です。 つまり、***Django×Electron で『Python 製のデスクトップアプリケーション』***が作れる！ そんな……夢を見たんだ。 Is it a good idea to use Django in making a desktop app? How difficult is it? なんだか良くないっぽい。 どうりで「Django Electron」や「Django デスクトップアプリ」と検索しても人気記事が出てこないわけだ。 DJANGO Y ELECTRON PARA APLICACIONES MULTIPLATAFORMA 一応、実践している記
Nuxt ver.2 へプロジェクトを移行したときにCSSで対応したこと（PostCSS編） - Qiita
前提条件 Nuxtのver.1を使って個人的なプロジェクトを作っていました。SSRは使わずSPAモードでGenerateして、静的ファイル一式をサーバーにアップする形です。 しばらくプロジェクトを進めて、一旦区切りが出来たので、使っているモジュール（node_modules）を全てアップデートしました。その中でも、すんなりとは行かなかったNuxtのアップデートについて書きたいと思います。 アップデートしたバージョン：1.4.1から2.2.0へ アップデートしたら起きたこと 私はNuxtでスタイリングするときに、NuxtのデフォルトであるPostCSSとcssnextの組み合わせで書いていました。ですので、nuxt.config.jsにはCSS周りの設定は入れていません。 各コンポーネントのスタイリングは、下記のようにvueファイルに書いていました。
TypeScriptの型初級 - Qiita
この記事は「TypeScriptの型入門」の続編です。入門の続編ということなので初級というタイトルにしてみました。TypeScriptの型よくわからんという方は先に入門から読むことをおすすめします。入門レベルのTypeScriptくらい分かるよという方は読まなくても大丈夫です。 TypeScriptの型入門 さて、前回の記事ではTypeScriptの型を一通り紹介しました。この記事ではその続編として、実用上必要になるTypeScriptの型の挙動を理解したり、標準ライブラリに存在する型の使い方を理解することを目標にします。前回に引き続き、あくまでTypeScriptの型に関する話ですから、JavaScriptの言語機能とか、TypeScriptの構文とかの話はしません。悪しからずご了承ください。 最終更新： 2019-03-16 (TypeScript 3.4に対応しました） union型
Ethereumのフレームワーク「Truffle」とローカル開発環境「Ganache」入門ログ - Qiita
概要 Ethereumを使ったスマートコントラクトの開発をしていて、ローカルの開発環境としてGanacheが便利だよ、と聴いたのでその入門ログを残します。 リアルタイムで導入しながら記事を書いています。たまにはこういう記事の書き方もいいですね。 前提 当方、メインネットへのスマートコントラクトのデプロイ（という言い方が正しいかどうかすらわからない）とかやったことないですし、入門書を読んで一通りやったくらいです。 これくらいのレベルの人間でも環境構築して動作させるくらいは訳ない、という意味でのGanache解説記事だと思っていてくださいm(_ _)m 導入手順 Google検索 「Ethereum Ganache」でGoogle検索すると Ethereum のローカル開発環境 Ganache を使ってみる Truffle Suite | Ganache - Truffle Framework
React + styled-components + juice でメールテンプレートの作成 - Qiita
React + styled-components で、サーバーサイドでのメールテンプレートの作成をすることができました。いい感じに動いています。 なお、汎用的な気がしたので、パッケージ化してみました。 背景 Node.js + TypeScript を使ってサーバーサイドのプログラミングをしているとします。 メールテンプレートの制約を超える メールテンプレートの場合、 外部ファイルの読み込みができない CSSはインライン化しないと正しくレンダリングされないことがある なので、CSSをべた書きするか、コンパイル作業が必要になります。 本記事のやり方だと、ライブラリの力でメールテンプレートということを極力意識しなくて良くなります。 メールテンプレートを型安全にする また、Pug等を使うと、メールテンプレートの内部を型安全にできません。せっかく TypeScript で安全にしているのに、メー
Webpackの--modeに応じてBabelのpresetsを設定する方法 - Qiita
はじめに Webpackの--modeごとにBabelのpresetsを設定する方法をメモします。 概要 環境 webpack : 4.21.0 webpack-cli : 3.1.2 @babel/core: 7.1.2 @babel/preset-env: 7.1.0 babel-loader: 8.0.4 ファイル配置 以下のファイルをプロジェクトディレクトリ直下に配置する。 package.json webpack.config.js babel.config.js 呼び出し方 npm scriptをコマンドラインから呼び出す。目的によってproductionモードとdevelopmentモードで呼び分ける。
Protractorを使ったE2Eテストの準備 - Qiita
はじめに E2EテストとはEnd to End（エンドツーエンド）の略らしいです。最初から最後までということのようです。 ブラウザを使ったテストの自動化のために今回はProtractorを使うことにしました。 ちょうど仕事で担当になった運用サイトがAngular製アプリケーションだったこともあります。 ProtractorはAngular製のサイトに向いているとのことです。ただAngular製ではないサイトでも利用可能です。 Protractorはwebdriver-managerというものを使ってSeleniumを利用します。 準備するものはnodejsです。 前回書いた次の記事でnodejsを用意していただければ動作します。 windows10でnode.jsのバージョンを切り替えて使う( nvm-windows ) 今回はwindows10の環境で進めます。 Protractorの準
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Angular7】 json を module として扱う - Qiita
Angular js gives developer control - Qiita
Node.jsでAmazon CloudFrontの署名付きURLを生成する - Qiita
TypeScript で型定義ファイル( d.ts )がないときの対処法 - Qiita
JavaScriptのぐぐりづらい記号の名前を知る - Qiita
angular2-materializeでdatepickerのeventを受け取る - Qiita
VueとVuexを使った簡単なCRUD - Qiita
haml（html）でfloatプロパティを使って要素を左右に配置する方法。 - Qiita
TypeScript で、入力に応じて特定の型を返す Overload Signature の使い方 - Qiita
Istanbul - おかしなレポートまとめ - Qiita