Python

Pythonで変数名を文字列として取得する方法を現役エンジニアが解説【初心者向け】

初心者向けにPythonで変数名を文字列として取得する方法について解説しています。変数名を取得することにより、変数名があるかどうかや変数名によって処理を変えるなど処理の幅を広げることが出来ます。localsやglobalsなどの関数を使ってみましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

Pythonで変数名を文字列として取得する方法について解説します。

そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。

今回は、Pythonに関する内容だね！

どういう内容でしょうか？

Pythonで変数名を文字列として取得する方法について詳しく説明していくね！

お願いします！

変数名を文字列として取得する方法

変数の名前(シンボル)を文字列として取得するには、組み込み関数のglobals、localsを使います。

globalsはグローバル空間の変数一覧を返します。localsはローカル空間の変数一覧を返します。

返却されるデータは辞書の形式で、「変数のシンボル」がキー、「変数の値」が値になっています。

実際に書いてみよう

サンプルコード

def func():
  x = 1
  y = 'a'
  z = [1,2,3]
  for (symbol, value) in locals().items():
    print('シンボルは%s、値は%sです' % (symbol, value))
  
func()

実行結果

シンボルはz、値は[1, 2, 3]です
シンボルはy、値はaです
シンボルはx、値は1です

解説

関数funcの中で、ローカル変数x,y,zを定義しました。組み込み関数localsで、ローカル変数のシンボルと値を得ました。取得したシンボルと値をprintで表示しました。

[PR] 未経験からWebエンジニアを目指す方法とは

監修してくれたメンター

橋本紘希

システムインテグレータ企業勤務のシステムエンジニア。

開発実績: Javaプログラムを用いた業務用Webアプリケーションや、基幹システム用バッチアプリケーションなどの設計構築試験。

内容分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

herokuを利用したPythonアプリケーションのデプロイ方法を現役エンジニアが解説【初心者向け】

herokuを利用したPythonアプリケーションのデプロイ方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して、初心者向け...

Python

PythonでNumPyのarange関数を利用する方法を現役エンジニアが解説【初心者向け】

PythonでNumPyのarange関数を利用する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して、初心者向けに解説し...

Python

Pythonの関数を指定時刻に実行する方法を現役エンジニアが解説【初心者向け】

Pythonの関数を指定時刻に実行する方法について解説します。そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事...

Python

Pythonで切り捨て除算する方法を現役エンジニアが解説【初心者向け】

Pythonで切り捨て除算する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそ...

Python

Pythonで標準入力を実装する方法を現役エンジニアが解説【初心者向け】

Pythonで標準入力を実装する方法について解説します。そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読む...

Python

Pythonでの三項演算子の記述方法を現役エンジニアが解説【初心者向け】

Pythonでの三項演算子の記述方法について解説します。これが使えるようになると、コードの行数を短縮し見やすいプログラムが書けるようになります。ぜひ参考にしてみ...

Python

あわせてよく読まれている記事

Pythonのglobals関数の使い方を現役エンジニアが解説【初心者向け】

Pythonのglobals関数の使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して、初心者向けに解説します。 Pythonについてそもそもよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まるでしょう。なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。田島悠介今回は、Pythonに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Pythonのglobals関数の使い方について詳しく説明していくね！大石ゆかりお願いします！ globals関数とは globals()関数とは、グローバル名前空間にあるシンボル一覧を返します。対になるのlocals()関数は、ローカル名前空間にあるシンボル一覧を返す関数です。ローカル変数とグローバル変数の違いグローバル変数はモジュール(スクリプト)全体で有効な変数です。対してlocals変数はスコープ内でのみ有効な変数です。 [PR] 未経験からWebエンジニアを目指す方法とはglobals関数とlocals関数を実際に使ってみよう以下、sample.pyスクリプトを作成し、関数を使用していきましょう。 x = 0 def foo(): y = 1 print('globals(): ', globals()) print('locals(): ', locals()) foo() sample.pyスクリプトを実行すると、以下の結果になりました。 globals(): {'__name__': '__main__', '__doc__': None, '__package__': None, '__loader__': , '__spec__': None, '__annotations__': {}, '__builtins__': , '__file__': 'sample.py', '__cached__': None, 'x': 0, 'foo': } locals(): {'y': 1} globals()の実行結果として、グローバル空間にある、変数xやメソッドfooが表示されました。加えて、Pythonが自動的に割り当てる変数が表示されています。 locals()の実行結果として、ローカル空間にある変数yだけが表示されました。まとめこの記事では、globals関数と対になるlocals関数を紹介しました。変数の名前空間を意識することで、変数の意図しない変更を予防できます。そして、セキュアな(バグの少ない)プログラムを作りやすくなるでしょう。執筆してくれたメンター橋本紘希（はしもとひろき）システムインテグレータ企業勤務のシステムエンジニア。開発実績: Javaプログラムを用いた業務用Webアプリケーションや、基幹システム用バッチアプリケーションなどの設計構築試験。大石ゆかり Pythonのglobals関数の使い方がよく分かったので良かったです！田島悠介ゆかりちゃん、これからも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でも、Pythonを使った人工知能（AI）や機械学習の基礎を習得できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。

Python

PHPでbindparamを使う方法を現役エンジニアが解説【初心者向け】

