JavaScript おじさんが教える本当の Modern JavaScript 入門 1 - Qiita
一部修正しました Udemy で React コース公開してます。(絶対 Udemy の 1200 円割引価格にはしないので、このリンクから買ってもらうのが一番お互いに得です。) Udemy React + Redux コース 本発表における Modern JavaScript とは何か Phase 1 として以下の環境での開発ができれば Modern JavaScript に入門できたものとする。 Webpack, Parcel 等の module bundler による "module system" の活用。 ES2015+ や TypeScript といった "Compile to JS *1" の使用。それに伴う Babel によるトランスコンパイルツールの使用。 ESlint, Prettier といった集団開発における、ソース品質安定のためのツール の使用。 ここまでのツール
PrettierとLinterを併用する - Qiita
TL;DR Prettier触ってみたかったので、boilerplateっぽいのを作った。 JSはESLint。CSSはStylelintを使います。 FormatterとしてPrettierを使用。これはJSのみ。 git commit時に自動整形されるようにしておく。 PrettierそのものはCSSにも対応しているが、Stylelintと併用しようとすると、まだ足りない感じなので様子見。けっきょくPrettierしてるのはJSだけなので、なんだか片手落ちな感が否めない。追って対応していきたいところ。いちおレガシーCSSに導入するときとか事前にPrettier通しておくと、多少は楽だった。 コーディングルールに関しては一例として、今回は無難なルールをベースに設定しています。 eslint-config-standard stylelint-config-standard 導入数でいえば
とあるLPの制作現場 - Qiita
やりたいことはWebpackだけでも実現できますが、今後ページが増えていくことを考えるとgulpを使用したほうがスッキリ書けそうなので、gulpとWebpackを併用しました。最近gulpの名前をめっきり聞かなくなりましたが、元気にしているだろうか。 Webpackとgulpの使い分け、あるいは共存 Webpack webpack is a static module bundler for modern JavaScript applications. https://webpack.js.org/concepts/ 色々なファイルをまとめて、モリモリなJSファイルを出力してくれる。BabelやSassなどのローダーを設定するだけで、いい感じに変換してくれる。プラグインを使えばHTMLやCSSなどのファイル出力もできます。 gulp gulp is a toolkit for autom
エンジニア歴20数年の私が、設計書を書く際に心がけていること - Qiita
はじめに 時の経つのは早いもので、私がIT業界に身を置いて四半世紀になってしまいました。 その間、膨大な数の「設計書（仕様書）」を書いて来ましたが、未だに悩み・迷いは尽きません。 それでも、亀の甲より年の劫とも申しますので、私なりの経験則を「個人」と「チーム」の両観点でまとめてみました。 本稿のテーマは、「主に設計書を想定した、開発ドキュメントの書き方」です。 本稿で前提とする設計書は、ExcelやWordで書かれた、フォーマルな（≒納品物になりえる）設計文書、です。 したがって、自社サービス開発よりも受託開発、アジャイルよりもウォーターフォール、を前提として読んでいただいた方が、しっくりくると思われます。 ＜ご注意＞ 本稿の内容は執筆者独自の見解であり、所属企業における立場、戦略、意見を代表するものではありません。 個人的に心がけていること 当該文書の作成目的や位置付けを冒頭に記載する
Webpackのハマりポイント - Qiita
PORT株式会社、フロントエンドエンジニアの@sigwygです。 NURO光の第一回工事から2ヶ月経ちますがネット開通してなくて涙目のホリデーシーズン、持ちネタはサイクロップスでした。最後のジェダイとかなかった。いいね？ この記事はPORT Advent Calenderの17日目になる筈だった記事です。 TL;DR Webpackのハマりポイントをまとめた ReactとかVue.jsとかないです 経緯 2016年はWebpackに疲れたので、しばらくnpm scriptだけでした。 小規模の案件ならpost-cssとbabelが動けばいいし、サーバー建てたいならpython叩くなりDockerコンテナに放り込むなりすればいい。特に不便はありませんでした。 そうこうするうちにWebpackもv3になり、なんだかんだで質問はちょくちょく投げられたり、書かないと忘れたり、時代に取り残される危機
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
わかりやすい画像のdiffを求めて - Qiita
どうも。フロントエンドエンジニアの @Quramy です。 さて、前回、1日10万枚の画像を検証するためにやったことで書いているとおり、reg-suitという画像に特化した回帰テストツールをメンテしています。 画像回帰テストという文脈において、差分の可視化方法はとても重要なファクターです。なぜなら、画像(=スナップショット)に差分が発生したからといって、それすなわち棄却、というわけではなく、その差分の内容を判断して、意図せぬ変更であれば棄却、意図した変更であればexpectedを更新する必要があります。すなわち、ワークフローに目視による差分のレビューが発生するのです。 そこで、少しだけ異なる2枚の画像について差分を効果的に可視化する、というテーマに向き合ってみました。 主にC++とOpenCVでの実装ですが、これらの知識が無くとも読めるよう、コードやAPIへの言及を少なくして、中間画像で説
2017末時点での React Component 設計のベストプラクティス - Qiita
どう考えているか、というのを聞かれたので、記事に起こしておきます。個人の意見です。 Prettier を使う 気づけばコードの整形を人間がやる時代は終わりました。 細かいコーディングスタイルでレビューの時間を取るぐらいだったら、一貫した自動整形ルールを適用すべきです。 人によっては細かいこだわりがあって prettier の規則が気に食わないかもしれず、僕も最初はそうでしたが、Atomで保存する度に自動整形を走らせる prettier の強烈な開発体験によって、最終的にそれらのこだわりを全て捨てることが出来ました。 生産性を求めるなら、現時点では最優先で導入すべきものです。 React.createClass を使わない v16 で削除されたのでいわずもがな。 同様に、 createClass でしか使えなかった mixin 周辺機能も丸ごと deprecated です。 「可能な限りは」
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
Linus Torvalds氏によるGitの内部構造の解説 - Qiita
初めに LinusによるGitのinitial commitのREADMEの訳です。 社内のSVNからの移行を促すために資料を整備していたのですが、SVNでやっていたことを移し替えたりコマンドを覚えたりするより内部構造を知ったほうが早いことに気づきました。 それで、gitの内部構造についての解説資料を色々見ていたのですが、データ構造については原作者のこのREADMEに言い尽くされている気がします。のみならず、gitを使うものが抱くべき精神性のようなものが示されており、深い感銘を覚えました（ヒャッハー）。 README: ”GIT - 馬鹿コンテンツトラッカー” コミットメッセージ：git, 地獄からきたインフォメーションマネージャ gitの意味 "git" は何を意味することも出来る、お前の気分次第だ。 3文字で、発音可能で、実際のUNIXシステムで共通コマンドとして使われていないものであ
Reactアハ体験 - Qiita
Reactはちょっとしたコツを掴むと一気に理解が進みます。 Googleのデベロッパーであり数々のReactトレーニングを手がけてきたTyler McGinnis氏によるReact "Aha" Momentsが非常に参考になるため、本人の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文：https://tylermcginnis.com/react-aha-moments/ 私が技術的なコンテンツを教えたり書いたりする時の主な目標の1つは「アハ体験」を最大化することです。アハ体験は物事が突然理解できた瞬間のひらめきです。私たちは皆これを体験してきましたし、私の知る最高の教師たちは聴衆に応じて、それらの瞬間を最大化するための教えを最適化することができます。 ここ数年、私はほぼ全ての一般的なメディアでReactを教えてきました。その間、私はReact習得
trdsqlというコマンドラインツールを作った - Qiita
trdsqlというコマンドラインツールを作りました。 Goで作ってます。 githubの trdsqlからダウンロード出来ます。 またLinux/Windows/macOSのバイナリもあります。 以下は、古くなっている内容もいくつかあります。 最新版に対応した、より詳細な内容は trdsql 目次 | Noboru Saito's page を参照して下さい。 これは何？ 簡単に言えばCSV(TSV含む)やLTSVに対してSQLを実行できるツールです。 同様のツールが q や textql 等いくつかあります。 trdsqlはPostgreSQLドライバとMySQLドライバを含んでいて実際にDBに接続することでSQLite以上の機能を使用できるようにしています。 PostgreSQLやMySQLの構文が使えるだけではなく、CSVファイルと実テーブルでJOINしたり、CSVファイルからテーブ
プロジェクト管理のエモいはなし - Qiita
前置き 私のキャリアは少し変わっています。 この業界に新卒で入ってから十数年は、大手ゼネコン的SIerにて、ほぼ一貫してプロジェクトマネジメントをやってきました。最終的には100人月程度の案件を回していたので、中堅クラスではあったと思います。それなりに経験も積んだとは思いますが、あれ、そもそも私って人の管理をやるためにIT業界に入ったんだっけ。。というレーゾンテートル的な理由で、プログラマーに転身しました。 そんなわけで、おそらく日本のIT業界におけるプログラマーから管理職に至るという一般的なキャリアパスを逆行している形になります。 そういった事情もあり、プロジェクト管理からは距離を置くようにしていたのですが、最近またプロジェクトマネジメントについて考える機会が多くなったので、この辺で昔話をしてみようと思います。 他山の石としてワカモノの役に立てば。 前提として ガチガチのウォーターフォー
GitHubでFork/cloneしたリポジトリを本家リポジトリに追従する - Qiita
2019/12/11 分かりやすいサイトへのリンクを追加しました hub コマンドの hub fork について追加しました 2013/04/11 興味深い手法があれば随時追加していきます ネットを検索すると、色々な手法が出てきますが、自分としては「WEB+DB PRESS plus 開発ツール徹底攻略」p.71 に載っていた以下の手法がシンプルで良く理解できました。 本家リモート upstream を追加する方法 本家リポジトリの例として、実際にGitHubに存在する練習用リポジトリ git@github.com:DQNEO/Renshu.git を使います あなた (youraccount) が既にForkしているRenshuリポジトリをcloneします。 $ git clone git@github.com:youraccount/Renshu.git Cloning into 'R
Swiftのエラー4分類が素晴らしすぎるのでみんなに知ってほしい - Qiita
これは Swift Tweets の発表をまとめたものです（次回開催はこちら）。イベントのスポンサーとして Qiita に許可をいただいた上で投稿しています。 ありがとうございました！Q&Aは他の人の発表中でも構わないのでリプを飛ばして下さい。 続いては僕 @koher の発表で、タイトルは "Swiftのエラー4分類が素晴らしすぎるのでみんなに知ってほしい" です。 #swtws — koher (@koher) 2017年1月14日 第 1 部: Swift の 4 種類のエラーについて あまり知られてませんが、エラー処理について、 Swift 2.0 設計時に Core Team がまとめた "Error Handling Rationale and Proposal" というドキュメントがあります。このドキュメントは、僕が去年 try! Swift で発表した際にも参考文献にしまし
割りと便利だけど微妙に忘れがちなbashのコマンド・チートシート - Qiita
自分用にメモしておく コマンド実行 CMD1; CMD2, CMD1 && CMD2 ;はCMD1の結果に関わらずCMD2も実行される &&はCMD1の結果が正常な場合のみCMD2が実行される CMD1 || CMD2 - 失敗時に後続コマンドを実行する CMD || printf "%b" "MSG"でエラーメッセージを表示する エラーメッセージ表示後exit 1したい場合 = CMD || { printf "%b" "FAILED.\n" ; exit 1 } CMD || printf "%b" "FAILED.\n" ; exit 1と波括弧無しで書くと期待通り動作しない（CMDが成功時もexit 1してしまう） CMD & - バックグラウンド実行 CMD &で[1] 4592のようにジョブ番号とプロセスIDが表示される killしたければkill %ジョブ番号 か kill
あなたの知らない less の世界 - Qiita
最近 prezto 入れたんですよ。prezto。そしたらいつものシェル世界が見違えるほど使いやすくなって身長も 3 メートルくらい伸びたんですが、それは余談でして、prezto 入れた後に less 使ってみたら余りの変わりっぷりに驚いたんです。 これを機に man page を読み直してみたら更に驚き。less ってこんなスゴイ物だったのか！みたいな。今回はそんな less の底力を紹介します。 環境変数 $LESS less には様々なオプションがあるのですが、これを予め環境変数 $LESS に設定しておくと、毎度 less ファイル名 と打つだけでそれが有効になります。更に、後述しますが、この設定は less 起動中にオン・オフして切り替えることが可能です。 # 最低限でもこれくらいは設定しておこう export LESS='-i -M -R' # 僕は後述の物を全部付けてます（-
たった15KBで、スケーラブルかつ写実的なバラク・オバマ - Qiita
僕は開発者ではなく、普段はほぼ完全に手描きで制作しているイラストレーターです。 SVG というファイル形式と自分の得意とするモノクロペン画はかなり親和性が高いんじゃないかと以前から感じていまして、その移植についての実験を SVG Advent Calendar 2016 の25日目の記事として投稿してみます。 動機、経緯 アナログなペン画イラストレーションをピュアなSVGファイルとして描き換えたいと思った。 以前、自働トレース変換プログラムでペン画ビットマップ画像をSVGに変換してみたことはあったけども、１本の線の輪郭を無理やり「パス」として処理してしまうので、出来上がったファイルは元画像と比較してファイルサイズがコンパクトにはならなかった。 ほとんど同じ見た目とファイルサイズで、でもスケーラブルになった、という感じ。 今回は人力で、純粋に「ストローク」のみで線を表現する最適化されたSVG
ローカル開発環境をもっとたくさんの人に使ってもらいたくてDockerで作りました - Qiita
始めに 最近ウェブ開発でローカル環境を使って欲しいなぁ、とすごく思うようになりました。 慣れてしまえば開発効率が上がると思うんですけど、その導入が大変なんですよね。 仕事で一緒になった方々に手作業で構築していましたが、もっと簡単にできないかなということで作りました。 Mac用です。名前はDAMP(Docker Apache MySQL PHP。 XAMPP, MAMPから取りました。)です。 Apache、MySQL、PHPが動きます。 （2018年11月8日）PHP7.2に対応しました 1.7.2でPHP7.2に対応しました。 https://github.com/yousan/damp/releases/tag/1.7.2 サンプルのdocker-compose.ymlはこちらです。 https://github.com/yousan/damp/blob/master/docker-c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
脱jQueryのためにしたこと - Qiita