今回は、PHPでbindparamを使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPについてそもそもよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、PHP/Laravel講座の内容をもとに紹介しています。田島悠介今回は、PHPに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 PHPでbindparamを使う方法について詳しく説明していくね！大石ゆかりお願いします！ bindparamとは PHPのbindParam()関数は、プリペアドステートメントで使用するSQL文の中で、プレースホルダーに値をバインドするための関数です。 bindParam()関数は、値の参照を受け取るという点と、execute()関数を使用した際にバインドが確定するという点で、bindValue()関数と異なります。プリペアドステートメントとは、SQL文をあらかじめ用意しておいて、その後はクエリ内のパラメータの値だけを変更してクエリを実行できる機能のことです。プリペアドステートメント PHPではprepare()関数を使用することで、プリペアドステートメントを使用できます。 <?php $userName = 'mysql'; $password = 'mysql'; // PDOオブジェクトの生成（DB接続） $pdo = new PDO('mysql:dbname=test;host=localhost', $userName, $password); // プリペアドステートメントで SQLをあらかじめ用意しておく $stmt = $pdo->prepare('select * from user where id = ? and name = ?'); prepare()関数を使用するためには、まずPDOオブジェクトを生成する必要があります。 PDOオブジェクトを生成時にDB接続情報を渡すことで、対象のDBに対してSQLを実行できるようになります。 prepare()関数の()内が、プリペアドステートメントによるSQLです。$pdo->prepare()とすることで、接続したDBに対して実行するプリペアドステートメントのSQLをセットします。プリペアドステートメントの「?」の部分は、プレースホルダーと呼ばれるものです。 bindParam()関数を使用することで、このようなプレースホルダーに値をバインドさせることができるので、条件が動的なSQLをアプリケーションから実行できます。 [PR] 未経験からWebエンジニアを目指す方法とはbindvalueとの違い同じくプレースホルダーにバインドする関数として、bindValue()という関数がPHPには用意されています。 bindValue()関数との大きな違いは、バインドするために「変数」を引数として渡すことで、変数が「参照として」バインドされる点です。そのため、バインドした値が評価されるタイミングがbindParam()関数とbindValue()関数で異なります。 bindvalueの場合 bindValue()関数の場合は、関数に値を渡したタイミングでバインドが評価されます。 $stmt->bindValue(1, $id, PDO::PARAM_INT); $stmt->bindValue(2, $name); bindParamの場合 bindParam()関数の場合は、クエリを実行する関数execute()が実行されるまで、バインドが評価されません。そのため、一度bindParam()関数に変数を渡しても、execute()が実行される前に変数の値が変更されると、その変更した値がexecute()の実行時のクエリに反映されます。 // 値をバインド $id = 1; $name = '田中太郎'; $stmt->bindParam(1, $id, PDO::PARAM_INT); $stmt->bindParam(2, $name); // クエリを実行（$id, $nameの中身をバインド） $stmt->execute(); // 値の変更 $id = 2; $name = '鈴木一郎'; // クエリを実行（$id, $nameの中身をバインド） $stmt->execute(); bindparamを使う方法それでは、bindParam()関数の使用方法について、見ていきましょう。 bindParam ($パラメータID, $バインドする変数 [, $PDOデータ型定数[, $PDOデータ型の長さ[, $ドライバーオプション]]] ) 第一引数には、パラメータIDを使用します。これは、プレースホルダーの種類によって指定方法が異なります。もし、プレースホルダーが「?」を使用する、「疑問符プレースホルダー」の場合、パラメータIDには1から始まる整数値で「?」の位置を指定します。もし、プレースホルダーが「:id」など、名前で指定する「名前つきプレースホルダー」の場合、パラメータIDにはプレースホルダーと同じ:idなどの文字列で指定します。第二引数には、バインドする変数を渡します。第三引数は、オプションで、バインドする値に対して明示的にデータ型を指定することができます。指定する場合は、「PDO::PARAM_* 定数

PHP

Javaのエラー「シンボルを見つけられません」の対処法を現役エンジニアが解説【初心者向け】

今回は、エラー「シンボルを見つけられません」が発生したときの対処法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次「シンボルを見つけられません」と表示されたら？インポート文を書く実際にやってみようそもそもJavaについてよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。田島悠介今回は、Javaに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介プログラミングしていると、よく発生するエラー「シンボルを見つけられません」の対処法について詳しく説明していくね！大石ゆかりお願いします！「シンボルを見つけられません」と表示されたら？ Javaでコードを書いてコンパイルしたときに、「シンボルを見つけられません」と表示される場合があります。これは、Javaにおけるコンパイル時のエラーの1つで、コードに問題があることを示しているものです。具体的には、変数やクラス、メソッドなどの名前が間違っている場合が多いです。他にも利用しているクラスのインポート文を書いていない場合があります。インポート文は、他のパッケージにあるクラスを使用するときに、必ず書く構文です。インポート文が正しく書かれていなければ、コードを修正してもエラーが解消しないため、注意してください。 [PR] 未経験からWebエンジニアを目指す方法とはインポート文を書くインポート文を書いていない場合のエラーは、単純にプログラムの先頭にコードを加えてコンパイルすれば問題ありません。インポート文の書き方は、以下になります。 import パッケージ名.クラス名; 例）Listクラス import java.util.List; 実際にやってみようそれでは、実際にインポート文がない場合を例に、エラーが起きてしまうプログラムを修正して、エラーの回避をしてみましょう。 public class SymbolErrorSample{ public static void main(String[] args){ // ArrayListの初期化 List<Integer> list1 = new ArrayList<Integer>(); list1.add(0); list1.add(1); list1.add(2); // ArrayListを表示 System.out.println(list1); } } このコードをコンパイルしてみると、以下のように「シンボルを見つけられません」というエラーが発生してしまいます。 SymbolErrorSample.java:6: エラー: シンボルを見つけられません List<Integer> list1 = new ArrayList<Integer>(); ^

Java

PHPでbindvalueを使う方法を現役エンジニアが解説【初心者向け】

今回は、PHPでbindvalueを使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPについてそもそもよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、PHP/Laravel講座の内容をもとに紹介しています。田島悠介今回は、PHPに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 PHPでbindvalueを使う方法について詳しく説明していくね！大石ゆかりお願いします！ bindvalueとは PHPのbindvalue()とは、プリペアドステートメントで使用するSQL文の中で、変数の値をバインドするための関数です。プリペアドステートメントとは、SQL文に対して、一部分的を変更の可能な場所として定義し、さらに定義したものを自由に変更できるようにするためのデータベース機能です。プリペアドステートメントを使ってみよう PHPではprepare()関数を使用することで、プリペアドステートメントを使用できます。 <?php $userName = 'mysql'; $password = 'mysql'; // PDOオブジェクトの生成（DB接続） $pdo = new PDO('mysql:dbname=test;host=localhost', $userName, $password); // プリペアドステートメントで SQLをあらかじめ用意しておく $stmt = $pdo->prepare('select * from user where id = ? and name = ?'); prepare()関数を使用するためには、PDOオブジェクトを生成する必要があります。 PDOオブジェクト生成時に、DB接続情報を渡すことで、対象のDBに対してSQLを実行可能です。 prepare()関数の()内が、プリペアドステートメントによるSQLです。 $pdo->prepare()とすることで、接続したDBに対して実行するプリペアドステートメントのSQLをセットします。プリペアドステートメントの「?」の部分は、プレースホルダーと呼ばれるものです。 bindvalue()関数を使用することで、プレースホルダーに値をバインドできるため、条件が動的なSQLをアプリケーションから実行することが可能です。 bindvalueを使う方法 bindvalue()関数の使用方法について、見ていきましょう。 bindValue ($パラメータID, $バインドする値 [, $PDOデータ型定数] ) 第一引数には、パラメータIDを使用します。この値は、プレースホルダーの種類によって指定方法が異なります。仮に、プレースホルダーが「?」を使用する、「疑問符プレースホルダー」の場合、パラメータIDには1から始まる整数値で「?」の位置を指定しましょう。また、プレースホルダーが「:id」など、名前で指定する「名前つきプレースホルダー」の場合、パラメータIDにはプレースホルダーと同じ:idなどの文字列で指定します。第二引数には、バインドする値を渡します。第三引数は、オプションで、バインドする値に対して明示的にデータ型を指定することが可能です。指定する場合は、「PDO::PARAM_* 定数」を使用しましょう。デフォルトでは、「PDO::PARAM_STR」がセットされています。返却値は、バインドに成功した場合、bool値のTRUEが、失敗した場合には、bool値のFALSEが返却されることになるでしょう。 [PR] 未経験からWebエンジニアを目指す方法とは実際に書いてみようそれでは、bindvalue()関数を使用して、プリペアドステートメントでセットしたSQL文に値をバインドする例を見ていきましょう。プレースホルダーの種類によって値のバインド方法が異なるので、「疑問符プレースホルダー」と「名前つきプレースホルダー」の場合の２つの実例を紹介します。疑問符プレースホルダー疑問符プレースホルダーの場合の値のバインドについてみていきましょう。 <?php $userName = 'mysql'; $password = 'mysql'; // PDOオブジェクトの生成（DB接続） $pdo = new PDO('mysql:dbname=test;host=localhost', $userName, $password); // プリペアドステートメントで SQLをあらかじめ用意しておく $stmt = $pdo->prepare('select * from user where id =

PHP

「Sketch vs. Figma」デザインツールとして優れているのはどちらか

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、WebデザイナーであるChristian Krammer氏によって投稿されました。 UIデザインツールはこれまでにおいてかなりの人気を集めてきました。Affinity Designerや、Gravit、Sketch等の素晴らしいアプリケーションが大きく進化した一方でAdobe XD （Adobe Experience Designの略）やFigma のようなプレイヤーもこのフィールドに参入してきました。個人的には後者に最も魅力を感じます。Sketchとの類似性から、Figmaも最初の段階から簡単に正しく理解できました。更にFigmaは簡単なファイルの共有やvector networks、「constraints」(レスポンシブデザイン向け）、リアルタイムコラボレーションのような他の使い易い競合相手とは明確に違う独自の個性があります。この記事ではSketchとFigma 両方のアプリケーションを細部に渡り比較し、それぞれの長所がどのような点かに焦点を当てていきます。 Sketchの最大の弱点は常にAppleのエコシステムにロックインされている事です。設計するだけではなく、ファイルを開きチェックするのにもMacが必要です。WindowsやLinux上では全く機能しません。その為しばらく経つとSketchファイルのスペックを持つ有料のサービスが現れた訳ですが、それにしても厄介で余分な手順です。上：Sketch 下：Figma これが恐らくFigmaが最初の段階から一線を画す理由の1つです。すなわち、世界中基本的にどのデバイスでもFigmaはWebブラウザで使うことができます。どのインストールも一切不要です。ただChrome（又はFirefox）を開いてアカウントを作成して設計を開始するだけでいいのです。私は以前からずっとブラウザベースのツールを躊躇していましたが、Figmaは一瞬で私の懸念を仏拭しました。Figmaは多数の要素を含みながらもSketchと同様高性能です（もし同様でなければFigmaの方がより高性能です）。 WindowsやMac用のFigmaのスタンドアローンデスクトップアプリも入手可能ですが、基本的にそれらはただのブラウザバージョンのラッパーにすぎません。それらはキーボードショートカットにより優れた一方で、常にオンライン上にいなければなりません。勝者：Figma 理由：プラットフォームに依存しないためユーザビリティ（特徴的機能とユーザーインターフェース）基本的に、FigmaはSketchのインブラウザ版と呼ぶのが最も相応しいでしょう。機能はほぼ同じ、インターフェースも似ている、キーボードショートカットでさえもほぼSketchから受け継いでいる。もし既にSketchを知っていれば、Figmaが2016年の始めにリリースされた時にすぐに簡単に使いこなせるようになったでしょう。 Figmaはリリース当初から様々な点において改善され、いくつかの部分ではSketchを上回ってきました。しかし、プラグインやサードパーティ・ツールとの統合、リアルデータを利用できる機能（Craft Pluginも使用して）など、欠けている機能が未だにいくつかあります。それにも関わらず、この調子で改善が進むとFigmaがSketchに肩を並べるのはもはや時間の問題でしょう。勝者：引き分け理由：現時点では大差はありません。しかしSketchの方があなたの仕事を効率化させる要素を持ち合わせています。価格 Sketchは元々新しいバージョーンごとに約99USドルの初回手数料のみで発売されました。しかしやがてこのビジネスモデルは維持不可能だと判明されます。Bohemian Coding社は最近価格を定期購入が必要なモデルに変更しました。99USドルで1年間の無料アップデートが入手できます。その後はそのまま使い続けることができるか、更に同額を支払うことでまた別の1年アップデートが行えます。この値上がりは当初不適切なように見受けられましたが、デザイナーとしてあなたのメインツールへの99ドルの価値とは何でしょうか？そうです、大した額ではありません。 Adobe’s Creative Cloud の定期購入よりはまだ安いのです。（又、Sketchは何の問題もなく使い続けることができる一方、Creative Cloud の定期購入を辞めたらどのAdobe CC アプリも使い続けることができなくなります。）当分の間は、Figmaは全ての人が無料で使えるようになっていますが、今年後半には変わってくるでしょう。きっと定期購入制になり、月額10~15USドルになるでしょう（あくまで私個人の見解ですが）。確かな事は1つあります。それは、Figmaは学生に対して常に無料でしょう。（Sketchが教師と学生に対しリーズナブルなディスカウントを提供しているのと似ています。）勝者：引き分け理由：Figmaの価格に関する発表はまだない為 [PR] 未経験からWebエンジニアを目指す方法とはコラボレーション機能 Figmaの主な差別化要因は恐らく「マルチプレイヤー」と呼ばれるリアルタイムコラボレーション機能でしょう。その機能を使って他のユーザーと同時に1つのファイルを編集することができるだけでなく、他のユーザーがデザインをいじっているのを見たり、内蔵型のコメント機能を使って変更を知らせることができます。 1つの例として、この同時編集はプレゼンテーションやリモートチームにとって素晴らしく、また関わっている全てユーザーが同じ状態を確認し、意図していなかった上書きを防ぐことができます。 Sketchには（プラグインを使用してですら）そのようなコラボレーション機能はありませんし、多分そのような機能がない方がSketchにとってはよいのかもしれません。なぜなら「このボタンをもっと大きくしよう。ちょっと待てよ、勝手にやっちゃえ！」というような結末をもたらすかもしれないからです。もちろんこれは少し大げさな例です。この機能は多少価値はありますが、事前に特定のルールを決めておかないとリスクがあります。勝者：Figma 理由：同時に同じファイルを複数の人で共同編集できる為ファイル共有とスペックリアルタイムコラボレーション機能に幾らか関連しているのは設計ファイルの共有です。なぜならFigmaではすべての事がブラウザで行われるため、全てのファイルが必然的にURLを持っていて、それを同僚や上司に送ることができます（閲覧専用モードでも可能です）。このブラウザベースのアプローチの別の大きな利点は、開発者をはじめ全ての人がサードパーティツールの必要性なしにすぐにデザインを開き検証できることです。 Figmaでは簡単に他のユーザーとデザインを共有できます。これはまさに、1つのファイルにおいて必要不可欠な全ての情報（例えばフォントサイズや色、寸法、アセットなど）を他の共同制作者に提供するためにSketchに求められているものです。しかしながら、前にも述べたように、ここであなたを手助けするZeplinやSimpli、InVisionの Inspect、Avocode、Marklyなどの有料のツールが必要です。公平な立場からみて、最初の3つは1つのプロジェクトでは無料ですが、より複雑なものに取り組む際にはそれだけでは十分ではないでしょう。更に何らかのツールを必要としている場合や、そのような（正直なところ基本的な）機能にお金をかけたくないというのであれば、MarketchやSketch Measureという無料のプラグインもあります。多くの有料のアプリではコメントを追加したり自動的にスタイルガイドを作成することができます。あるいは、FigmaはSketchのファイルフォーマットをサポートしているので、SketchのファイルをFigmaにインポートしてチェックすることさえできます。左上から右下順に:Avocode、Zeplin、Simpli、Markly。これら全てにおいて様々な方法でSketchのデザインの閲覧、共有可能。もし共同編集者とデザインをちょっと見たいだけであれば、内蔵されているSketch Cloudが正にその役割を果たしてくれます。iOSデバイスでデザインを見るには、Sketch MirrorやFigma Mirrorを使って、Androidのデバイスであれば、MiraやCrystalを使用することができます。 FigmaはAndroidベースのアプリを提供しないのですが、（デスクトップコンピューター上で）フレームかコンポーネントを選択後、デバイス上で「www.figma.com/mobile-app」を開くと、1種のプレビューが見れるでしょう。勝者：Figma 理由：サードパーティツールの必要性なしにブラウザ上で簡単にファイルの共有が可能な為ファイルの整理 Sketchには、ページを提供するという組織能力があるため1つのファイルでアプリやWebサイト全体を作ることができ、ページ同士のスイッチも即座に可能です。Figmaはこの点において後れをとっています。 Figmaはページを提供しませんが少なくとも複数のファイルを1つのプロジェクトに結合することは可能です。左：Sketchでは1つのファイルを複数のページに整理でき簡単にスイッチ可能右：Figmaのプロジェクトは未発達アートボードというSketchのもう1つ重要なコンセプトも適応され強化されました。Figmaでは塗りつぶしやボーダー、エフェクトを簡単にアートボードに適用でき、またそれらをネストしたりグループから簡単に作成することもできます。1つの例として、これにより組み合わされた範囲より大きな要素のコンテナも許容され、「constraints」機能の手助けになりうるでしょう。更には、各アートボードには独自のネストされたレイアウトグリッドがあり、それによりレスポンシブデザインに役立つのです。 Sketchでもアートボードをネストすることが可能ですがそのインプリメンテーションはFigmaと比べると全く有効的ではありません。勝者：引き分け理由：Sketchにはページがあるが、Figmaのアートボード（フレーム）はより有効的な為レスポンシブデザイン Figmaが導入した（Sketchにも何ヶ月か経ってから導入された）機能はレスポンシブデザイン、すなわち、どのように要素が異なるアートボードやデバイスのサイズに対応するかを設定した機能です。 Sketchでそのような機能を提供するプラグインが以前からありますが、ちょっと使いにくい感じがありました。「group resizing」という特有の機能だけはFigmaの「Constrains」機能に匹敵して簡単に使用できます。左：Sketchの「group resizing」機能は1つのドロップダウンメニューで設定され慣れるまで少し時間がかかります。右：Figmaの「constraints」機能はより目で見てわかるようになっています。両者とも基本的に同じような動作ですがその見栄えは一目瞭然。Sketchでは4つのオプション付きのドロップダウンメニューしかなく、操作中に一体どんなふうになるなるのかがイメージしずらいです。Figmaはよりビジュアル化した方法でこれらのプロパティを明確にします。例えば、ある要素をアートボードの端に固定するか、それと均一にリサイズする事などができます。 Figmaの大きな利点はこれらの制約がレイアウトグリッドと一緒に組み合わせることで機能することです。要素は、例えばある列（又は行）に固定されるか、それらの幅に一致します。更には、各軸にこれらの設定を個別に変更することができ、グループだけではなくアートボードにも機能します。Sketchではあり得ない機能です。勝者：Figma 理由：その制約機能は遥かに進化していてより多くのオプションがある為ベクトル　マニピュレーション Figmaが発売された時の1つの大きな特徴は「vector networks」でした。もはやベクトルはただ一連の繋がった点（ノード）ではありません。今や、新しい線でどのノードからも分岐する事ができます。例えば、矢印を作るのなんて朝飯前です。 Figmaのvector networksはベクトルのどの点にもセグメントを追加することができます。しかしそれよりも遥かに勝っているものがあります。ベクトルのパーツはPaint Bucketツールで簡単に塗りつぶされる（又は削除される）事ができます。ベンドツールを使ってセグメント全体を動かす（又は曲げる）事も可能です。そして1つのベクトルから別のベクトルへ線点も同様に）をコピーするのは一瞬でできます。 Figmaのvector networksでセグメントを簡単に動かしたり曲げたりする事ができます。この特殊な機能1つでFigmaはSketchと一線を画しており、アイコンデザインに適したものになっています。それに比べ、Sketchで利用可能なツールはほぼ時代遅れな感じを受けます。Sketchではベクトルオブジェクトを作成し操作するために必要なすべてのものが揃っているかもしれませんが、より複雑なベクトル操作が必要になってくるとすぐに扱いにくくなるでしょう。はじめの図：Figmaでは、ペイント塗りつぶしツールを使って2つの重複した円の塗りつぶされた部分を削除し1つの輪をつくる。 2番目の図：Sketchではブール演算を用い従来の手法を使っている。(ちなみにこの方法はFigmaでも可能) ほとんどの場合、Sketchではある特定のタイプの形を作るのにブール演算を使用しなければいけませんが、その多くはFigmaのvector networksではより簡単に作成可能です。Sketchでは2つのベクトルオブジェクトを繋げたり、またはブール演算が適用された後に形を平らにすることさえしばしば難しいという事実がさらに物事を悪化させます。このアプリはこの点において問題が山積みなのは確かです。勝者：Figma 理由：vector networksは全く新しい次元をベクトルマニピュレーションにもたらします。Sketchにおいてはまだそれと匹敵するものはありません。サポートされているファイルの種類新しいアプリケーションが出るたびに、もしプロジェクトを移行したければ全てをやり直さなければいけないという問題によく直面するでしょう。Figmaではそうではないのです。見事なほどに正確な方法でSketchのファイルを開くことができ、この時点で既にFigmaが優位です。残念なことに逆パターンでは機能しません。1度Figmaでデザインをスタートしたらもうそれを使い続けるしかないのです。SketchにエクスポートすることもPDFファイルを作成すること（またはインポートすること）もできません。SVGにエクスポートするオプションもありますが、デザインアプリケーション間で複雑なファイルをエクスチェンジするのに理想的なフォーマットではありません。エクスポートオプションは一見似ていますがSketchにはより多くのオプションがあります。左：Sketch 右：Fiigma もう1つの制限要因はJPG画像をFigmaでエクスポートしたときにその品質水準を設定できないことです。なので画像を最適化する他のアプリケーションが必要になるかもしれません。Sketchの最新版ではさらにもっとエクスポートのオプションが改善しています。現在ではファイル名に接頭辞と接尾辞の両方を設定できると同様、Androidへのエクスポートをはるかに簡単にさせるエクスポートプリセット機能があります。各アプリケーションがサポートするエクスポートファイル形式を見てみましょう。 Sketch PNG JPG TIFF WebP PDF EPS SVG Figma PNG JPG SVG 勝者：Sketch 理由：より多くのファイル形式とより良い保存、エクスポートのオプションがある為アクセシビリティ FigmaにはSketchで使用できる多くのショートカットキーがありますが、そのアクセシビリティのレベルは同じではありません。Sketchではほぼ全ての事がキープレスで行うことができます。もし気に入らないショートカットキーの組み合わせがあればあなた独自のやり方をシステム環境設定で登録することが可能です（デフォルトによって割り当てられないショートカットコマンドが主になる傾向があります）。 macOSのシステム環境設定でSketchのあなた独自のショートカットキー設定が可能 Figmaはブラウザ上に存在しているためそのようなことは一切不可能です。デスクトップアプリでその点を補うことができますが、特定のメニューバーコマンドが無いせいである特定の機能を単純にキーボードに割り当てることは不可能です。勝者：Sketch 理由：そのアプリケーションのほぼ全ての機能がショートカットキーでアクセスすることができ、更にはカスタマイズできる為シンボル（コンポーネント） 1つの重要な機能がちょうどFigmaに導入されました。それはシンボル、又はここではコンポーネントと呼びます。コンポーネントを使用すると、「instances」の形式で簡単に再利用できる1つの複合オブジェクトにいくつかの要素をを組み合わせることができます。主要なコンポーネントが変更されるとすぐに、全てのインスタンスがその変更点を受け継ぎます。（しかしながら、その同じコンポーネントのバリエーションを考慮して特定のプロパティは個別に修正されます。）最近では、Figmaではファイル間や複数のユーザーと一緒に共有できるコンポーネントのライブラリを作成することさえ可能です。これは確固たるデザインシステムへの大きなステップです。 Sketchでは、個々のインスタンスの修正がインスペクタパネル上でオーバーライドの形で処理されるので、各インスタンスごとにテキスト値や画像の塗りつぶし、ネストされたシンボルの変更が可能です。 Figmaでは、塗りつぶし、ボーダー、効果（影やぼかし）を含め、キャンバスで直に1つの要素のプロパティをアップデートすることができます。上：Sketchではインスペクタパネル上でオーバーライドを使用してシンボルインスタンスの内容を変更します。下：Figmaではテキストの色を含め直接キャンバスキャンバスでコンポーネントのインスタンスをカスタマイズできます。シンボル（コンポーネント）の真の強みはレスポンシブデザインで発揮されます。どちらのアプリでも、親のサイズが変更された時にどの様に要素がシンボル内で反応するか定義することができ、異なる場所や画面のサイズでシンボルを使うこともできます。 Figmaが未だに後れを取っている領域はレイヤーやテキストスタイルです。形やテキストレイヤーのスタイリングを保存することができなく、他の要素と同期することも不可能です。しかしながら、1つの要素から別の要素にスタイリングをコピーして貼り付けることはできます。勝者：引き分け理由：インプリメンテーションは極めて同じレベルですが、Figmaはその共有可能なコンポーネントでわずかに有利です。プラグイン Sketchは並外れて素晴らしい機能を兼ね備えていますが、それを決定打にしているのはSketchを強化させたり足りない機能を補うサードパーティプラグインの存在でしょう。 1度に複数のレイヤーの名前を変更したり、ダイナミックボタンを作成したり、カラーパレットを保存し読み込んだり、Unsplashから簡単に画像を挿入したり、Git機能を有効化したり、Sketchの中でアニメーションを創り出すことができたりなど、使用目的は様々です。プラグインの全リストは公式ディレクトリやGitHub上で見ることができます。公式WebサイトとGitHubの両方で、Sketchの膨大なプラグインのセレクションを閲覧可能です。では、Figmaですが、現段階では全くそのような機能はありません。公平に言うと、Sketchは恐らく開発の初期段階ではこれらの多くの機能はありませんでした。そして将来的にはFigmaにもプラグインエコシステムが導入されるのは確実でしょう。注意したいこと：プラグインがSketchに大きな利点を与えた一方で、それらが何かしらの落とし穴にもなりえます。それらは新しいリリースの度に正常に機能しない傾向があり、Sketchチームは将来の開発者たちを遠ざけないためにも細心の注意を払う必要があります。勝者：Sketch 理由：単純に、Figmaにはプラグインが全くない為プロトタイピング AdobeXDと違ってSketchもFigmaもプロトタイピング機能が備わっていません。今のところFigmaには導入される予定はありませんが、Sketchには少なくとも基本的なプロトタイピング機能をもたらすCraft Pluginがあります。更にその人気でSketchは他のプロトタイピングツールとの幅広く統合することが可能です。例をいくつか挙げると、InVision、 Marvel、Proto.io、Flinto、Framerなどがあります。これらを一緒に使うことによって簡単にデザインをインポートしてアプリを同期することができます。現時点でFigmaと動作する唯一のアプリケーションはFramerです。似たようなツールのサポートが将来どのようになっているか述べるのは難しいですが、そのようなインターフェースが既に製作段階かもしれません。勝者：Sketch 理由：Craft Pluginには説得力のあるプロトタイピング機能がありませんが、Sketchは多くのプロトタイピングサービスと統合している為実データでの作成 Sketchが提供する数あるプラグインの中でいわゆる「content generators」というものを見つけるでしょう。その一例として、ダミーコンテンツでデザインを埋めることができます。しかし、より興味深いことはこれらのちょっとした機能が様々な情報源から実データを引き出すことを可能にし、またJSONファイルの形で内容を挿入することさえ可能です。これにより設計の初期段階でより情報に基づいた判断ができ、エッジケースも明らかにできます。このカテゴリーで最も優れているのはInVisionのCraft Pluginです。それを使ってある要素に内容を追加するとすぐに、1つのステップで簡単にその内容を複製・変更する事ができます。Craftではデザインのアセットを保存し、チーム内で共有したり又は自動的にスタイルガイドの作成も可能です。他の機能やオプションの中でも、SketchのCraft Pluginでは要素を複製し、同時に他の内容を追加することができます。 Craftよりは優れてはいませんが、似たような機能を持つプラグインがもう数個あります。Sketch Data Populator、Content Generator 、 Day Playerがそうです。 Figmaにはまだそのような機能はありませんが、時間の問題だと思います。Adobe XDが少し前に適応したようにアプリにその機能を統合するのか、もしくはプラグインシステムに依存するのか、どちらの手段をとるか興味深いところです。勝者：Sketch 理由：Sketchでは様々なプラグインで備え付きの機能の不足を補い、簡単に実データを使用できる為バージョニング私がいつも行っていることの1つは、始めの頃のデザインがどのような感じだったか見るためにCommand+Zを使って変更点を1つ1つ元に戻すことです。評価の基準を持つか、新しいイテレーションをベースとして複製するかのどちらかです。Figmaはブラウザ上の限られたリソースのためここで行止まりと思うかもしれませんが、実際はSketchに劣ってはなんかいません。どちらのアプリでも古いバージョンをブラウズして復元する事ができ、自動的に保存されます。しかしながら、Sketchのインプリメンテーションは理想とはかけ離れていて、どこから始めるかもわかりません。何といっても時間がかかるのです。実際に閲覧できる前にバージョンを復元しなければいけなかったり、ハードドライブ上でスペースを無駄にする結果になるかもしれません。さらに言えば、クラウド上で(Dropboxを介してなど)複数の人が同じファイルで作業している時に簡単にダメになってしまう可能性があります。 Figmaでは瞬時に前のバージョンを復元する事ができ、複数の人が同じファイルを編集している時はそれぞれの人の変更を分離できるので役に立ちます。それから前の状態に戻ったり、新しいアイデアの出発点としてバージョンを復元することができます。勝者：Figma 理由：Sketchのバージョニングは不完全過ぎて勝敗は明らかです。テキスト機能他の点と同様に、どちらのアプリケーションでもテキスト操作はかなり似ていますが、いくつかの違いは言及する価値があります。デフォルトによってFigmaではGoogle Fontsからでしか選択できないのですが、単純にインストーラーでシステムォントにもアクセスできます。私が常にSketchに物足りなさを感じる部分はテキストレイヤーのボーダーの位置の変更機能です。ここでは「中心」だけが唯一の選択しです。Figmaにはその他にもシェイプレイヤー用であるかのごとく「内側」と「外側」が選択できます。左：Figmaでは、テキスト枠内の垂直の位置（上）が設定でき、さらにボーダーの位置のオプションがある（下）右：SketchではOpenType機能が適用されるさらにFigmaではテキストを垂直に配列する設定ができる為、枠内で垂直に中央揃えすることが容易です。対照的にSketchではより多くのタイポグラフィのオプションがあり、スモールキャップス、古い形式の図形、スタイルの選択肢や合字（フォントでサポートされていれば）等のOpenType機能が適用できます。勝者：引き分け理由：どちらのアプリケーションもそれぞれ違った利点があります。Sketchの方がその進化したタイポグラフィオプションで少しリードしていますが、完全な勝利にはまだ不十分です。結論簡単に各アプリの長所をおさらいしましょう。 Sketchの良い点キーボードのアクセシビリティがより良くサポートされているプラグインとプラグインエコシステムがあるサードパーティツールとサービスを統合可能ファイルタイプとエクスポートオプションが豊富複雑なプロジェクトを1つのファイル（ページ付き）にまとめることが可能 Sketchでは簡単に実データを使えるより洗練されている Figmaの良い点ブラウザベースなので、世界中どの場所からどのプラットフォームでも使用可能リアルタイムで共同作業できるファイルの共有が簡単ベクトルマニピュレーションが優秀（vector networksを介して）レスポンシブデザインオプションがより優れている（constraint機能により）コンポーネントのライブラリを作成しチームのメンバーと共有可能アートボードがより強力今後の展望 2013年のAdobe Fireworksの廃止はUIデザインツール界に大きな空白を残しましたが、Sketchがすぐにその空白を埋めてくれました。 Sketchが大成功を収め、その人気は主なライバルであるPhotoshopに徐々に迫り、ついには昨年インターフェースデザイナーのユーザー間における調査「the tool of choice」でトップの座に輝きました。 Sketchは恐らくWindows版があればより成功したでしょうが、他のツールにも問題はあります。Affinity

アプリデザイン

初心者も知っておきたい！Xcodeのショートカットキー10選

iPhoneアプリの開発など、iOSアプリの統合開発環境として「Xcode」があります。 Xcodeは無料でインストールできますが、初心者でまだまだ使いこなしていないという人もいるかもしれません。そこで、今回は初心者がはじめに覚えるべきXcodeのショートカットキーを10個紹介します。初歩的な内容がメインです。なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプでも一部を紹介しています。ショートカットキーの説明の前にショートカットキーを紹介する前に、修飾キーの略語について説明をします。ショートカットキーは略語で紹介しているので、覚えておいてください。コマンドキー:cmd(⌘) オプションキー:otp(⌥) コントロールキー:ctrl(⌃) シフトキー：shift(⇧) ファンクションキー:fn(fn) 今回はcmd、opt、ctrlの3つを使いますが、残り2つも覚えておくとリファレンスを読む際の参考になると思います。また、Appleのサポートページにもショートカットキーの説明がありますので、Xcode以外にも使えるショートカットキーは覚えておくと他の作業も効率が上がります。他に、JSキーボードの場合、「システム環境設定 > キーボード > 修飾キー」からcapsキーとctrlキーを入れ替えるとctrlキーが押しやすくなるのでおすすめです。それでは、ショートカットキーをチェックしていきましょう。 cmd+1：左ペインファイルツリーの表示 Xcodeでは、.hファイルや.mファイルだけでなくAppで使用する画像などもファイルツリーに格納していきます。そのため、ファイルツリーには比較的アクセスすることが多くなるので覚えておきましょう。 [PR] 未経験からWebエンジニアを目指す方法とはcmd+4：error/Warningツリーの表示開発が一段落し「実行」しようとすると、関数の定義不足値の設定ミス、単純なタイプミスなど、様々なエラーが出ることがあります。そんな時は、「cmd+4」のショートカットでerror/Warningツリーを左ペインに表示させて、トライ&エラーをしていきましょう。 cmd+0：左ペインの表示/非表示 MacBook Airの11インチなど画面の小さいPCを使っていると、Xcodeの画面が狭くてコードが見にくくなる時があります。そんな時は、このショートカットキーを使って不要なメニューを非表示にしましょう。 cmd+opt+1：ファイルインスペクタの表示左ペインと同様に、右ペインもショートカットキーで切替ができます。よく使う、ファイルインスペクタの表示を覚えておきましょう。 cmd+opt+0：右ペインの表示/非表示画面が小さい場合、またはソースコードに集中したい時は左ペインと同様に右ペインも非表示にします。先に紹介した左ペインの切替と右ペインの切替とを比べてみれば予想はつくかと思いますが、「cmd+opt+0」です。左ペインのショートカットキー+optと覚えておくと、良いでしょう。 cmd+任意のシンボルをダブルクリック：シンボルが定義された所を開く Web上から参考にしたいソースコードをダウンロードしてそれを読むときに便利なショートカットキーです。他の人が書いたコードは、変数の定義がどこでされたのかわかりにくいことがあると思います。そんな時は「cmd+対象の任意のシンボルをダブルクリック」で定義位置を確認しましょう。自動でファイルが切り替わります。 opt+任意のシンボルをダブルクリック：シンボルをリファレンスで検索前述した、シンボルの定義位置の確認と同じく便利なショートカットキーです。「opt+対象のシンボルをダブルクリック」でシンボルをリファレンスで検索することができます。これで、シンボルの意味をすぐに調べられます。 ctrl+.：入力補完の実行入力補完とはわかりやすく言うと、「予想表示」です。関数の最初の1文字をタイプしたあとに「ctrl+.(ピリオド)」で関数の予想が一覧で表示されます。そこから「.(ピリオド)」を押していくと、自分の入力したい関数が見つかるので、「.(ピリオド)」から指を離せば入力完了となります。最初の1文字だと候補が多すぎるので、最初の3文字くらいまで入力することをおすすめします。 cmd+ctrl+↑/↓：.hと.mの切替 Xcodeでの開発において.hファイルと.mファイルの行き来は必須ですが、面倒な作業でもあります。そんな時は「cmd+ctrl+↓/↑」で.hファイルと.mファイルを切り替えていきましょう。 cmd+R：iPhoneシミュレータの起動最後は、開発の終わりに使うであろうiOSシュミレータの起動です。このショートカットキーをタイプすると、Buildが始まります。Buildが完了(Build Successfull）すると自動でiOSシュミレータが起動します。あとは開発したAppをシュミレータ上で起動して動作を確かめていきましょう。かなり初歩的なショートカットキーが中心でしたが今回は以上です。ぜひ自分でも試してみてください！ iPhoneアプリのシミュレーターの使い方も合わせてチェックするとXcodeがより使いこなせるようになります。 [お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。

iPhoneアプリ開発

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

Pythonで変数名を文字列として取得する方法を現役エンジニアが解説【初心者向け】

変数名を文字列として取得する方法